參考《原來 TinyVue 組件庫跨框架（vue2、vue3、react、solid）是這樣實現的？》
這篇文章介紹了跨框架組件庫的必要性和操作實踐。看標題挺感興趣的，這裡做個速通，原文引用我會標註，默認是自己的理解和思考。
背景#
OpenTiny 是華為出的組件庫，包含 TinyNG TinyVue TinyEngine 等內容。
統一輸出一套組件庫的能力、API ，能夠在不同技術棧保持相通，可以增強用戶使用信心，增加開發效率，跨技術棧實現相同 UI 表現。再者，給自己的組件庫建立人設標籤，挖掘潛在的用戶。
當然難度肯定也是有的。需要去抽象邏輯，抹平不同方案的差異。
這是官方給的架構圖。圖畫得不是特別好哈哈，文章寫的也不夠好，但是 Talk is cheap, show me the code ，給了 GitHub 倉庫 demo。可以輔助理解。
文章提到了兩個技術或者思路，抽象如下：
- common 適配層
- renderless 無渲染邏輯層
比如同樣一個 tab 菜單或者 button 按鈕，可以分成 UI 表現和邏輯兩塊，UI 表現可以歸類到 common 適配層，有哪些輸入輸出可以歸類到邏輯層。
技術實現#
使用 pnpm + monorepo 實現組件庫管理。
技術實現思路：
準備環境#
創建 monorepo 環境
準備不同的 scripts，比如 vue3 vue2 react solid ，使用微前端無界實現管理
依賴處理#
某些依賴需要區分 vue2 vue3 所以使用 pnpm.packageExtensions 進行區分，頭一次見這種用法。
- 文章舉例如何同時兼容 react solid，首先是設定 react-button 和 solid-button
- 還需要創建
packages/components/{platform}/common文件夾。 - 很有趣的文章提到了 ahooks 依賴的目的是提供 react 的響應式能力對標 vue 的響應式數據，哈哈哈還真看到了 https://ahooks.gitee.io/zh-CN/hooks/use-reactive
- solid 本身就是 Signal 起家的，自帶響應式
- react 使用 ahooks 進行模擬響應式數據
- 模擬 vue 的 emit
- 模擬 vue 的 nextTick
文章進行舉例，如何編寫 react solid 的代碼，依次實現 emit useNextTick useSetup，其中 useSetup 中返回 render 方法的內容。
代碼忽略。
理解 renderless 邏輯#
這部分代碼可以區分成兩部分：
- 框架有關的入口函數
- 框架無關的純函數
文章寫的不夠清楚，讀了幾遍還是有些困惑，可能還得實際操作才理解。
舉例 button 組件，在不同的平台需要實現 click 事件、需要實現 timer 重複點擊禁用的事件。
比如 renderless 中 react/solid 如何編寫，同需要實現 renderless 方法，返回 state 需要引用的 handleClick timer 等方法。因為這裡是適配層，只關注定義通用的 state 和框架有關的方法。
在 index 中實現框架無關的邏輯。在這裡實現 handleClick 和 timer 相關邏輯。
對於 button 來說：
react.jssolid.js去實現狀態管理、實現 click timer 方法- 具體 click 和 timer 如何實現在
index.js通過框架無關的方式去實現
大致理解的邏輯如何實現，接下來是 UI 表現，這裡沒有黑科技，也是自己去實現 render 方法，只不過 react/vue 都支持 JSX，邏輯相近。
說到最後，還是放了一個 demo 實例，這樣就清楚多了
https://github.com/opentiny/cross-framework-component
舉例 packages/components/react ，這是 react 組件庫 demo 內容，可以看到 common/src/index.js 這個文件是用來模擬框架差異，定義 useSetup 的，在 solid vue2 vue3 裡也有
再看 src/button/src/pc.jsx 這裡是定義 button 組件 UI 表現的。
這兩個文件定義了 UI 部分，那邏輯部分如何處理呢，看下圖
renderless/src/button 內部是 button 組件的邏輯，通用的放入 index.js ，適配的放到 react.js 裡。
繼續舉例子，vue 中如何定義 button 組件呢，在 vue/button 和 vue/common 兩處內容裡定義。
剛才說到微前端，這是為了做 playground ，在一套頁面中展示不同的框架展示效果。
這裡對應 packages/home 目錄，這裡使用微前端 wujie 來完成不同頁面的嵌入。
展望#
這展示了一種組件設計的思路，抽象、抹平差異。
有機會做進一步的理解。