开发者必看！TinyEngine低代码双向转换源码大公开

推广 | 联想企业购年终狂欢，购机最高直降 20%

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

背景

当前主流低代码平台普遍采用”单向出码”模式，仅支持将 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 名称