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.
