Mometa: Visual Code Design and Editing Platform for Low-Code Assisted Development

In this issue, we recommend a low-code meta-programming for R&D, visual code editing, and an assisted coding tool – mometa.

Mometa is more based on the local development model of programmers, adding the ability to visually code, and modifying the local code file itself, which is more like an auxiliary coding tool than a No-Code (AMIS/YunfengButterfly) platform solution.

The problems it is used to solve are:

There is no dependence on the low-code platform, and secondary development can seamlessly enter the code development mode
At the same time, it supports WYSIWYG visual editing, which is used to improve efficiency and improve the development experience
Provide material ecology, customize materials, improve the material use experience, and improve the reuse rate
Features
R&D-oriented code visualization editing directly affects the source code:

(1) Responsive Layout, Routing Simulation, Material Preview (2) Reverse Positioning (View Positioning Source Code) (3) Drag & Drop Insert Material (4) Drag & Drop (5) Move Up & Down (6) Delete (7) Replace (8) Hierarchy Selection

Open material ecology, can customize the material library within the team, see mometa-mat
Multi-language, multi-ecosystem support, currently only supports React, and there are plans to support Vue in the future
Access-friendly, Webpack>=4 plug-in access
Developer-friendly, the material library supports hot updates, and does not destroy the existing development model
Usage scenarios

Develop a new page

1. Use the team development command to add an empty placeholder route & page

2. Enter Mometa, view the local materials and remote material market, select the materials you need, drag and drop them directly, and the basic formed page layout is completed

3. Enter the IDE to complete data joint debugging, data transmission, etc., and source code development

There are historical projects that need to iterate on functionality, only within a small UI module

1. Enter mometa, and insert the material operation

2. Reverse positioning directly enters the IDE source code development

How-to demo

edit

Reverse positioning: Supports positioning code locations from the view

• Insert Item: Insert item visually

• Delete the view

• Move the view

• Edit the code

Preview

Preview of the item

Responsive layout

• Routing simulation

How to use:

Since mometa relies on the local development environment and only uses the local development environment, it does not build an online demo; It can be used when developing locally:

git clone https://github.com/imcuttle/mometa.git
cd mometa
pnpm install
pnpm run start:app:cr # Enable the local development preview mode
Install dependencies
npm i @mometa/editor -D
Use antd items

1. Install antd materials

npm i @mometa-mat/antd -D

2. Create a mometa-material.config.js in the root directory of the project

module.exports = [require(‘@mometa-mat/antd’).default]

You can also create your own material library, and the data structure rules can be found in the Material definition:
https://github.com/imcuttle/mometa/blob/master/packages/materials-generator/src/types.ts

Access the editor

webpack.config.js Amend to read as follows:

const MometaEditorPlugin = require(‘@mometa/editor/webpack’)

module.exports = {
module: {
rules: [
{
test: /. (js|mjs|jsx|ts|tsx)$/,
Note that you only need to work on the file directory you need to edit
include: paths.appSrc,
loader: require.resolve(‘babel-loader’),
options: {
plugins: [isEnvDevelopment && require.resolve(‘@mometa/editor/babel/plugin-react’)]
}
}
]
},
plugins: [
isEnvDevelopment &&
new MometaEditorPlugin({
react: true,
Turn on the item preview
experimentalMaterialsClientRender: true
})
]
}

Note: When using it, you don’t need to enable the official default react-refresh, mometa will enable the react-refresh capability by default

Start the webpack dev server and enable http://localhost:${port}/mometa/

Examples provided can be seen:
https://github.com/imcuttle/mometa/tree/master/packages/app

This project uses the MIT open source license, and you can read more about it by yourself.