@erickxavier/no-js 1.0.0

package/src/dom.js

@@ -0,0 +1,232 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DOM HELPERS & REMOTE TEMPLATES
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _config, _log, _warn } from "./globals.js";
+import { createContext } from "./context.js";
+import { resolveUrl } from "./fetch.js";
+
+// ─── Template HTML cache: url → html string ────────────────────────────────
+// Avoids re-fetching the same .tpl file on repeat navigation.
+// Controlled by _config.templates.cache (default: true).
+export const _templateHtmlCache = new Map();
+
+export function findContext(el) {
+  let node = el;
+  while (node) {
+    if (node.__ctx) return node.__ctx;
+    node = node.parentElement;
+  }
+  return createContext();
+}
+
+export function _clearDeclared(el) {
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) walker.currentNode.__declared = false;
+}
+
+export function _cloneTemplate(id) {
+  if (!id) return null;
+  const cleanId = id.startsWith("#") ? id.slice(1) : id;
+  const tpl = document.getElementById(cleanId);
+  if (!tpl) return null;
+  return tpl.content ? tpl.content.cloneNode(true) : null;
+}
+
+// Simple HTML sanitizer
+export function _sanitizeHtml(html) {
+  if (!_config.sanitize) return html;
+  const safe = html
+    .replace(/<script[\s\S]*?<\/script>/gi, "")
+    .replace(/on\w+\s*=/gi, "data-blocked=")
+    .replace(/javascript:/gi, "");
+  return safe;
+}
+
+// Resolve a template src path.
+// - "./foo.tpl"  → relative to the parent template's folder (__srcBase)
+// - "/foo.tpl"   → absolute from server root (kept as-is for fetch)
+// - "foo.tpl"    → relative to page URL (kept as-is for fetch)
+function _resolveTemplateSrc(src, tpl) {
+  if (src.startsWith("./")) {
+    // Walk up to find the nearest ancestor with __srcBase
+    let node = tpl.parentNode;
+    while (node) {
+      if (node.__srcBase) {
+        return node.__srcBase + src.slice(2);
+      }
+      node = node.parentNode;
+    }
+    // No ancestor base found — strip "./" and let fetch resolve from page
+    return src.slice(2);
+  }
+  // Absolute or plain relative — use the existing resolveUrl logic
+  return resolveUrl(src, tpl);
+}
+
+export async function _loadRemoteTemplates(root) {
+  const scope = root || document;
+  const templates = scope.querySelectorAll("template[src]");
+  _log("[LRT] called on", scope === document ? "document" : scope.nodeName || "fragment", "— found", templates.length, "template[src]", [...templates].map(t => t.getAttribute("src")));
+  if (!templates.length) return;
+  const promises = [...templates].map(async (tpl) => {
+    if (tpl.__srcLoaded) { _log("[LRT] SKIP (already loaded):", tpl.getAttribute("src")); return; }
+    tpl.__srcLoaded = true;
+    const src = tpl.getAttribute("src");
+    const resolvedUrl = _resolveTemplateSrc(src, tpl);
+    // Track the folder of this template so children can use "./" paths
+    const baseFolder = resolvedUrl.substring(0, resolvedUrl.lastIndexOf("/") + 1);
+    try {
+      const useCache = _config.templates.cache !== false;
+      let html;
+      if (useCache && _templateHtmlCache.has(resolvedUrl)) {
+        html = _templateHtmlCache.get(resolvedUrl);
+        _log("[LRT] CACHE HIT:", resolvedUrl);
+      } else {
+        const res = await fetch(resolvedUrl);
+        html = await res.text();
+        if (useCache) _templateHtmlCache.set(resolvedUrl, html);
+      }
+      tpl.innerHTML = html;
+      // Stamp the base folder onto the content so nested templates inherit it
+      if (tpl.content) {
+        tpl.content.__srcBase = baseFolder;
+      }
+      _log("Loaded remote template:", src, "→", resolvedUrl);
+      // Recursively load nested remote templates
+      await _loadRemoteTemplates(tpl.content || tpl);
+      // Non-route templates are content-includes: replace them with
+      // their loaded content so it actually renders (template elements
+      // are inert — the browser never displays their .content).
+      if (!tpl.hasAttribute("route") && tpl.parentNode) {
+        // Transfer __srcBase to a wrapper so descendants keep the reference
+        const frag = tpl.content;
+        const children = [...frag.childNodes];
+        const parent = tpl.parentNode;
+        const ref = tpl.nextSibling;
+        parent.removeChild(tpl);
+        for (const child of children) {
+          if (child.nodeType === 1) child.__srcBase = child.__srcBase || baseFolder;
+          parent.insertBefore(child, ref);
+        }
+      }
+    } catch (e) {
+      _warn("Failed to load template:", src, e.message);
+    }
+  });
+  await Promise.all(promises);
+}
+
+// ─── Single-element loader (core primitive) ────────────────────────────────
+export async function _loadTemplateElement(tpl) {
+  const src = tpl.getAttribute("src");
+  if (tpl.__srcLoaded) { _log("[LTE] SKIP (already loaded):", src); return; }
+  _log("[LTE] START fetch:", src, "| route:", tpl.hasAttribute("route"), "| inDOM:", document.contains(tpl), "| loading:", tpl.getAttribute("loading"));
+  tpl.__srcLoaded = true;
+  const resolvedUrl = _resolveTemplateSrc(src, tpl);
+  const baseFolder = resolvedUrl.substring(0, resolvedUrl.lastIndexOf("/") + 1);
+
+  // Synchronously insert loading placeholder before the fetch begins
+  let loadingMarker = null;
+  const loadingId = tpl.getAttribute("loading");
+  if (loadingId && tpl.parentNode) {
+    const cleanId = loadingId.startsWith("#") ? loadingId.slice(1) : loadingId;
+    const source = document.getElementById(cleanId);
+    if (source && source.content) {
+      loadingMarker = document.createElement("span");
+      loadingMarker.style.cssText = "display:contents";
+      loadingMarker.appendChild(source.content.cloneNode(true));
+      tpl.parentNode.insertBefore(loadingMarker, tpl);
+    }
+  }
+
+  try {
+    const useCache = _config.templates.cache !== false;
+    let html;
+    if (useCache && _templateHtmlCache.has(resolvedUrl)) {
+      html = _templateHtmlCache.get(resolvedUrl);
+      _log("[LTE] CACHE HIT:", resolvedUrl);
+    } else {
+      const res = await fetch(resolvedUrl);
+      html = await res.text();
+      if (useCache) _templateHtmlCache.set(resolvedUrl, html);
+    }
+    tpl.innerHTML = html;
+    if (tpl.content) {
+      tpl.content.__srcBase = baseFolder;
+    }
+    _log("Loaded remote template:", src, "→", resolvedUrl);
+    // Route templates: defer nested loading until after DOM insertion
+    // (ensures loading="#id" placeholder lookup via getElementById works).
+    // Content-include templates: load nested ones now.
+    if (!tpl.hasAttribute("route")) {
+      await _loadRemoteTemplates(tpl.content || tpl);
+    }
+    // Remove loading placeholder once real content is ready
+    if (loadingMarker) loadingMarker.remove();
+    // Non-route templates are content-includes: inject content inline
+    if (!tpl.hasAttribute("route") && tpl.parentNode) {
+      const frag = tpl.content;
+      const children = [...frag.childNodes];
+      const parent = tpl.parentNode;
+      const ref = tpl.nextSibling;
+      parent.removeChild(tpl);
+      for (const child of children) {
+        if (child.nodeType === 1) child.__srcBase = child.__srcBase || baseFolder;
+        parent.insertBefore(child, ref);
+      }
+    }
+  } catch (e) {
+    if (loadingMarker) loadingMarker.remove();
+    _warn("Failed to load template:", src, e.message);
+  }
+}
+
+// ─── Inline template includes (template[include="id"]) ────────────────────
+// Synchronously clones a named inline template into every
+// <template include="id"> placeholder. Called before any async fetch
+// so skeleton/include content is stamped into the DOM immediately.
+export function _processTemplateIncludes(root) {
+  const scope = root || document;
+  scope.querySelectorAll("template[include]").forEach((tpl) => {
+    const id = tpl.getAttribute("include");
+    const source = document.getElementById(id.startsWith("#") ? id.slice(1) : id);
+    if (!source || !source.content) return;
+    tpl.replaceWith(source.content.cloneNode(true));
+  });
+}
+
+// ─── Phase 1 loader (priority + eager non-route + active route) ────────────
+export async function _loadRemoteTemplatesPhase1(defaultRoutePath) {
+  const all = [...document.querySelectorAll("template[src]")];
+
+  // Phase 0: lazy="priority" templates — load first, regardless of route type
+  const phase0 = all.filter(
+    (tpl) => !tpl.__srcLoaded && tpl.getAttribute("lazy") === "priority"
+  );
+  await Promise.all(phase0.map(_loadTemplateElement));
+
+  // Phase 1: non-route templates + the route matching defaultRoutePath
+  // Skip lazy="ondemand" and lazy="priority" (already handled above)
+  const phase1 = all.filter((tpl) => {
+    if (tpl.__srcLoaded) return false;
+    const lazy = tpl.getAttribute("lazy");
+    if (lazy === "ondemand" || lazy === "priority") return false;
+    const isRoute = tpl.hasAttribute("route");
+    if (!isRoute) return true; // content-include: always Phase 1
+    // Route template: only include if it matches the current default path
+    return defaultRoutePath != null && tpl.getAttribute("route") === defaultRoutePath;
+  });
+  await Promise.all(phase1.map(_loadTemplateElement));
+}
+
+// ─── Phase 2 loader (background preload of remaining route templates) ──────
+export function _loadRemoteTemplatesPhase2() {
+  const all = [...document.querySelectorAll("template[src]")];
+  const phase2 = all.filter((tpl) => {
+    if (tpl.__srcLoaded) return false;
+    if (tpl.getAttribute("lazy") === "ondemand") return false;
+    return tpl.hasAttribute("route");
+  });
+  return Promise.all(phase2.map(_loadTemplateElement));
+}

