@erickxavier/no-js 1.7.0 → 1.8.1

package/package.json

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

package/src/directives/refs.js

@@ -6,8 +6,12 @@ import {
   _refs,
   _stores,
   _notifyStoreWatchers,
+  _emitEvent,
+  _routerInstance,
+  _warn,
   _onDispose,
 } from "../globals.js";
+import { _devtoolsEmit } from "../devtools.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
 import { _doFetch } from "../fetch.js";
@@ -75,19 +79,41 @@ registerDirective("call", {
   init(el, name, url) {
     const ctx = findContext(el);
     const method = el.getAttribute("method") || "get";
-    const asKey = el.getAttribute("as");
+    const asKey = el.getAttribute("as") || "data";
     const intoStore = el.getAttribute("into");
     const successTpl = el.getAttribute("success");
     const errorTpl = el.getAttribute("error");
+    const loadingTpl = el.getAttribute("loading");
     const thenExpr = el.getAttribute("then");
     const confirmMsg = el.getAttribute("confirm");
     const bodyAttr = el.getAttribute("body");
+    const redirectPath = el.getAttribute("redirect");
+    const headersAttr = el.getAttribute("headers");
+
+    const originalChildren = [...el.childNodes].map((n) => n.cloneNode(true));
+    let _activeAbort = null;
 
     el.addEventListener("click", async (e) => {
       e.preventDefault();
       if (confirmMsg && !window.confirm(confirmMsg)) return;
 
+      // SwitchMap: abort previous in-flight request
+      if (_activeAbort) _activeAbort.abort();
+      _activeAbort = new AbortController();
+
       const resolvedUrl = _interpolate(url, ctx);
+
+      // Show loading template
+      if (loadingTpl) {
+        const clone = _cloneTemplate(loadingTpl);
+        if (clone) {
+          el.innerHTML = "";
+          el.appendChild(clone);
+          processTree(el);
+          el.disabled = true;
+        }
+      }
+
       try {
         let reqBody = null;
         if (bodyAttr) {
@@ -98,9 +124,27 @@ registerDirective("call", {
             reqBody = interpolated;
           }
         }
-        const data = await _doFetch(resolvedUrl, method, reqBody, {}, el);
+
+        const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
+        const data = await _doFetch(
+          resolvedUrl,
+          method,
+          reqBody,
+          extraHeaders,
+          el,
+          _activeAbort.signal,
+        );
+
+        // Restore original children
+        if (loadingTpl) {
+          el.innerHTML = "";
+          for (const child of originalChildren)
+            el.appendChild(child.cloneNode(true));
+          el.disabled = false;
+        }
+
         if (asKey) ctx.$set(asKey, data);
-        if (asKey && intoStore) {
+        if (intoStore) {
           if (!_stores[intoStore]) _stores[intoStore] = createContext({});
           _stores[intoStore].$set(asKey, data);
           _notifyStoreWatchers();
@@ -123,14 +167,37 @@ registerDirective("call", {
             processTree(wrapper);
           }
         }
+
+        if (redirectPath && _routerInstance)
+          _routerInstance.push(redirectPath);
+
+        _emitEvent("fetch:success", { url: resolvedUrl, data });
+        _devtoolsEmit("fetch:success", { method, url: resolvedUrl });
       } catch (err) {
+        // SwitchMap: silently ignore aborted requests
+        if (err.name === "AbortError") return;
+
+        _warn(`call ${method.toUpperCase()} ${resolvedUrl} failed:`, err.message);
+
+        // Restore original children
+        if (loadingTpl) {
+          el.innerHTML = "";
+          for (const child of originalChildren)
+            el.appendChild(child.cloneNode(true));
+          el.disabled = false;
+        }
+
+        _emitEvent("fetch:error", { url: resolvedUrl, error: err });
+        _emitEvent("error", { url: resolvedUrl, error: err });
+        _devtoolsEmit("fetch:error", { method, url: resolvedUrl, error: err.message });
+
         if (errorTpl) {
           const clone = _cloneTemplate(errorTpl);
           if (clone) {
             const tplEl = document.getElementById(errorTpl.replace("#", ""));
             const vn = tplEl?.getAttribute("var") || "err";
             const childCtx = createContext(
-              { [vn]: { message: err.message, status: err.status } },
+              { [vn]: { message: err.message, status: err.status, body: err.body } },
               ctx,
             );
             const target = el.parentElement;

package/src/directives/validation.js

@@ -316,7 +316,7 @@ registerDirective("validate", {
           // $form.valid reflects real state (keeps submit disabled)
           if (!fieldValid) valid = false;
 
-          // $form.errors only shows errors for non-pristine fields
+          // $form.errors only shows errors for interacted fields
           if (!fieldValid && fieldInteracted) {
             errors[field.name] = topError.message;
             errorCount++;

package/src/dom.js

@@ -84,6 +84,11 @@ export async function _loadRemoteTemplates(root) {
         _log("[LRT] CACHE HIT:", resolvedUrl);
       } else {
         const res = await fetch(resolvedUrl);
+        if (!res.ok) {
+          _warn("Failed to load template:", src, "HTTP", res.status);
+          tpl.__loadFailed = true;
+          return;
+        }
         html = await res.text();
         if (useCache) _templateHtmlCache.set(resolvedUrl, html);
       }
@@ -148,6 +153,12 @@ export async function _loadTemplateElement(tpl) {
       _log("[LTE] CACHE HIT:", resolvedUrl);
     } else {
       const res = await fetch(resolvedUrl);
+      if (!res.ok) {
+        _warn("Failed to load template:", src, "HTTP", res.status);
+        tpl.__loadFailed = true;
+        if (loadingMarker) loadingMarker.remove();
+        return;
+      }
       html = await res.text();
       if (useCache) _templateHtmlCache.set(resolvedUrl, html);
     }
@@ -170,7 +181,10 @@ export async function _loadTemplateElement(tpl) {
         const subSrc = sub.getAttribute("src");
         const subUrl = _resolveTemplateSrc(subSrc, sub);
         if (_templateHtmlCache.has(subUrl)) return;
-        return fetch(subUrl).then((r) => r.text()).then((h) => {
+        return fetch(subUrl).then((r) => {
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.text();
+        }).then((h) => {
           _templateHtmlCache.set(subUrl, h);
         }).catch(() => {});
       });

package/src/globals.js

@@ -12,7 +12,7 @@ export const _config = {
   csrf: null,
   cache: { strategy: "none", ttl: 300000 },
   templates: { cache: true },
-  router: { mode: "history", base: "/", scrollBehavior: "top", templates: "pages", ext: ".tpl" },
+  router: { useHash: false, base: "/", scrollBehavior: "top", templates: "pages", ext: ".tpl" },
   i18n: { defaultLocale: "en", fallbackLocale: "en", detectBrowser: false, loadPath: null, ns: [], cache: true, persist: false },
   debug: false,
   devtools: false,

package/src/index.js

@@ -15,6 +15,7 @@ import {
   _routerInstance,
   setRouterInstance,
   _log,
+  _notifyStoreWatchers,
 } from "./globals.js";
 import { _i18n, _loadI18nForLocale } from "./i18n.js";
 import { createContext } from "./context.js";
@@ -44,14 +45,20 @@ import "./directives/dnd.js";
 //  PUBLIC API
 // ═══════════════════════════════════════════════════════════════════════
 
+function _stripBase(pathname) {
+  const base = (_config.router.base || "/").replace(/\/$/, "");
+  if (!base) return pathname || "/";
+  const escaped = base.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return pathname.replace(new RegExp("^" + escaped), "") || "/";
+}
+
 function _getDefaultRoutePath() {
   if (typeof window === "undefined") return null;
   const routerCfg = _config.router || {};
-  if (routerCfg.mode === "hash") {
+  if (routerCfg.useHash) {
     return window.location.hash.slice(1) || "/";
   }
-  const base = (routerCfg.base || "/").replace(/\/$/, "");
-  return window.location.pathname.replace(base, "") || "/";
+  return _stripBase(window.location.pathname);
 }
 
 const NoJS = {
@@ -82,7 +89,18 @@ const NoJS = {
     if (opts.csrf) _config.csrf = opts.csrf;
     if (opts.cache) _config.cache = { ...prevCache, ...opts.cache };
     if (opts.templates) _config.templates = { ...prevTemplates, ...opts.templates };
-    if (opts.router) _config.router = { ...prevRouter, ...opts.router };
+    if (opts.router) {
+      if ("mode" in opts.router && !("useHash" in opts.router)) {
+        _log(
+          'router.mode is deprecated. Use router.useHash instead: ' +
+          'mode: "hash" → useHash: true, mode: "history" → useHash: false',
+          "warn"
+        );
+        opts.router.useHash = opts.router.mode === "hash";
+        delete opts.router.mode;
+      }
+      _config.router = { ...prevRouter, ...opts.router };
+    }
     if (opts.i18n) {
       _config.i18n = { ...prevI18n, ...opts.i18n };
       _i18n.locale = opts.i18n.defaultLocale || _i18n.locale;
@@ -204,6 +222,11 @@ const NoJS = {
     return _stores;
   },
 
+  // Notify global store watchers (for external JS mutations)
+  notify() {
+    _notifyStoreWatchers();
+  },
+
   // Access router
   get router() {
     return _routerInstance;
@@ -217,7 +240,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.7.0",
+  version: "1.8.1",
 };
 
 export default NoJS;

package/src/router.js

@@ -10,8 +10,18 @@ import { processTree, _disposeTree } from "./registry.js";
 import { _animateIn } from "./animations.js";
 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 _stripBase(pathname) {
+  const base = (_config.router.base || "/").replace(/\/$/, "");
+  if (!base) return pathname || "/";
+  const escaped = base.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return pathname.replace(new RegExp("^" + escaped), "") || "/";
+}
+
 export function _createRouter() {
   const routes = [];
+  const _wildcards = new Map();
   let current = { path: "", params: {}, query: {}, hash: "" };
   const listeners = new Set();
   const _autoTemplateCache = new Map();
@@ -68,6 +78,7 @@ export function _createRouter() {
 
     const matched = matchRoute(cleanPath);
     if (matched) {
+      current.matched = true;
       current.params = matched.params;
 
       // Guard check
@@ -85,15 +96,34 @@ export function _createRouter() {
           return;
         }
       }
+    } else {
+      current.matched = false;
+
+      // Guard check on wildcard template (default outlet)
+      const wildcardTpl = _wildcards.get("default");
+      if (wildcardTpl) {
+        const guardExpr = wildcardTpl.getAttribute("guard");
+        const redirectPath = wildcardTpl.getAttribute("redirect");
+        if (guardExpr) {
+          const ctx = createContext({}, null);
+          ctx.__raw.$store = _stores;
+          ctx.__raw.$route = current;
+          const allowed = evaluate(guardExpr, ctx);
+          if (!allowed && redirectPath) {
+            await navigate(redirectPath, true);
+            return;
+          }
+        }
+      }
     }
 
     // Update URL
-    if (_config.router.mode === "hash") {
+    if (_config.router.useHash) {
       const newHash = "#" + path;
       if (replace) window.location.replace(newHash);
       else window.location.hash = path;
     } else {
-      const fullPath = _config.router.base.replace(/\/$/, "") + path;
+      const fullPath = (_config.router.base || "/").replace(/\/$/, "") + path;
       if (replace) window.history.replaceState({}, "", fullPath);
       else window.history.pushState({}, "", fullPath);
     }
@@ -157,17 +187,48 @@ export function _createRouter() {
         }
       }
 
+      // ── Wildcard / 404 fallback when no template matched ──
+      if (!tpl || tpl.__loadFailed) {
+        // Only apply wildcard fallback when no explicit route matched
+        // or when a file-based template failed to load.
+        // When an explicit route matched but doesn't cover this outlet, just clear it.
+        if (!matched || tpl?.__loadFailed) {
+          const wildcardTpl = _wildcards.get(outletName)
+            || (outletName !== "default" ? _wildcards.get("default") : null);
+          if (wildcardTpl) {
+            tpl = wildcardTpl;
+          }
+        }
+      }
+
       // Always clear first — dispose watchers/listeners before wiping DOM
       _disposeTree(outletEl);
       outletEl.innerHTML = "";
 
-      if (tpl) {
+      if (tpl && !tpl.__loadFailed) {
         // Load template on-demand if not yet fetched
         if (tpl.getAttribute("src") && !tpl.__srcLoaded) {
           _log("Loading route template on demand:", tpl.getAttribute("src"));
           await _loadTemplateElement(tpl);
         }
 
+        // If template load failed, try wildcard fallback
+        if (tpl.__loadFailed) {
+          const wildcardTpl = _wildcards.get(outletName)
+            || (outletName !== "default" ? _wildcards.get("default") : null);
+          if (wildcardTpl && !wildcardTpl.__loadFailed) {
+            tpl = wildcardTpl;
+            if (tpl.getAttribute("src") && !tpl.__srcLoaded) {
+              await _loadTemplateElement(tpl);
+            }
+          }
+          // If still failed (no usable wildcard, or wildcard itself failed), use built-in
+          if (!tpl || tpl.__loadFailed) {
+            outletEl.innerHTML = _BUILTIN_404_HTML;
+            continue;
+          }
+        }
+
         // i18n namespace loading for route template
         const i18nNs = tpl.getAttribute("i18n-ns");
         if (i18nNs) {
@@ -209,6 +270,9 @@ export function _createRouter() {
 
         _clearDeclared(wrapper);
         processTree(wrapper);
+      } else if (!matched || tpl?.__loadFailed) {
+        // No route matched and no wildcard — inject built-in 404
+        outletEl.innerHTML = _BUILTIN_404_HTML;
       }
     }
 
@@ -278,7 +342,7 @@ export function _createRouter() {
       const backgroundFetches = [];
 
       for (const [path, lazy] of routeLazy) {
-        if (lazy === "ondemand" || path === current.path) continue;
+        if (lazy === "ondemand" || path === current.path || path === "*") continue;
         const segment = path === "/" ? indexName : path.replace(/^\//, "");
         const fullSrc = baseSrc + segment + ext;
         const cacheKey = outletName + ":" + fullSrc;
@@ -328,6 +392,10 @@ export function _createRouter() {
       return () => listeners.delete(fn);
     },
     register(path, templateEl, outlet = "default") {
+      if (path === "*") {
+        _wildcards.set(outlet, templateEl);
+        return;
+      }
       const entry = _getOrCreateEntry(path);
       entry.outlets[outlet] = templateEl;
     },
@@ -336,6 +404,10 @@ export function _createRouter() {
       document.querySelectorAll("template[route]").forEach((tpl) => {
         const path = tpl.getAttribute("route");
         const outlet = tpl.getAttribute("outlet") || "default";
+        if (path === "*") {
+          _wildcards.set(outlet, tpl);
+          return;
+        }
         const entry = _getOrCreateEntry(path);
         entry.outlets[outlet] = tpl;
       });
@@ -350,18 +422,21 @@ export function _createRouter() {
           return;
         }
 
-        // In hash mode, intercept plain anchor links (href="#id") so they
-        // scroll to the target element instead of conflicting with the router.
-        if (_config.router.mode === "hash") {
-          const anchor = e.target.closest('a[href^="#"]');
-          if (anchor && !anchor.hasAttribute("route")) {
-            const href = anchor.getAttribute("href");
-            const id = href.slice(1);
-            if (id && !id.startsWith("/")) {
-              const target = document.getElementById(id);
-              if (target) {
-                e.preventDefault();
-                _scrollToAnchor(id, target);
+        // Intercept plain anchor links (href="#id") in BOTH modes
+        // so they scroll to the target element without triggering
+        // route navigation or popstate re-renders.
+        const anchor = e.target.closest('a[href^="#"]');
+        if (anchor && !anchor.hasAttribute("route")) {
+          const href = anchor.getAttribute("href");
+          const id = href.slice(1);
+          if (id && !id.startsWith("/")) {
+            const target = document.getElementById(id);
+            if (target) {
+              e.preventDefault();
+              _scrollToAnchor(id, target);
+              // In history mode, update URL hash without triggering popstate
+              if (!_config.router.useHash) {
+                window.history.replaceState(null, "", "#" + id);
               }
             }
           }
@@ -369,7 +444,7 @@ export function _createRouter() {
       });
 
       // Listen for URL changes
-      if (_config.router.mode === "hash") {
+      if (_config.router.useHash) {
         window.addEventListener("hashchange", () => {
           const raw = window.location.hash.slice(1) || "/";
           if (!raw.startsWith("/")) {
@@ -390,12 +465,19 @@ export function _createRouter() {
         await navigate(path, true);
       } else {
         window.addEventListener("popstate", () => {
-          const path =
-            window.location.pathname.replace(_config.router.base, "") || "/";
+          const path = _stripBase(window.location.pathname);
+          // Guard: don't re-navigate if only the hash changed
+          if (path === current.path) {
+            const hash = window.location.hash.slice(1);
+            if (hash) {
+              const el = document.getElementById(hash);
+              if (el) _scrollToAnchor(hash, el);
+            }
+            return;
+          }
           navigate(path, true);
         });
-        const path =
-          window.location.pathname.replace(_config.router.base, "") || "/";
+        const path = _stripBase(window.location.pathname);
         await navigate(path, true);
       }