Présentation de Mador

Mador est un runtime réactif de moins de 855 octets une fois minifié, distribué comme module ES natif. Il s’installe via npm ou directement depuis un CDN, par exemple :

import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js";
Le design vise les pages qui possèdent déjà du HTML et du JavaScript mais qui n’ont pas besoin d’un framework complet, de composants ou de virtual DOM.

Mécanisme de réactivité

La réactivité repose sur un tuple [r, w] retourné par mador(). La fonction r(selector, update, read) crée une liaison entre un sélecteur CSS et une fonction de mise à jour. read extrait les propriétés d’état utilisées, par exemple :

r(".counter", (el, count) => { el.textContent = `Count: ${count}`; }, state => state.count);
Le moteur observe les propriétés lues et ne réexécute update que lorsque ces propriétés changent. Les modifications d’état sont appliquées via w(callback), où le callback reçoit le même objet d’état et peut le muter :
w(state => { state.count++; });
Les écritures sont groupées, de sorte que plusieurs mutations dans le même appel w ne déclenchent qu’une seule passe de mise à jour.

Gestion du cycle de vie et performances

Chaque liaison est associée aux nœuds DOM correspondants. Lorsque le sélecteur ne trouve plus d’éléments – par exemple après une suppression du DOM – Mador libère automatiquement le runner réactif, évitant ainsi les fuites de mémoire. L’absence de cycle de vie de composant supprime la surcharge liée aux hooks ou aux méthodes de montage/démontage. Le suivi des dépendances se fait à l’aide d’un Proxy léger, ce qui explique la taille de 80 lignes de code source et le poids de 855 bytes minifié. Aucun build step n’est requis, ce qui simplifie le déploiement.

Limites et cas d’usage

Le modèle de Mador ne supporte pas les templates, les composants imbriqués ou le diffing du virtual DOM. Par conséquent, il convient aux interfaces simples où la logique de mise à jour est directement liée à des sélecteurs CSS statiques. Dans des applications complexes avec de nombreuses interactions ou un besoin de rendu différentiel, l’absence de mécanismes de gestion d’état avancés peut devenir un goulot d’étranglement. Le code étant sous licence MIT, les développeurs peuvent l’intégrer et le modifier librement, mais doivent accepter l’absence de garanties de maintenance officielle.