Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imcuttle/mometa
🛠 [Beta] 面向研发的低代码元编程，代码可视编辑，辅助编码工具 The coding tools which is visual code editing, auxiliary and Low-code metaprogramming for R&D
https://github.com/imcuttle/mometa
frontend lowcode react webpack
Last synced: 22 days ago
JSON representation
🛠 [Beta] 面向研发的低代码元编程，代码可视编辑，辅助编码工具 The coding tools which is visual code editing, auxiliary and Low-code metaprogramming for R&D
- Host: GitHub
- URL: https://github.com/imcuttle/mometa
- Owner: imcuttle
- License: mit
- Created: 2021-11-22T11:08:11.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-31T07:34:10.000Z (9 months ago)
- Last Synced: 2024-10-16T06:03:42.841Z (24 days ago)
- Topics: frontend, lowcode, react, webpack
- Language: TypeScript
- Homepage:
- Size: 11.5 MB
- Stars: 4,025
- Watchers: 72
- Forks: 613
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: License
Awesome Lists containing this project
- Awesome-GitHub-Repo - mometa - mometa 不同于传统主流的低代码平台，其用户是面向开发者的代码可视设计编辑平台。[<img src="https://tva1.sinaimg.cn/large/008i3skNly1gxlhtmg11mj305k05k746.jpg" alt="微信" width="18px" height="18px" />](https://mp.weixin.qq.com/s?__biz=MzUxNjg4NDEzNA==&mid=2247508640&idx=1&sn=b842e02cde8f1c4ac6a71f27600bd97a&chksm=f9a27169ced5f87f1023b17833eb7d4135d3914cf7879af41e24e510648b653040d00e0d1cf8&token=1017536687&lang=zh_CN#rd) (实战项目 / 低代码项目)
- awesome-github-star - mometa
- awesome-lesscode - mometa - commit/imcuttle/mometa?label=%E6%9C%80%E5%90%8E%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4) (精选 LessCode 项目)
README
The tool for R&D which has low-code meta programming and WYSIWYG editing
English | 简体中文
---
- [Why use it?](#why-use-it)
- [Features](#features)
- [scenes to be used](#scenes-to-be-used)
- [Develop a new page](#develop-a-new-page)
- [There are existing historical projects and the iteration function is needed, only in a small ui module.](#there-are-existing-historical-projects-and-the-iteration-function-is-needed-only-in-a-small-ui-module)
- [Operation demonstration](#operation-demonstration)
- [edit](#edit)
- [Reverse positioning](#reverse-positioning)
- [Insert material](#insert-material)
- [Delete view](#delete-view)
- [Mobile view](#mobile-view)
- [Edit code](#edit-code)
- [Preview](#preview)
- [Material Preview](#material-preview)
- [Responsive layout](#responsive-layout)
- [Route simulation](#route-simulation)
- [How to implement](#how-to-implement)
- [Quick start](#quick-start)
- [how to use](#how-to-use)
- [Install dependencies](#install-dependencies)
- [Use antd material](#use-antd-material)
- [Access editor](#access-editor)
- [NPM Packages](#npm-packages)
- [Author](#author)
## Why use it?
mometa is not similar to the traditional lowcode project which is schema based. mometa is code based, It's WYSIWYG editing following code ast.
**Which problems mometa can resolved：**
- There is no dependence on low-code platforms, and secondary development can seamlessly enter code development mode.
- It also supports WYSIWYG visual editing to improve efficiency and development experience.
- Provide material ecology, customize materials, improve material use experience, and increase reuse rate.
The positioning of mometa is more based on the local development model of programmers, adding the ability of visual coding (the local code file itself is also modified);\
**It is not recommended to set up a local development environment for remote services, so there is no online deployment.**\
The current implementation relies on the webpack dev development mode, and compatibility with vite will be considered in the future.
## Features
- 🛠 Code visual editing for R\&D, directly acting on source code
- Responsive layout, routing simulation, material preview
- Reverse locating (locating source code)
- Drag and drop to insert materials
- Drag and move
- Moving up and down
- Deleting
- Replacing
- Layers Selecting
- 🍒 Open material ecology, customizable material library within the team, see [mometa-mat](https://github.com/imcuttle/mometa-mat)
- 💎 Multi-language, multi-ecological support, currently only supports React, there are plans to support Vue in the future
- 🔥 Access-friendly, Webpack>=4 plug-in access
- 🌟 Development friendly, the material library supports hot updates without destroying the existing development model
## scenes to be used
#### Develop a new page
1. Use team development instructions to add an empty placeholder route & page
2. Enter mometa, view local materials and remote material markets, select the materials you need, drag and drop directly, and the basic page layout is completed.
3. Enter the IDE, complete data joint debugging, data transfer, etc., and source code development
#### There are existing historical projects and the iteration function is needed, only in a small ui module.
1. Enter mometa and insert material operation
2. Reverse positioning to directly enter IDE source code development
## Operation demonstration
#### edit
##### Reverse positioning
Support positioning code location from view
##### Insert material
Visually insert materials
##### Delete view
##### Mobile view
##### Edit code
#### Preview
##### Material Preview
##### Responsive layout
##### Route simulation
## How to implement
See [mometa implementation principle](./docs/how-to-work.md)
## Quick start
Since mometa relies on the local development environment and is only used in the local development environment, there is no online demo built; it can be used during local development.
```bash
git clone https://github.com/imcuttle/mometa.git
cd mometa
pnpm install
pnpm run start:app:cr # 开启本地开发预览模式
```
## how to use
#### Install dependencies
```bash
npm i @mometa/editor -D
```
#### Use antd material
1. Install antd materials
```bash
npm i @mometa-mat/antd -D
```
2. Create `mometa-material.config.js` in the project root directory
```jsx
module.exports = [require('@mometa-mat/antd').default]
```
You can also create your own material library. For data structure rules, see [Material definition](./packages/materials-generator/src/types.ts)
#### Access editor
`webpack.config.js` is modified as follows:
```js
const MometaEditorPlugin = require('@mometa/editor/webpack')
module.exports = {
module: {
rules: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
// Note that only the file directory you need to edit needs to be processed
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [isEnvDevelopment && require.resolve('@mometa/editor/babel/plugin-react')]
}
}
]
},
plugins: [
isEnvDevelopment &&
new MometaEditorPlugin({
react: true,
//Open material preview
experimentalMaterialsClientRender: true
})
]
}
```
**Note: You do not need to enable the official default react-refresh when using it. Mometa will enable the react-refresh capability by default**
Start webpack dev server and open `http://localhost:${port}/mometa/`
The provided example can be found at [@mometa/app](./packages/app)】
## NPM Packages
- [@mometa/editor](packages/editor) - 编辑器
- [@mometa/fs-handler](packages/fs-handler) - 代码操作转换核心逻辑，如删除、移动、替换、插入等
- [@mometa/materials-generator](packages/materials-generator) - 物料生成 & 解析
- [@mometa/materials-resolver](packages/materials-resolver) - Resolve materials config
- [@mometa/react-refresh-webpack-plugin](packages/react-refresh-webpack-plugin) - An **EXPERIMENTAL** Webpack plugin to enable "Fast Refresh" (also previously known as _Hot Reloading_) for React components.
## Author
This library is written and maintained by imcuttle, [email protected].