{"id":13496139,"url":"https://github.com/imcuttle/mometa","last_synced_at":"2025-04-11T00:53:18.882Z","repository":{"id":37375966,"uuid":"430673290","full_name":"imcuttle/mometa","owner":"imcuttle","description":"🛠 [Beta] 面向研发的低代码元编程，代码可视编辑，辅助编码工具 The coding tools which is visual code editing, auxiliary and Low-code metaprogramming for R\u0026D","archived":false,"fork":false,"pushed_at":"2024-01-31T07:34:10.000Z","size":12067,"stargazers_count":4062,"open_issues_count":16,"forks_count":617,"subscribers_count":72,"default_branch":"master","last_synced_at":"2025-04-11T00:53:10.165Z","etag":null,"topics":["frontend","lowcode","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imcuttle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-22T11:08:11.000Z","updated_at":"2025-04-09T20:09:38.000Z","dependencies_parsed_at":"2022-07-08T07:39:56.118Z","dependency_job_id":"3724b50c-3ecc-4132-a81e-2fe503a437a3","html_url":"https://github.com/imcuttle/mometa","commit_stats":{"total_commits":232,"total_committers":5,"mean_commits":46.4,"dds":0.3232758620689655,"last_synced_commit":"7ed35f9c5edf5db6a94d872c994af23fe574badb"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmometa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmometa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmometa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmometa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imcuttle","download_url":"https://codeload.github.com/imcuttle/mometa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322609,"owners_count":21084336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","lowcode","react","webpack"],"created_at":"2024-07-31T19:01:42.900Z","updated_at":"2025-04-11T00:53:18.862Z","avatar_url":"https://github.com/imcuttle.png","language":"TypeScript","funding_links":[],"categories":["实战项目","TypeScript","前端开发框架及项目","精选 LessCode 项目"],"sub_categories":["低代码项目","React工具库"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/logo.png\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/imcuttle/mometa/actions\"\u003e\u003cimg src=\"https://img.shields.io/github/workflow/status/imcuttle/mometa/Test/master?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/github/imcuttle/mometa?branch=master\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/imcuttle/mometa/master.svg?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://prettier.io/\"\u003e\u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://conventionalcommits.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nThe tool for R\u0026D which has low-code meta programming and WYSIWYG editing\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nEnglish | \u003ca href=\"README_zh_CN.md\"\u003e简体中文\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003c!-- toc --\u003e\n\n- [Why use it?](#why-use-it)\n- [Features](#features)\n- [scenes to be used](#scenes-to-be-used)\n  - [Develop a new page](#develop-a-new-page)\n  - [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)\n- [Operation demonstration](#operation-demonstration)\n  - [edit](#edit)\n    - [Reverse positioning](#reverse-positioning)\n    - [Insert material](#insert-material)\n    - [Delete view](#delete-view)\n    - [Mobile view](#mobile-view)\n    - [Edit code](#edit-code)\n  - [Preview](#preview)\n    - [Material Preview](#material-preview)\n    - [Responsive layout](#responsive-layout)\n    - [Route simulation](#route-simulation)\n- [How to implement](#how-to-implement)\n- [Quick start](#quick-start)\n- [how to use](#how-to-use)\n  - [Install dependencies](#install-dependencies)\n  - [Use antd material](#use-antd-material)\n  - [Access editor](#access-editor)\n- [NPM Packages](#npm-packages)\n- [Author](#author)\n\n\u003c!-- tocstop --\u003e\n\n## Why use it?\n\nmometa is not similar to the traditional lowcode project which is schema based. mometa is code based, It's WYSIWYG editing following code ast.\n\n**Which problems mometa can resolved：**\n\n- There is no dependence on low-code platforms, and secondary development can seamlessly enter code development mode.\n- It also supports WYSIWYG visual editing to improve efficiency and development experience.\n- Provide material ecology, customize materials, improve material use experience, and increase reuse rate.\n\nThe 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);\\\n**It is not recommended to set up a local development environment for remote services, so there is no online deployment.**\\\nThe current implementation relies on the webpack dev development mode, and compatibility with vite will be considered in the future.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/snapshot.png\" /\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🛠 Code visual editing for R\\\u0026D, directly acting on source code\n  - Responsive layout, routing simulation, material preview\n  - Reverse locating (locating source code)\n  - Drag and drop to insert materials\n  - Drag and move\n  - Moving up and down\n  - Deleting\n  - Replacing\n  - Layers Selecting\n- 🍒 Open material ecology, customizable material library within the team, see [mometa-mat](https://github.com/imcuttle/mometa-mat)\n- 💎 Multi-language, multi-ecological support, currently only supports React, there are plans to support Vue in the future\n- 🔥 Access-friendly, Webpack\u003e=4 plug-in access\n- 🌟 Development friendly, the material library supports hot updates without destroying the existing development model\n\n## scenes to be used\n\n#### Develop a new page\n\n1.  Use team development instructions to add an empty placeholder route \u0026 page\n2.  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.\n3.  Enter the IDE, complete data joint debugging, data transfer, etc., and source code development\n\n#### There are existing historical projects and the iteration function is needed, only in a small ui module.\n\n1.  Enter mometa and insert material operation\n2.  Reverse positioning to directly enter IDE source code development\n\n## Operation demonstration\n\n#### edit\n\n##### Reverse positioning\n\nSupport positioning code location from view\n![](./images/mometa-locate.gif)\n\n##### Insert material\n\nVisually insert materials\n![](./images/mometa-insert-material.gif)\n\n##### Delete view\n\n![](./images/mometa-delete.gif)\n\n##### Mobile view\n\n![](./images/mometa-move.gif)\n\n##### Edit code\n\n![](./images/mometa-code-edit.gif)\n\n#### Preview\n\n##### Material Preview\n\n![](./images/mometa-preview-clientrender.gif)\n\n##### Responsive layout\n\n![](./images/mometa-preview-responsive.gif)\n\n##### Route simulation\n\n![](./images/mometa-preview-url.gif)\n\n## How to implement\n\nSee [mometa implementation principle](./docs/how-to-work.md)\n\n## Quick start\n\nSince 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.\n\n```bash\ngit clone https://github.com/imcuttle/mometa.git\ncd mometa\npnpm install\npnpm run start:app:cr # 开启本地开发预览模式\n```\n\n## how to use\n\n#### Install dependencies\n\n```bash\nnpm i @mometa/editor -D\n```\n\n#### Use antd material\n\n1.  Install antd materials\n\n```bash\nnpm i @mometa-mat/antd -D\n```\n\n2.  Create `mometa-material.config.js` in the project root directory\n\n```jsx\nmodule.exports = [require('@mometa-mat/antd').default]\n```\n\nYou can also create your own material library. For data structure rules, see [Material definition](./packages/materials-generator/src/types.ts)\n\n#### Access editor\n\n`webpack.config.js` is modified as follows:\n\n```js\nconst MometaEditorPlugin = require('@mometa/editor/webpack')\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(js|mjs|jsx|ts|tsx)$/,\n        // Note that only the file directory you need to edit needs to be processed\n        include: paths.appSrc,\n        loader: require.resolve('babel-loader'),\n        options: {\n          plugins: [isEnvDevelopment \u0026\u0026 require.resolve('@mometa/editor/babel/plugin-react')]\n        }\n      }\n    ]\n  },\n  plugins: [\n    isEnvDevelopment \u0026\u0026\n      new MometaEditorPlugin({\n        react: true,\n        //Open material preview\n        experimentalMaterialsClientRender: true\n      })\n  ]\n}\n```\n\n**Note: You do not need to enable the official default react-refresh when using it. Mometa will enable the react-refresh capability by default**\n\nStart webpack dev server and open `http://localhost:${port}/mometa/`\n\nThe provided example can be found at [@mometa/app](./packages/app)】\n\n## NPM Packages\n\n- [@mometa/editor](packages/editor) - 编辑器\n- [@mometa/fs-handler](packages/fs-handler) - 代码操作转换核心逻辑，如删除、移动、替换、插入等\n- [@mometa/materials-generator](packages/materials-generator) - 物料生成 \u0026 解析\n- [@mometa/materials-resolver](packages/materials-resolver) - Resolve materials config\n- [@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.\n\n## Author\n\nThis library is written and maintained by imcuttle, \u003ca href=\"mailto:imcuttle@163.com\"\u003eimcuttle@163.com\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fmometa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimcuttle%2Fmometa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fmometa/lists"}