背景

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

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

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

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

功能和組件通常有一定的限制，無法完全滿足所有復(fù)雜的、高度定制化的開發(fā)需求。因?yàn)槭撬接袇f(xié)議，所以定位問題也會(huì)比較困難。

圖片

公有協(xié)議

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

VUE AST Transform 

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

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

如下所示：

圖片

AST Transform通常包括以下幾個(gè)步驟：

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

關(guān)鍵詞說明

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

可以通過訪問https://astexplorer.net在線調(diào)試?yán)斫飧嚓P(guān)鍵詞類型。

解析

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

圖片

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

解決方案

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

 流程圖

圖片

template區(qū)塊的處理

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

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

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

圖片

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

圖片

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

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

可以使用node-html-parser給每個(gè)標(biāo)簽節(jié)點(diǎn)新增一個(gè)唯一標(biāo)識(shí)，比如在每個(gè)標(biāo)簽的class中新增一個(gè)有固定前綴的隨機(jī)唯一id，點(diǎn)擊的時(shí)候通過獲取該id，

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

 script區(qū)塊的處理

下文使用到的babel工具庫:

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

一些簡單的案例

獲取ref

圖片

獲取computed

computed的獲取和ref其實(shí)大同小異

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

圖片

圖片

獲取生命周期

圖片

修改ref的值

圖片

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

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

方式1:

可以直接把表達(dá)式字符串傳遞給replaceWithSourceString來對(duì)AST進(jìn)行修改

圖片

方式2（推薦）:

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

將

圖片

改成

圖片

style區(qū)塊的處理

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

生成vue-sfc代碼

實(shí)現(xiàn)思路

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

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

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

代碼實(shí)現(xiàn)

圖片

效果展示

圖片

按住?option可進(jìn)行編輯模式，hover選中組件，點(diǎn)擊可以對(duì)組件進(jìn)行可視化修改

圖片

修改 → 同步源碼

圖片

重新渲染視圖

 流程圖

圖片