@erickxavier/no-js 1.8.1 → 1.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "The HTML-first reactive framework — build dynamic web apps with just HTML attributes, no JavaScript required",
   "main": "dist/cjs/no.js",
   "module": "dist/esm/no.js",

package/src/directives/binding.js

@@ -2,7 +2,7 @@
 //  DIRECTIVES: bind, bind-html, bind-*, model
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _watchExpr } from "../globals.js";
+import { _watchExpr, _onDispose } from "../globals.js";
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext, _sanitizeHtml } from "../dom.js";
 import { registerDirective } from "../registry.js";
@@ -46,10 +46,12 @@ registerDirective("bind-*", {
         el.tagName === "TEXTAREA" ||
         el.tagName === "SELECT")
     ) {
-      el.addEventListener("input", () => {
+      const inputHandler = () => {
         const val = el.type === "number" ? Number(el.value) : el.value;
         _execStatement(`${expr} = ${JSON.stringify(val)}`, ctx);
-      });
+      };
+      el.addEventListener("input", inputHandler);
+      _onDispose(() => el.removeEventListener("input", inputHandler));
     }
 
     function update() {
@@ -104,13 +106,15 @@ registerDirective("model", {
       tag === "SELECT" || type === "checkbox" || type === "radio"
         ? "change"
         : "input";
-    el.addEventListener(event, () => {
+    const domHandler = () => {
       let val;
       if (type === "checkbox") val = el.checked;
       else if (type === "number" || type === "range") val = Number(el.value);
       else val = el.value;
       _execStatement(`${expr} = __val`, ctx, { __val: val });
-    });
+    };
+    el.addEventListener(event, domHandler);
+    _onDispose(() => el.removeEventListener(event, domHandler));
 
     _watchExpr(expr, ctx, update);
     update();

package/src/directives/conditionals.js

@@ -5,7 +5,7 @@
 import { _watchExpr } from "../globals.js";
 import { evaluate } from "../evaluate.js";
 import { findContext, _clearDeclared, _cloneTemplate } from "../dom.js";
-import { registerDirective, processTree } from "../registry.js";
+import { registerDirective, processTree, _disposeChildren } from "../registry.js";
 import { _animateIn, _animateOut } from "../animations.js";
 
 registerDirective("if", {
@@ -36,6 +36,7 @@ registerDirective("if", {
     }
 
     function render(result) {
+      _disposeChildren(el);
       if (result) {
         if (thenId) {
           const clone = _cloneTemplate(thenId);
@@ -92,6 +93,7 @@ registerDirective("else-if", {
           prev.getAttribute("if") || prev.getAttribute("else-if");
         if (prevExpr) {
           if (evaluate(prevExpr, ctx)) {
+            _disposeChildren(el);
             el.innerHTML = "";
             el.style.display = "none";
             return;
@@ -106,10 +108,12 @@ registerDirective("else-if", {
         if (thenId) {
           const clone = _cloneTemplate(thenId);
           if (clone) {
+            _disposeChildren(el);
             el.innerHTML = "";
             el.appendChild(clone);
           }
         } else {
+          _disposeChildren(el);
           el.innerHTML = "";
           for (const child of originalChildren)
             el.appendChild(child.cloneNode(true));
@@ -117,6 +121,7 @@ registerDirective("else-if", {
         _clearDeclared(el);
         processTree(el);
       } else {
+        _disposeChildren(el);
         el.innerHTML = "";
       }
     }
@@ -142,6 +147,7 @@ registerDirective("else", {
           prev.getAttribute("if") || prev.getAttribute("else-if");
         if (prevExpr) {
           if (evaluate(prevExpr, ctx)) {
+            _disposeChildren(el);
             el.innerHTML = "";
             el.style.display = "none";
             return;
@@ -155,10 +161,12 @@ registerDirective("else", {
       if (thenId) {
         const clone = _cloneTemplate(thenId);
         if (clone) {
+          _disposeChildren(el);
           el.innerHTML = "";
           el.appendChild(clone);
         }
       } else {
+        _disposeChildren(el);
         el.innerHTML = "";
         for (const child of originalChildren)
           el.appendChild(child.cloneNode(true));
@@ -258,6 +266,7 @@ registerDirective("switch", {
             if (thenTpl) {
               const clone = _cloneTemplate(thenTpl);
               if (clone) {
+                _disposeChildren(child);
                 child.innerHTML = "";
                 child.appendChild(clone);
               }
@@ -272,6 +281,7 @@ registerDirective("switch", {
           if (!matched && thenTpl) {
             const clone = _cloneTemplate(thenTpl);
             if (clone) {
+              _disposeChildren(child);
               child.innerHTML = "";
               child.appendChild(clone);
             }

package/src/directives/dnd.js

@@ -5,7 +5,7 @@
 import { evaluate, _execStatement, resolve } from "../evaluate.js";
 import { findContext } from "../dom.js";
 import { createContext } from "../context.js";
-import { registerDirective, processTree } from "../registry.js";
+import { registerDirective, processTree, _disposeChildren } from "../registry.js";
 import { _onDispose, _warn } from "../globals.js";
 
 // ─── Module-scoped DnD coordination state ─────────────────────────────
@@ -414,7 +414,8 @@ registerDirective("drag", {
         if (disabled) el.removeAttribute("aria-grabbed");
         else el.setAttribute("aria-grabbed", "false");
       }
-      ctx.$watch(updateDisabled);
+      const unwatchDisabled = ctx.$watch(updateDisabled);
+      _onDispose(unwatchDisabled);
     }
 
     // Keyboard DnD support
@@ -724,6 +725,7 @@ registerDirective("drag-list", {
       const tpl = tplId ? document.getElementById(tplId) : null;
       if (!tpl) return;
 
+      _disposeChildren(el);
       el.innerHTML = "";
       const count = list.length;
 
@@ -1074,7 +1076,8 @@ registerDirective("drag-list", {
     });
 
     // ─── Reactive rendering ──────────────────────────────────────────
-    ctx.$watch(renderItems);
+    const unwatchList = ctx.$watch(renderItems);
+    _onDispose(unwatchList);
     renderItems();
   },
 });

package/src/directives/events.js

@@ -142,6 +142,9 @@ registerDirective("on:*", {
     if (modifiers.has("once")) opts.once = true;
 
     el.addEventListener(event, handler, opts);
+    if (!opts.once) {
+      _onDispose(() => el.removeEventListener(event, handler, opts));
+    }
   },
 });
 
@@ -150,9 +153,11 @@ registerDirective("trigger", {
   init(el, name, eventName) {
     const ctx = findContext(el);
     const dataExpr = el.getAttribute("trigger-data");
-    el.addEventListener("click", () => {
+    const clickHandler = () => {
       const detail = dataExpr ? evaluate(dataExpr, ctx) : null;
       el.dispatchEvent(new CustomEvent(eventName, { detail, bubbles: true }));
-    });
+    };
+    el.addEventListener("click", clickHandler);
+    _onDispose(() => el.removeEventListener("click", clickHandler));
   },
 });

package/src/directives/http.js

@@ -15,7 +15,7 @@ import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
 import { _doFetch, _cacheGet, _cacheSet } from "../fetch.js";
 import { findContext, _clearDeclared, _cloneTemplate } from "../dom.js";
-import { registerDirective, processTree } from "../registry.js";
+import { registerDirective, processTree, _disposeChildren } from "../registry.js";
 import { _devtoolsEmit } from "../devtools.js";
 
 const HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
@@ -96,6 +96,7 @@ for (const method of HTTP_METHODS) {
         if (loadingTpl) {
           const clone = _cloneTemplate(loadingTpl);
           if (clone) {
+            _disposeChildren(el);
             el.innerHTML = "";
             el.appendChild(clone);
             processTree(el);
@@ -149,6 +150,7 @@ for (const method of HTTP_METHODS) {
           ) {
             const clone = _cloneTemplate(emptyTpl);
             if (clone) {
+              _disposeChildren(el);
               el.innerHTML = "";
               el.appendChild(clone);
               processTree(el);
@@ -169,6 +171,7 @@ for (const method of HTTP_METHODS) {
           if (successTpl) {
             const clone = _cloneTemplate(successTpl);
             if (clone) {
+              _disposeChildren(el);
               el.innerHTML = "";
               // Inject var
               const tplEl = document.getElementById(
@@ -185,6 +188,7 @@ for (const method of HTTP_METHODS) {
             }
           } else {
             // Restore original children and re-process
+            _disposeChildren(el);
             el.innerHTML = "";
             for (const child of originalChildren)
               el.appendChild(child.cloneNode(true));
@@ -216,6 +220,7 @@ for (const method of HTTP_METHODS) {
           if (errorTpl) {
             const clone = _cloneTemplate(errorTpl);
             if (clone) {
+              _disposeChildren(el);
               el.innerHTML = "";
               const tplEl = document.getElementById(
                 errorTpl.replace("#", ""),
@@ -244,18 +249,22 @@ for (const method of HTTP_METHODS) {
 
       // For forms, intercept submit
       if (el.tagName === "FORM" && method !== "get") {
-        el.addEventListener("submit", (e) => {
+        const submitHandler = (e) => {
           e.preventDefault();
           doRequest();
-        });
+        };
+        el.addEventListener("submit", submitHandler);
+        _onDispose(() => el.removeEventListener("submit", submitHandler));
       } else if (method === "get") {
         doRequest();
       } else {
         // Non-GET on non-FORM: attach click listener
-        el.addEventListener("click", (e) => {
+        const clickHandler = (e) => {
           e.preventDefault();
           doRequest();
-        });
+        };
+        el.addEventListener("click", clickHandler);
+        _onDispose(() => el.removeEventListener("click", clickHandler));
       }
 
       // Reactive URL watching: re-fetch when {expressions} in URL change
@@ -278,14 +287,23 @@ for (const method of HTTP_METHODS) {
           }
         }
 
+        _onDispose(() => {
+          if (_debounceTimer) clearTimeout(_debounceTimer);
+        });
+
         // Watch all ancestor contexts for changes
         let ancestor = parentCtx;
         while (ancestor && ancestor.__isProxy) {
-          ancestor.$watch(onAncestorChange);
+          const unwatch = ancestor.$watch(onAncestorChange);
+          _onDispose(unwatch);
           ancestor = ancestor.$parent;
         }
       }
 
+      // Expose doRequest for programmatic re-fetch via $refs
+      el.refresh = doRequest;
+      _onDispose(() => { delete el.refresh; });
+
       // Polling
       if (refreshInterval > 0) {
         const id = setInterval(doRequest, refreshInterval);

package/src/directives/loops.js

@@ -6,7 +6,7 @@ import { createContext } from "../context.js";
 import { _watchExpr } from "../globals.js";
 import { evaluate, resolve } from "../evaluate.js";
 import { findContext, _cloneTemplate } from "../dom.js";
-import { registerDirective, processTree } from "../registry.js";
+import { registerDirective, processTree, _disposeChildren } from "../registry.js";
 import { _animateOut } from "../animations.js";
 
 registerDirective("each", {
@@ -48,6 +48,7 @@ registerDirective("each", {
       if (list.length === 0 && elseTpl) {
         const clone = _cloneTemplate(elseTpl);
         if (clone) {
+          _disposeChildren(el);
           el.innerHTML = "";
           el.appendChild(clone);
           processTree(el);
@@ -80,6 +81,7 @@ registerDirective("each", {
 
     function renderItems(tpl, list) {
       const count = list.length;
+      _disposeChildren(el);
       el.innerHTML = "";
 
       list.forEach((item, i) => {
@@ -178,6 +180,7 @@ registerDirective("foreach", {
       if (list.length === 0 && elseTpl) {
         const clone = _cloneTemplate(elseTpl);
         if (clone) {
+          _disposeChildren(el);
           el.innerHTML = "";
           el.appendChild(clone);
           processTree(el);
@@ -189,6 +192,7 @@ registerDirective("foreach", {
       const count = list.length;
 
       function renderForeachItems() {
+        _disposeChildren(el);
         el.innerHTML = "";
         list.forEach((item, i) => {
           const childData = {

package/src/directives/refs.js

@@ -16,7 +16,7 @@ import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
 import { _doFetch } from "../fetch.js";
 import { findContext, _cloneTemplate } from "../dom.js";
-import { registerDirective, processTree } from "../registry.js";
+import { registerDirective, processTree, _disposeChildren } from "../registry.js";
 
 registerDirective("ref", {
   priority: 5,
@@ -64,6 +64,7 @@ registerDirective("use", {
       }
     }
 
+    _disposeChildren(el);
     el.innerHTML = "";
     const wrapper = document.createElement("div");
     wrapper.style.display = "contents";
@@ -93,7 +94,7 @@ registerDirective("call", {
     const originalChildren = [...el.childNodes].map((n) => n.cloneNode(true));
     let _activeAbort = null;
 
-    el.addEventListener("click", async (e) => {
+    const clickHandler = async (e) => {
       e.preventDefault();
       if (confirmMsg && !window.confirm(confirmMsg)) return;
 
@@ -107,6 +108,7 @@ registerDirective("call", {
       if (loadingTpl) {
         const clone = _cloneTemplate(loadingTpl);
         if (clone) {
+          _disposeChildren(el);
           el.innerHTML = "";
           el.appendChild(clone);
           processTree(el);
@@ -137,6 +139,7 @@ registerDirective("call", {
 
         // Restore original children
         if (loadingTpl) {
+          _disposeChildren(el);
           el.innerHTML = "";
           for (const child of originalChildren)
             el.appendChild(child.cloneNode(true));
@@ -181,6 +184,7 @@ registerDirective("call", {
 
         // Restore original children
         if (loadingTpl) {
+          _disposeChildren(el);
           el.innerHTML = "";
           for (const child of originalChildren)
             el.appendChild(child.cloneNode(true));
@@ -210,6 +214,8 @@ registerDirective("call", {
           }
         }
       }
-    });
+    };
+    el.addEventListener("click", clickHandler);
+    _onDispose(() => el.removeEventListener("click", clickHandler));
   },
 });

package/src/directives/validation.js

@@ -6,7 +6,7 @@
 import { _validators, _onDispose } from "../globals.js";
 import { createContext } from "../context.js";
 import { findContext, _cloneTemplate } from "../dom.js";
-import { registerDirective, processTree } from "../registry.js";
+import { registerDirective, processTree, _disposeChildren } from "../registry.js";
 import { evaluate } from "../evaluate.js";
 
 // ── ValidityState → rule name mapping ────────────────────────────────
@@ -544,6 +544,7 @@ registerDirective("error-boundary", {
           { err: { message } },
           ctx,
         );
+        _disposeChildren(el);
         el.innerHTML = "";
         const wrapper = document.createElement("div");
         wrapper.style.display = "contents";

package/src/globals.js

@@ -62,7 +62,11 @@ export function _notifyStoreWatchers() {
 }
 
 export function _watchExpr(expr, ctx, fn) {
-  ctx.$watch(fn);
+  const unwatch = ctx.$watch(fn);
+  _onDispose(() => {
+    unwatch();
+    _storeWatchers.delete(fn);
+  });
   if (typeof expr === "string" && expr.includes("$store")) {
     _storeWatchers.add(fn);
   }

package/src/index.js

@@ -240,7 +240,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.8.1",
+  version: "1.8.2",
 };
 
 export default NoJS;

package/src/registry.js

@@ -106,3 +106,9 @@ export function _disposeTree(root) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
   while (walker.nextNode()) _disposeElement(walker.currentNode);
 }
+
+export function _disposeChildren(parent) {
+  if (!parent) return;
+  const walker = document.createTreeWalker(parent, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) _disposeElement(walker.currentNode);
+}