本文由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：仅用于类型对齐

数据流

解析流程详解

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）

• 合并所有 <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. AST 解析

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

2. JSX → children 树构建

• 组件名 ：
  • JSXIdentifier → 直接使用
  • JSXMemberExpression → 拼接如 Form.Item
  • 兜底为 Fragment
• Props 处理 ：
  • 字面量 → 直接值
  • 表达式 → JSExpression
  • Spread 属性 → 特殊 key '...'
• Children ：
  • 文本 → 包装为 span + props.children
  • 表达式容器：
    • 若为 arr.map(item => <El />) → 提取 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，其余字段初始化为空

（本项目为开源之夏活动贡献，欢迎大家体验并使用）源码可参考： https://github.com/opentiny/tiny-engine/tree/ospp-2025/source-to-dsl

快速上手

前置条件: 已安装 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 文件。
• 若存在同名页面，按提示"覆盖/跳过/全部覆盖"进行处理。
• 导入完成后，在"静态页面"列表中可见，双击打开编辑。

2. 项目目录

• 选择"目录上传"，指向本地项目根目录。
• 系统自动扫描 src/views 并导入页面；遇到重名同样可选择覆盖策略。
• 完成后，页面会按目录结构展示在左侧列表。

3. ZIP 压缩包

• 选择"项目压缩包"，上传打包好的 Vue 项目 zip。
• 支持批量导入与重名处理，完成后即可在列表中浏览与打开。

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

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

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

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

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

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

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

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

React-To-DSL 测试用例

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

cd packages/react-to-dsl
pnpm test

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

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

（本项目为开源之夏活动贡献，欢迎大家体验并使用）源码可参考： https://github.com/opentiny/tiny-engine/tree/ospp-2025/source-to-dsl

结语

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

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

关于OpenTiny

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

OpenTiny 官网：https://opentiny.design

OpenTiny 代码仓库：https://github.com/opentiny

TinyVue 源码：https://github.com/opentiny/tiny-vue

TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~

如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~