参考《原来 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.js solid.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 来完成不同页面的嵌入。

展望#

这展示了一种组件设计的思路，抽象、抹平差异。

有机会做进一步的理解。