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 is a minimal reactive DOM runtime that brings reactivity to existing HTML without requiring a framework. It uses a tiny 80-line Proxy-based state tuple to track dependencies and automatically update bound elements. With no components, templates, or virtual DOM, Mador is perfect for projects that need a little reactivity without the overhead. The runtime is just 855 bytes minified and can be used via npm or CDN, making it incredibly lightweight and easy to integrate.
Mador is for people who don't need or want a framework. It gives you reactive state and a way to bind that state to existing DOM.
- moostee
Proposed variant optimised for human readaiblity...
```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`.
- codedokode
The syntax looks a bit too verbose for me. And function names like "read" and "write" are confusing too, given that "read" function isn't made for reading values. Cannot we use a single function for binding, like this (and name it "bind")?
let counter = proxy({ count: 0 });
bind('.counter', (el) => el.textContent = counter.count);
counter.count++; // Queues DOM update
Also,
> 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.
- bedroom_jabroni
There are many standalone plug-n-play implementations of the signal primitive in JS. To name a few: preact/signals, vue reactivity, etc, there's even a TC39 proposal for a lang feature. Is this meant to stand out by doing things differently or reinvent them?
- afavour
I’m curious to know what performance looks like. In the recesses of my memory is the belief that proxies are not good for performance but I have no idea if that’s well founded (or maybe once was but isn’t any more).
It’s a very smart idea though, I like it.
- abosalehworld
I love the minimalist approach here. Using Proxies for state management without the heavy overhead of large frameworks is really elegant. Keeping it under 80 lines is impressive. Great work!