Code Component Development

1. Install Tool

Install the global CLI tool:

npm i -g momen-cli
 
# If you encounter slow network, you can switch sources and force reinstall:
npm i -g momen-cli --registry=https://registry.npmmirror.com --force

2. View Help

After installation, run momen --help to see all commands and descriptions.

momen help
 
zvm cli 0.5.8
 
Usage: momen [options] [command]
 
Options:
  -h, --help                      display help for command
 
Commands:
  signin [options] <Username/Email> <Password>  Signin to Momen.
  create [options] <PrjName>                    Initializing project.
  publish [options]                             Publish project.
  ...

Common Commands

• create <project_name>: Initialize project
• signin <username/email> <password>: Sign in to Momen platform
• signout: Sign out
• update: Update project to the latest template structure
• publish: Publish project
• reinit: Re-register project ID, republish local project to platform
• reset: Reset template project
• delete: Delete project
• unpublish <version>: Unpublish a specific version
• dryrun: Check if the project can be published
• help: Display help

Development Workflow

1. Platform Login

Run the following command in your working directory.

> momen signin your_email your_password

2. Create Project

Run the following command in any directory:

# create project_name
> momen create test

This step creates a new folder test containing all project files and template components. It also registers a code component project on the platform.

Edit Code

Navigate to your code component project directory and install dependencies:

> cd test
> npm install

You can send this development documentation to AI and then use AI to assist you with development.

Read Project Template Structure

A typical code component library project has the following structure:

• public
• resources
• src
  • components
    • Main
    • index.ts
  • graphql
  • typings
  • App.scss
  • App.tsx
  • index.css
  • main.tsx
  • vite-env.d.ts
• .eslintrc.cjs
• .gitignore
• codegen.ts
• HELPER.md
• index.html
• package.json
• README.md
• tsconfig.json
• tsconfig.node.json
• vite.config.ts

Where:

• src/components: The main directory for declaring and editing code components.
• resources: The resource directory for storing icons and preview images.
• README.md: The project documentation file.

Mandatory Conventions

Each custom component must comply with the following rules:

1. Directory Structure Standards

   • Components must have a directory under src/components
   • Directory name must be the component name (start with uppercase letter)
   • Directory must contain at least index.ts and ComponentName.tsx

2. Type Declaration Standards
   The file src/components/ComponentName/ComponentName.tsx must export the following 4 interfaces:

   Interface Name	Purpose	Type Requirements
   ${ComponentName}PropData	Data passed from outside	string, number, boolean and their arrays
   ${ComponentName}StateData	State exposed to outside	State<string | number | boolean> or their arrays
   ${ComponentName}Event	Events triggered internally	EventHandler
   ${ComponentName}Props	Component Props	Contains propData, propState, event

   Code Example:

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

Interact with Host Project (Optional)

Please read: Code Component API Reference 

Export Component

Expose newly edited components in src/components/index.ts.

5. Modify Project Basic Information (Metadata)

1. package.json: Modify name, description, version (follow npm standards).
2. resources directory: Add icons and preview images (webp/svg).
   • /resources/icon.webp (24x24)
   • /resources/ComponentName/icon.webp (72x54)
   • /resources/ComponentName/canvas.webp (300x200)
3. README.md: Modify project and component documentation.
   • /README.md: Project documentation.
   • /src/components/ComponentName/README.md: Component documentation.

Debugging

Method 1: Direct Preview

npm run preview # Starts a local static resource server, default port 6326.

Method 2: Combined with Momen Real-time Preview

1. Ensure the project has been published historically.
2. Run the following commands:

npm run preview # Starts a local static resource server, default port 6326.
npm run watch:build # Watches for local source code changes and automatically runs npm run build on save.

3. Open real-time preview in the Momen editor, click the “Debug” icon, and select port 6326.
4. After code changes, refresh the real-time preview to see the latest effects.

Publish Project

Run the following command in the root directory:

momen publish

If publishing fails, you can run momen publish --verbose to get more detailed information, ask AI, or report errors in the community or user group.

Use in Momen

1. Import: Click “Add Component”, select “Import”, and click “Import Component Library”.
2. Sync: After code changes, sync or republish.
3. Use: Drag the component to the canvas and configure the right property panel (data binding, events).