@erickxavier/no-js 1.1.0 → 1.2.0

package/src/directives/events.js

@@ -55,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,7 +4,6 @@
 
 import {
   _config,
-  _log,
   _warn,
   _stores,
   _notifyStoreWatchers,
@@ -124,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);

package/src/directives/i18n.js

@@ -4,6 +4,7 @@
 // ═══════════════════════════════════════════════════════════════════════
 
 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, processTree } from "../registry.js";
@@ -30,7 +31,7 @@ registerDirective("t", {
       }
     }
 
-    ctx.$watch(update);
+    _watchExpr(key, ctx, update);
     _watchI18n(update);
     update();
   },
@@ -39,6 +40,9 @@ registerDirective("t", {
 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);

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,6 +2,7 @@
 //  DIRECTIVES: class-*, style-*
 // ═══════════════════════════════════════════════════════════════════════
 
+import { _watchExpr } from "../globals.js";
 import { evaluate } from "../evaluate.js";
 import { findContext } from "../dom.js";
 import { registerDirective } from "../registry.js";
@@ -14,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;
     }
@@ -42,7 +45,7 @@ registerDirective("class-*", {
           prevClasses = next;
         }
       }
-      ctx.$watch(update);
+      _watchExpr(expr, ctx, update);
       update();
       return;
     }
@@ -51,8 +54,8 @@ registerDirective("class-*", {
     function update() {
       el.classList.toggle(suffix, !!evaluate(expr, ctx));
     }
-    ctx.$watch(update);
-    if (expr.includes("NoJS.locale")) _watchI18n(update);
+    _watchExpr(expr, ctx, update);
+    if (expr.includes("$i18n") || expr.includes("NoJS.locale")) _watchI18n(update);
     update();
   },
 });
@@ -73,7 +76,7 @@ registerDirective("style-*", {
           }
         }
       }
-      ctx.$watch(update);
+      _watchExpr(expr, ctx, update);
       update();
       return;
     }
@@ -84,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/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/i18n.js

@@ -47,13 +47,14 @@ export async function _loadLocale(locale, ns) {
 
   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();
-    const toMerge = ns ? { [ns]: data } : data;
-    _i18n.locales[locale] = _deepMerge(_i18n.locales[locale] || {}, toMerge);
+    _i18n.locales[locale] = _deepMerge(_i18n.locales[locale] || {}, data);
     if (_config.i18n.cache) _i18nCache.set(cacheKey, data);
   } catch (e) {
     _warn(`i18n: error loading ${url}`, e);

package/src/index.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
@@ -215,7 +216,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.1.0",
+  version: "1.2.0",
 };
 
 export default NoJS;

package/src/router.js

@@ -315,6 +315,9 @@ export function _createRouter() {
             }
             return;
           }
+          // Skip if path unchanged (prevents double-processing from programmatic hash set)
+          const [p] = raw.split("?");
+          if (p === current.path) return;
           navigate(raw, true);
         });
         // Initial route