Web コンポーネントとともにマニフェストを配布する必要があります

コンポーネントに加えて、カスタム要素マニフェストは、ライブラリに含めることができる最も重要なものです。

カスタム要素マニフェスト (CEM) とは何ですか?

カスタム要素マニフェストは、属性、プロパティ、メソッド、イベント、スロット、CSS パーツ、CSS 変数などのカスタム要素/Web コンポーネントに関するメタデータを文書化するために設計されたスキーマです。コンポーネントに関するすべての情報を取得し、プロジェクト内の単一の json ファイルにシリアル化します。

なぜユーザーはそれを必要とするのでしょうか?

この標準化された文書化方法により、チームがコンポーネント ライブラリを使用および操作する方法に大きな可能性が広がります。開発者は、Adobe Spectrum の API ドキュメントなどのドキュメント作成の目的でこれを使用できます。

チームはフレームワーク、IDE 統合、Storybook などの他のツールにもこれらを使用できます。

これは、コンポーネントに同梱したい特定のタイプやフレームワーク統合を作成したい場合には便利ですが、ユーザーのニーズをすべて予測するのは困難です。あなたは Vue.js 環境で使用するコンポーネントを構築しているかもしれませんが、コンポーネントを React 環境で使用する必要がある別のチームが現れるかもしれません。 React ラッパーを構築して配布するのを待つのではなく、チームは CEM を使用して独自のラッパーをローカルで生成できます。

最近の例としては、Next.js アプリケーションで Shoelace を使用してチームの立ち上げと実行を支援していたときがありました。 Shoelace は React ラッパーを提供していますが、Next.js がサーバー側でそれらをレンダリングしようとしたときにエラーをスローしていました。幸いなことに、Shoelace は CEM を出荷しているので、それを使用して SSR セーフな新しいラッパーを生成することができました。

ここに例へのリンクがあります:

CEM はどのように作成しますか?

CEM を作成するためのツールはいくつかありますが (web-component-analyzer と Lit labs には実験用ツールがあります)、私がよく使うツールは Custom Elements Manifest Analyzer です。

これは、いくつかの理由から優れたオプションです。

• 複数のフレームワークをサポートしています
• 開発者がアナライザーの機能を拡張するための優れたプラグイン システムを備えています
• 使いやすいだけでなく、優れたドキュメントとコミュニティサポートも備えています

カスタム要素の採用を改善するために私が作成した利用可能なプラグインをいくつか紹介します:

• IDE 統合

  • VS コードの統合
  • JetBrains IDE 統合

• JS フレームワークの統合

  • リアクトラッパー
  • Vue.js の種類
  • Solid.js タイプ
  • 洗練されたタイプ
  • JSX タイプ

注: これらは、事前に生成された CEM 用の CEM Analyzer プラグインと機能を提供します。 CEM Analyzer を使用していない場合でも、心配する必要はありません。これらを引き続き利用できます。

結論

カスタム要素マニフェストは、カスタム要素コンポーネント ライブラリのユーザーの採用を促進するための優れたツールです。これを製品の一部として提供することで、カスタム要素を使用する際に消費者のニーズが確実に満たされるようにする手段を消費者に提供できます。

カスタム要素を作成するためのライブラリまたはフレームワークを選択するときは、特にコンポーネントが他のチームで使用される場合は、CEM を生成できるものを探すことをお勧めします。

以上がWeb コンポーネントとともにマニフェストを配布する必要がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。