はじめに

Web Component Base (WCB) は、リアクティブなカスタム要素を作成するための、依存関係ゼロの小さなJSベースクラスです。

カスタム要素のためにWebComponentクラスを拡張するとき、定義する必要があるのはtemplateとpropertiesだけです。観測対象のpropertyの値が変化すると、コンポーネントのUIは自動的にレンダリングされます。

クイックスタート

前提条件: Node.js（現行のLTS。npmを含みます）。

wcbを試す最も速い方法は、新しいコンポーネントをスキャフォールドすることです。

npm create wcb@latest
# または直接名前を付ける場合: npm create wcb@latest my-button

これにより、すぐに開発を始められる、公開可能なカスタム要素がセットアップされます。

TypeScript製のスターターコンポーネント: static props の慣習を使用します。クラス名・タグ名・ファイル名はプロジェクト名から導出されるため（my-button → MyButton / <my-button>）、名前を変え忘れるTODOはありません
Viteセットアップ: デモページ付きの開発サーバーと、ESM + UMDバンドルおよび .d.ts 型を出力するライブラリビルド（npm run build:lib）。web-component-base はpeerDependencyとして扱われます
custom-elements.json の生成: wcbのプラグインを設定済みのCEMアナライザー、npm run analyze スクリプト、package.json の customElements フィールド、そして公開パッケージにマニフェストを同梱するための prepack フック

デモページを実行して、スターターコンポーネントがレンダリングされる様子を確認しましょう。

cd my-button
npm install
npm run dev

Viteがローカルの URL を表示します。それを開くと、デモページに <my-button> がレンダリングされているのが確認できます。src/MyButton.ts を編集すると、保存するたびにページが更新されます。

マニフェストの詳細や、StorybookやコードエディタでのCEMマニフェストの使い方については、CEMアナライザープラグインガイドを参照してください。

GitHubから始めたい方へ。ayo-run/web-component テンプレートリポジトリも「Use this template」から同じ目的で利用できます。

新しいプロジェクトをスキャフォールドするのではなく、既存のプロジェクトにwcbを追加する場合は、npmからインストールします。

npm i web-component-base

このパッケージは標準的なECMAScript Modules（ESM）として提供されるため、バンドラーはもちろん、node_modules/web-component-base を指すimportマップでも動作します。

次に、ベースクラスをパッケージ名でインポートします。

import { WebComponent } from 'web-component-base'

最初のコンポーネントを定義するには、使い方に進んでください。

問題や要望がある場合は、GitHub issueまたはdiscussionを開いてください。SourceHutやメールからチケットを送ることもできます。