本文由 TinyVue 組件庫核心成員鄭志超分享，首先分享了實現(xiàn)跨框架組件庫的必要性，同時通過演示Demo和實際操作向我們介紹了如何實現(xiàn)一個跨框架的組件庫。

前言

前端組件庫跨框架是什么？

前端組件庫跨框架是指在不同的前端框架（如 React、Vue、Solid 等）之間共享和復(fù)用組件的能力。這種能力可以讓開發(fā)者在不同的項目中使用同一套組件庫，從而提高開發(fā)效率和代碼復(fù)用性。

為什么需要做前端組件庫跨框架？

首先，不同的前端框架有不同的語法和 API，如果每個框架都要寫一套組件庫，那么開發(fā)成本和維護成本都會很高。其次，跨框架的組件庫可以讓開發(fā)者更加靈活地選擇框架，而不必?fù)?dān)心組件庫的兼容性問題。 而 TinyVue 組件庫在實現(xiàn)跨框架之前也經(jīng)歷了三個階段。

第一個階段：

2019年初，當(dāng)時 Vue 3.0 還未發(fā)布，TinyVue創(chuàng)始團隊?率先使用了 @vue/composition-api 和 renderless 無渲染函數(shù)隔離模板、樣式和邏輯代碼；經(jīng)過兩年的發(fā)展，支持的項目達(dá)到了800+，同時因為組件功能的豐富，代碼量也達(dá)到了20w+。

第二個階段：

2021年初，當(dāng)時 Vue 3.0 已經(jīng)發(fā)展了半年有余，各個方面已經(jīng)逐步完善，TinyVue?支持的項目由 Vue2.0 切換 Vue3.0 的意愿日漸強烈；但是又苦于沒有支持 Vue 3.0 的組件庫； 于是 TinyVue 基于@vue/composition-api 和 renderless的架構(gòu)的巨大優(yōu)勢體現(xiàn)了出來，在短短兩個月通過適配層 vue-common 將 20w+ 行代碼全部適配了 Vue3.0， 極大的減少了開發(fā)成本。2021年10月 TinyVue 組件庫實現(xiàn)了一套代碼同時支持 Vue2.0 和 Vue3.0 。

第三個階段：

2023年6月，TinyVue 團隊需要和開源的 openInula（完全兼容 React ）框架合作共同開發(fā) Inula 組件庫，并且通過中科院軟件所的開源之夏活動與開發(fā)者共建?OpenTiny React 組件庫。在此過程中，充分利用 TinyVue 的模板與邏輯分離的架構(gòu)，完成了開發(fā)可以適配 React 的 common 適配層，并已完成 4 個 React 組件的開發(fā)，并且完全復(fù)用了 renderless 無渲染層的邏輯。

為了更好的理解，可以參考以下 TinyVue 組件庫的架構(gòu)圖：

通過前端組件庫跨框架，可以達(dá)到以下效果：

1. 提高開發(fā)效率和代碼復(fù)用性，減少重復(fù)開發(fā)的工作量。

2. 統(tǒng)一 UI 風(fēng)格和交互體驗，提高產(chǎn)品的一致性和可用性。

3. 支持多種前端框架，讓開發(fā)者更加靈活地選擇框架。

4. 降低維護成本，減少代碼冗余和重復(fù)的工作。

總之，前端組件庫跨框架可以幫助開發(fā)者更加高效地開發(fā)和維護前端應(yīng)用，提高產(chǎn)品的質(zhì)量和用戶體驗。

如何開發(fā)

要實現(xiàn)前端組件庫跨框架，需要使用一些技術(shù)手段。本文將要演示如何通過 common 適配層和 renderless 無渲染邏輯層實現(xiàn)跨框架組件庫。

溫馨提示：?本文涉及到的代碼較多，所以無法將所有代碼都羅列出來，因此演示流程主要以分析思路為主，如果想要運行完整流程建議下載演示 Demo 查看源碼和展示效果（文章最后會介紹如何下載和運行）

因為 TinyVue 組件庫已具備同時兼容 Vue2 和 Vue3 的能力，所以本文以 React 和 Solid 為例，介紹如何開發(fā)一套復(fù)用現(xiàn)有 TinyVue 代碼邏輯的跨框架組件庫

首先開發(fā) React 和 Solid 跨框架組件庫主要分為幾個步驟：

