参考《原来 TinyVue コンポーネントライブラリはこれを使って vue2、vue3、react、solid をサポートしているのか？》
この記事では、クロスフレームワークのコンポーネントライブラリの必要性と操作の実践について説明しています。タイトルが興味深いので、ここでは概要を紹介し、引用部分は注釈を付けます。デフォルトでは、自分自身の理解と考えを示します。
背景#
OpenTiny は、Huawei が提供するコンポーネントライブラリで、TinyNG TinyVue TinyEngineなどが含まれています。
異なる技術スタックで統一されたコンポーネントライブラリの機能と API を提供し、ユーザーの使用信頼性を高め、開発効率を向上させ、異なる技術スタックで同じ UI 表現を実現することができます。また、自身のコンポーネントライブラリに対して人物設定のタグを作成し、潜在的なユーザーを引き出すこともできます。
もちろん、難易度もあるでしょう。異なるアプローチの差異を抽象化する必要があります。
これは公式のアーキテクチャ図です。絵はあまり上手く描かれていないし、記事の内容も十分ではありませんが、Talk is cheap, show me the code です。GitHub のリポジトリデモが提供されています。理解を助けることができます。
記事では、次の 2 つの技術またはアイデアが言及されています。
- 共通のアダプターレイヤー
- レンダーレスなロジックレイヤー
たとえば、タブメニューやボタンなどの UI コンポーネントは、UI の表現とロジックの 2 つの部分に分けることができます。UI の表現は共通のアダプターレイヤーに分類され、ロジックの部分はロジックレイヤーに分類されます。
技術の実装#
pnpm + monorepoを使用してコンポーネントライブラリの管理を実現します。
技術の実装アイデア：
環境の準備#
monorepo環境を作成します。
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 メソッドの内容を返します。
コードは省略します。
レンダーレスなロジックの理解#
この部分のコードは 2 つの部分に分けることができます：
- フレームワークに関連するエントリ関数
- フレームワークに依存しない純粋な関数
記事は十分に明確に書かれていないので、何度か読んでも少し混乱します。実際の操作が必要かもしれません。
ボタンコンポーネントの例を挙げると、異なるプラットフォームでクリックイベントを実装し、タイマーによる連続クリックの無効化イベントを実装する必要があります。
たとえば、react/solid の renderless の実装方法はどのようになりますか？renderlessメソッドを実装し、stateで参照する必要のあるhandleClick timerなどのメソッドを返します。ここでは、アダプターレイヤーなので、共通の state とフレームワークに関連するメソッドに焦点を当てます。
indexでフレームワークに依存しないロジックを実装します。ここで、handleClickとtimerに関連するロジックを実装します。
ボタンに関しては：
react.jssolid.jsで状態管理とクリックタイマーメソッドを実装します。- 具体的なクリックとタイマーの実装は、
index.jsでフレームワークに依存しない方法で実装します。
大まかな理解のロジックの実装方法は次のとおりです。次は UI の表現ですが、ここには特別なテクノロジーはありません。自分で render メソッドを実装するだけですが、react/vue はどちらも jsx をサポートしているため、ロジックは似ています。
最後に、デモの例が提供されています。これにより、より明確になります。
https://github.com/opentiny/cross-framework-component
例として、packages/components/reactは、react コンポーネントライブラリのデモコンテンツであり、common/src/index.jsファイルはuseSetupを模倣するために使用されます。solid vue2 vue3 にもあります。
次に、src/button/src/pc.jsxは、button コンポーネントの UI 表現を定義しています。
これらの 2 つのファイルは UI の部分を定義していますが、ロジックの部分はどのように処理されますか？次の図を見てください。
renderless/src/buttonは、button コンポーネントのロジックを内部に持っており、共通のものはindex.jsに配置し、アダプターに関連するものはreact.jsに配置します。
さらに例を挙げると、vue で button コンポーネントをどのように定義しますか？vue/buttonとvue/commonの 2 つの場所で定義します。
先ほどマイクロフロントエンドについて話しましたが、これはプレイグラウンドを作成するためのもので、1 つのページで異なるフレームワークの表示効果を表示します。
これに対応するのは、packages/homeディレクトリで、異なるページの埋め込みを実現するためにマイクロフロントエンドの wujie を使用しています。
展望#
これはコンポーネント設計のアプローチを示しており、抽象化と差異の抹消を行っています。
さらなる理解の機会があれば、さらに進めていきたいと思います。