@erickxavier/no-js 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "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/animations.js

@@ -33,16 +33,18 @@ function _injectBuiltInStyles() {
 
 export function _animateIn(el, animName, transitionName, durationMs) {
   _injectBuiltInStyles();
-  const fallback = durationMs || 1000;
+  // || 0: fires on the next event-loop tick when no CSS transition is present,
+  // instead of blocking for an arbitrary duration.
+  const fallback = durationMs || 0;
   if (animName) {
     const target = el.firstElementChild || el;
     target.classList.add(animName);
     if (durationMs) target.style.animationDuration = durationMs + "ms";
-    target.addEventListener(
-      "animationend",
-      () => target.classList.remove(animName),
-      { once: true },
-    );
+    const done = () => target.classList.remove(animName);
+    target.addEventListener("animationend", done, { once: true });
+    // Fallback: remove the class on the next tick if animationend never fires
+    // (e.g. CSS absent, element detached). Mirrors the transitionName branch.
+    setTimeout(done, fallback);
   }
   if (transitionName) {
     const target = el.firstElementChild || el;
@@ -68,7 +70,9 @@ export function _animateIn(el, animName, transitionName, durationMs) {
 
 export function _animateOut(el, animName, transitionName, callback, durationMs) {
   _injectBuiltInStyles();
-  const fallback = durationMs || 2000;
+  // || 0: fires on the next event-loop tick when no CSS animation/transition is
+  // present, instead of blocking for an arbitrary duration.
+  const fallback = durationMs || 0;
   if (!el.firstElementChild && !el.childNodes.length) {
     callback();
     return () => {};

package/src/context.js

@@ -2,7 +2,7 @@
 //  REACTIVE CONTEXT
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _config, _stores, _refs, _routerInstance, _currentEl } from "./globals.js";
+import { _config, _stores, _refs, _routerInstance, _currentEl, _globals } from "./globals.js";
 import { _i18n } from "./i18n.js";
 import { _devtoolsEmit, _ctxRegistry } from "./devtools.js";
 
@@ -95,6 +95,10 @@ export function createContext(data = {}, parent = null) {
       if (key === "$router") return _routerInstance;
       if (key === "$i18n") return _i18n;
       if (key === "$form") return target.$form || null;
+      // Plugin globals fallback (after all core $ checks)
+      if (key.startsWith("$") && key.slice(1) in _globals) {
+        return _globals[key.slice(1)];
+      }
       if (key in target) return target[key];
       if (parent && parent.__isProxy) return parent[key];
       return undefined;
@@ -116,6 +120,7 @@ export function createContext(data = {}, parent = null) {
     },
     has(target, key) {
       if (key in target) return true;
+      if (typeof key === "string" && key.startsWith("$") && key.slice(1) in _globals) return true;
       if (parent && parent.__isProxy) return key in parent;
       return false;
     },

package/src/devtools.js

@@ -4,7 +4,7 @@
 //  All hooks are guarded by _config.devtools — no cost when disabled.
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _config, _stores, _refs, _routerInstance } from "./globals.js";
+import { _config, _stores, _refs, _routerInstance, _plugins, _globals } from "./globals.js";
 import { _i18n } from "./i18n.js";
 
 // ─── Context registry (populated by createContext when devtools enabled) ────
@@ -208,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 || [] : [];
@@ -235,6 +237,15 @@ function _handleDevtoolsCommand(event) {
   );
 }
 
+// ─── Cleanup reference ───────────────────────────────────────────────────────
+
+let _devtoolsCleanup = null;
+
+// Called from NoJS.dispose() to remove the command listener and clean up.
+export function destroyDevtools() {
+  if (_devtoolsCleanup) _devtoolsCleanup();
+}
+
 // ─── Initialization ─────────────────────────────────────────────────────────
 
 export function initDevtools(nojs) {
@@ -245,17 +256,36 @@ export function initDevtools(nojs) {
     return;
   }
 
-  // Listen for commands
+  // Listen for commands (store reference for cleanup)
   window.addEventListener("nojs:devtools:cmd", _handleDevtoolsCommand);
+  _devtoolsCleanup = () => {
+    window.removeEventListener("nojs:devtools:cmd", _handleDevtoolsCommand);
+    delete window.__NOJS_DEVTOOLS__;
+    _devtoolsCleanup = null;
+  };
 
   // Expose public API on window
   window.__NOJS_DEVTOOLS__ = {
-    // Data access
-    stores: _stores,
-    config: _config,
-    refs: _refs,
+    // Data access (read-only snapshots — no live references leak)
+    get stores() {
+      return Object.fromEntries(
+        Object.entries(_stores).map(([k, v]) => [k, _safeSnapshot(v)])
+      );
+    },
+    get config() {
+      const c = { ..._config };
+      if (c.headers) c.headers = { ...c.headers };
+      if (c.router) c.router = { ...c.router };
+      if (c.cache) c.cache = { ...c.cache };
+      if (c.csrf) c.csrf = { ...c.csrf };
+      if (c.i18n) c.i18n = { ...c.i18n };
+      return c;
+    },
+    get refs() { return { ..._refs }; },
     router: _routerInstance,
     version: nojs.version,
+    get plugins() { return new Map(_plugins); },
+    get globals() { return { ..._globals }; },
 
     // Inspect API
     inspect: (selector) => _inspectElement(selector),

package/src/directives/binding.js

@@ -2,10 +2,10 @@
 //  DIRECTIVES: bind, bind-html, bind-*, model
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _watchExpr, _onDispose } from "../globals.js";
+import { _watchExpr, _onDispose, _config, _warn } from "../globals.js";
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext, _sanitizeHtml } from "../dom.js";
-import { registerDirective } from "../registry.js";
+import { registerDirective, _disposeChildren } from "../registry.js";
 
 registerDirective("bind", {
   priority: 20,
@@ -24,9 +24,19 @@ registerDirective("bind-html", {
   priority: 20,
   init(el, name, expr) {
     const ctx = findContext(el);
+    if ((_config.debug || _config.devtools) && !/^['"`]/.test(expr.trim())) {
+      _warn(
+        `[Security] bind-html used with dynamic expression: "${expr}". ` +
+          `Ensure the value is trusted or sanitized — use bind for plain text.`,
+        el
+      );
+    }
     function update() {
       const val = evaluate(expr, ctx);
-      if (val != null) el.innerHTML = _sanitizeHtml(String(val));
+      if (val != null) {
+        _disposeChildren(el);
+        el.innerHTML = _sanitizeHtml(String(val));
+      }
     }
     _watchExpr(expr, ctx, update);
     update();
@@ -35,12 +45,37 @@ registerDirective("bind-html", {
 
 const _SAFE_URL_ATTRS = new Set(["href", "src", "action", "formaction", "poster", "data"]);
 
-// Strip JS vectors from raw SVG markup: <script> blocks and on* event handlers.
+// 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) {
-  return svg
-    .replace(/<script[\s\S]*?<\/script>/gi, "")
-    .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s/>]*)/gi, "")
-    .replace(/\s+(?:href|xlink:href)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi, "");
+  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.

package/src/directives/dnd.js

@@ -805,7 +805,7 @@ registerDirective("drag-list", {
         wrapper.addEventListener("dragend", itemDragend);
 
         // Keyboard DnD on items
-        wrapper.addEventListener("keydown", (e) => {
+        const itemKeydown = (e) => {
           if (e.key === " " && !_dndState.dragging) {
             e.preventDefault();
             _dndState.dragging = {
@@ -842,7 +842,16 @@ registerDirective("drag-list", {
               prevEl.focus();
             }
           }
-        });
+        };
+        wrapper.addEventListener("keydown", itemKeydown);
+
+        // Register cleanup on wrapper so disposers run when _disposeChildren(el) is called
+        wrapper.__disposers = wrapper.__disposers || [];
+        wrapper.__disposers.push(
+          () => wrapper.removeEventListener("dragstart", itemDragstart),
+          () => wrapper.removeEventListener("dragend", itemDragend),
+          () => wrapper.removeEventListener("keydown", itemKeydown),
+        );
 
         processTree(wrapper);
       });

package/src/directives/events.js

@@ -127,6 +127,7 @@ registerDirective("on:*", {
         clearTimeout(timer);
         timer = setTimeout(() => original(e), debounceMs);
       };
+      _onDispose(() => clearTimeout(timer));
     }
 
     // Wrap with throttle

package/src/directives/head.js

@@ -0,0 +1,142 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: page-title, page-description, page-canonical, page-jsonld
+// ═══════════════════════════════════════════════════════════════════════
+//
+//  These directives update <head> elements reactively using the same
+//  _watchExpr + evaluate() infrastructure as all other directives.
+//  They are meant for placement in the page body (not inside <head>).
+//  Use <div hidden> as the host element — it is invisible, semantically
+//  neutral, and avoids custom attributes on void elements like <meta>:
+//
+//    <div hidden page-title="product.name + ' | My Store'"></div>
+//    <div hidden page-title="'About Us | My Store'"></div>
+//    <div hidden page-description="product.description"></div>
+//    <div hidden page-canonical="'/products/' + product.slug"></div>
+//    <div hidden page-jsonld>
+//      { "@type": "Product", "name": "{product.name}" }
+//    </div>
+//
+//  Note: <script> elements are skipped by processTree; use <div hidden>
+//  as the host element for page-jsonld.
+//
+//  Each directive watches its expression and re-applies the side effect
+//  whenever the reactive context changes.
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _watchExpr } from "../globals.js";
+import { evaluate, resolve } from "../evaluate.js";
+import { findContext } from "../dom.js";
+import { registerDirective } from "../registry.js";
+
+// Interpolate {key} placeholders in a string without URL-encoding.
+// Used by page-jsonld where the template is a JSON string.
+function _interpolateRaw(str, ctx) {
+  // Match only {identifiers} — skip { starting with " or ' to avoid consuming JSON structure.
+  return str.replace(/\{([^}"'{][^}]*)\}/g, (_, expr) => {
+    try {
+      const val = evaluate(expr.trim(), ctx);
+      return val != null ? String(val) : "";
+    } catch (_) {
+      return "";
+    }
+  });
+}
+
+// ── page-title ────────────────────────────────────────────────────────────────
+// Updates document.title reactively.
+// Value is a No.JS expression: page-title="product.name + ' | Store'"
+registerDirective("page-title", {
+  priority: 1,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (val != null) document.title = String(val);
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+// ── page-description ──────────────────────────────────────────────────────────
+// Creates or updates <meta name="description" content="..."> in <head>.
+// Value is a No.JS expression: page-description="product.description"
+registerDirective("page-description", {
+  priority: 1,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (val == null) return;
+      let meta = document.querySelector('meta[name="description"]');
+      if (!meta) {
+        meta = document.createElement("meta");
+        meta.name = "description";
+        document.head.appendChild(meta);
+      }
+      meta.content = String(val);
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+// ── page-canonical ────────────────────────────────────────────────────────────
+// Creates or updates <link rel="canonical" href="..."> in <head>.
+// Value is a No.JS expression: page-canonical="'/products/' + product.slug"
+registerDirective("page-canonical", {
+  priority: 1,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (val == null) return;
+      let link = document.querySelector('link[rel="canonical"]');
+      if (!link) {
+        link = document.createElement("link");
+        link.rel = "canonical";
+        document.head.appendChild(link);
+      }
+      link.href = String(val);
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+// ── page-jsonld ───────────────────────────────────────────────────────────────
+// Creates or updates a <script type="application/ld+json" data-nojs> in <head>.
+// Value is either:
+//   - A No.JS expression that evaluates to an object → JSON.stringify is applied
+//   - A JSON string with {interpolation} placeholders → _interpolate is applied
+//
+// The data-nojs marker distinguishes the managed tag from any hand-written
+// JSON-LD the developer may have added, so they can coexist.
+registerDirective("page-jsonld", {
+  priority: 1,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    // The JSON template lives in the element's text content (or innerHTML for
+    // elements like <div hidden>). The attribute value (expr) is intentionally
+    // empty — the developer writes the JSON template as the element body.
+    const template = (el.textContent || el.innerHTML).trim();
+    if (!template) return;
+    function update() {
+      // Resolve {interpolation} placeholders in the JSON template.
+      const json = _interpolateRaw(template, ctx);
+      if (!json) return;
+      let script = document.querySelector(
+        'script[type="application/ld+json"][data-nojs]',
+      );
+      if (!script) {
+        script = document.createElement("script");
+        script.type = "application/ld+json";
+        script.setAttribute("data-nojs", "");
+        document.head.appendChild(script);
+      }
+      script.textContent = json;
+    }
+    _watchExpr(template, ctx, update);
+    update();
+  },
+});

package/src/directives/http.js

@@ -10,6 +10,7 @@ import {
   _emitEvent,
   _routerInstance,
   _onDispose,
+  _SENSITIVE_HEADERS,
 } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
@@ -20,11 +21,6 @@ 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,
@@ -126,7 +122,7 @@ for (const method of HTTP_METHODS) {
           }
 
           const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
-          if (_config.debug && headersAttr) {
+          if (headersAttr) {
             for (const k of Object.keys(extraHeaders)) {
               const lower = k.toLowerCase();
               if (_SENSITIVE_HEADERS.has(lower) || /^x-(auth|api)-/.test(lower)) {
@@ -134,24 +130,16 @@ for (const method of HTTP_METHODS) {
               }
             }
           }
-          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;
-          }
+          const data = await _doFetch(
+            resolvedUrl,
+            method,
+            reqBody,
+            extraHeaders,
+            el,
+            _activeAbort.signal,
+            retryCount,
+            retryDelay,
+          );
 
           // Cache response
           if (method === "get") _cacheSet(cacheKey, data, cacheStrategy);

package/src/directives/i18n.js

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

package/src/directives/loops.js

@@ -72,7 +72,8 @@ registerDirective("each", {
             if (remaining <= 0) renderItems(tpl, list);
           };
           target.addEventListener("animationend", done, { once: true });
-          setTimeout(done, animDuration || 2000);
+          // || 0: unblocks the next render on the next tick when no CSS animation fires.
+          setTimeout(done, animDuration || 0);
         });
       } else {
         renderItems(tpl, list);
@@ -356,7 +357,8 @@ registerDirective("foreach", {
             if (remaining <= 0) renderForeachItems();
           };
           target.addEventListener("animationend", done, { once: true });
-          setTimeout(done, animDuration || 2000);
+          // || 0: unblocks the next render on the next tick when no CSS animation fires.
+          setTimeout(done, animDuration || 0);
         });
       } else {
         renderForeachItems();

package/src/directives/refs.js

@@ -10,6 +10,7 @@ import {
   _routerInstance,
   _warn,
   _onDispose,
+  _SENSITIVE_HEADERS,
 } from "../globals.js";
 import { _devtoolsEmit } from "../devtools.js";
 import { createContext } from "../context.js";
@@ -128,6 +129,14 @@ registerDirective("call", {
         }
 
         const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
+        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,

package/src/directives/state.js

@@ -2,7 +2,7 @@
 //  DIRECTIVES: state, store, computed, watch
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _stores, _log, _warn, _watchExpr } from "../globals.js";
+import { _stores, _log, _warn, _watchExpr, _onDispose } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext } from "../dom.js";
@@ -12,9 +12,9 @@ import { _devtoolsEmit } from "../devtools.js";
 registerDirective("state", {
   priority: 0,
   init(el, name, value) {
-    const data = evaluate(value, createContext()) || {};
+    const initialState = evaluate(value, createContext()) || {};
     const parent = el.parentElement ? findContext(el.parentElement) : null;
-    const ctx = createContext(data, parent);
+    const ctx = createContext(initialState, parent);
     el.__ctx = ctx;
 
     // Persistence
@@ -40,14 +40,33 @@ registerDirective("state", {
           const saved = store.getItem("nojs_state_" + persistKey);
           if (saved) {
             const parsed = JSON.parse(saved);
+            const schemaCheck = el.hasAttribute("persist-schema");
             for (const [k, v] of Object.entries(parsed)) {
-              if (!persistFields || persistFields.has(k)) ctx.$set(k, v);
+              if (!persistFields || persistFields.has(k)) {
+                if (schemaCheck) {
+                  if (!(k in initialState)) { _warn('persist-schema: ignoring unknown key "' + k + '"'); continue; }
+                  if (initialState[k] !== null && v !== null && typeof v !== typeof initialState[k]) {
+                    _warn('persist-schema: type mismatch for "' + k + '" (expected ' + typeof initialState[k] + ', got ' + typeof v + ')');
+                    continue;
+                  }
+                }
+                ctx.$set(k, v);
+              }
             }
           }
         } catch {
           /* ignore */
         }
-        ctx.$watch(() => {
+
+        // Warn about potentially sensitive field names in persisted state
+        const sensitiveNames = ['token', 'password', 'secret', 'key', 'auth', 'credential', 'session'];
+        const stateKeys = Object.keys(initialState);
+        const riskyKeys = stateKeys.filter(k => sensitiveNames.some(s => k.toLowerCase().includes(s)));
+        if (riskyKeys.length > 0) {
+          _warn('State key(s) ' + riskyKeys.map(k => '"' + k + '"').join(', ') + ' may contain sensitive data. Consider using persist-fields to exclude them.');
+        }
+
+        const unwatch = ctx.$watch(() => {
           try {
             const raw = ctx.__raw;
             const data = persistFields
@@ -58,10 +77,11 @@ registerDirective("state", {
             /* ignore */
           }
         });
+        _onDispose(() => { if (unwatch) unwatch(); });
       }
     }
 
-    _log("state", data);
+    _log("state", initialState);
   },
 });
 

package/src/directives/styling.js

@@ -55,7 +55,7 @@ registerDirective("class-*", {
       el.classList.toggle(suffix, !!evaluate(expr, ctx));
     }
     _watchExpr(expr, ctx, update);
-    if (expr.includes("$i18n") || expr.includes("NoJS.locale")) _watchI18n(update);
+    if (expr.includes("$i18n") || expr.includes("NoJS.locale") || expr.includes("window.NoJS.locale")) _watchI18n(update);
     update();
   },
 });