@erickxavier/no-js 1.9.1 → 1.10.0

package/src/evaluate.js

@@ -2,12 +2,36 @@
 //  EXPRESSION EVALUATOR
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _stores, _routerInstance, _filters, _warn, _notifyStoreWatchers } from "./globals.js";
+import { _config, _stores, _routerInstance, _filters, _warn, _notifyStoreWatchers } from "./globals.js";
 import { _i18n } from "./i18n.js";
 import { _collectKeys } from "./context.js";
 
-const _exprCache = new Map();
-const _stmtCache = new Map();
+function _makeCache() {
+  const map = new Map();
+  return {
+    get(k) {
+      if (!map.has(k)) return undefined;
+      // Move to end so this entry is the most-recently-used
+      const v = map.get(k);
+      map.delete(k);
+      map.set(k, v);
+      return v;
+    },
+    has(k) { return map.has(k); },
+    set(k, v) {
+      const max = _config.exprCacheSize;
+      if (map.has(k)) {
+        map.delete(k); // refresh position before re-inserting
+      } else if (map.size >= max) {
+        map.delete(map.keys().next().value); // evict LRU (insertion-order first)
+      }
+      map.set(k, v);
+    },
+    get size() { return map.size; },
+  };
+}
+export const _exprCache = _makeCache();
+export const _stmtCache = _makeCache();
 
 // ── Tokenizer ──────────────────────────────────────────────────────────
 
@@ -707,7 +731,26 @@ const _SAFE_GLOBALS = {
   Error, Symbol, console,
 };
 
