Comment by bedroom_jabroni

14 hours ago

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?

The TC39 proposal seems pretty much dead :(; it doesn't look like much is happening. If I understand it correctly, it's really just about agreeing on a protocol, and it's ultimately up to frameworks to implement it, there isn't anything (yet?) that can run directly in JavaScript.

Honestly, mostly for the fun of building it and seeing how small and simple I could make it. While big solutions like Preact or Vue are great, sometimes you just want a tiny zero-dependency script without the overhead. And it turned out to be quite nice as I may say so

  • preact/signals-core has 0 dependencies, your project could also benefit from mentioning what primitive is being implemented for the reader's information. The size difference is negligible. The readme creates a false dilemma where there's either Mador or "having to use a framework" but it hasn't been the case for ages - as I mentioned above the major frameworks have decoupled versions of their reactivity available. This makes the other reply where "the frontend community deserves tools like this" sound weird because it ignores the great tools that have been available for a while.

    Good learning experience but a very weird presentation.

    • 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.

      2 replies →

    • That's a fair distinction, but I think they solve different problems. Signals are great, but they usually require managing primitives individually and don't map directly to deep, nested JS objects the same way. Mador is specifically about dropping in a plain, nested object and working with it like normal JS without .value "boilerplate". Appreciate the feedback on the README phrasing though—I'll tweak it so it doesn't sound like a false dilemma!

      1 reply →