GitHub – marsbos/mador: DOM をリアクティブにする


DOM をリアクティブにします。何か別のもの。

回路：

  • 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(
  ".counter",
  (el, count) => {
    el.textContent = count * 2;
  },
  (state) => state.count,
);

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

それによって状況が変わる w:

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

彼らは書きます 集めたしたがって、1 つのエントリで行われた複数の変更は一緒に処理されます。

「ブロック」は DOM の更新に関連付けられています。

一致する要素がなくなったら、マドールは一致するジェット ランナーを削除できます。

管理するコンポーネントのライフサイクルがありません。

ページにフレームが必要ない場合もあります。

すでに HTML と JavaScript が含まれていますが、少しリファクタリングが必要です。

回路はこのために設計されています。

軌道は意図的に小さくしています。

勤務時間が近づいてきました 855 bytes 削減されます。

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

import mador from "mador";

グローバル ランタイムやビルド手順は必要ありません。

マサチューセッツ工科大学



Source link