Code Component

Introduction

Momen allows you to extend your applications by developing custom React components. These code components enable dynamic forms, data-driven charts, advanced animations, interactive maps, and more, greatly expanding the interactive capabilities of your projects.

Prerequisites

• Familiarity with the Momen platform
• Basic front-end development experience
• Knowledge of TypeScript
• Ability to develop custom React components

If you are new to React, refer to the React official documentation .

Getting Started

Node.js 18 or 20 is recommended. Node.js 22 is not supported.

Install the global CLI tool:

# Install globally
npm i -g momen-cli

Verify installation:

momen --version

CLI Commands

• create <project_name>: Initialize a new code component project
• publish: Publish the project
• reinit: Re-register the project ID and publish as a new project under your account
• reset: Reset the template project in the current directory
• signin <username/email> <password>: Sign in to the Momen platform
• signout: Sign out and remove current login info

Run zvm --help to see all available commands and options.

Platform Login

Sign in from your working directory. Replace your_email and your_password with your actual credentials.

momen signin your_email your_password

Project Creation

Create a new code component project:

momen create project_name

This command creates a new folder with all project files and a template component. It also registers a new code component project on the platform. Multiple components can be added to a single project. No version is published at this stage.

Editing Code

Navigate to your project directory and install dependencies:

cd project_name
npm install

Project Structure

A typical code component library project has the following structure:

• codegen.ts
• index.html
• package-lock.json
• package.json
• public
• src
  • App.scss
  • App.tsx
  • components
    • AddCalculator
    • Bar3DChart
    • ConfirmModal
    • DataTable
    • DemoChart
    • index.ts
  • graphql
  • index.css
  • main.tsx
  • typings
  • vite-env.d.ts
• tree.txt
• tsconfig.json
• tsconfig.node.json
• vite.config.ts
• zvm-temp

Conventions

1. Each component must have its own directory under src/components, named after the component. The directory must contain at least index.ts (for export) and ComponentName.tsx (for logic).
2. you must export four interfaces in [ComponentName].tsx:
   • [ComponentName]PropData: Data received from the host project (supported types: string, number, boolean)
   • [ComponentName]StateData: State exposed to the host, must use State<string | number | boolean> from zvm-code-context
   • [ComponentName]Event: Events, each property must be of type EventHandler from zvm-code-context
   • [ComponentName]Props: Combines the above three as propData, propState, and event

Notes:

1. The component name must follow JavaScript naming conventions, start with an uppercase letter, and match the directory and file name.
2. Type names must be strictly [ComponentName]PropData, [ComponentName]StateData, [ComponentName]Event, [ComponentName]Props, and all must be exported.
3. The component function must be export function [ComponentName](props: [ComponentName]Props) {}.
4. Do not use import('zvm-code-context').EventHandler; instead, use import { EventHandler } from 'zvm-code-context'.

Example:

import { EventHandler } from 'zvm-code-context'
 
export interface ConfirmModalPropData {
  buttonTitle: string
  modalTitle: string
  modalContent?: string
}
 
export interface ConfirmModalStateData {}
 
export interface ConfirmModalEvent {
  onConfirm?: EventHandler
  onCancel?: EventHandler
}
 
export interface ConfirmModalProps {
  propData: ConfirmModalPropData
  propState: ConfirmModalStateData
  event: ConfirmModalEvent
}
 
export function ConfirmModal({ propData, event }: ConfirmModalProps) {
  // ...component logic...
}

3. Each component must be exported in src/components/index.ts:

export { ConfirmModal } from './ConfirmModal/ConfirmModal'

This allows the Momen platform to discover and use your component.

AI-assisted Component Development

You can use AI tools (such as VS Code Copilot or Cursor) to help generate code components. Prompt the AI to generate components in the src/components directory and ensure the output follows the above conventions.

Recommended prompt:

Read “https://docs.momen.app/account_community/code-component/”  and strictly follow the Momen platform conventions to write a React component named ConfirmModal. The component should support:

1. Properties: button text, modal title, modal content
2. State: confirm and cancel event handlers
3. Use Ant Design’s Modal and Button
4. Export the required interfaces Use TypeScript and ensure the code meets the platform’s requirements.

Local Debugging

To debug locally, import your component in App.tsx.

1. Start the local development server:

   npm run dev

2. To preview in real time on the Momen platform, you must publish the component at least once, then run:

   npm run preview

   Enable automatic build (auto-compile on save):

   npm run watch:build

After configuring input parameters and behaviors, you can select the corresponding port in the platform’s live preview for debugging.

Related APIs

The zvm-code-context package provides APIs to interact with the host project:

import { useAppContext } from 'zvm-code-context'
 
const { component, discover, query, navigate, globalData, pageData } = useAppContext()

• component: Info about the current component instance
• discover(id: string): Get a specific component instance by ID
• query: Make backend requests
• navigate: Navigate to a specific page in the host project
• globalData: Access global data
• pageData: Access current page data

Publishing the Project

Update the version field in package.json to follow npm semantic versioning (e.g., 1.0.0). Then, publish your project:

momen publish

After publishing, the new code component library will be available for configuration in any Momen project.

Importing Code Components

To add your custom code component to a no-code project:

1. Click the code component icon on the left sidebar.
2. Select your newly published component project in the pop-up window.

Once added, the component will appear at the bottom of the left sidebar.

Backend Synchronization

After configuring or modifying a code component project, you must sync the database or publish to use it at runtime.

Configuring Component Properties

Configure data and event properties in the right sidebar. The available properties are parsed from your code, so follow the conventions strictly.

Live Preview or Publish

You can preview your code component in real time or after publishing, ensuring it works as expected in the host project.