關于kaiteUI中通過json資料實作代碼渲染器
前言
上禮拜筆者分享了搭建UI框架的技術堆疊，其中一個較為關鍵的技術——代碼渲染器，由于篇幅問題放到了今天這篇博客中給大家做一個詳細的分析解讀，
在這里先分析一下上篇博客內容—— 基于vue3.0 + vite + TypeScript 實作一個UI框架 - kaiteUI,這篇主要是通過基于vue3.0 + vite + TypeScript技術框架來實作一個UI框架，筆者自己搭建框架的初衷是運用并鞏固最近學習的vue3.0新特性，
技術堆疊
廢話不多說，先給大家分享一下實作代碼渲染器的關鍵技術堆疊，
VUE3.0前端主流框架(react,vue,angular)之一,更適合開發靈活度高且復雜的應用vite是一個由原生 ESM 驅動的 Web 開發構建工具compiler-core核心作用是將字串轉換成 抽象物件語法樹ASTjson是一種輕量級的資料交換格式prismjs一款輕量級、可擴展的語法高亮顯示工具
需求分析
在思考需求分析之前我們先來看看kaiteUI官網的效果演示：
由上面的圖我們可以分析出，kaiteUI官網主要又以下幾個部分組成：
- 屬性功能概述（title）
主要展示組件當前屬性的屬性關鍵字 - 組件展示部分（componentShow）
負責將指定屬性的組件展示，并且讓用戶能夠與其進行互動， - 代碼展示模塊（demoCode）
對各個組件代碼示例進行展示，并給出使用示例原始碼，主要方便使用者了解各個組件的使用方法，
技術實作
實作原理
筆者大致總結的流程如下圖所示：
關鍵技術
vue3.0中的自定義塊
這邊用到的關鍵技術是在vite官網看到的一個檔案，上面表示——Vite支持Vue SFC中的自定義塊，只需要在組態檔中給vueCustomBlockTransforms為自定義塊添加一系列的轉換函式即可使用，
官方給的代碼示例為：
// vite.config.js
export default {
vueCustomBlockTransforms: {
i18n: ({ code }) => {
// i18n用于國際化翻譯
// return transformed code
}
}
}
出于模塊化的思想，我們將每個組件增加一個自定義塊來存放屬性的描述內容，并利用vueCustomBlockTransforms為自定義塊添加一系列的轉換函式，
vue3.0中compiler-core
下面是我在一個博客上找到的圖，他對compiler-core的作業流程概括的比較完整，compiler-core 負責「Vue3」中核心編譯相關的能力，這包括決議（parse）模板、轉化 AST 抽象語法樹（transform）、代碼生成（generate）等三個程序，它們之間的作業流如下圖所示：
而在kaiteUI這個專案中我們只用到了baseparse這個功能函式，也就是將我們的組件模板渲染成了一個AST抽象樹，
然后筆者對AST樹資料結構進行分析，進入 compiler-core 目錄下，結構一目了然，這里說下 _tests_ 目錄，是vue的jest測驗用例，
閱讀原始碼前先看看用例，對閱讀原始碼有很大幫助哦，
如下，測驗一個簡單的text，執行parse方法之后，得到 ast，期望 ast 的第一個節點與定義的物件是一致的，
同理其他的模塊測驗用例，在閱讀原始碼前可以先瞄一眼，知道這個模塊如何使用，輸入輸出是啥，
當讀取到是純文本結點時得到的AST抽象樹的資料結構
test('simple text', () => {
const ast = parse('some text')
const text = ast.children[0] as TextNode
expect(text).toStrictEqual({
type: NodeTypes.TEXT,
content: 'some text',
isEmpty: false,
loc: {
start: { offset: 0, line: 1, column: 1 },
end: { offset: 9, line: 1, column: 10 },
source: 'some text'
}
})
})
當讀取到是HTML元素結點時得到的AST抽象樹的資料結構
test('simple div', () => {
const ast = baseParse('<div>hello</div>')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
type: NodeTypes.ELEMENT,
ns: Namespaces.HTML,
tag: 'div',
tagType: ElementTypes.ELEMENT,
codegenNode: undefined,
props: [],
isSelfClosing: false,
children: [
{
type: NodeTypes.TEXT,
content: 'hello',
loc: {
start: { offset: 5, line: 1, column: 6 },
end: { offset: 10, line: 1, column: 11 },
source: 'hello'
}
}
],
loc: {
start: { offset: 0, line: 1, column: 1 },
end: { offset: 16, line: 1, column: 17 },
source: '<div>hello</div>'
}
})
})
由此我們可以得出content和loc.source是我們想要的關鍵屬性，在原始碼中筆者找到相關屬性存盤內容的區別，當讀取到文本結點時，會出現content屬性，content存放的是文本內容，而當讀取到HTML結點時loc.source是包含html標簽的內容，
prismjs語法高亮
PrismJS 是一款輕量級、可擴展的語法高亮顯示工具，在支持現代 Web 標準基礎下增加了更多可選的風格插件，
PrismJS 支持自定義擴展代碼的語言、主題和插件選項，勾選自己常用的代碼語言和主題風格以及增強插件，將定制好的代碼檔案 prism.css 和 prism.js 如下方式鏈接到頁面，再使用 <pre> <code> 編輯方式撰寫代碼文章即可展現漂亮的代碼高亮，
代碼實作
組件使用示例模塊
此處以Switch組件為例，其中為自定義塊
<!-- 自定義塊 -->
<demo>
支持 disabled
</demo>
<template>
<Switch v-model:value="bool" disabled />
</template>
<script lang="ts">
//匯入組件
import Switch from "../../../lib/Switch.vue";
//匯入ref
import { ref } from "vue";
export default {
components: {
Switch,
},
setup() {
//實作動態系結
const bool = ref(false);
return {
bool,
};
},
};
</script>
Vue SFC中的自定義塊決議模塊
這里還有一個插件——將md檔案渲染成js檔案到頁面中，此處不做詳細介紹，后面我會單獨拿一篇博客來講解其技術實作
// @ts-nocheck
import { md } from "./plugins/md";
import fs from "fs";
import { baseParse } from "@vue/compiler-core";
export default {
base: "./",
assetsDir: "assets",
//此處模塊功能——將md檔案渲染到頁面中，將單獨介紹其技術實作
plugins: [md()],
//通過 vueCustomBlockTransforms 選項來指定自定義區塊的轉換規則
vueCustomBlockTransforms: {
demo: (options) => {
//將options解構賦值
const { code, path } = options;
//異步讀取檔案內容，并轉為string型別
const file = fs.readFileSync(path).toString();
//將讀取到的檔案中的自定義快渲染為AST
const parsed = baseParse(file).children.find((n) => n.tag === "demo");
//讀取自定義模塊中的文本內容
const title = parsed.children[0].content;
//將讀取檔案中的自定義塊切分，并轉為字串型別
const main = file.split(parsed.loc.source).join("").trim();
//以JSON資料型別回傳
return `export default function (Component) {
Component.__sourceCode = ${JSON.stringify(main)}
Component.__sourceCodeTitle = ${JSON.stringify(title)}
}`.trim();
},
},
};
我們添加了一個 vueCustomBlockTransforms 物件， 該物件將鍵 demo（我們的塊名）映射到回傳虛擬 js 檔案的函式中，
在 vueCustomBlockTransforms 中添加額外欄位 __sourceCode和__sourceCodeTitle， 該欄位映射到我們在任何自定義 <demo> 塊中宣告的代碼，
然后，我們在路由生成代碼<h2>{{ component.__sourceCodeTitle }}</h2>中使用此代碼，
代碼渲染模塊
<template>
<div class="demo">
<!-- 渲染屬性文本內容 -->
<h2>{{ component.__sourceCodeTitle }}</h2>
<!-- 功能展示 -->
<div class="demo-component">
<!-- vue3.0中系結組件的指令 -->
<component :is="component" />
</div>
<div class="demo-actions">
<Button @click="toggleCode" v-if="codeVisible">隱藏代碼</Button>
<Button @click="toggleCode" v-else>查看代碼</Button>
</div>
<!-- 渲染代碼 -->
<div :class="'demo-code' + [codeVisible ? ' code-show ' : ' code-hidden ']">
<pre class="language-html" v-html="html" />
</div>
</div>
</template>
<script lang="ts">
import Button from "../lib/Button.vue";
import "prismjs";
import "prismjs/themes/prism.css";
import { computed, ref } from "vue";
const Prism = (window as any).Prism;
export default {
components: {
Button,
},
props: {
component: Object,
},
setup(props) {
const html = computed(() => {
//代碼高亮
return Prism.highlight(
props.component.__sourceCode,
Prism.languages.html,
"html"
);
});
const toggleCode = () => (codeVisible.value = !codeVisible.value);
const codeVisible = ref(false);
return {
Prism,
html,
codeVisible,
toggleCode,
};
},
};
</script>
成果展示
kaite-ui官網頁面：kaite-ui官網頁面
github開源地址：github開源地址
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249918.html
標籤：其他