1、使用 pnpm 管理 monorepo 工程的組件庫，可以更好的管理本地和線上依賴包。

2、創(chuàng)建 React 框架和 Solid 框架的 common 適配層，目的是抹平不同框架之間的差異，并對接 renderless 無渲染邏輯層。

3、實現(xiàn)無渲染邏輯層 renderless，目的是抽離與框架和渲染無關(guān)的業(yè)務(wù)邏輯，然后復(fù)用這部分邏輯。

4、創(chuàng)建模板層去對接 common 適配層和 renderless 無渲染層，從而實現(xiàn)了框架、模板和業(yè)務(wù)邏輯的分離。

下面演示下如何開發(fā)一個跨框架的組件庫

一、使用 pnpm 管理 monorepo 工程的組件庫

1、創(chuàng)建 monorepo 工程文件夾，使用 gitbash 輸入以下命令（以下所有命令均在 gitbase 環(huán)境下運行）

2、在根目錄下創(chuàng)建 package.json，并修改其內(nèi)容

package.json 內(nèi)容主要分為兩塊：

（1）定義包管理工具和一些啟動工程的腳本：

• "preinstall": "npx only-allow pnpm"? -- 本項目只允許使用 pnpm 管理依賴

• "dev": "node setup.js" -- 啟動無界微前端的主工程和所有子工程

• "dev:home": "pnpm -C packages/home dev" -- 啟動無界微前端的主工程（Vue3 框架）

• "dev:react": "pnpm -C packages/react dev" -- 啟動無界微前端的 React 子工程

• "dev:solid": "pnpm -C packages/solid dev" -- 啟動無界微前端的 Solid 子工程

• "dev:vue2": "pnpm -C packages/vue2 dev" -- 啟動無界微前端的 Vue2 子工程

• "dev:vue3": "pnpm -C packages/vue3 dev" -- 啟動無界微前端的 Vue3 子工程

（2）解決一些 pnpm 針對 Vue 不同版本（Vue2、Vue3）的依賴沖突，packageExtensions 項可以讓 Vue2 相關(guān)依賴可以找到正確的 Vue 版本，從而可以正常加載 Vue2 和 Vue3 的組件。

package.json 內(nèi)容如下：

3、在根目錄創(chuàng)建 pnpm-workspace.yaml 文件并配置如下：

4、創(chuàng)建組件源代碼目錄

二、?創(chuàng)建 React 框架和 Solid 框架的 common 適配層

將整個工程創(chuàng)建好之后，我們需要抹平不同框架之間的差異，這樣才能實現(xiàn)一套代碼能夠去支持不同的框架，那如何來抹平不同框架之間的差異呢？這里出現(xiàn)一個重要概念--common 適配層?。它用來對接純函數(shù) renderless 無渲染邏輯層。

下面以 React 框架及 Solid 框架為例詳細(xì)介紹如何構(gòu)造兩個框架的 common 適配層（Vue 的原理可以類比）

1、在上文創(chuàng)建的 components 文件夾中創(chuàng)建 React 和 Solid 文件夾，并初始化 package.json

package.json 的內(nèi)容主要是把 dependencies 項中@opentiny/react-button 、@opentiny/react-countdown、@opentiny/solid-button、@opentiny/solid-countdown 4個依賴指向本地組件包，這是 pnpm 提供的本地包加載方式。

具體的配置如下所示：

@opentiny/react

@opentiny/solid

2、在上文創(chuàng)建的 React 和 Solid 文件夾中創(chuàng)建適配層文件夾 common 并初始化package.json（路徑：packages/components/react/common、packages/components/solid/common）

package.json 內(nèi)容中的一些重要依賴項及其說明：

• "@opentiny/renderless": "workspace:~" -- ?使用本地的 renderless 包

• "@opentiny/theme": "workspace:~" -- 使用本地的 theme 主題包

• "classnames": "^2.3.2" -- 處理 html 標(biāo)簽的 class 類名

• "ahooks": "3.7.8" -- 提供 React 響應(yīng)式數(shù)據(jù)能力，對齊 Vue 的響應(yīng)式數(shù)據(jù)

package.json 具體內(nèi)容如下所示：

@opentiny/react-comon

@opentiny/solid-common

