Show HN: Mador – わずか80行のProxy状態タプルで任意のDOMをリアクティブにする

mador.js DOMをリアクティブにする。それだけ。 Mador: は、フレームワークを必要としない、または望まない人のための非常に小さなリアクティブDOMランタイムです。 これはリアクティブな状態と、その状態を既存のDOMにバインドする方法を提供します。 MadorはネイティブESモジュールであり、npmから、またはCDNから直接使用できます。 import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js"; const [r, w] = mador({ count: 1, }); r( ".counter", (el, count) => { el.textContent = `Count: ${count}`; }, (state) => state.count, ); r( ".another-counter", (el, count) => { el.textContent = count * 3; }, (state) => state.count, ); w((state) => { state.count++; }); そして、それがほぼすべてです。 コンポーネント、テンプレート、仮想DOMはありません。 Madorは既存のDOMで動作します。 リアクティブバインディング バインディングは3つの要素で構成されます： r(selector, update, read); selectorは更新する要素を選択します。 updateは各要素とreadが返す値を受け取ります。 readはバインディングが依存する状態を選択します。 r( ".counter", (el, count) => { el.textContent = count * 2; }, (state) => state.count, ); Madorはバインディングによって読み取られたプロパティを追跡し、それらの依存関係が変更された場合にのみ再実行します。 状態 状態はwを通じて変更されます： w((state) => { state.count++; }); 書き込みはバッチ処理されるため、同じ書き込みで行われた複数の変更はまとめて処理されます。 DOMライフタイム 'バインディング'は、更新するDOMに関連付けられます。 一致する要素がなくなると、Madorは対応するリアクティブランナーを削除できます。 管理すべきコンポーネントライフタイムはありません。 なぜmador.jsなのか？ ページがフレームワークを必要としない場合があります。 すでにHTMLとJavaScriptがありますが、少しのリアクティビティが必要です。 Madorはそのために作られています。 サイズ Madorは意図的に小さく作られています。 ランタイムは現在、最小化されて約855バイトです。 使用方法 MadorはESモジュールとして配布されています。 import mador from "mador"; グローバルランタイムやビルドステップは必要ありません。 ライセンス MIT