7 ms·
It's not that weird of a presentation, just different ergonomics for the same problem. preact/signals-core is great, but since HTML elements have no way to sub
by kevinfiol 10d ago
It's not that weird of a presentation, just different ergonomics for the same problem.
preact/signals-core is great, but since HTML elements have no way to subscribe to signals, you have to handle that yourself:
import { signal, effect } from "@preact/signals-core";
const $ = (s) => document.querySelector(s);
const counter = signal(0);
effect(() => {
$('.counter').textContent = counter.value;
});
$('.increment').addEventListener('click', () => {
counter.value += 1;
});
vs mador:
import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js";
const $ = (s) => document.querySelector(s);
const [read, write] = mador({
count: 0,
});
read(".counter", (el, count) => {
el.textContent = count;
},
(state) => state.count,
);
$('.increment').addEventListener('click', () => {
write((state) => { state.count++; });
});
Anyways, I love projects like these that try to make working with the web easier with minimal tools.
- bosmarcel 10d agoGreat post/reply, thanks a lot
- bedroom_jabroni 10d agoI wasn't referring to the ergonomics - the weirdness was from the way it was worded like "Here's one trick Big Framework doesn't want YOU to know" as if React, Vue and such were gatekeeping their reactivity while they're actively maintaining and sharing standalone versions of it.
- kevinfiol 9d agoFair, although I'm aware of preact/signals-core, what are React/Vue's standalone reactive libraries?
- phatskat 9d agoYou're looking for `@vue/reactivity`[1] - looks like it provides ref, computed, watch, and some internals. Honestly, this seems pretty nifty. Most projects I'd do today would likely have more value in Vue as a whole, and it's nice to see these kinds of things exposed and standalone bits [1] https://github.com/vuejs/core/tree/main/packages/reactivity/src https://github.com/vuejs/core/tree/main/packages/reactivity/...
- kevinfiol 5d agoThis looks cool, but standalone usage doesn't seem to be documented anywhere. The README for the above package says "For full exposed APIs, see src/index.ts." So while Vue is not gatekeeping their reactive primitive library, they aren't exactly advertising it like Preact in a way that the average library author (like Mador's author) might even be aware of it. Also as someone who has built React applications for more than 7+ years, I'm also still not sure what React's reactive primitive package is. Googling or asking ChatGPT has turned up nothing.