@erickxavier/no-js 1.9.1 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.9.1",
+  "version": "1.10.1",
   "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",
@@ -32,6 +32,7 @@
     "test:e2e:headed": "npx playwright test --config e2e/playwright.config.ts --headed",
     "test:e2e:report": "npx playwright show-report e2e/playwright-report",
     "test:all": "npm test && npm run test:e2e",
+    "bench": "jest --testMatch='**/__benchmarks__/**/*.test.js' --testPathIgnorePatterns='[]'",
     "prepublishOnly": "npm run build"
   },
   "keywords": [

package/src/animations.js

@@ -71,7 +71,7 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
   const fallback = durationMs || 2000;
   if (!el.firstElementChild && !el.childNodes.length) {
     callback();
-    return;
+    return () => {};
   }
   if (animName) {
     const target = el.firstElementChild || el;
@@ -85,8 +85,12 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
       callback();
     };
     target.addEventListener("animationend", done, { once: true });
-    setTimeout(done, fallback); // Fallback
-    return;
+    const timerId = setTimeout(done, fallback); // Fallback
+    return () => {
+      called = true;
+      clearTimeout(timerId);
+      target.removeEventListener("animationend", done);
+    };
   }
   if (transitionName) {
     const target = el.firstElementChild || el;
@@ -94,10 +98,11 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
       transitionName + "-leave",
       transitionName + "-leave-active",
     );
-    requestAnimationFrame(() => {
+    let called = false;
+    let timerId;
+    const rafId = requestAnimationFrame(() => {
       target.classList.remove(transitionName + "-leave");
       target.classList.add(transitionName + "-leave-to");
-      let called = false;
       const done = () => {
         if (called) return;
         called = true;
@@ -108,9 +113,19 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
         callback();
       };
       target.addEventListener("transitionend", done, { once: true });
-      setTimeout(done, fallback);
+      timerId = setTimeout(done, fallback);
     });
-    return;
+    return () => {
+      called = true;
+      cancelAnimationFrame(rafId);
+      clearTimeout(timerId);
+      target.classList.remove(
+        transitionName + "-leave",
+        transitionName + "-leave-active",
+        transitionName + "-leave-to",
+      );
+    };
   }
   callback();
+  return () => {};
 }

package/src/context.js

@@ -9,6 +9,7 @@ import { _devtoolsEmit, _ctxRegistry } from "./devtools.js";
 let _batchDepth = 0;
 const _batchQueue = new Set();
 let _ctxId = 0;
+let _ctxGeneration = 0;
 
 export function _resetCtxId() { _ctxId = 0; }
 