package/src/evaluate.js

@@ -0,0 +1,298 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  EXPRESSION EVALUATOR
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _stores, _routerInstance, _filters, _warn, _config } from "./globals.js";
+import { _i18n } from "./i18n.js";
+import { _collectKeys } from "./context.js";
+
+const _exprCache = new Map();
+
+// CSP-safe expression evaluator (no new Function / eval)
+// Handles dot-notation paths, basic comparisons, boolean operators, negation, and literals.
+function _cspSafeEval(expr, keys, vals) {
+  const scope = {};
+  for (let i = 0; i < keys.length; i++) scope[keys[i]] = vals[i];
+
+  function resolvePath(path, obj) {
+    return path.split(".").reduce((o, k) => o?.[k], obj);
+  }
+
+  function parseValue(token) {
+    const t = token.trim();
+    if (t === "true") return true;
+    if (t === "false") return false;
+    if (t === "null") return null;
+    if (t === "undefined") return undefined;
+    if (/^-?\d+(\.\d+)?$/.test(t)) return Number(t);
+    if (/^(['"`]).*\1$/.test(t)) return t.slice(1, -1);
+    // Treat as property path resolved from scope
+    return resolvePath(t, scope);
+  }
+
+  const trimmed = expr.trim();
+
+  // Handle ternary: condition ? trueExpr : falseExpr
+  const ternaryMatch = trimmed.match(/^(.+?)\s*\?\s*(.+?)\s*:\s*(.+)$/);
+  if (ternaryMatch) {
+    const cond = _cspSafeEval(ternaryMatch[1].trim(), keys, vals);
+    return cond
+      ? _cspSafeEval(ternaryMatch[2].trim(), keys, vals)
+      : _cspSafeEval(ternaryMatch[3].trim(), keys, vals);
+  }
+
+  // Handle logical OR (||)
+  if (trimmed.includes("||")) {
+    const parts = trimmed.split("||");
+    for (const part of parts) {
+      const val = _cspSafeEval(part.trim(), keys, vals);
+      if (val) return val;
+    }
+    return _cspSafeEval(parts[parts.length - 1].trim(), keys, vals);
+  }
+
+  // Handle logical AND (&&)
+  if (trimmed.includes("&&")) {
+    const parts = trimmed.split("&&");
+    let last;
+    for (const part of parts) {
+      last = _cspSafeEval(part.trim(), keys, vals);
+      if (!last) return last;
+    }
+    return last;
+  }
+
+  // Handle comparisons: ===, !==, ==, !=, >=, <=, >, <
+  const cmpMatch = trimmed.match(/^(.+?)\s*(===|!==|==|!=|>=|<=|>|<)\s*(.+)$/);
+  if (cmpMatch) {
+    const left = parseValue(cmpMatch[1]);
+    const right = parseValue(cmpMatch[3]);
+    switch (cmpMatch[2]) {
+      case "===": return left === right;
+      case "!==": return left !== right;
+      case "==":  return left == right;
+      case "!=":  return left != right;
+      case ">=":  return left >= right;
+      case "<=":  return left <= right;
+      case ">":   return left > right;
+      case "<":   return left < right;
+    }
+  }
+
+  // Handle negation
+  if (trimmed.startsWith("!")) {
+    return !_cspSafeEval(trimmed.slice(1).trim(), keys, vals);
+  }
+
+  return parseValue(trimmed);
+}
+
+// Parse pipe syntax: "expr | filter1 | filter2:arg"
+function _parsePipes(exprStr) {
+  // Don't split on || (logical OR)
+  const parts = [];
+  let current = "";
+  let depth = 0;
+  let inStr = false;
+  let strChar = "";
+  for (let i = 0; i < exprStr.length; i++) {
+    const ch = exprStr[i];
+    if (inStr) {
+      current += ch;
+      if (ch === strChar && exprStr[i - 1] !== "\\") inStr = false;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      inStr = true;
+      strChar = ch;
+      current += ch;
+      continue;
+    }
+    if (ch === "(" || ch === "[" || ch === "{") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === ")" || ch === "]" || ch === "}") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (
+      ch === "|" &&
+      depth === 0 &&
+      exprStr[i + 1] !== "|" &&
+      exprStr[i - 1] !== "|"
+    ) {
+      parts.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  parts.push(current.trim());
+  return parts;
+}
+
+function _applyFilter(value, filterStr) {
+  const colonIdx = filterStr.indexOf(":");
+  let name, argStr;
+  if (colonIdx === -1) {
+    name = filterStr.trim();
+    argStr = null;
+  } else {
+    name = filterStr.substring(0, colonIdx).trim();
+    argStr = filterStr.substring(colonIdx + 1).trim();
+  }
+  const fn = _filters[name];
+  if (!fn) {
+    _warn(`Unknown filter: ${name}`);
+    return value;
+  }
+  // Parse args: split by comma but respect quotes
+  const args = argStr ? _parseFilterArgs(argStr) : [];
+  return fn(value, ...args);
+}
+
+function _parseFilterArgs(str) {
+  const args = [];
+  let current = "";
+  let inStr = false;
+  let strChar = "";
+  for (const ch of str) {
+    if (inStr) {
+      if (ch === strChar) {
+        inStr = false;
+        continue;
+      }
+      current += ch;
+      continue;
+    }
+    if (ch === "'" || ch === '"') {
+      inStr = true;
+      strChar = ch;
+      continue;
+    }
+    if (ch === ",") {
+      args.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  if (current.trim()) args.push(current.trim());
+  // Try to parse numbers
+  return args.map((a) => {
+    const n = Number(a);
+    return isNaN(n) ? a : n;
+  });
+}
+
+export function evaluate(expr, ctx) {
+  if (expr == null || expr === "") return undefined;
+  try {
+    const pipes = _parsePipes(expr);
+    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];
+      }
+    }
+
+    const keyArr = keys;
+    const valArr = keyArr.map((k) => vals[k]);
+
+    let result;
+    if (_config.csp === "strict") {
+      result = _cspSafeEval(mainExpr, keyArr, valArr);
+    } else {
+      let cacheKey = mainExpr + "|" + keyArr.join(",");
+      let fn = _exprCache.get(cacheKey);
+      if (!fn) {
+        fn = new Function(...keyArr, `return (${mainExpr})`);
+        _exprCache.set(cacheKey, fn);
+      }
+      result = fn(...valArr);
+    }
+
+    // Apply filters
+    for (let i = 1; i < pipes.length; i++) {
+      result = _applyFilter(result, pipes[i]);
+    }
+
+    return result;
+  } catch (e) {
+    return undefined;
+  }
+}
+
+// Execute a statement (for on:* handlers)
+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;
+      }
+    }
+
+    const keyArr = [...keys];
+    const valArr = keyArr.map((k) => vals[k]);
+
+    // Build setters to write back state through the full context chain.
+    // For each key in any ancestor context, find the owning context at runtime
+    // and call $set on it — so mutations inside `each` loops correctly
+    // propagate back to parent state (e.g. cart updated from a loop's on:click).
+    const chainKeys = new Set();
+    let _wCtx = ctx;
+    while (_wCtx && _wCtx.__isProxy) {
+      for (const k of Object.keys(_wCtx.__raw)) chainKeys.add(k);
+      _wCtx = _wCtx.$parent;
+    }
+    const setters = [...chainKeys]
+      .map(
+        (k) =>
+          `{let _c=__ctx;while(_c&&_c.__isProxy){if('${k}'in _c.__raw){_c.$set('${k}',typeof ${k}!=='undefined'?${k}:_c.__raw['${k}']);break;}_c=_c.$parent;}}`,
+      )
+      .join("\n");
+
+    const fn = new Function("__ctx", ...keyArr, `${expr};\n${setters}`);
+    fn(ctx, ...valArr);
+  } catch (e) {
+    _warn("Expression error:", expr, e.message);
+  }
+}
+
+export function resolve(path, ctx) {
+  return path.split(".").reduce((o, k) => o?.[k], ctx);
+}
+
+// Interpolate strings like "/users/{user.id}?q={search}"
+export function _interpolate(str, ctx) {
+  return str.replace(/\{([^}]+)\}/g, (_, expr) => {
+    const val = evaluate(expr.trim(), ctx);
+    return val != null ? val : "";
+  });
+}

