@erickxavier/no-js 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.0.2",
+  "version": "1.1.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",
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "build": "node build.js",
-    "start": "npx serve .",
+    "start": "node docs/dev-server.js",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",

package/src/context.js

@@ -2,7 +2,7 @@
 //  REACTIVE CONTEXT
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _stores, _refs, _routerInstance } from "./globals.js";
+import { _stores, _refs, _routerInstance, _currentEl } from "./globals.js";
 import { _i18n } from "./i18n.js";
 
 let _batchDepth = 0;
@@ -17,7 +17,10 @@ export function _endBatch() {
   if (_batchDepth === 0 && _batchQueue.size > 0) {
     const fns = [..._batchQueue];
     _batchQueue.clear();
-    fns.forEach((fn) => fn());
+    fns.forEach((fn) => {
+      if (fn._el && !fn._el.isConnected) return;
+      fn();
+    });
   }
 }
 
@@ -32,9 +35,15 @@ export function createContext(data = {}, parent = null) {
     notifying = true;
     try {
       if (_batchDepth > 0) {
-        listeners.forEach((fn) => _batchQueue.add(fn));
+        for (const fn of listeners) {
+          if (fn._el && !fn._el.isConnected) { listeners.delete(fn); continue; }
+          _batchQueue.add(fn);
+        }
       } else {
-        listeners.forEach((fn) => fn());
+        for (const fn of listeners) {
+          if (fn._el && !fn._el.isConnected) { listeners.delete(fn); continue; }
+          fn();
+        }
       }
     } finally {
       notifying = false;
@@ -48,6 +57,7 @@ export function createContext(data = {}, parent = null) {
       if (key === "__listeners") return listeners;
       if (key === "$watch")
         return (fn) => {
+          if (_currentEl) fn._el = _currentEl;
           listeners.add(fn);
           return () => listeners.delete(fn);
         };

package/src/directives/events.js

@@ -5,6 +5,7 @@
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext } from "../dom.js";
 import { registerDirective } from "../registry.js";
+import { _onDispose } from "../globals.js";
 
 registerDirective("on:*", {
   priority: 20,
@@ -28,14 +29,17 @@ registerDirective("on:*", {
         _execStatement(expr, ctx, { $el: el });
       });
       updatedObserver.observe(el, { childList: true, subtree: true, characterData: true, attributes: true });
+      _onDispose(() => updatedObserver.disconnect());
       return;
     }
     if (event === "error") {
-      window.addEventListener("error", (e) => {
+      const errorHandler = (e) => {
         if (el.contains(e.target) || e.target === el) {
           _execStatement(expr, ctx, { $el: el, $error: e.error || e.message });
         }
-      });
+      };
+      window.addEventListener("error", errorHandler);
+      _onDispose(() => window.removeEventListener("error", errorHandler));
       return;
     }
     if (event === "unmounted") {

package/src/directives/http.js

@@ -10,6 +10,7 @@ import {
   _notifyStoreWatchers,
   _emitEvent,
   _routerInstance,
+  _onDispose,
 } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
@@ -281,7 +282,8 @@ for (const method of HTTP_METHODS) {
 
       // Polling
       if (refreshInterval > 0) {
-        setInterval(doRequest, refreshInterval);
+        const id = setInterval(doRequest, refreshInterval);
+        _onDispose(() => clearInterval(id));
       }
     },
   });

package/src/directives/i18n.js

@@ -1,26 +1,33 @@
 // ═══════════════════════════════════════════════════════════════════════
 //  DIRECTIVE: t (i18n translations)
+//  DIRECTIVE: i18n-ns (load namespace before children)
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _i18n, _watchI18n } from "../i18n.js";
+import { _i18n, _watchI18n, _loadI18nNamespace, _notifyI18n } from "../i18n.js";
 import { evaluate } from "../evaluate.js";
 import { findContext } from "../dom.js";
-import { registerDirective } from "../registry.js";
+import { registerDirective, processTree } from "../registry.js";
 
 registerDirective("t", {
   priority: 20,
   init(el, name, key) {
     const ctx = findContext(el);
+    const useHtml = el.hasAttribute("t-html");
 
     function update() {
       const params = {};
       for (const attr of [...el.attributes]) {
-        if (attr.name.startsWith("t-") && attr.name !== "t") {
+        if (attr.name.startsWith("t-") && attr.name !== "t" && attr.name !== "t-html") {
           const paramName = attr.name.replace("t-", "");
           params[paramName] = evaluate(attr.value, ctx) ?? attr.value;
         }
       }
-      el.textContent = _i18n.t(key, params);
+      const text = _i18n.t(key, params);
+      if (useHtml) {
+        el.innerHTML = text;
+      } else {
+        el.textContent = text;
+      }
     }
 
     ctx.$watch(update);
@@ -28,3 +35,18 @@ registerDirective("t", {
     update();
   },
 });
+
+registerDirective("i18n-ns", {
+  priority: 1,
+  init(el, name, ns) {
+    // Save children to prevent premature t resolution
+    const saved = document.createDocumentFragment();
+    while (el.firstChild) saved.appendChild(el.firstChild);
+
+    _loadI18nNamespace(ns).then(() => {
+      el.appendChild(saved);
+      processTree(el);
+      _notifyI18n();
+    });
+  },
+});

package/src/directives/styling.js

@@ -5,6 +5,7 @@
 import { evaluate } from "../evaluate.js";
 import { findContext } from "../dom.js";
 import { registerDirective } from "../registry.js";
+import { _watchI18n } from "../i18n.js";
 
 registerDirective("class-*", {
   priority: 20,
@@ -51,6 +52,7 @@ registerDirective("class-*", {
       el.classList.toggle(suffix, !!evaluate(expr, ctx));
     }
     ctx.$watch(update);
+    if (expr.includes("NoJS.locale")) _watchI18n(update);
     update();
   },
 });

package/src/directives/validation.js

@@ -3,7 +3,7 @@
 //  HELPER: _validateField
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _validators } from "../globals.js";
+import { _validators, _onDispose } from "../globals.js";
 import { createContext } from "../context.js";
 import { findContext, _cloneTemplate } from "../dom.js";
 import { registerDirective, processTree } from "../registry.js";
@@ -223,10 +223,12 @@ registerDirective("error-boundary", {
     });
 
     // Listen for window-level errors (resource load failures, etc.)
-    window.addEventListener("error", (e) => {
+    const errorHandler = (e) => {
       if (el.contains(e.target) || el === e.target) {
         showFallback(e.message || "An error occurred");
       }
-    });
+    };
+    window.addEventListener("error", errorHandler);
+    _onDispose(() => window.removeEventListener("error", errorHandler));
   },
 });

