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 es un runtime DOM reactivo ultraligero, de solo 855 bytes minificados, diseñado para quienes no necesitan un framework completo. Con una API simple basada en tuplas de estado Proxy, permite vincular estado reactivo a elementos DOM existentes sin componentes, plantillas ni DOM virtual. Ideal para páginas que ya tienen HTML y JavaScript pero requieren un toque de reactividad. Se usa mediante un módulo ES nativo, sin paso de compilación, y se puede cargar desde npm o CDN. Su diseño minimalista y su enfoque en el DOM real lo convierten en una opción elegante para proyectos que buscan simplicidad y rendimiento.
Mador es para personas que no necesitan ni quieren un framework: te da estado reactivo y una forma de vincular ese estado al DOM existente.
- moostee
Variante propuesta optimizada para la legibilidad humana...
```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);
```
## Lectura
Las dependencias se detectan automáticamente cuando la función de lectura se ejecuta durante la iniciación.
```js
read(".counter", ctx => ctx.el.textContent = `Count: ${ctx.count}`);
```
## Escritura
Inmediata:
```js
write(ctx => ctx.count++);
```
Disparada por evento:
```js
write(".increment", "click", ctx => ctx.count++);
```
Las escrituras por evento exponen `ctx.el` y `ctx.event`.
- codedokode
La sintaxis me parece un poco demasiado verbosa. Y nombres de funciones como "read" y "write" también confunden, dado que la función "read" no está hecha para leer valores. ¿No podemos usar una sola función para el enlace, así (y llamarla "bind")?
let counter = proxy({ count: 0 });
bind('.counter', (el) => el.textContent = counter.count);
counter.count++; // Pone en cola la actualización del DOM
Además,
> Mador se distribuye como un módulo ES.
Esto significa que no se puede usar en una página abierta desde el disco, y el usuario necesita configurar un servidor HTTP, lo cual consume tiempo y distrae. Y no puedes distribuir una aplicación como un archivo HTML.
- bedroom_jabroni
Hay muchas implementaciones independientes de tipo plug-and-play del primitivo signal en JS. Por nombrar algunas: preact/signals, vue reactivity, etc., incluso hay una propuesta TC39 para una característica del lenguaje. ¿Esto pretende destacar haciendo las cosas de manera diferente o reinventarlas?
- afavour
Siento curiosidad por saber cómo es el rendimiento. En los recovecos de mi memoria está la creencia de que los proxies no son buenos para el rendimiento, pero no tengo idea de si eso está bien fundado (o quizás lo estuvo una vez pero ya no).
Es una idea muy inteligente, sin embargo, me gusta.
- abosalehworld
Me encanta el enfoque minimalista aquí. Usar Proxies para la gestión del estado sin la gran sobrecarga de los frameworks grandes es realmente elegante. Mantenerlo en menos de 80 líneas es impresionante. ¡Buen trabajo!