Mador - Reactive DOM in 80 lines
Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
Mador — это сверхлёгкая библиотека для реактивного программирования, которая добавляет реактивность к любому DOM без необходимости использовать фреймворк. С помощью всего 80 строк кода и размера около 855 байт в минифицированном виде, Mador позволяет связывать состояние с существующими элементами DOM, автоматически обновляя их при изменениях. Она идеально подходит для проектов, где не нужен полный фреймворк, но требуется немного реактивности. Mador работает как нативный ES-модуль, поддерживает батчинг изменений и автоматически очищает подписки при удалении элементов. Это простой и элегантный способ оживить ваши HTML-страницы без лишнего веса.
Mador создан для тех, кому не нужен фреймворк, но нужна реактивность — просто добавьте его к уже существующему DOM.
- 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);
```
## Read
Зависимости определяются автоматически при первом выполнении функции read.
```js
read(".counter", ctx => ctx.el.textContent = `Count: ${ctx.count}`);
```
## Write
Немедленно:
```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
Существует множество автономных реализаций примитива signal в JS, которые работают по принципу "подключи и используй". Назову лишь некоторые: preact/signals, реактивность Vue и т.д., есть даже предложение для TC39 о включении этой возможности в язык. Этот проект пытается выделиться, делая что-то иначе, или это изобретение велосипеда?
- afavour
Любопытно, как обстоят дела с производительностью. В глубине памяти у меня засела мысль, что Proxy плохо сказываются на производительности, но я понятия не имею, обосновано ли это (или, возможно, когда-то было обосновано, но уже не актуально).
Однако идея очень умная, мне нравится.
- abosalehworld
Мне нравится минималистичный подход. Использование Proxy для управления состоянием без тяжёлого бремени больших фреймворков — это действительно элегантно. Держать всё в пределах 80 строк — впечатляет. Отличная работа!