@erickxavier/no-js 1.0.2 → 1.2.0

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") {
@@ -51,7 +55,8 @@ registerDirective("on:*", {
         }
       });
       if (el.parentElement)
-        observer.observe(el.parentElement, { childList: true });
+        observer.observe(el.parentElement, { childList: true, subtree: true });
+      _onDispose(() => observer.disconnect());
       return;
     }
 

package/src/directives/http.js

@@ -4,12 +4,12 @@
 
 import {
   _config,
-  _log,
   _warn,
   _stores,
   _notifyStoreWatchers,
   _emitEvent,
   _routerInstance,
+  _onDispose,
 } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
@@ -123,16 +123,20 @@ for (const method of HTTP_METHODS) {
           const savedRetryDelay = _config.retryDelay;
           _config.retries = retryCount;
           _config.retryDelay = retryDelay;
-          const data = await _doFetch(
-            resolvedUrl,
-            method,
-            reqBody,
-            extraHeaders,
-            el,
-            _activeAbort.signal,
-          );
-          _config.retries = savedRetries;
-          _config.retryDelay = savedRetryDelay;
+          let data;
+          try {
+            data = await _doFetch(
+              resolvedUrl,
+              method,
+              reqBody,
+              extraHeaders,
+              el,
+              _activeAbort.signal,
+            );
+          } finally {
+            _config.retries = savedRetries;
+            _config.retryDelay = savedRetryDelay;
+          }
 
           // Cache response
           if (method === "get") _cacheSet(cacheKey, data, cacheStrategy);
@@ -281,7 +285,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,30 +1,56 @@
 // ═══════════════════════════════════════════════════════════════════════
 //  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 { _watchExpr } from "../globals.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);
+    _watchExpr(key, ctx, update);
     _watchI18n(update);
     update();
   },
 });
