背景

在面對大型且高度組件化的項目時，傳統(tǒng)的開發(fā)模式——即邊預覽邊手動修改代碼，往往會因項目結(jié)構(gòu)的復雜性而顯得效率低下，尤其是對于新加入項目或?qū)椖拷Y(jié)構(gòu)不夠熟悉的開發(fā)者而言，從UI界面逆向定位到具體代碼實現(xiàn)并作出修改的過程尤為耗時且挑戰(zhàn)重重。為了解決這一問題，提升開發(fā)效率與團隊協(xié)作的流暢度，我們構(gòu)想了一種更為智能和直觀的開發(fā)輔助方案，旨在通過UI直接映射到代碼組件，并簡化代碼編輯過程，將源碼AST與UI做綁定， 直接通過UI界面修改屬性或內(nèi)容，并自動同步到代碼文件中，實現(xiàn)一種直觀且高效的可視化編程體驗，并通過這種方式來維護以及新建項目。

傳統(tǒng)低代碼方案帶來的問題

在深入探討基于源碼的可視化編程技術(shù)方案之前，我們先來分析一下傳統(tǒng)低代碼方案所帶來的問題吧。

傳統(tǒng)低代碼方案通過自定義的私有協(xié)議與可視化視圖做綁定，將代碼邏輯抽象成私有描述，使用 JSON 配置來生成頁面，后續(xù)只能通過維護JSON schema來維護項目。

功能和組件通常有一定的限制，無法完全滿足所有復雜的、高度定制化的開發(fā)需求。因為是私有協(xié)議，所以定位問題也會比較困難。

圖片

公有協(xié)議

在摒棄私有協(xié)議，追求廣泛兼容與協(xié)同工作的背景下，軟件開發(fā)社區(qū)積極擁抱公有協(xié)議和標準。其中，抽象語法樹（AST）作為解析JavaScript（及其他編程語言）代碼并轉(zhuǎn)化為結(jié)構(gòu)化數(shù)據(jù)的核心技術(shù)，已成為一個公認的公有協(xié)議。AST還為開發(fā)者提供了一種統(tǒng)一、標準化的方式來理解和操作源代碼。借助AST我們可以非常容易的對代碼進行描述以及代碼和協(xié)議之間的互轉(zhuǎn)。

VUE AST Transform 

AST的生成通常涵蓋代碼的詞法分析和語法分析階段：

• 詞法分析：將源代碼分解成一個個有意義的單元（tokens），如關(guān)鍵字、標識符、運算符等。
• 語法分析：根據(jù)語言的語法規(guī)則，將tokens組織成AST。在這個過程中，會構(gòu)建出表示源代碼結(jié)構(gòu)的樹狀結(jié)構(gòu)，其中每個節(jié)點對應源代碼中的一個構(gòu)造。

如下所示：

圖片

AST Transform通常包括以下幾個步驟：

• 解析（Parsing）：將源代碼轉(zhuǎn)換為AST
• 轉(zhuǎn)換（Transformation）：遍歷AST并對其進行修改
• 生成（Generation）：將修改后的AST轉(zhuǎn)換回源代碼文本

關(guān)鍵詞說明

• VariableDeclaration 變量聲明
• Expression：表達式，MemberExpression、BinaryExpression、UnaryExpression、AssignmentExpression、CallExpression、BindExpression、NewExpression 等...
• Statement：語句，由 Expression 組成
• ...

可以通過訪問https://astexplorer.net在線調(diào)試理解更多關(guān)鍵詞類型。

解析

js可以通過babel進行ast的解析，那vue文件該怎么解析成ast呢，你首先想到的肯定是@vue/compiler-sfc這個包，我們來看一下效果。

圖片