3、在上文創(chuàng)建的 common 文件夾中繼續(xù)創(chuàng)建適配層邏輯頁面（路徑：packages/components/react/common、packages/components/solid/common）

React?具體的目錄結(jié)構(gòu)如下：

Solid 具體的目錄結(jié)構(gòu)如下：

4、最后把 props 和無渲染邏輯層 renderless 導(dǎo)出的 api 進(jìn)行適配 React 的處理，以下這兩段代碼主要是分別從三個方面來處理這個問題。

• 抹平響應(yīng)式數(shù)據(jù)：?為 React（Solid 本身具有響應(yīng)式能力）提供響應(yīng)式數(shù)據(jù)能力，從而可以復(fù)用 OpentinyVue 已經(jīng)寫好組件的 state 數(shù)據(jù)響應(yīng)能力，React 使用了 ahooks 去模擬了 Vue 的響應(yīng)式數(shù)據(jù)，并且可以在響應(yīng)式數(shù)據(jù)變化的時候調(diào)用 React 的setState方法，從而觸發(fā)了視圖的渲染；而 Solid 只需要使用 createSignal 方法去創(chuàng)建響應(yīng)式對象，并且在模板中使用 state().xxx去使用 Solid 自帶的響應(yīng)式能力，從而觸發(fā)視圖渲染。

• 抹平 Vue 的 nextTick：?使用微任務(wù) queueMicrotask 模擬 Vue 框架的 nextTick。

• 抹平事件觸發(fā)機制：?使用自定義方法模擬 Vue 框架的事件觸發(fā)機制 emit。

其中 React 具體代碼如下所示（路徑：packages/components/react/common/src/index.js）：

其中 Solid?具體代碼如下所示（路徑：packages/components/solid/common/src/index.js)：

三、無渲染邏輯層 renderless 實現(xiàn)

接下來介紹下實現(xiàn)跨端組件庫的第二個重要概念：renderless 無渲染層?-- 這塊分為兩部分：一個是與框架相關(guān)的入口函數(shù)文件（react.js、vue.js、solid.js）另外一個是與框架無關(guān)的純函數(shù)文件（index.js）。

1、在 components 文件夾中創(chuàng)建 renderless 文件夾，并初始化 package.json

package.json 文件內(nèi)容如下所示（其中 exports 項表示所有加載的資源都會從 randerless 目錄下的 src 文件夾中按文件路徑尋找）：

2、以 React 和 Solid 為例，采用無渲染邏輯的復(fù)用方式

首先看下 renderless 需要創(chuàng)建的文件夾和文件（注意：這里只是羅列了 renderless 文件夾中的文件結(jié)構(gòu)，外部文件結(jié)構(gòu)省略了）：

react.js?和solid.js 是@opentiny/react-button 組件和?@opentiny/solid-button組件的?renderless 入口文件，它負(fù)責(zé)去對接 React 和 Solid 的適配層@opentiny/react-common，主要功能是去調(diào)用一些 React 和 Solid 相關(guān)的 api，比如生命周期函數(shù)等，在 renderless 函數(shù)最后返回了 state 響應(yīng)式對象和一些方法，提供給 React 和 Solid 的函數(shù)式組件使用。

文件主要有兩個需要注意的點：

（1）使用 common 適配層傳遞過來的 useReactive 函數(shù)返回基于 React?和 Solid 的響應(yīng)式數(shù)據(jù)，對齊 Vue 的響應(yīng)式數(shù)據(jù)

（2）使用雙層函數(shù)（閉包）保存了一些組件狀態(tài)，方便用戶和模板層調(diào)用方法。

react.js 具體代碼內(nèi)容如下所示：

solid.js具體代碼內(nèi)容如下所示：

index.js 是和 React、Solid、Vue 三大框架無關(guān)只和業(yè)務(wù)邏輯有關(guān)的公共邏輯層，因此這部分代碼是和框架無關(guān)的純業(yè)務(wù)邏輯代碼。

index.js 邏輯層一般都是雙層函數(shù)（閉包：函數(shù)返回函數(shù)），第一層函數(shù)保存了一些組件狀態(tài)，第二層函數(shù)可以很方便的讓用戶和模板層調(diào)用。

這里介紹下 button 組件的純邏輯層的兩個函數(shù)：