-const _DENY_GLOBALS = { eval: 1, Function: 1, process: 1, require: 1, importScripts: 1 };
+// Explicit allow-list for browser globals accessible in template expressions.
+// Using an allow-list (opt-in) rather than a deny-list (opt-out) ensures that
+// network and storage APIs — fetch, XMLHttpRequest, localStorage, sessionStorage,
+// WebSocket, indexedDB — are unreachable from template code by default, closing
+// the surface where interpolated external data could trigger unintended requests.
+// window.fetch / window.localStorage remain accessible via the window object.
+const _BROWSER_GLOBALS = new Set([
+  'window', 'document', 'console', 'location', 'history',
+  'navigator', 'screen', 'performance', 'crypto',
+  // setTimeout/setInterval allow deferred execution from template expressions;
+  // necessary for legitimate use cases (e.g. debounce patterns in event handlers).
+  'setTimeout', 'clearTimeout', 'setInterval', 'clearInterval',
+  'requestAnimationFrame', 'cancelAnimationFrame',
+  // alert/confirm/prompt are included for completeness and backward compatibility
+  // (e.g. confirm dialogs before delete). They are discouraged in production UIs —
+  // prefer custom modal components for a better user experience.
+  'alert', 'confirm', 'prompt',
+  'CustomEvent', 'Event', 'URL', 'URLSearchParams',
+  'FormData', 'FileReader', 'Blob', 'Promise',
+]);
 
 function _evalNode(node, scope) {
   try {
@@ -721,8 +764,7 @@ function _evalNode(node, scope) {
       case 'Identifier':
         if (node.name in scope) return scope[node.name];
         if (node.name in _SAFE_GLOBALS) return _SAFE_GLOBALS[node.name];
-        // Allow access to browser globals (window, document, etc.) for backward compat
-        if (typeof globalThis !== 'undefined' && node.name in globalThis && !_DENY_GLOBALS[node.name]) return globalThis[node.name];
+        if (_BROWSER_GLOBALS.has(node.name) && typeof globalThis !== 'undefined') return globalThis[node.name];
         return undefined;
 
       case 'Forbidden':
@@ -1006,8 +1048,7 @@ function _execStmtNode(node, scope) {
       // so error-boundary directives can catch the error
       if (node.type === "CallExpr" && node.callee.type === "Identifier") {
         const name = node.callee.name;
-        if (!(name in scope) && !(name in _SAFE_GLOBALS) &&
-            (typeof globalThis === "undefined" || !(name in globalThis))) {
+        if (!(name in scope) && !(name in _SAFE_GLOBALS) && !_BROWSER_GLOBALS.has(name)) {
           throw new ReferenceError(name + " is not defined");
         }
       }
@@ -1124,25 +1165,17 @@ export function evaluate(expr, ctx) {
     const mainExpr = pipes[0];
     const { keys, vals } = _collectKeys(ctx);
 
-    // Add special variables
-    const specialKeys = [
-      "$store",
-      "$route",
-      "$router",
-      "$i18n",
-      "$refs",
-      "$form",
-    ];
-    for (const sk of specialKeys) {
-      if (!keys.includes(sk)) {
-        keys.push(sk);
-        vals[sk] = ctx[sk];
-      }
-    }
-
-    // Build scope object from keys/vals
+    // Build scope from cache without mutating it
     const scope = {};
     for (let i = 0; i < keys.length; i++) scope[keys[i]] = vals[keys[i]];
+    // Add special variables to scope only (never to the shared cache),
+    // preserving any same-named local context vars already in scope
+    if (!("$store"  in scope)) scope.$store  = _stores;
+    if (!("$route"  in scope)) scope.$route  = _routerInstance?.current;
+    if (!("$router" in scope)) scope.$router = _routerInstance;
+    if (!("$i18n"   in scope)) scope.$i18n   = _i18n;
+    if (!("$refs"   in scope)) scope.$refs   = ctx.$refs;
+    if (!("$form"   in scope)) scope.$form   = ctx.$form || null;
 
     // Parse expression into AST (cached)
     let ast = _exprCache.get(mainExpr);
@@ -1170,25 +1203,16 @@ export function evaluate(expr, ctx) {
 export function _execStatement(expr, ctx, extraVars = {}) {
   try {
     const { keys, vals } = _collectKeys(ctx);
-    // Add special vars
-    const specials = {
-      $store: _stores,
-      $route: _routerInstance?.current,
-      $router: _routerInstance,
-      $i18n: _i18n,
-      $refs: ctx.$refs,
-    };
-    Object.assign(specials, extraVars);
-    for (const [k, v] of Object.entries(specials)) {
-      if (!keys.includes(k)) {
-        keys.push(k);
-        vals[k] = v;
-      }
-    }
 
-    // Build scope
+    // Build scope from cache without mutating it, then add special vars and extraVars
     const scope = {};
     for (let i = 0; i < keys.length; i++) scope[keys[i]] = vals[keys[i]];
+    if (!("$store"  in scope)) scope.$store  = _stores;
+    if (!("$route"  in scope)) scope.$route  = _routerInstance?.current;
+    if (!("$router" in scope)) scope.$router = _routerInstance;
+    if (!("$i18n"   in scope)) scope.$i18n   = _i18n;
+    if (!("$refs"   in scope)) scope.$refs   = ctx.$refs;
+    Object.assign(scope, extraVars);
 
     // Snapshot context chain values for write-back comparison
     const chainKeys = new Set();
@@ -1227,10 +1251,11 @@ export function _execStatement(expr, ctx, extraVars = {}) {
       }
     }
 
-    // Write back new variables created during execution
+    // Write back new variables created during execution.
+    // Skip extraVars keys (e.g. __val, $el, $event) — they are execution-local
+    // and must not be persisted to the reactive context.
     for (const k in scope) {
-      if (k.startsWith("$") || chainKeys.has(k)) continue;
-      if (k in vals) continue;
+      if (k.startsWith("$") || chainKeys.has(k) || k in extraVars) continue;
       ctx.$set(k, scope[k]);
     }
 
@@ -1254,9 +1279,13 @@ export function resolve(path, ctx) {
 }
 
 // Interpolate strings like "/users/{user.id}?q={search}"
+// Note: interpolated values are encoded with encodeURIComponent, which encodes
+// "/" as "%2F". Path segments that intentionally contain "/" must be passed
+// as pre-encoded strings or concatenated outside of {} placeholders.
 export function _interpolate(str, ctx) {
   return str.replace(/\{([^}]+)\}/g, (_, expr) => {
     const val = evaluate(expr.trim(), ctx);
-    return val != null ? val : "";
+    if (val == null) return "";
+    return encodeURIComponent(String(val));
   });
 }

package/src/globals.js

@@ -17,6 +17,8 @@ export const _config = {
   debug: false,
   devtools: false,
   sanitize: true,
+  sanitizeHtml: null,
+  exprCacheSize: 500,
 };
 
 export const _interceptors = { request: [], response: [] };
@@ -68,6 +70,22 @@ export function _watchExpr(expr, ctx, fn) {
   });
   if (typeof expr === "string" && expr.includes("$store")) {
     _storeWatchers.add(fn);
+    fn._el = _currentEl;
+    // Self-cleanup when the element is removed without going through dispose
+    const el = _currentEl;
+    if (el && el.parentElement) {
+      const ro = new MutationObserver(() => {
+        if (!el.isConnected) {
+          _storeWatchers.delete(fn);
+          unwatch();
+          ro.disconnect();
+        }
+      });
+      // subtree: false — we only care about direct children of parentElement being removed
+      ro.observe(el.parentElement, { childList: true, subtree: false });
+      // Also disconnect via the normal disposal path to avoid a dangling MO
+      _onDispose(() => ro.disconnect());
+    }
   }
 }
 

package/src/index.js

@@ -15,6 +15,7 @@ import {
   _routerInstance,
   setRouterInstance,
   _log,
+  _warn,
   _notifyStoreWatchers,
 } from "./globals.js";
 import { _i18n, _loadI18nForLocale } from "./i18n.js";
@@ -87,6 +88,10 @@ const NoJS = {
       _warn("csp config option removed — No.JS is now CSP-safe by default");
       delete opts.csp;
     }
+    if (opts.exprCacheSize !== undefined) {
+      const n = parseInt(opts.exprCacheSize);
+      opts.exprCacheSize = (Number.isFinite(n) && n > 0) ? n : 500;
+    }
     Object.assign(_config, opts);
     if (opts.headers)
       _config.headers = { ...prevHeaders, ...opts.headers };
@@ -244,7 +249,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.9.1",
+  version: "1.10.0",
 };
 
 export default NoJS;

package/src/router.js

@@ -2,7 +2,7 @@
 //  CLIENT-SIDE ROUTER
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _config, _stores, _log } from "./globals.js";
+import { _config, _stores, _log, _warn } from "./globals.js";
 import { createContext } from "./context.js";
 import { evaluate } from "./evaluate.js";
 import { findContext, _clearDeclared, _loadTemplateElement, _processTemplateIncludes } from "./dom.js";
@@ -12,6 +12,13 @@ import { _devtoolsEmit } from "./devtools.js";
 
 const _BUILTIN_404_HTML = '<div style="text-align:center;padding:3rem 1rem;font-family:system-ui,sans-serif"><h1 style="font-size:4rem;margin:0;opacity:.3">404</h1><p style="font-size:1.25rem;color:#666">Page not found</p></div>';
 
+function _clearOutlets() {
+  for (const outletEl of document.querySelectorAll("[route-view]")) {
+    _disposeTree(outletEl);
+    outletEl.innerHTML = "";
+  }
+}
+
 function _stripBase(pathname) {
   const base = (_config.router.base || "/").replace(/\/$/, "");
   if (!base) return pathname || "/";
@@ -91,8 +98,13 @@ export function _createRouter() {
         ctx.__raw.$store = _stores;
         ctx.__raw.$route = current;
         const allowed = evaluate(guardExpr, ctx);
-        if (!allowed && redirectPath) {
-          await navigate(redirectPath, true);
+        if (!allowed) {
+          if (redirectPath) {
+            await navigate(redirectPath, true);
+          } else {
+            _warn(`Route guard failed for "${path}" but no redirect is defined. The route will not render.`);
+            _clearOutlets();
+          }
           return;
         }
       }
@@ -109,8 +121,13 @@ export function _createRouter() {
           ctx.__raw.$store = _stores;
           ctx.__raw.$route = current;
           const allowed = evaluate(guardExpr, ctx);
-          if (!allowed && redirectPath) {
-            await navigate(redirectPath, true);
+          if (!allowed) {
+            if (redirectPath) {
+              await navigate(redirectPath, true);
+            } else {
+              _warn(`Route guard failed for "${path}" but no redirect is defined. The route will not render.`);
+              _clearOutlets();
+            }
             return;
           }
         }