package/src/globals.js

@@ -12,8 +12,8 @@ export const _config = {
   csrf: null,
   cache: { strategy: "none", ttl: 300000 },
   templates: { cache: true },
-  router: { mode: "history", base: "/", scrollBehavior: "top" },
-  i18n: { defaultLocale: "en", fallbackLocale: "en", detectBrowser: false },
+  router: { mode: "history", 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,
   csp: null,
@@ -30,6 +30,15 @@ export const _cache = new Map();
 export const _refs = {};
 export let _routerInstance = null;
 
+// ─── Lifecycle: tracks the element being processed by processElement ────────
+// Used by ctx.$watch and _onDispose to transparently tag watchers/disposers
+// with the owning DOM element — no changes needed in directive files.
+export let _currentEl = null;
+
+export function _setCurrentEl(el) {
+  _currentEl = el;
+}
+
 export function setRouterInstance(r) {
   _routerInstance = r;
 }
@@ -43,7 +52,13 @@ export function _warn(...args) {
 }
 
 export function _notifyStoreWatchers() {
-  for (const fn of _storeWatchers) fn();
+  for (const fn of _storeWatchers) {
+    if (fn._el && !fn._el.isConnected) {
+      _storeWatchers.delete(fn);
+      continue;
+    }
+    fn();
+  }
 }
 
 export function _watchExpr(expr, ctx, fn) {
@@ -53,6 +68,15 @@ export function _watchExpr(expr, ctx, fn) {
   }
 }
 
+// Register a dispose callback on the element currently being processed.
+// Called from directives to clean up intervals, observers, window listeners.
+export function _onDispose(fn) {
+  if (_currentEl) {
+    _currentEl.__disposers = _currentEl.__disposers || [];
+    _currentEl.__disposers.push(fn);
+  }
+}
+
 export function _emitEvent(name, data) {
   (_eventBus[name] || []).forEach((fn) => fn(data));
 }

package/src/i18n.js

@@ -2,15 +2,83 @@
 //  i18n SYSTEM
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _config } from "./globals.js";
+import { _config, _warn } from "./globals.js";
 
 const _i18nListeners = new Set();
+export { _i18nListeners };
 
 export function _watchI18n(fn) {
   _i18nListeners.add(fn);
   return () => _i18nListeners.delete(fn);
 }
 
+// ─── Notify all i18n listeners (shared by setter + directive) ────────
+export function _notifyI18n() {
+  for (const fn of _i18nListeners) {
+    if (fn._el && !fn._el.isConnected) { _i18nListeners.delete(fn); continue; }
+    fn();
+  }
+}
+
+// ─── Deep merge (recursive, returns new object) ─────────────────────
+export function _deepMerge(target, source) {
+  const out = { ...target };
+  for (const key of Object.keys(source)) {
+    if (
+      source[key] && typeof source[key] === "object" && !Array.isArray(source[key]) &&
+      target[key] && typeof target[key] === "object" && !Array.isArray(target[key])
+    ) {
+      out[key] = _deepMerge(target[key], source[key]);
+    } else {
+      out[key] = source[key];
+    }
+  }
+  return out;
+}
+
+// ─── Locale file cache: Map<string, object>  key = "en" or "en:dashboard"
+export const _i18nCache = new Map();
+export const _loadedNs = new Set();
+
+// ─── Fetch a single JSON file and merge into _i18n.locales[locale] ──
+export async function _loadLocale(locale, ns) {
+  const cacheKey = ns ? `${locale}:${ns}` : locale;
+  if (_config.i18n.cache && _i18nCache.has(cacheKey)) return;
+
+  let url = _config.i18n.loadPath.replace("{locale}", locale);
+  if (ns) url = url.replace("{ns}", ns);
+
+  try {
+    const res = await fetch(url);
+    if (!res.ok) { _warn(`i18n: failed to load ${url} (${res.status})`); return; }
+    const data = await res.json();
+    const toMerge = ns ? { [ns]: data } : data;
+    _i18n.locales[locale] = _deepMerge(_i18n.locales[locale] || {}, toMerge);
+    if (_config.i18n.cache) _i18nCache.set(cacheKey, data);
+  } catch (e) {
+    _warn(`i18n: error loading ${url}`, e);
+  }
+}
+
+// ─── Load all configured data for a locale (flat or all namespaces) ──
+export async function _loadI18nForLocale(locale) {
+  if (!_config.i18n.loadPath) return;
+  const ns = _config.i18n.ns;
+  if (!ns.length || !_config.i18n.loadPath.includes("{ns}")) {
+    await _loadLocale(locale, null);
+  } else {
+    await Promise.all(ns.map((n) => _loadLocale(locale, n)));
+  }
+}
+
+// ─── Load a single namespace for current + fallback locales ──────────
+export async function _loadI18nNamespace(ns) {
+  if (!_config.i18n.loadPath) return;
+  _loadedNs.add(ns);
+  const locales = new Set([_i18n.locale, _config.i18n.fallbackLocale]);
+  await Promise.all([...locales].map((l) => _loadLocale(l, ns)));
+}
+
 export const _i18n = {
   _locale: "en",
   locales: {},
@@ -20,7 +88,16 @@ export const _i18n = {
   set locale(v) {
     if (this._locale !== v) {
       this._locale = v;
-      _i18nListeners.forEach((fn) => fn());
+      if (_config.i18n.persist && typeof localStorage !== "undefined") {
+        try { localStorage.setItem("nojs-locale", v); } catch (_) {}
+      }
+      if (_config.i18n.loadPath) {
+        // Load configured ns + any route-loaded ns for the new locale
+        const allNs = new Set([..._config.i18n.ns, ..._loadedNs]);
+        Promise.all([...allNs].map((n) => _loadLocale(v, n))).then(() => _notifyI18n());
+      } else {
+        _notifyI18n();
+      }
     }
   },
   t(key, params = {}) {

package/src/index.js

@@ -16,7 +16,7 @@ import {
   setRouterInstance,
   _log,
 } from "./globals.js";
-import { _i18n } from "./i18n.js";
+import { _i18n, _loadI18nForLocale } from "./i18n.js";
 import { createContext } from "./context.js";
 import { evaluate, resolve } from "./evaluate.js";
 import { findContext, _loadRemoteTemplates, _loadRemoteTemplatesPhase1, _loadRemoteTemplatesPhase2, _processTemplateIncludes } from "./dom.js";
@@ -60,6 +60,13 @@ const NoJS = {
     _config.baseApiUrl = v;
   },
 
+  get locale() {
+    return _i18n.locale;
+  },
+  set locale(v) {
+    _i18n.locale = v;
+  },
+
   config(opts = {}) {
     // Save nested objects before shallow assign overwrites them
     const prevHeaders = { ..._config.headers };
@@ -85,6 +92,12 @@ const NoJS = {
     root = root || document.body;
     _log("Initializing...");
 
+    // Load external locale files (blocking — translations must be available for first paint)
+    if (_config.i18n.loadPath) {
+      const locales = new Set([_i18n.locale, _config.i18n.fallbackLocale]);
+      await Promise.all([...locales].map((l) => _loadI18nForLocale(l)));
+    }
+
     // Inline template includes (e.g. skeletons) — synchronous, before any fetch
     _processTemplateIncludes(root);
 
@@ -141,13 +154,32 @@ const NoJS = {
 
   // i18n
   i18n(opts) {
+    // Set config options BEFORE locale (setter checks loadPath)
+    if (opts.loadPath != null) _config.i18n.loadPath = opts.loadPath;
+    if (opts.ns) _config.i18n.ns = opts.ns;
+    if (opts.cache != null) _config.i18n.cache = opts.cache;
+    if (opts.persist != null) _config.i18n.persist = opts.persist;
     if (opts.locales) _i18n.locales = opts.locales;
-    if (opts.defaultLocale) _i18n.locale = opts.defaultLocale;
     if (opts.fallbackLocale) _config.i18n.fallbackLocale = opts.fallbackLocale;
+
+    // Set defaultLocale WITHOUT the setter (avoids overwriting localStorage)
+    if (opts.defaultLocale) _i18n._locale = opts.defaultLocale;
+
+    // Restore persisted locale (highest priority)
+    if (_config.i18n.persist && typeof localStorage !== "undefined") {
+      try {
+        const saved = localStorage.getItem("nojs-locale");
+        if (saved && _i18n.locales[saved]) { _i18n._locale = saved; return; }
+      } catch (_) {}
+    }
+
+    // Detect browser language (second priority)
     if (opts.detectBrowser) {
       const browserLang =
         typeof navigator !== "undefined" ? navigator.language : "en";
-      if (_i18n.locales[browserLang]) _i18n.locale = browserLang;
+      const prefix = browserLang.split("-")[0];
+      if (_i18n.locales[browserLang]) _i18n._locale = browserLang;
+      else if (_i18n.locales[prefix]) _i18n._locale = prefix;
     }
   },
 
@@ -183,7 +215,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.0.2",
+  version: "1.1.0",
 };
 
 export default NoJS;

package/src/registry.js

@@ -2,6 +2,9 @@
 //  DIRECTIVE REGISTRY & DOM PROCESSING
 // ═══════════════════════════════════════════════════════════════════════
 
+import { _currentEl, _setCurrentEl, _storeWatchers } from "./globals.js";
+import { _i18nListeners } from "./i18n.js";
+
 const _directives = new Map();
 
 export function registerDirective(name, handler) {
@@ -43,9 +46,12 @@ export function processElement(el) {
   }
 
   matched.sort((a, b) => a.priority - b.priority);
+  const prev = _currentEl;
   for (const m of matched) {
+    _setCurrentEl(el);
     m.init(el, m.name, m.value);
   }
+  _setCurrentEl(prev);
 }
 
 export function processTree(root) {
@@ -58,3 +64,27 @@ export function processTree(root) {
     if (!node.__declared) processElement(node);
   }
 }
+
+// ─── Disposal: proactive cleanup of watchers/listeners/disposers ────────
+
+function _disposeElement(node) {
+  if (node.__ctx && node.__ctx.__listeners) {
+    for (const fn of node.__ctx.__listeners) {
+      _storeWatchers.delete(fn);
+      _i18nListeners.delete(fn);
+    }
+    node.__ctx.__listeners.clear();
+  }
+  if (node.__disposers) {
+    node.__disposers.forEach((fn) => fn());
+    node.__disposers = null;
+  }
+  node.__declared = false;
+}
+
+export function _disposeTree(root) {
+  if (!root) return;
+  _disposeElement(root);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) _disposeElement(walker.currentNode);
+}

package/src/router.js

@@ -6,13 +6,14 @@ import { _config, _stores, _log } from "./globals.js";
 import { createContext } from "./context.js";
 import { evaluate } from "./evaluate.js";
 import { findContext, _clearDeclared, _loadTemplateElement, _processTemplateIncludes } from "./dom.js";
-import { processTree } from "./registry.js";
+import { processTree, _disposeTree } from "./registry.js";
 import { _animateIn } from "./animations.js";
 
 export function _createRouter() {
   const routes = [];
   let current = { path: "", params: {}, query: {}, hash: "" };
   const listeners = new Set();
+  const _autoTemplateCache = new Map();
 
   function _getOrCreateEntry(path) {
     let entry = routes.find((r) => r.path === path);
@@ -118,9 +119,38 @@ export function _createRouter() {
       const outletName = outletAttr && outletAttr.trim() !== "" ? outletAttr.trim() : "default";
 
       // Find the template for this outlet in the matched route
-      const tpl = matched?.route?.outlets?.[outletName];
+      let tpl = matched?.route?.outlets?.[outletName];
+
+      // ── File-based routing: auto-resolve from route-view[src] or config ──
+      const configTemplates = _config.router.templates || "";
+      if (!tpl && (outletEl.hasAttribute("src") || configTemplates)) {
+        const rawSrc = outletEl.getAttribute("src") || configTemplates;
+        const baseSrc = rawSrc.replace(/\/?$/, "/");
+        const ext = outletEl.getAttribute("ext") || _config.router.ext || ".html";
+        const indexName = outletEl.getAttribute("route-index") || "index";
+        const segment = current.path === "/" ? indexName : current.path.replace(/^\//, "");
+        const fullSrc = baseSrc + segment + ext;
+        const cacheKey = outletName + ":" + fullSrc;
+
+        if (_autoTemplateCache.has(cacheKey)) {
+          tpl = _autoTemplateCache.get(cacheKey);
+        } else {
+          tpl = document.createElement("template");
+          tpl.setAttribute("src", fullSrc);
+          tpl.setAttribute("route", current.path);
+          document.body.appendChild(tpl);
+          _autoTemplateCache.set(cacheKey, tpl);
+          _log("[ROUTER] File-based route:", current.path, "→", fullSrc);
+        }
+
+        // Auto i18n namespace (convention: filename = namespace)
+        if (outletEl.hasAttribute("i18n-ns") && !tpl.getAttribute("i18n-ns")) {
+          tpl.setAttribute("i18n-ns", segment);
+        }
+      }
 
-      // Always clear first
+      // Always clear first — dispose watchers/listeners before wiping DOM
+      _disposeTree(outletEl);
       outletEl.innerHTML = "";
 
       if (tpl) {
@@ -130,6 +160,13 @@ export function _createRouter() {
           await _loadTemplateElement(tpl);
         }
 
+        // i18n namespace loading for route template
+        const i18nNs = tpl.getAttribute("i18n-ns");
+        if (i18nNs) {
+          const { _loadI18nNamespace } = await import("./i18n.js");
+          await _loadI18nNamespace(i18nNs);
+        }
+
         const clone = tpl.content.cloneNode(true);
 
         const routeCtx = createContext(
@@ -176,10 +213,10 @@ export function _createRouter() {
       if (exactClass) {
         link.classList.toggle(exactClass, current.path === routePath);
       } else if (activeClass && !link.hasAttribute("route-active-exact")) {
-        link.classList.toggle(
-          activeClass,
-          current.path.startsWith(routePath),
-        );
+        const isActive = routePath === "/"
+          ? current.path === "/"
+          : current.path.startsWith(routePath);
+        link.classList.toggle(activeClass, isActive);
       }
     });