zag

Zagは、アクセシブルなUIコンポーネントを構築するための有限状態機械のJavaScriptライブラリである。その謳い文句は、各フレームワークでタブ、メニュー、モーダル、ツールチップなど一般的なコンポーネントパターンを別々に再実装することを避け、対話ロジックをフレームワーク非依存の方法で一度モデリングすることで回避することにある。 READMEで概説される核心アイデア： - 1回書けばどこでも使える：コンポーネントの対話はあらゆるフレームワークとは無関係にモデリングされ、React、Solid、Svelte、Vue用のアダプターが提供される。 - アクセシビリティへの注力：プロジェクトはキーボード対話、フォーカス管理、ARIAロールと属性などの詳細を処理すると述べている。 - ヘッドレス：機械APIは完全にスタイリングされていないと説明され、スタイリングソリューションの選択は開発者に委ねられる。 - 状態機械：実装はステートチャートのアイデアに基づいているが、READMEではSCXML仕様に従っていないことに言及している。 使用モデル：機械は@zag-js/dialogや@zag-js/tooltipのようにコンポーネントごとに別個のパッケージとして公開され、npmやyarnでインストールされる。@zag-js/react、@zag-js/vue、@zag-js/solid、@zag-js/svelteなどのフレームワークラッパーにより、アプリケーション内で機械を使用できる。READMEのReact例では、@zag-js/reactからのuseMachineをコンポーネントパッケージと組み合わせた後、connect(service, normalizeProps)を使用してプロップAPIを生成し、それをルートコンテナや各アイテムなどの要素に展開することを示している。 READMEで述べられている指針：機械とテストはWAI-ARIAオーサリングプラクティスに従ってモデリングされ、エンドツーエンドテストはすべてのコンポーネントに対して記述され、挙動がフレームワーク間で一貫するように保たれる。また、機械はspawnやネストされた状態などの複雑な機械概念を避け、軽量で単純であり続けることを意図している。 リポジトリと作業フローに関する備考： - READMEからドキュメントと変更履歴（zagjs.comおよびCHANGELOG.md）へのリンクがある。 - ビルドはesbuildとturborepoを使用し、パッケージ間で並行ビルドを実行してCJS、ESM、DTS出力を生成する。 - React（Next.js TypeScript）、Vue 3、Solid、Svelte用のスターター例が存在する。 - エンドツーエンドテストはPlaywrightを使用し、フレームワークごと（React、Vue、Solid）に実行される。 - 新しい機械パッケージまたは新しいユーティリティパッケージをスケルトン化するジェネレーターコマンドが提供されている。 - その他のコマンドにはテスト実行、リンティング、ビルド、ウェブサイト起動が含まれる。 READMEではさらに、Chakra UIのReactとVue実装間の重複コード、純粋なUIパターン、Material Components Web、Radix UI、XState、Vue.js、Lit、Sonnerなど、多数のインスピレーションを感謝している。貢献ガイドラインはGood First Issueラベル、バグやドキュメントのギャップに関するissue報告、機能リクエストを指している。このプロジェクトはMITライセンスの下で、Chakra Systems Inc.によって管理されている。