Skip to content

VTJ.PRO v2.5.0 重磅发布:Composition API 全面升级,实现 parser→coder→renderer 精确双向闭环

基于对三个核心包源码的深入分析,以下是对 @vtj/coder、@vtj/parser、@vtj/renderer composition 模式升级版本的全面评价:


总体评价:一次架构设计扎实、双向闭环完整的 API 范式迁移

此次升级将 VTJ 从 Options API 单模式扩展为 Options/Composition 双模式共存,三个核心包形成了 "parser 解析 → DSL 存储 → coder 出码" 的精确双向镜像闭环。以下是分维度评价:


1. 架构设计 — ⭐⭐⭐⭐⭐

符号表驱动 (SymbolTable) 是本次升级最核心的设计亮点。

@vtj/coder 中 symbolTable.ts 将 DSL 中所有 this.xxx 引用分类为:refs(需 .value 解包)、reactives(直接访问)、computed、methods、state、composables、globalApi、dataSources 八大类别。这一定义直接驱动了:

  • transformer.ts 的上下文感知转换(script 上下文解包 .valuetemplate 不解包)
  • parser 端 mirror 的反向分类
  • 全局 API 的自动检测与声明生成

跨包映射共享:coder 导出 GLOBAL_API_MAP 供 parser 复用,从根本上避免了硬编码不一致问题。parser 的 reverseGlobalApi.ts 按最后一个 . 分割,正确处理了多级路径(如 __instance.proxy.$xxx)。


2. 双向转换精度 — ⭐⭐⭐⭐⭐

parser ↔ coder 的 DSL 双向转换形成了精确镜像

方向模块关键能力
Vue → DSL@vtj/parserscriptSetup AST 解析 + reverseTransformer 反向注入 this.
DSL → Vue@vtj/codertransformer 剥离 this. + 生成 <script setup>

经过多轮迭代修复了:

  • reverseGlobalApi$forceUpdate.$refs 双重替换错误(修复记录
  • 内部变量(__instancegetCurrentInstance())误入 DSL setup 字段
  • composables 解构字段与全局 API 声明的去重

测试覆盖充分:parser composition.test.ts (545行) + compositionPatch.test.ts (271行),coder 有 3 个 composition 专项测试文件。


3. 渲染器集成 — ⭐⭐⭐⭐

block.ts 中通过 apiMode === 'composition' 的单点分流实现零侵入集成:

Composition 模式执行顺序:
refs → reactives → computed → methods → injects → dataSources
→ composables → context.setup → watches
→ lifeCycles注册 → setup字段执行 → provide

几个值得关注的设计细节:

  • 响应式覆盖防护:context.setup 中保存/恢复 state/refs/reactives 防止被 attrs 覆盖
  • composable 查找限定:仅从 $libs 中查找,避免污染 Vue 内置 API
  • Options→Composition 生命周期自动映射mounted → onMounted 等,同时 created/beforeCreate 等价于 setup 立即执行

4. BlockSchema 数据模型 — ⭐⭐⭐⭐⭐

BlockSchema 的设计遵循了"双模式共存、字段语义清晰"的原则:

字段OptionsComposition说明
state✅ 核心✅ reactive双模式共享
refsComposition 专属
reactivesComposition 专属
composablesComposition 专属
setup命令式初始化
computed/methods/watch/lifeCycles双模式共享

BlockModel 提供了 11+ 个管理方法(setRef/removeRef/setReactive/removeReactive/setComposable/removeComposable/setProvide/removeProvide/setSetup/setApiMode),设计器可以透明地操作 Composition 字段。


5. 多框架全局 API 兼容 — ⭐⭐⭐⭐⭐

globalApi.ts 实现了业界少见的运行时 UI 库自动探测 + 多框架全局 API 映射

  • Vue 生态:vue-router ($router/$route)、vue-i18n ($t/$tm)、pinia ($pinia)
  • @vtj/renderer:$provider/$store/$request/$libs/$access/$apis
  • Element Plus:$message/$notification/$loading 等 8 个 API
  • Ant Design Vue:$message/$notification/$modal 等 3 个 API
  • __renderer__ 特殊标记自动与 useProvider 合并为单条 import

memberAccess 形式支持__i18n.te(成员访问)与 this.$t(函数调用)均正确映射,并通过 simple 和标准映射的双条目定义覆盖。


6. 提示词工程体系 — ⭐⭐⭐⭐⭐

VTJ 的 prompt 体系提供了一个高参考价值的模板——它不是孤立的 prompt 集合,而是与 DSL 编译器(coder)和解析器(parser)形成了强耦合约束。这种"提示词即协议"的设计思路,比传统的"告诉 AI 该怎么写"的 prompt 工程思路要更系统化、更可验证。

总评

这是一次架构前瞻性很强的升级。SymbolTable + transformer 的双向镜像架构设计简洁且可扩展,BlockSchema 的双模式字段设计不破坏 Options 模式兼容性,全局 API 映射体系覆盖了主流 Vue 生态库。在低代码/DSL 领域做到 parser ↔ coder ↔ renderer 三端精确对齐 Composition API 语义的,这在工程实践上是比较罕见的。

核心优势:双向精确性、架构可扩展性、零侵入的 Options 兼容。

更新指引

开源版本

开源版本可通过重新安装项目依赖即可更新到最新版本,命令:

bash
npm run clean && npm install

私有化部署版

私有化部署版本按以下步骤更新:

  1. 下载最新版本源码,下载地址:https://app.vtj.pro/#/workbench/service
  2. 重新安装项目依赖
    bash
    npm run clean && pnpm install
  3. 后台更新配置AI提示词, 新版提示文件: /_docs/prompts/coder.md
  4. 新增配套 skills, 技能文档目录:/_docs/skills/。 可通过 npm run seed 写入种子数据的方式增加,或手动在后台添加。必须的技能:api block chart env globals i18n icons page settings uni utils

欢迎广大开发者体验新版,共同推动 AI 低代码引擎的持续进化!🚀