❌

阅读视图

发现新文章，点击刷新页面。

揭秘！TinyEngine低代码源码如何玩转双向转换？

✇掘金 前端
OpenTiny社区

本文由TinyEngine低代码源码转换功能贡献者张珈瑜原创。

背景

当前主流低代码平台普遍采用“单向出码”模式，仅支持将 DSL（Domain Specific Language，领域特定语言）转换为 Vue 或 React 源代码。一旦开发者在生成代码后手动修改了源码，平台通常无法将这些修改同步回可视化编辑器，导致代码与可视化配置割裂，严重影响开发效率与协同维护。本项目旨在构建低代码 Vue/React 源代码到 DSL 的反向转换机制，打通可视化搭建与源码开发之间的断层，实现从 UI 配置到源码编写的无缝协同。

Vue-To-DSL 方案

目标

将 Vue 单文件组件（SFC）、整包工程或 ZIP 压缩包逆向转换为 TinyEngine 所需的 DSL Schema。

核心依赖

  • @vue/compiler-sfc / @vue/compiler-dom：解析 SFC 与模板 AST
  • @babel/parser / traverse / types：脚本 AST（支持 TS/JSX）
  • jszip：ZIP 文件读取（Node 与浏览器双端支持）
  • vue：仅用于类型对齐

数据流

0.PNG

解析流程详解

1. SFC 粗分

  • 使用 @vue/compiler-sfc.parse 获取 descriptor
  • 提取 template / script / scriptSetup / styles / customBlocks
  • 保留语言类型（如 lang="ts"）和 scoped 状态

2. 模板解析（Template）

  • 使用 @vue/compiler-dom.parse 构建 AST
  • 递归生成组件树节点 { componentName, props, children }
  • 指令处理：
    • v-if → condition: JSExpression
    • v-for → loop: { type: 'JSExpression', value: '...' }
    • v-model / v-show / v-on / v-bind → 映射至 props 或事件
    • v-slot → slot: name
  • 文本节点：
    • 纯文本 → Text 组件
    • 插值表达式 → Text + JSExpression
  • 组件名归一化：
    • 优先使用 componentMap
    • HTML 原生标签保留小写
    • tiny-icon-* → 统一为 Icon，name 属性设为 PascalCase 名称

3. 脚本解析（Script）

  • 使用 Babel 解析 TS/JSX
  • 组合式 API（script setup）：
    • reactive() / ref() → state
    • computed() → computed
    • 顶层函数 → methods
    • onMounted 等 → lifecycle
  • Options API：
    • 识别 data / methods / computed / props / 生命周期钩子
  • 源码恢复：
    • 利用 AST 节点位置切片还原函数体
    • 箭头函数转为命名函数字符串
  • 错误处理：非 strict 模式下收集错误，不中断流程

4. 样式解析（Style）

  • 合并所有 `` 块内容
  • 记录 scoped 与 lang
  • 提供辅助工具（不直接写入 Schema）：
    • parseCSSRules：抽取 CSS 规则
    • extractCSSVariables：提取 CSS 变量
    • extractMediaQueries：媒体查询识别

