mador.js: Maak elke DOM reactief

Mador is een native ES-module en kan worden gebruikt via npm of direct vanuit een CDN.

import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js";

const [read, write] = mador({
  count: 1,
});

read(
  ".counter",
  (el, count) => {
    el.textContent = `Count: ${count}`;
  },
  (state) => state.count,
);

read(
  ".another-counter",
  (el, count) => {
    el.textContent = count * 3;
  },
  (state) => state.count,
);

write((state) => {
  state.count++;
});

Dat is in principe alles. Er zijn geen componenten, templates of een virtuele DOM. Mador werkt met de DOM die je al hebt.

Reactieve koppelingen

Een koppeling (binding) bestaat uit drie delen: read(selector, update, read);

• selector: selecteert de elementen die bijgewerkt moeten worden.
• update: ontvangt elk element en de waarde die door read wordt teruggegeven.
• read: selecteert de state waar de koppeling van afhankelijk is.

Voorbeeld:

read(
  ".counter",
  (el, count) => {
    el.textContent = count * 2;
  },
  (state) => state.count,
);

Mador houdt bij welke eigenschappen door de koppeling worden gelezen en voert deze alleen opnieuw uit wanneer die afhankelijkheden veranderen.

State

State wordt gewijzigd via write:

write((state) => {
  state.count++;
});

Schrijfacties worden gebundeld (batched), zodat meerdere wijzigingen die in dezelfde write worden gemaakt, samen worden verwerkt.

Levensduur van de DOM

'Koppelingen' zijn geassocieerd met de DOM die ze bijwerken. Wanneer de overeenkomstige elementen verdwijnen, kan Mador de bijbehorende reactieve runner verwijderen. Er is geen component-lifecycle die beheerd hoeft te worden.

Waarom mador.js?

Soms heeft een pagina geen framework nodig. De pagina beschikt al over HTML & Javascript, maar heeft enkel een beetje reactiviteit nodig. Mador is gemaakt om precies dat te doen.

Grootte

Mador is bewust klein. De runtime is momenteel ongeveer 855 bytes in geminificeerde vorm.

Gebruik

Mador wordt gedistribueerd als een ES-module:

import mador from "mador";

Er is geen globale runtime en geen build-stap vereist.

Licentie

MIT