（1）handleClick：當(dāng)點擊按鈕時會觸發(fā) handleClick 內(nèi)層函數(shù)，如果用戶傳遞的重置時間大于零，則在點擊之后會設(shè)置按鈕的 disabled 屬性為 true 禁用按鈕，并在重置時間后解除按鈕禁用，然后打印出當(dāng)前邏輯觸發(fā)是來自哪個框架，并向外拋出 click 點擊事件；

（2）clearTimer：調(diào)用 clearTimer 方法可以快速清除組件的 timer 定時器。

具體內(nèi)容如下所示：

四、創(chuàng)建模板層去對接 common 適配層和 renderless 無渲染層

由于需要創(chuàng)建的文件太多，為了方便操作，可以直接參考我們提供的示例源碼工程查看?（https://github.com/opentiny/cross-framework-component/tree/master/packages/components/react/src?）

React 具體的目錄結(jié)構(gòu)如下：

（https://github.com/opentiny/cross-framework-component/tree/master/packages/components/solid/src）

Solid 具體的目錄結(jié)構(gòu)如下：

這里創(chuàng)建的模板層和一般的 React 和 Solid 函數(shù)式組件類似，都是接受使用組件的用戶傳遞過來的屬性，并返回需要渲染的 jsx 模板。不一樣的地方是：jsx 綁定的數(shù)據(jù)是通過適配層和 renderless 無渲染層處理后的數(shù)據(jù)，并且數(shù)據(jù)發(fā)生變化的時候會觸發(fā)視圖渲染，比如下面代碼中 useSetup 方法。

pc.jsx 的具體實現(xiàn)如下所示（React?路徑：packages/components/react/src/button/src/pc.jsx）：

(Solid?路徑：packages/components/solid/src/button/src/pc.jsx)：

到此大體上描述了跨框架組件庫的實現(xiàn)原理。

Demo演示

如果想快速查看效果和源碼，可以克隆我們提供的跨框架示例 Demo，具體操作步驟如下：

1、使用如下命令把演示 Demo 克隆到本地：

2、使用 pnpm 下載依賴：

3、工程目錄結(jié)構(gòu)分析

整個工程是基于 pnpm 搭建的多包 monorepo 工程，演示環(huán)境為無界微前端環(huán)境，整體工程的目錄架構(gòu)如下所示（本文主要介紹 packages/components 文件夾）：

4、啟動本地的無界微前端本地服務(wù)

啟動后會總共啟動5個工程，1個主工程和4個子工程，其中4個子工程分別引入了不同框架的組件庫，但是不同框架的組件庫復(fù)用了同一份交互邏輯代碼和樣式文件。

效果如下圖所示：

如何證明 Vue2、Vue3、React、Solid 都共用了一套邏輯了呢？

我們可以點擊按鈕然后會在控制臺打印，當(dāng)前復(fù)用邏輯層是來自哪個框架的：

可以看到不同框架代碼都已觸發(fā)。

感興趣的朋友可以持續(xù)關(guān)注我們TinyVue組件庫。也歡迎給 TinyVue 開源項目點個 Star ??支持下：https://github.com/opentiny/tiny-vue

關(guān)于 OpenTiny

OpenTiny?是一套企業(yè)級 Web 前端開發(fā)解決方案，提供跨端、跨框架、跨版本的?TinyVue 組件庫，包含基于 Angular+TypeScript 的?TinyNG 組件庫，擁有靈活擴展的低代碼引擎?TinyEngine，具備主題配置系統(tǒng)TinyTheme?/ 中后臺模板?TinyPro/?TinyCLI?命令行等豐富的效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。

歡迎加入?OpenTiny 開源社區(qū)。添加微信小助手：opentiny-official 一起參與交流前端技術(shù)～更多視頻內(nèi)容也可關(guān)注B站、抖音、小紅書、視頻號

OpenTiny?也在持續(xù)招募貢獻(xiàn)者，歡迎一起共建

OpenTiny 官網(wǎng)：https://opentiny.design/

OpenTiny 代碼倉庫：https://github.com/opentiny/

TinyVue 源碼：https://github.com/opentiny/tiny-vue

TinyEngine 源碼：?https://github.com/opentiny/tiny-engine

歡迎進(jìn)入代碼倉庫 Star??TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以進(jìn)入代碼倉庫，找到?good first issue標(biāo)簽，一起參與開源貢獻(xiàn)~