package/src/fetch.js

@@ -0,0 +1,173 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  FETCH HELPER, URL RESOLUTION & CACHE
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _config, _interceptors, _cache } from "./globals.js";
+
+export function resolveUrl(url, el) {
+  if (
+    url.startsWith("http://") ||
+    url.startsWith("https://") ||
+    url.startsWith("//")
+  )
+    return url;
+  let node = el;
+  while (node) {
+    const base = node.getAttribute?.("base");
+    if (base) return base.replace(/\/+$/, "") + "/" + url.replace(/^\/+/, "");
+    node = node.parentElement;
+  }
+  if (_config.baseApiUrl)
+    return (
+      _config.baseApiUrl.replace(/\/+$/, "") + "/" + url.replace(/^\/+/, "")
+    );
+  return url;
+}
+
+export async function _doFetch(
+  url,
+  method = "GET",
+  body = null,
+  extraHeaders = {},
+  el = null,
+  externalSignal = null,
+) {
+  const fullUrl = resolveUrl(url, el);
+  let opts = {
+    method: method.toUpperCase(),
+    headers: { ...(_config.headers || {}), ...extraHeaders },
+    credentials: _config.credentials,
+  };
+
+  if (body && method !== "GET") {
+    if (typeof body === "string") {
+      try {
+        JSON.parse(body);
+        opts.headers["Content-Type"] = "application/json";
+        opts.body = body;
+      } catch {
+        opts.body = body;
+      }
+    } else if (body instanceof FormData) {
+      opts.body = body;
+    } else {
+      opts.headers["Content-Type"] = "application/json";
+      opts.body = JSON.stringify(body);
+    }
+  }
+
+  // CSRF
+  if (_config.csrf && method !== "GET") {
+    opts.headers[_config.csrf.header || "X-CSRF-Token"] =
+      _config.csrf.token || "";
+  }
+
+  // Request interceptors
+  for (const fn of _interceptors.request) {
+    opts = fn(fullUrl, opts) || opts;
+  }
+
+  // Retry logic
+  const maxRetries = _config.retries || 0;
+  let lastError;
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      const controller = new AbortController();
+      const timeout = setTimeout(
+        () => controller.abort(),
+        _config.timeout || 10000,
+      );
+      // Wire external abort signal (switchMap) to internal controller
+      if (externalSignal) {
+        if (externalSignal.aborted) {
+          clearTimeout(timeout);
+          throw new DOMException("Aborted", "AbortError");
+        }
+        externalSignal.addEventListener("abort", () => controller.abort(), {
+          once: true,
+        });
+      }
+      opts.signal = controller.signal;
+
+      let response = await fetch(fullUrl, opts);
+      clearTimeout(timeout);
+
+      // Response interceptors
+      for (const fn of _interceptors.response) {
+        response = fn(response, fullUrl) || response;
+      }
+
+      if (!response.ok) {
+        const errBody = await response.json().catch(() => ({}));
+        const err = new Error(errBody.message || `HTTP ${response.status}`);
+        err.status = response.status;
+        err.body = errBody;
+        throw err;
+      }
+
+      const text = await response.text();
+      try {
+        return JSON.parse(text);
+      } catch {
+        return text;
+      }
+    } catch (e) {
+      if (e.name === "AbortError") throw e; // Don't retry aborted requests
+      lastError = e;
+      if (attempt < maxRetries) {
+        await new Promise((r) => setTimeout(r, _config.retryDelay || 1000));
+      }
+    }
+  }
+  throw lastError;
+}
+
+export function _cacheGet(key, strategy) {
+  if (strategy === "none") return null;
+  if (strategy === "memory") {
+    const entry = _cache.get(key);
+    if (entry && Date.now() - entry.time < (_config.cache.ttl || 300000))
+      return entry.data;
+    return null;
+  }
+  const store =
+    strategy === "local"
+      ? localStorage
+      : strategy === "session"
+        ? sessionStorage
+        : null;
+  if (!store) return null;
+  try {
+    const raw = store.getItem("nojs_cache_" + key);
+    if (!raw) return null;
+    const entry = JSON.parse(raw);
+    if (Date.now() - entry.time < (_config.cache.ttl || 300000))
+      return entry.data;
+    store.removeItem("nojs_cache_" + key);
+  } catch {
+    /* ignore */
+  }
+  return null;
+}
+
+export function _cacheSet(key, data, strategy) {
+  if (strategy === "none") return;
+  const entry = { data, time: Date.now() };
+  if (strategy === "memory") {
+    _cache.set(key, entry);
+    return;
+  }
+  const store =
+    strategy === "local"
+      ? localStorage
+      : strategy === "session"
+        ? sessionStorage
+        : null;
+  if (store) {
+    try {
+      store.setItem("nojs_cache_" + key, JSON.stringify(entry));
+    } catch {
+      /* ignore */
+    }
+  }
+}