+
+registerDirective("i18n-ns", {
+  priority: 1,
+  init(el, name, ns) {
+    // Empty ns = marker attribute (e.g. route-view); skip loading
+    if (!ns) return;
+
+    // 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/loops.js

@@ -3,6 +3,7 @@
 // ═══════════════════════════════════════════════════════════════════════
 
 import { createContext } from "../context.js";
+import { _watchExpr } from "../globals.js";
 import { evaluate, resolve } from "../evaluate.js";
 import { findContext, _cloneTemplate } from "../dom.js";
 import { registerDirective, processTree } from "../registry.js";
@@ -23,11 +24,26 @@ registerDirective("each", {
     const animLeave = el.getAttribute("animate-leave");
     const stagger = parseInt(el.getAttribute("animate-stagger")) || 0;
     const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
+    let prevList = null;
 
     function update() {
-      let list = resolve(listPath, ctx);
+      let list = /[\[\]()\s+\-*\/!?:&|]/.test(listPath)
+        ? evaluate(listPath, ctx)
+        : resolve(listPath, ctx);
       if (!Array.isArray(list)) return;
 
+      // If same list reference and items are rendered, skip re-render
+      // and just propagate the notification to child contexts so their
+      // watchers (bind, show, model, etc.) can react to parent changes
+      // without destroying/recreating the DOM (preserves input focus).
+      if (list === prevList && list.length > 0 && el.children.length > 0) {
+        for (const child of el.children) {
+          if (child.__ctx && child.__ctx.$notify) child.__ctx.$notify();
+        }
+        return;
+      }
+      prevList = list;
+
       // Empty state
       if (list.length === 0 && elseTpl) {
         const clone = _cloneTemplate(elseTpl);
@@ -90,6 +106,7 @@ registerDirective("each", {
           const firstChild = wrapper.firstElementChild;
           if (firstChild) {
             firstChild.classList.add(animEnter);
+            firstChild.addEventListener("animationend", () => firstChild.classList.remove(animEnter), { once: true });
             // Stagger animation — delay must be on the child, not the wrapper
             if (stagger) {
               firstChild.style.animationDelay = i * stagger + "ms";
@@ -99,7 +116,7 @@ registerDirective("each", {
       });
     }
 
-    ctx.$watch(update);
+    _watchExpr(expr, ctx, update);
     update();
   },
 });
@@ -204,6 +221,7 @@ registerDirective("foreach", {
             const firstChild = wrapper.firstElementChild;
             if (firstChild) {
               firstChild.classList.add(animEnter);
+              firstChild.addEventListener("animationend", () => firstChild.classList.remove(animEnter), { once: true });
               // Stagger animation — delay must be on the child, not the wrapper
               if (stagger) {
                 firstChild.style.animationDelay = (i * stagger) + "ms";
@@ -233,7 +251,7 @@ registerDirective("foreach", {
       }
     }
 
-    ctx.$watch(update);
+    _watchExpr(fromPath, ctx, update);
     update();
   },
 });

package/src/directives/refs.js

@@ -6,6 +6,7 @@ import {
   _refs,
   _stores,
   _notifyStoreWatchers,
+  _onDispose,
 } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
@@ -17,6 +18,9 @@ registerDirective("ref", {
   priority: 5,
   init(el, name, refName) {
     _refs[refName] = el;
+    _onDispose(() => {
+      if (_refs[refName] === el) delete _refs[refName];
+    });
   },
 });
 

package/src/directives/state.js

@@ -2,7 +2,7 @@
 //  DIRECTIVES: state, store, computed, watch
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _stores, _log } from "../globals.js";
+import { _stores, _log, _watchExpr } from "../globals.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext } from "../dom.js";
@@ -78,7 +78,7 @@ registerDirective("computed", {
       const val = evaluate(expr, ctx);
       ctx.$set(computedName, val);
     }
-    ctx.$watch(update);
+    _watchExpr(expr, ctx, update);
     update();
   },
 });
@@ -89,7 +89,7 @@ registerDirective("watch", {
     const ctx = findContext(el);
     const onChange = el.getAttribute("on:change");
     let lastVal = evaluate(watchExpr, ctx);
-    ctx.$watch(() => {
+    _watchExpr(watchExpr, ctx, () => {
       const newVal = evaluate(watchExpr, ctx);
       if (newVal !== lastVal) {
         const oldVal = lastVal;

package/src/directives/styling.js

@@ -2,9 +2,11 @@
 //  DIRECTIVES: class-*, style-*
 // ═══════════════════════════════════════════════════════════════════════
 
+import { _watchExpr } from "../globals.js";
 import { evaluate } from "../evaluate.js";
 import { findContext } from "../dom.js";
 import { registerDirective } from "../registry.js";
+import { _watchI18n } from "../i18n.js";
 
 registerDirective("class-*", {
   priority: 20,
@@ -13,16 +15,18 @@ registerDirective("class-*", {
     const ctx = findContext(el);
 
     // class-map="{ active: x, bold: y }"
+    // Supports space-separated keys: class-map="{ 'bg-sky-500 text-white': x }"
     if (suffix === "map") {
       function update() {
         const obj = evaluate(expr, ctx);
         if (obj && typeof obj === "object") {
           for (const [cls, cond] of Object.entries(obj)) {
-            el.classList.toggle(cls, !!cond);
+            const parts = cls.split(/\s+/).filter(Boolean);
+            parts.forEach((c) => el.classList.toggle(c, !!cond));
           }
         }
       }
-      ctx.$watch(update);
+      _watchExpr(expr, ctx, update);
       update();
       return;
     }
@@ -41,7 +45,7 @@ registerDirective("class-*", {
           prevClasses = next;
         }
       }
-      ctx.$watch(update);
+      _watchExpr(expr, ctx, update);
       update();
       return;
     }
@@ -50,7 +54,8 @@ registerDirective("class-*", {
     function update() {
       el.classList.toggle(suffix, !!evaluate(expr, ctx));
     }
-    ctx.$watch(update);
+    _watchExpr(expr, ctx, update);
+    if (expr.includes("$i18n") || expr.includes("NoJS.locale")) _watchI18n(update);
     update();
   },
 });
@@ -71,7 +76,7 @@ registerDirective("style-*", {
           }
         }
       }
-      ctx.$watch(update);
+      _watchExpr(expr, ctx, update);
       update();
       return;
     }
@@ -82,7 +87,7 @@ registerDirective("style-*", {
       const val = evaluate(expr, ctx);
       el.style[cssProp] = val != null ? String(val) : "";
     }
-    ctx.$watch(update);
+    _watchExpr(expr, ctx, 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/evaluate.js

@@ -265,22 +265,28 @@ export function _execStatement(expr, ctx, extraVars = {}) {
     // 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).
+    // Only write back values that actually changed locally, to avoid
+    // overwriting proxy mutations made by called functions.
     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 origObj = {};
+    for (const k of chainKeys) {
+      if (!k.startsWith("$") && k in vals) origObj[k] = vals[k];
+    }
     const setters = [...chainKeys]
       .filter((k) => !k.startsWith("$"))
       .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;}}`,
+          `{let _c=__ctx;while(_c&&_c.__isProxy){if('${k}'in _c.__raw){if(typeof ${k}!=='undefined'){if(${k}!==__orig['${k}'])_c.$set('${k}',${k});else if(typeof ${k}==='object'&&${k}!==null)_c.$notify();}break;}_c=_c.$parent;}}`,
       )
       .join("\n");
 
-    const fn = new Function("__ctx", ...keyArr, `${expr};\n${setters}`);
-    fn(ctx, ...valArr);
+    const fn = new Function("__ctx", "__orig", ...keyArr, `${expr};\n${setters}`);
+    fn(ctx, origObj, ...valArr);
 
     // Notify global store watchers when expression touches $store
     if (typeof expr === "string" && expr.includes("$store")) {

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,84 @@
 //  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);
+  else if (url.includes("{ns}")) return; // no namespace to substitute
+
+
+  try {
+    const res = await fetch(url);
+    if (!res.ok) { _warn(`i18n: failed to load ${url} (${res.status})`); return; }
+    const data = await res.json();
+    _i18n.locales[locale] = _deepMerge(_i18n.locales[locale] || {}, data);
+    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 +89,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";
@@ -37,6 +37,7 @@ import "./directives/events.js";
 import "./directives/refs.js";
 import "./directives/validation.js";
 import "./directives/i18n.js";
+import "./directives/dnd.js";
 
 // ═══════════════════════════════════════════════════════════════════════
 //  PUBLIC API
@@ -60,6 +61,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 +93,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 +155,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 +216,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.0.2",
+  version: "1.2.0",
 };
 
 export default NoJS;