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 ist eine winzige reaktive DOM-Runtime, die nur 855 Bytes (minifiziert) groß ist. Sie richtet sich an Entwickler, die kein vollwertiges Framework benötigen, aber dennoch reaktiven State und die Bindung an vorhandenes DOM wünschen. Mit nur 80 Zeilen Proxy-basiertem State-Tupel können Sie bestehende HTML-Elemente reaktiv machen, ohne Komponenten, Templates oder virtuelles DOM. Die Bindungen werden automatisch aufgeräumt, wenn die DOM-Elemente entfernt werden – es gibt keinen Lebenszyklus zu verwalten. Mador ist als natives ES-Modul verfügbar und kann direkt über npm oder CDN genutzt werden. Perfekt für Webseiten, die nur ein wenig Reaktivität benötigen.
Mador ist für Menschen, die kein Framework brauchen oder wollen – es gibt reaktiven State und eine Möglichkeit, diesen an vorhandenes DOM zu binden.
- moostee
Vorgeschlagene Variante, optimiert für menschliche Lesbarkeit...
```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);
```
## Lesen
Abhängigkeiten werden automatisch erkannt, wenn die Lesefunktion beim Start ausgeführt wird.
```js
read(".counter", ctx => ctx.el.textContent = `Count: ${ctx.count}`);
```
## Schreiben
Sofort:
```js
write(ctx => ctx.count++);
```
Ereignisgesteuert:
```js
write(".increment", "click", ctx => ctx.count++);
```
Ereignisschreibvorgänge legen `ctx.el` und `ctx.event` offen.
- codedokode
Die Syntax ist mir etwas zu ausführlich. Und Funktionsnamen wie "read" und "write" sind auch verwirrend, da die "read"-Funktion nicht zum Lesen von Werten gedacht ist. Können wir nicht eine einzige Funktion für das Binden verwenden, etwa so (und sie "bind" nennen)?
let counter = proxy({ count: 0 });
bind('.counter', (el) => el.textContent = counter.count);
counter.count++; // Stellt DOM-Update in die Warteschlange
Außerdem:
> Mador wird als ES-Modul verteilt.
Das bedeutet, dass es nicht auf einer von der Festplatte geöffneten Seite verwendet werden kann, und der Benutzer einen HTTP-Server einrichten muss, was zeitaufwendig und ablenkend ist. Und man kann eine App nicht als HTML-Datei verteilen.
- bedroom_jabroni
Es gibt viele eigenständige Plug-and-Play-Implementierungen des Signal-Primitivs in JS. Einige zu nennen: preact/signals, vue reactivity usw., es gibt sogar einen TC39-Vorschlag für ein Sprachfeature. Soll das hier hervorstechen, indem es die Dinge anders macht, oder sie neu erfinden?
- afavour
Ich bin neugierig, wie die Leistung aussieht. In den Tiefen meiner Erinnerung schlummert der Glaube, dass Proxies nicht gut für die Leistung sind, aber ich habe keine Ahnung, ob das gut begründet ist (oder vielleicht einmal war, aber nicht mehr ist).
Es ist jedoch eine sehr kluge Idee, ich mag sie.
- abosalehworld
Ich liebe den minimalistischen Ansatz hier. Die Verwendung von Proxies für das State-Management ohne den schweren Overhead großer Frameworks ist wirklich elegant. Es unter 80 Zeilen zu halten, ist beeindruckend. Großartige Arbeit!