Mador - Make any DOM reactive with a tiny 80-line Proxy state tuple
Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
Madorは、わずか80行のProxyベースの状態タプルで、既存のDOMをリアクティブにする超軽量ランタイムです。フレームワークを必要としない人向けに設計されており、コンポーネントや仮想DOM、テンプレートは一切不要。セレクタと更新関数、依存する状態を指定するだけで、DOM要素にリアクティブなバインディングを追加できます。状態の書き込みはバッチ処理され、DOM要素が消えるとバインディングも自動的にクリーンアップされます。ランタイムはminify後わずか855バイトで、npmやCDNからESモジュールとして利用可能。ビルドステップ不要で、既存のHTMLやJavaScriptに簡単に統合できます。
「フレームワークが必要ない、あるいは使いたくない人のためのものです。既存のDOMにリアクティブな状態をバインドする手段を提供します。」
HNでの議論
33- moostee
可読性を重視した改良案を提案します...
```js
import mador from "mador";
const [read, write] = mador({ count: 1 });
read(".counter", ctx => ctx.el.textContent = ctx.count);
write(".increment", "click", ctx => ctx.count++);
write(ctx => ctx.count = 0);
```
## 読み取り
初期化時に読み取り関数を実行すると、依存関係が自動的に検出されます。
```js
read(".counter", ctx => ctx.el.textContent = `Count: ${ctx.count}`);
```
## 書き込み
即時:
```js
write(ctx => ctx.count++);
```
イベント駆動:
```js
write(".increment", "click", ctx => ctx.count++);
```
イベント書き込みでは `ctx.el` と `ctx.event` にアクセスできます。
- codedokode
構文が少し冗長に感じます。また、"read" や "write" という関数名は紛らわしいです。特に "read" 関数は値を読み取るためのものではないので。バインディングに単一の関数（例えば "bind"）を使うことはできないでしょうか？
let counter = proxy({ count: 0 });
bind('.counter', (el) => el.textContent = counter.count);
counter.count++; // DOM更新をキューに入れる
また、
> MadorはESモジュールとして配布されています。
これは、ディスクから開いたページでは使用できず、ユーザーがHTTPサーバーをセットアップする必要があることを意味します。それは時間がかかり、気が散ります。また、アプリをHTMLファイルとして配布することもできません。
- bedroom_jabroni
JSにはシグナルプリミティブのスタンドアロンでプラグアンドプレイな実装が多数あります。例えば、preact/signals、vueのリアクティビティなど、さらにはTC39の提案もあります。これは、異なる方法で差別化するため、それとも再発明するためのものなのでしょうか？
- afavour
パフォーマンスがどうなるのか興味があります。私の記憶の片隅には、Proxyはパフォーマンスに良くないという信念がありますが、それが正しいのかどうかはわかりません（あるいは以前はそうだったが今は違うのかもしれません）。
ただ、非常に賢いアイデアだと思います。気に入りました。
- abosalehworld
このミニマリストなアプローチが大好きです。大規模なフレームワークの重いオーバーヘッドなしにProxyを状態管理に使うのは本当にエレガントです。80行未満に抑えているのは印象的です。素晴らしい仕事です！