5. Schema 生成与归一化

  • Page Schema：
    • 根节点为 Page，自动填充 fileName、meta、id
    • 行为域统一包装为 JSFunction / JSExpression
    • 深度清理多余空白字符
  • App Schema（多页面聚合）：
    • 页面：src/views/**/*.vue
    • 国际化：src/i18n/{en_US,zh_CN}.json
    • 工具函数：src/utils.js（正则解析导出项）
    • 数据源：src/lowcodeConfig/dataSource.json
    • 全局状态：src/stores/*.js（轻量识别 Pinia defineStore）
    • 路由元信息：从 src/router/index.js 提取 name / path / isHome

6. 转换器接口

  • convertFromString(code, fileName?)
  • convertFromFile(filePath)
  • convertMultipleFiles(files)
  • convertAppDirectory(appDir)
  • convertAppFromZip(zipBuffer)

React-To-DSL 方案

目标

将单个 React 组件（JSX/TSX）逆向转换为 TinyEngine 可消费的 DSL（IAppSchema），当前聚焦 单文件 → 单页面/区块 场景。

核心依赖

  • @babel/parser / traverse / generator：AST 解析与代码生成
  • nanoid：生成唯一 ID

转换流程

1.PNG

关键步骤说明

1. AST 解析

  • 启用 jsx + typescript 插件
  • 定位首个返回 JSX 的函数/类组件
  • 记录 useState 初始值节点、组件定义路径

2. JSX → children 树构建

  • 组件名：
    • JSXIdentifier → 直接使用
    • JSXMemberExpression → 拼接如 Form.Item
    • 兜底为 Fragment
  • Props 处理：
    • 字面量 → 直接值
    • 表达式 → JSExpression
    • Spread 属性 → 特殊 key '...'
  • Children：
    • 文本 → 包装为 span + props.children
    • 表达式容器：
      • 若为 arr.map(item => ) → 提取 arr 作为 loop
      • 否则 → Fragment + JSExpression

3. 表达式序列化

  • 字面量（string/number/bool/null）→ 原值
  • 对象/数组 → 递归处理，Spread 元素标记为 '...'
  • 其他表达式（函数调用、三元等）→ 源码字符串 + JSExpression

4. State 与方法提取

  • State：仅首个 useState 的初始值
  • Methods：
    • 函数组件：顶层函数声明或变量赋值函数
    • 类组件：非 render 的 ClassMethod 或箭头属性
  • 生命周期：类组件中的 componentDidMount 等白名单方法

5. 组件归一化

  • 应用 defaultComponentMap（如 Form → TinyForm）
  • DatabaseOutlined → Icon + props.name = 'IconPanelMini'
  • style 对象 → 转为 kebab-case: value; 字符串
  • value → modelValue（适配 Tiny 组件）

6. Schema 装配

  • PageSchema：
    • componentName: 'Page' 或 'Block'
    • meta: 默认 isHome=true, router='/'
    • children: 来自 JSX 树
    • state/methods/lifeCycles: 提取结果
  • AppSchema：包裹单个 Page，其余字段初始化为空

（本项目为开源之夏活动贡献，欢迎大家体验并使用）源码可参考：

快速上手

前置条件: 已安装 Node.js (>=18)、pnpm (>=8)、git，本地 8090 端口可用。

启动项目

git clone -b ospp-2025/source-to-dsl https://github.com/opentiny/tiny-engine.git
cd tiny-engine
pnpm install
pnpm dev

启动成功后，访问 http://localhost:8090/?type=app&id=1&tenant=1。

可视化导入 Vue 文件

进入上方地址后，点击页面右上角的“导入”。支持三种来源：

  • 单个 .vue 文件：适合导入单页或区块。
  • 项目目录：自动识别 src/views 下的页面文件。
  • ZIP 压缩包：打包后的 Vue 项目一键导入。

导入流程（任选其一）：

  1. 单个 .vue 文件
  • 选择“单页上传”，挑选本地 .vue 文件。
  • 若存在同名页面，按提示“覆盖/跳过/全部覆盖”进行处理。
  • 导入完成后，在“静态页面”列表中可见，双击打开编辑。
  1. 项目目录
  • 选择“目录上传”，指向本地项目根目录。
  • 系统自动扫描 src/views 并导入页面；遇到重名同样可选择覆盖策略。
  • 完成后，页面会按目录结构展示在左侧列表。
  1. ZIP 压缩包
  • 选择“项目压缩包”，上传打包好的 Vue 项目 zip。
  • 支持批量导入与重名处理，完成后即可在列表中浏览与打开。

选择单页vue文件上传方式进行导入：

由于已经存在CreateVm页面，弹出了提示框，需要选择是否覆盖，这里点击确定：

在静态页面列表可查看到导入的页面，双击即可点开：

选择项目目录或项目压缩包上传方式进行导入：

选择目录导入则选择本地的目录进行上传：

选择项目压缩包则选择vue项目zip进行上传：

导入时有重名文件则会弹出提示框，选择是否覆盖，这里选择全选+确定：

可以看到整个项目已经被导入到可视化编辑器了

React-To-DSL 测试用例

当前 React-To-DSL 以测试用例形态展示能力，可在包内直接运行：

cd packages/react-to-dsl
pnpm test

输入样例：查看用例中的 React 组件源码（JSX）

输出结果：测试通过时会生成/断言对应的 DSL 结构，便于对照验证

（本项目为开源之夏活动贡献，欢迎大家体验并使用）源码可参考：

结语

本项目成功实现了 Vue/React 源码 ↔ DSL 的双向转换机制，有效解决了低代码平台“单向出码”导致的协同断层问题。通过模块化解析、健壮的错误处理与灵活的组件映射策略，确保了转换的准确性与实用性。

感谢导师的悉心指导，以及 OpenTiny 社区与开源之夏活动组委会的支持，让我有机会参与这一具有实际价值的开源项目！

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：
OpenTiny 代码仓库：
TinyVue 源码：
TinyEngine 源码： 
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~
如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

❌