可以看到descriptor字段里分別用template，script/scriptSetup，styles來描述vue文件的三個代碼區(qū)塊，所以可以將descriptor看成是vue的ast，理論上來講我們可以通過修改各個區(qū)塊的ast節(jié)點，最后再通過將descriptor轉(zhuǎn)回vue代碼即可。很可惜的是官方設(shè)計@vue/compiler-sfc這個包主要是為了將vue代碼編譯為可以在瀏覽器運行的render function，并沒有提供transform的能力，即使修改了ast，也無法將ast轉(zhuǎn)成vue-sfc代碼。

解決方案

為了實現(xiàn)對vue-sfc代碼的AST修改并重新生成vue-sfc代碼，我們可以采取一種分而治之的策略，針對代碼中的不同區(qū)塊（template, script/scriptSetup, styles）使用不同的工具或庫進行處理。通過上述vue ast的數(shù)據(jù)結(jié)構(gòu)可以看到每個區(qū)塊都有content字段表示當前區(qū)塊的源代碼，那是不是可以把template和script交給各自的解析器呢？（style本文不做解析），script區(qū)塊的代碼我們可以直接交給生態(tài)比較成熟的babel來處理，那template呢，我們可以想一下template 默認的 lang 屬性是什么？是不是html，那是不是只要找到對應的html解析器就可以了。

 流程圖

圖片

template區(qū)塊的處理

通過對比多個html解析器，最終選擇了node-html-parser來對template區(qū)塊的代碼來做ast的解析和處理。

對比其他解析器，這個包對ast的處理實現(xiàn)了HTMLElement 接口，使用起來非常方便，就像處理dom節(jié)點一樣簡單。

注意：有一個坑，解析修飾符會有問題，倉庫issu中有解決方法，需要自己改一下源碼打補丁

圖片

更多使用方法可參考WebAPI HTMLElement 接口，例如：

圖片

關(guān)聯(lián)組件

組件在渲染的時候會被編譯成template中的內(nèi)容，那如果我需要在點擊某一個組件的時候獲取到該組件的props該怎么做呢？

可以使用node-html-parser給每個標簽節(jié)點新增一個唯一標識，比如在每個標簽的class中新增一個有固定前綴的隨機唯一id，點擊的時候通過獲取該id，

然后通過node-html-parser提供的querySelector(".${id}")獲取。

 script區(qū)塊的處理

下文使用到的babel工具庫:

• @babel/parser（對源代碼進行AST解析）
• @babel-traverse （遍歷ast修改對應節(jié)點）
• @babel/generator（ast轉(zhuǎn)成源代碼）
• @babel/types（用于處理ast 節(jié)點的 lodash 式工具庫）
• @babel/template（通過字符串模板來創(chuàng)建ast）

一些簡單的案例

獲取ref

圖片

獲取computed

computed的獲取和ref其實大同小異

比如我們新增這樣一段代碼

圖片

圖片

獲取生命周期

圖片

修改ref的值

圖片

修改onMounted回調(diào)里的執(zhí)行語句

@babel/traverse提供了replaceWith，replaceWithSourceString等replace方法來修改AST

方式1:

可以直接把表達式字符串傳遞給replaceWithSourceString來對AST進行修改

圖片

方式2（推薦）:

replaceWithSourceString傳遞聲明表達式語句會報錯，推薦使用@babel/template創(chuàng)建ast，減少容錯，然后傳遞給replaceWith

將

圖片

改成

圖片

style區(qū)塊的處理

那么同理style區(qū)塊的代碼也可以使用對應的解析器來處理，可以參考一些比較成熟的loader，如css-loader，postcss-loader等

生成vue-sfc代碼

實現(xiàn)思路

1.將通過node-html-parser修改過的templateAST重新生成template代碼，使用prettier格式化

2.將通過babel修改的scriptAST重新生成代碼，使用prettier格式化，

3.最后將格式化后的template代碼，js代碼和沒處理過的style區(qū)塊的代碼進行重組來達到生成vue-sfc代碼的目的。

代碼實現(xiàn)

圖片

效果展示

圖片

按住?option可進行編輯模式，hover選中組件，點擊可以對組件進行可視化修改

圖片

修改 → 同步源碼

圖片

重新渲染視圖

 流程圖

圖片