文章探讨了如何在VUE项目中实现基于源码的可视化编程技术，并展望了未来的发展方向。文章先介绍了背景和传统开发模式的问题，然后提出了基于源码的可视化编程技术方案，并详细阐述了Vue AST Transform的过程和关键点，包括解析、转换、生成等步骤。
构想了一种更为智能和直观的开发辅助方案，旨在通过UI直接映射到代码组件，简化代码编辑过程，实现直观且高效的可视化编程体验。
包括解析（Parsing）、转换（Transformation）和生成（Generation）等步骤，并涉及了词法分析和语法分析等概念。
采取分而治之的策略，针对代码中的不同区块（template、script/scriptSetup、styles）使用不同的工具或库进行处理。使用了node-html-parser对template区块进行ast的解析和处理，使用了babel工具库对script区块进行处理。
目前该技术还在探索阶段，未来会支持组件的拖拽、样式修改、全局状态、接口的管理等功能，并打通AI、git仓库、CICD、内部物料库组件等。
前言
探讨了如何在 VUE 项目中基于源码实现可视化编程技术，并对未来的发展方向进行了展望。今日前端早读课文章由 @大前端分享，公号：哔哩哔哩技术授权。
正文从这开始～～
背景
在面对大型且高度组件化的项目时，传统的开发模式 —— 即边预览边手动修改代码，往往会因项目结构的复杂性而显得效率低下，尤其是对于新加入项目或对项目结构不够熟悉的开发者而言，从 UI 界面逆向定位到具体代码实现并作出修改的过程尤为耗时且挑战重重。为了解决这一问题，提升开发效率与团队协作的流畅度，我们构想了一种更为智能和直观的开发辅助方案，旨在通过 UI 直接映射到代码组件，并简化代码编辑过程，将源码 AST 与 UI 做绑定， 直接通过 UI 界面修改属性或内容，并自动同步到代码文件中，实现一种直观且高效的可视化编程体验，并通过这种方式来维护以及新建项目。
【第2597期】如何用JavaScript实现一门编程语言 - AST
传统低代码方案带来的问题
在深入探讨基于源码的可视化编程技术方案之前，我们先来分析一下传统低代码方案所带来的问题吧。
传统低代码方案通过自定义的私有协议与可视化视图做绑定，将代码逻辑抽象成私有描述，使用 JSON 配置来生成页面，后续只能通过维护 JSON schema 来维护项目。
功能和组件通常有一定的限制，无法完全满足所有复杂的、高度定制化的开发需求。因为是私有协议，所以定位问题也会比较困难。
公有协议
在摒弃私有协议，追求广泛兼容与协同工作的背景下，软件开发社区积极拥抱公有协议和标准。其中，抽象语法树（AST）作为解析 JavaScript（及其他编程语言）代码并转化为结构化数据的核心技术，已成为一个公认的公有协议。AST 还为开发者提供了一种统一、标准化的方式来理解和操作源代码。借助 AST 我们可以非常容易的对代码进行描述以及代码和协议之间的互转。
Vue AST Transform
AST 的生成通常涵盖代码的词法分析和语法分析阶段：
如下所示：
AST Transform 通常包括以下几个步骤：
关键词说明
可以通过访问 https://astexplorer.net 在线调试理解更多关键词类型。
解析
js 可以通过 babel 进行 ast 的解析，那 vue 文件该怎么解析成 ast 呢，你首先想到的肯定是
@vue/compiler-sfc
这个包，我们来看一下效果。
可以看到 descriptor 字段里分别用 template，
script/scriptSetup
，styles 来描述 vue 文件的三个代码区块，所以可以将 descriptor 看成是 vue 的 ast，理论上来讲我们可以通过修改各个区块的 ast 节点，最后再通过将 descriptor 转回 vue 代码即可。很可惜的是官方设计
@vue/compiler-sfc
这个包主要是为了将 vue 代码编译为可以在浏览器运行的 render function，并没有提供 transform 的能力，即使修改了 ast，也无法将 ast 转成 vue-sfc 代码。
【第3386期】一次基于AST的大规模代码迁移实践
解决方案
为了实现对 vue-sfc 代码的 AST 修改并重新生成 vue-sfc 代码，我们可以采取一种分而治之的策略，针对代码中的不同区块（template,
script/scriptSetup
, styles）使用不同的工具或库进行处理。通过上述 vue ast 的数据结构可以看到每个区块都有 content 字段表示当前区块的源代码，那是不是可以把 template 和 script 交给各自的解析器呢？（style 本文不做解析），script 区块的代码我们可以直接交给生态比较成熟的 babel 来处理，那 template 呢，我们可以想一下 template 默认的 lang 属性是什么？是不是 html，那是不是只要找到对应的 html 解析器就可以了。
流程图
template 区块的处理
通过对比多个 html 解析器，最终选择了 node-html-parser 来对 template 区块的代码来做 ast 的解析和处理。
对比其他解析器，这个包对 ast 的处理实现了 HTMLElement 接口，使用起来非常方便，就像处理 dom 节点一样简单。
注意：有一个坑，解析修饰符会有问题，仓库 issu 中有解决方法，需要自己改一下源码打补丁
更多使用方法可参考 WebAPI HTMLElement 接口，例如：
关联组件
组件在渲染的时候会被编译成 template 中的内容，那如果我需要在点击某一个组件的时候获取到该组件的 props 该怎么做呢？
可以使用 node-html-parser 给每个标签节点新增一个唯一标识，比如在每个标签的 class 中新增一个有固定前缀的随机唯一 id，点击的时候通过获取该 id，
然后通过 node-html-parser 提供的
querySelector(".${id}")
获取。
script 区块的处理
下文使用到的 babel 工具库:
