/mometa

🛠 [Beta] 面向研发的低代码元编程,代码可视编辑,辅助编码工具

Primary LanguageTypeScriptMIT LicenseMIT

由于个人工作原因,近期不太有时间持续迭代,所以寻求帮助支持:Windows 系统支持Vue 支持

微信联系方式:moyuuuuu 备注 mometa

面向研发的低代码元编程(代码可视化)能力


背景

mometa 不是传统主流的低代码平台(如 amis/云凤蝶),mometa 是面向研发的、代码可视设计编辑平台;它更像是 dreamweaver、gui 可视编辑 之于 程序员。

它用于解决的问题有:

  • 对低代码平台不形成依赖,二次开发可以无缝进入代码开发模式
  • 同时支持所见即所得的可视编辑,用于提效,提升开发体验
  • 提供物料生态,可自定义物料,提升物料使用体验,提升复用率

mometa 定位更多是 基于程序员本地开发的模式,新增了可视化编码的能力(修改的也是本地的代码文件本身);
它更像是辅助编码工具,而不是 No-Code (amis/云凤蝶) 的平台方案;
不建议在远端服务起一个本地开发环境,所以没有做在线部署。
目前的实现依赖 webpack dev 开发模式,后续会考虑兼容 vite。

特性

  • 🛠 面向研发的代码可视化编辑,直接作用于源码
    • 响应式布局、路由模拟、物料预览
    • 反向定位(视图定位源码)
    • 拖拽插入物料
    • 拖拽移动
    • 上下移动
    • 删除
    • 替换
    • 层级选择
  • 🍒 开放物料生态,可定制团队内物料库,见 mometa-mat
  • 💎 多语言、多生态支持,目前暂只支持 React,后续有计划支持 Vue
  • 🔥 接入友好,Webpack>=4 插件化接入
  • 🌟 开发友好,物料库支持热更新,不破坏已有开发模式

使用场景

新开发一个页面

  1. 使用团队开发指令,新增一个空的占位路由 & 页面
  2. 进入 mometa,查看本地物料,和远端物料市场,选中自己需要的物料,直接拖拽,基本成型的页面布局完成
  3. 进入 ide,完成数据联调,数据传递等,源码开发

已有历史项目,需要迭代功能,只在某一小块 ui 模块内

  1. 进入 mometa,物料操作插入
  2. 反向定位直接进入 ide 源码开发

操作演示

编辑

反向定位

支持从视图定位代码位置

插入物料

可视化插入物料

删除视图

移动视图

编辑代码

预览

物料预览

响应式布局

路由模拟

如何实现

mometa 实现原理

快速开始

由于 mometa 依赖本地开发环境,只使用在本地开发环境,所以没有搭建在线 demo;在本地开发的时候可以进行使用

git clone https://github.com/imcuttle/mometa.git
cd mometa
pnpm install
pnpm run start:app:cr # 开启本地开发预览模式

如何使用

安装依赖

npm i @mometa/editor -D

使用 antd 物料

  1. 安装 antd 物料
npm i @mometa-mat/antd -D
  1. 在项目根目录中创建 mometa-material.config.js
module.exports = [require('@mometa-mat/antd').default]

你也可以创建自己的物料库,数据结构规则见 Material 定义

接入编辑器

webpack.config.js 修改如下:

const MometaEditorPlugin = require('@mometa/editor/webpack')

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        // 注意,只需要处理你需要编辑的文件目录
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          plugins: [isEnvDevelopment && require.resolve('@mometa/editor/babel/plugin-react')]
        }
      }
    ]
  },
  plugins: [
    isEnvDevelopment &&
      new MometaEditorPlugin({
        react: true,
        // 开启物料预览
        experimentalMaterialsClientRender: true
      })
  ]
}

注意:使用时,不需要开启官方预设的 react-refresh,mometa 默认会开启 react-refresh 能力

启动 webpack dev server,开启 http://localhost:${port}/mometa/ 即可

提供的例子可见 @mometa/app

NPM 包

作者

This library is written and maintained by imcuttle, imcuttle@163.com.