@@ -102,6 +103,7 @@ export function createContext(data = {}, parent = null) {
       const old = target[key];
       target[key] = value;
       if (old !== value) {
+        _ctxGeneration++;
         notify();
         _devtoolsEmit("ctx:updated", {
           id: target.__devtoolsId,
@@ -135,7 +137,11 @@ export function createContext(data = {}, parent = null) {
 }
 
 // Collect all keys from a context + its parent chain
+// Result is cached per context and invalidated on any reactive mutation.
 export function _collectKeys(ctx) {
+  const cache = ctx.__raw.__collectKeysCache;
+  if (cache && cache.gen === _ctxGeneration) return cache.result;
+
   const allKeys = new Set();
   const allVals = {};
   let c = ctx;
@@ -149,5 +155,7 @@ export function _collectKeys(ctx) {
     }
     c = c.$parent;
   }
-  return { keys: [...allKeys], vals: allVals };
+  const result = { keys: [...allKeys], vals: allVals };
+  ctx.__raw.__collectKeysCache = { gen: _ctxGeneration, result };
+  return result;
 }

package/src/devtools.js

@@ -11,6 +11,22 @@ import { _i18n } from "./i18n.js";
 // Maps __devtoolsId → Proxy reference for inspect/mutate commands.
 export const _ctxRegistry = new Map();
 
+// ─── Hostname guard ─────────────────────────────────────────────────────────
+// Optional `hostname` param exists for unit-testing without window.location mocking.
+export function _isLocalHostname(hostname) {
+  if (hostname === undefined) {
+    hostname = (typeof window !== "undefined" && window.location) ? window.location.hostname : "";
+  }
+  return (
+    hostname === "" ||
+    hostname === "localhost" ||
+    hostname === "127.0.0.1" ||
+    hostname === "::1" ||
+    hostname === "0.0.0.0" ||
+    hostname.endsWith(".localhost")
+  );
+}
+
 // ─── Emit a devtools event ──────────────────────────────────────────────────
 export function _devtoolsEmit(type, data) {
   if (!_config.devtools || typeof window === "undefined") return;
@@ -192,6 +208,8 @@ function _handleDevtoolsCommand(event) {
       break;
     case "get:config":
       result = { ..._config };
+      if (result.csrf) result.csrf = { ...result.csrf, token: '[REDACTED]' };
+      if (result.headers) result.headers = '[REDACTED]';
       break;
     case "get:routes":
       result = _routerInstance ? _routerInstance.routes || [] : [];
@@ -224,6 +242,11 @@ function _handleDevtoolsCommand(event) {
 export function initDevtools(nojs) {
   if (!_config.devtools || typeof window === "undefined") return;
 
+  if (!_isLocalHostname()) {
+    console.warn("[No.JS] devtools: true is ignored outside local environments. Remove devtools: true before deploying to production.");
+    return;
+  }
+
   // Listen for commands
   window.addEventListener("nojs:devtools:cmd", _handleDevtoolsCommand);
 

package/src/directives/binding.js

@@ -33,6 +33,71 @@ registerDirective("bind-html", {
   },
 });
 
+const _SAFE_URL_ATTRS = new Set(["href", "src", "action", "formaction", "poster", "data"]);
+
+// Strip JS vectors from raw SVG markup using DOMParser for robust sanitization.
+// Regex-based approaches are bypassable via entity encoding and nested contexts.
+function _sanitizeSvgContent(svg) {
+  const doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+  const root = doc.documentElement;
+  // If parsing failed, DOMParser may wrap error in <parsererror> or produce a
+  // non-SVG root. In either case return an empty SVG for safety.
+  if (root.querySelector("parsererror") ||
+      root.nodeName !== "svg" ||
+      root.getElementsByTagNameNS("http://www.mozilla.org/newlayout/xml/parsererror.xml", "parsererror").length) {
+    return "<svg></svg>";
+  }
+
+  function _cleanAttrs(node) {
+    for (const attr of [...node.attributes]) {
+      const name = attr.name.toLowerCase();
+      // Remove on* event handlers
+      if (name.startsWith("on")) { node.removeAttribute(attr.name); continue; }
+      // Remove javascript: in href/xlink:href
+      if ((name === "href" || name === "xlink:href") &&
+          attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        node.removeAttribute(attr.name);
+      }
+    }
+  }
+  // Remove script elements
+  for (const s of [...root.querySelectorAll("script")]) s.remove();
+  // Clean attributes on root and all descendants
+  _cleanAttrs(root);
+  for (const node of root.querySelectorAll("*")) _cleanAttrs(node);
+  return new XMLSerializer().serializeToString(root);
+}
+
+// Sanitize a data:image/svg+xml URI — handles both base64 and URL-encoded forms.
+function _sanitizeSvgDataUri(str) {
+  try {
+    const b64 = str.match(/^data:image\/svg\+xml;base64,(.+)$/i);
+    if (b64) {
+      const clean = _sanitizeSvgContent(atob(b64[1]));
+      return "data:image/svg+xml;base64," + btoa(clean);
+    }
+    const comma = str.indexOf(",");
+    if (comma === -1) return "#";
+    const header = str.slice(0, comma + 1);
+    const clean = _sanitizeSvgContent(decodeURIComponent(str.slice(comma + 1)));
+    return header + encodeURIComponent(clean);
+  } catch (_e) {
+    return "#";
+  }
+}
+
+function _sanitizeAttrValue(attrName, value) {
+  if (_SAFE_URL_ATTRS.has(attrName)) {
+    const str = String(value).trimStart();
+    if (/^(javascript|vbscript):/i.test(str)) return "#";
+    if (/^data:/i.test(str)) {
+      if (/^data:image\/svg\+xml/i.test(str)) return _sanitizeSvgDataUri(str);
+      if (!/^data:image\//i.test(str)) return "#";
+    }
+  }
+  return value;
+}
+
 registerDirective("bind-*", {
   priority: 20,
   init(el, name, expr) {
@@ -72,7 +137,7 @@ registerDirective("bind-*", {
         if (attrName in el) el[attrName] = !!val;
         return;
       }
-      if (val != null) el.setAttribute(attrName, String(val));
+      if (val != null) el.setAttribute(attrName, String(_sanitizeAttrValue(attrName, val)));
       else el.removeAttribute(attrName);
     }
     _watchExpr(expr, ctx, update);

package/src/directives/conditionals.js

@@ -2,7 +2,7 @@
 //  DIRECTIVES: if, else-if, else, show, hide, switch
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _watchExpr } from "../globals.js";
+import { _watchExpr, _onDispose } from "../globals.js";
 import { evaluate } from "../evaluate.js";
 import { findContext, _clearDeclared, _cloneTemplate } from "../dom.js";
 import { registerDirective, processTree, _disposeChildren } from "../registry.js";
@@ -21,6 +21,8 @@ registerDirective("if", {
     const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
     const originalChildren = [...el.childNodes].map((n) => n.cloneNode(true));
     let currentState = undefined;
+    let _cancelAnim = null;
+    _onDispose(() => { if (_cancelAnim) { _cancelAnim(); _cancelAnim = null; } });
 
     function update() {
       const result = !!evaluate(expr, ctx);
@@ -29,7 +31,11 @@ registerDirective("if", {
 
       // Animation leave
       if (animLeave || transition) {
-        _animateOut(el, animLeave, transition, () => render(result), animDuration);
+        if (_cancelAnim) { _cancelAnim(); _cancelAnim = null; }
+        _cancelAnim = _animateOut(el, animLeave, transition, () => {
+          _cancelAnim = null;
+          render(result);
+        }, animDuration);
       } else {
         render(result);
       }

package/src/directives/events.js

@@ -26,6 +26,10 @@ registerDirective("on:*", {
     }
     if (event === "updated") {
       const updatedObserver = new MutationObserver(() => {
+        if (!el.isConnected) {
+          updatedObserver.disconnect();
+          return;
+        }
         _execStatement(expr, ctx, { $el: el });
       });
       updatedObserver.observe(el, { childList: true, subtree: true, characterData: true, attributes: true });

package/src/directives/http.js

@@ -20,6 +20,11 @@ import { _devtoolsEmit } from "../devtools.js";
 
 const HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
 
+const _SENSITIVE_HEADERS = new Set([
+  'authorization', 'x-api-key', 'x-auth-token', 'cookie',
+  'proxy-authorization', 'set-cookie', 'x-csrf-token',
+]);
+
 for (const method of HTTP_METHODS) {
   registerDirective(method, {
     priority: 1,
@@ -121,24 +126,24 @@ for (const method of HTTP_METHODS) {
           }
 
           const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
-          const savedRetries = _config.retries;
-          const savedRetryDelay = _config.retryDelay;
-          _config.retries = retryCount;
-          _config.retryDelay = retryDelay;
-          let data;
-          try {
-            data = await _doFetch(
-              resolvedUrl,
-              method,
-              reqBody,
-              extraHeaders,
-              el,
-              _activeAbort.signal,
-            );
-          } finally {
-            _config.retries = savedRetries;
-            _config.retryDelay = savedRetryDelay;
+          if (headersAttr) {
+            for (const k of Object.keys(extraHeaders)) {
+              const lower = k.toLowerCase();
+              if (_SENSITIVE_HEADERS.has(lower) || /^x-(auth|api)-/.test(lower)) {
+                _warn(`Sensitive header "${k}" is set inline on a headers attribute. Use NoJS.config({ headers }) or an interceptor to avoid exposing credentials in HTML source.`);
+              }
+            }
           }
+          const data = await _doFetch(
+            resolvedUrl,
+            method,
+            reqBody,
+            extraHeaders,
+            el,
+            _activeAbort.signal,
+            retryCount,
+            retryDelay,
+          );
 
           // Cache response
           if (method === "get") _cacheSet(cacheKey, data, cacheStrategy);
@@ -256,7 +261,7 @@ for (const method of HTTP_METHODS) {
         el.addEventListener("submit", submitHandler);
         _onDispose(() => el.removeEventListener("submit", submitHandler));
       } else if (method === "get") {
-        doRequest();
+        if (el.isConnected) doRequest();
       } else {
         // Non-GET on non-FORM: attach click listener
         const clickHandler = (e) => {
@@ -306,7 +311,10 @@ for (const method of HTTP_METHODS) {
 
       // Polling
       if (refreshInterval > 0) {
-        const id = setInterval(doRequest, refreshInterval);
+        const id = setInterval(() => {
+          if (!el.isConnected) { clearInterval(id); return; }
+          doRequest();
+        }, refreshInterval);
         _onDispose(() => clearInterval(id));
       }
     },

package/src/directives/i18n.js

@@ -6,7 +6,7 @@
 import { _i18n, _watchI18n, _loadI18nNamespace, _notifyI18n } from "../i18n.js";
 import { _watchExpr } from "../globals.js";
 import { evaluate } from "../evaluate.js";
-import { findContext } from "../dom.js";
+import { findContext, _sanitizeHtml } from "../dom.js";
 import { registerDirective, processTree } from "../registry.js";
 
 registerDirective("t", {
@@ -25,7 +25,7 @@ registerDirective("t", {
       }
       const text = _i18n.t(key, params);
       if (useHtml) {
-        el.innerHTML = text;
+        el.innerHTML = _sanitizeHtml(text);
       } else {
         el.textContent = text;
       }

package/src/directives/loops.js

@@ -25,6 +25,8 @@ registerDirective("each", {
     const stagger = parseInt(el.getAttribute("animate-stagger")) || 0;
     const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
     let prevList = null;
+    // key → wrapper div; only populated when the `key` attribute is set.
+    const keyMap = new Map();
 
     function update() {
       let list = /[\[\]()\s+\-*\/!?:&|]/.test(listPath)
@@ -32,10 +34,7 @@ registerDirective("each", {
         : resolve(listPath, ctx);
       if (!Array.isArray(list)) return;
 
-      // If same list reference and items are rendered, skip re-render
-      // and just propagate the notification to child contexts so their
-      // watchers (bind, show, model, etc.) can react to parent changes
-      // without destroying/recreating the DOM (preserves input focus).
+      // Same-reference optimisation: propagate to children without DOM rebuild.
       if (list === prevList && list.length > 0 && el.children.length > 0) {
         for (const child of el.children) {
           if (child.__ctx && child.__ctx.$notify) child.__ctx.$notify();
@@ -49,6 +48,7 @@ registerDirective("each", {
         const clone = _cloneTemplate(elseTpl);
         if (clone) {
           _disposeChildren(el);
+          keyMap.clear();
           el.innerHTML = "";
           el.appendChild(clone);
           processTree(el);
@@ -80,6 +80,87 @@ registerDirective("each", {
     }
 
     function renderItems(tpl, list) {
+      if (keyExpr) {
+        reconcileItems(tpl, list);
+      } else {
+        rebuildItems(tpl, list);
+      }
+    }
+
+    // Key-based reconciliation: reuses existing wrapper divs for items whose
+    // key is still present in the new list, only creating/removing DOM nodes
+    // for items that genuinely appeared or disappeared.
+    function reconcileItems(tpl, list) {
+      const count = list.length;
+
+      // Evaluate the key for every item in the new list up-front.
+      const newOrder = list.map((item, i) => {
+        const tempCtx = createContext({ [itemName]: item, $index: i }, ctx);
+        return { key: evaluate(keyExpr, tempCtx), item, i };
+      });
+
+      const nextKeySet = new Set(newOrder.map((e) => e.key));
+
+      // Remove wrappers whose keys are no longer in the list.
+      for (const [key, wrapper] of keyMap) {
+        if (!nextKeySet.has(key)) {
+          _disposeChildren(wrapper);
+          wrapper.remove();
+          keyMap.delete(key);
+        }
+      }
+
+      // Create new wrappers and update existing ones.
+      newOrder.forEach(({ key, item, i }) => {
+        const childData = {
+          [itemName]: item,
+          $index: i,
+          $count: count,
+          $first: i === 0,
+          $last: i === count - 1,
+          $even: i % 2 === 0,
+          $odd: i % 2 !== 0,
+        };
+
+        if (!keyMap.has(key)) {
+          const clone = tpl.content.cloneNode(true);
+          const wrapper = document.createElement("div");
+          wrapper.style.display = "contents";
+          wrapper.__ctx = createContext(childData, ctx);
+          wrapper.appendChild(clone);
+          keyMap.set(key, wrapper);
+          el.appendChild(wrapper); // placed at end; reordered below
+          processTree(wrapper);
+
+          if (animEnter) {
+            const firstChild = wrapper.firstElementChild;
+            if (firstChild) {
+              firstChild.classList.add(animEnter);
+              firstChild.addEventListener(
+                "animationend",
+                () => firstChild.classList.remove(animEnter),
+                { once: true },
+              );
+              if (stagger) firstChild.style.animationDelay = i * stagger + "ms";
+            }
+          }
+        } else {
+          // Existing item: update positional metadata and notify watchers.
+          Object.assign(keyMap.get(key).__ctx.__raw, childData);
+          keyMap.get(key).__ctx.$notify();
+        }
+      });
+
+      // Reorder DOM to match the new list using a single forward pass.
+      for (let i = 0; i < newOrder.length; i++) {
+        const wrapper = keyMap.get(newOrder[i].key);
+        if (wrapper !== el.children[i]) el.insertBefore(wrapper, el.children[i] ?? null);
+      }
+    }
+
+    // Full rebuild: dispose all children and recreate from scratch.
+    // Used when no `key` attribute is set (backward-compatible behaviour).
+    function rebuildItems(tpl, list) {
       const count = list.length;
       _disposeChildren(el);
       el.innerHTML = "";
@@ -109,7 +190,6 @@ registerDirective("each", {
           if (firstChild) {
             firstChild.classList.add(animEnter);
             firstChild.addEventListener("animationend", () => firstChild.classList.remove(animEnter), { once: true });
-            // Stagger animation — delay must be on the child, not the wrapper
             if (stagger) {
               firstChild.style.animationDelay = i * stagger + "ms";
             }
@@ -135,6 +215,7 @@ registerDirective("foreach", {
     const limit = parseInt(el.getAttribute("limit")) || Infinity;
     const offset = parseInt(el.getAttribute("offset")) || 0;
     const tplId = el.getAttribute("template");
+    const keyExpr = el.getAttribute("key");
     const animEnter = el.getAttribute("animate-enter") || el.getAttribute("animate");
     const animLeave = el.getAttribute("animate-leave");
     const stagger = parseInt(el.getAttribute("animate-stagger")) || 0;
@@ -157,6 +238,7 @@ registerDirective("foreach", {
       templateContent.removeAttribute("offset");
       templateContent.removeAttribute("else");
       templateContent.removeAttribute("template");
+      templateContent.removeAttribute("key");
       templateContent.removeAttribute("animate-enter");
       templateContent.removeAttribute("animate");
       templateContent.removeAttribute("animate-leave");
@@ -164,6 +246,9 @@ registerDirective("foreach", {
       templateContent.removeAttribute("animate-duration");
     }
 
+    // key → wrapper div; only populated when the `key` attribute is set.
+    const keyMap = new Map();
+
     function update() {
       let list = resolve(fromPath, ctx);
       if (!Array.isArray(list)) return;
@@ -199,6 +284,7 @@ registerDirective("foreach", {
         const clone = _cloneTemplate(elseTpl);
         if (clone) {
           _disposeChildren(el);
+          keyMap.clear();
           el.innerHTML = "";
           el.appendChild(clone);
           processTree(el);
@@ -209,6 +295,11 @@ registerDirective("foreach", {
       const tpl = tplId ? document.getElementById(tplId) : null;
       const count = list.length;
 
+      if (keyExpr) {
+        reconcileForeachItems(tpl, list, count);
+        return;
+      }
+
       function renderForeachItems() {
         _disposeChildren(el);
         el.innerHTML = "";
@@ -244,7 +335,6 @@ registerDirective("foreach", {
             if (firstChild) {
               firstChild.classList.add(animEnter);
               firstChild.addEventListener("animationend", () => firstChild.classList.remove(animEnter), { once: true });
-              // Stagger animation — delay must be on the child, not the wrapper
               if (stagger) {
                 firstChild.style.animationDelay = (i * stagger) + "ms";
               }
@@ -273,6 +363,81 @@ registerDirective("foreach", {
       }
     }
 
+    // Key-based reconciliation for foreach — mirrors each's reconcileItems.
+    // Applied to the final (filtered, sorted, sliced) list so keys always
+    // correspond to what is actually rendered.
+    function reconcileForeachItems(tpl, list, count) {
+      // On first render the element may still hold its original inline template
+      // markup (the same content that was captured into templateContent).
+      // Clear it so only managed wrappers appear as children.
+      if (keyMap.size === 0) el.innerHTML = "";
+
+      const newOrder = list.map((item, i) => {
+        const tempCtx = createContext({ [itemName]: item, [indexName]: i }, ctx);
+        return { key: evaluate(keyExpr, tempCtx), item, i };
+      });
+
+      const nextKeySet = new Set(newOrder.map((e) => e.key));
+
+      for (const [key, wrapper] of keyMap) {
+        if (!nextKeySet.has(key)) {
+          _disposeChildren(wrapper);
+          wrapper.remove();
+          keyMap.delete(key);
+        }
+      }
+
+      newOrder.forEach(({ key, item, i }) => {
+        const childData = {
+          [itemName]: item,
+          [indexName]: i,
+          $index: i,
+          $count: count,
+          $first: i === 0,
+          $last: i === count - 1,
+          $even: i % 2 === 0,
+          $odd: i % 2 !== 0,
+        };
+
+        if (!keyMap.has(key)) {
+          let clone;
+          if (tpl) {
+            clone = tpl.content.cloneNode(true);
+          } else {
+            clone = templateContent.cloneNode(true);
+          }
+          const wrapper = document.createElement("div");
+          wrapper.style.display = "contents";
+          wrapper.__ctx = createContext(childData, ctx);
+          wrapper.appendChild(clone);
+          keyMap.set(key, wrapper);
+          el.appendChild(wrapper);
+          processTree(wrapper);
+
+          if (animEnter) {
+            const firstChild = wrapper.firstElementChild;
+            if (firstChild) {
+              firstChild.classList.add(animEnter);
+              firstChild.addEventListener(
+                "animationend",
+                () => firstChild.classList.remove(animEnter),
+                { once: true },
+              );
+              if (stagger) firstChild.style.animationDelay = i * stagger + "ms";
+            }
+          }
+        } else {
+          Object.assign(keyMap.get(key).__ctx.__raw, childData);
+          keyMap.get(key).__ctx.$notify();
+        }
+      });
+
+      for (let i = 0; i < newOrder.length; i++) {
+        const wrapper = keyMap.get(newOrder[i].key);
+        if (wrapper !== el.children[i]) el.insertBefore(wrapper, el.children[i] ?? null);
+      }
+    }
+
     _watchExpr(fromPath, ctx, update);
     update();
   },