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 [read, write] = mador({
  count: 1,
});

read(
  ".counter",
  (el, count) => {
    el.textContent = `Count: ${count}`;
  },
  (state) => state.count,
);

read(
  ".another-counter",
  (el, count) => {
    el.textContent = count * 3;
  },
  (state) => state.count,
);

write((state) => {
  state.count++;
});

そして、基本的にはこれだけです。

コンポーネント、テンプレート、仮想DOMはありません。Madorは既存のDOMで動作します。

リアクティブバインディング

バインディングは3つの要素で構成されます。

read(selector, update, read);

selectorは更新する要素を選択します。

updateは各要素とreadによって返された値を受け取ります。

readはバインディングが依存する状態を選択します。

read(
  ".counter",
  (el, count) => {
    el.textContent = count * 2;
  },
  (state) => state.count,
);

Madorはバインディングによって読み取られたプロパティを追跡し、それらの依存関係が変更された場合にのみ再実行します。

状態

状態はwriteを通じて変更されます。

write((state) => {
  state.count++;
});

書き込みはバッチ処理されるため、同じwrite内で行われた複数の変更はまとめて処理されます。

DOMライフタイム

「バインディング」は、更新するDOMに関連付けられます。

対応する要素がなくなった場合、Madorは対応するリアクティブランナーを削除できます。

管理すべきコンポーネントライフサイクルはありません。

なぜmador.jsなのか？

ページによってはフレームワークを必要としない場合があります。

すでにHTMLとJavaScriptがあり、リアクティビティが少しだけ必要な場合です。

Madorはそのために作られています。

サイズ

Madorは意図的に小さく作られています。

ランタイムは現在、ミニファイ時で約855バイトです。

使用方法

MadorはESモジュールとして配布されています。

import mador from "mador";

グローバルランタイムやビルドステップは不要です。

ライセンス

MIT