Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple

    let counter = proxy({ count: 0 });
    bind('.counter', (el) => el.textContent = counter.count);
    counter.count++; // Queues DOM update

> Mador is distributed as an ES module.

This means it cannot be used on a page opened from disk, and the user needs to set up a HTTP server which is time-consuming and distracting. And you cannot distribute an app as as HTML file.

```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); ```

## Read

Dependencies are detected automatically when the read function is run during initiation.

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

## Write

Immediate:

```js write(ctx => ctx.count++); ```

Event-triggered:

```js write(".increment", "click", ctx => ctx.count++); ```

Event writes expose `ctx.el` and `ctx.event`.

It’s a very smart idea though, I like it.

Unsure why this comment from the author was flagged/dead but it certainly doesn’t seem to run afoul of HN guidelines.