@erickxavier/no-js 1.0.2 → 1.2.0

package/package.json

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

@@ -77,15 +77,15 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
     const target = el.firstElementChild || el;
     target.classList.add(animName);
     if (durationMs) target.style.animationDuration = durationMs + "ms";
-    target.addEventListener(
-      "animationend",
-      () => {
-        target.classList.remove(animName);
-        callback();
-      },
-      { once: true },
-    );
-    setTimeout(callback, fallback); // Fallback
+    let called = false;
+    const done = () => {
+      if (called) return;
+      called = true;
+      target.classList.remove(animName);
+      callback();
+    };
+    target.addEventListener("animationend", done, { once: true });
+    setTimeout(done, fallback); // Fallback
     return;
   }
   if (transitionName) {
@@ -97,7 +97,10 @@ export function _animateOut(el, animName, transitionName, callback, durationMs)
     requestAnimationFrame(() => {
       target.classList.remove(transitionName + "-leave");
       target.classList.add(transitionName + "-leave-to");
+      let called = false;
       const done = () => {
+        if (called) return;
+        called = true;
         target.classList.remove(
           transitionName + "-leave-active",
           transitionName + "-leave-to",

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,13 +57,27 @@ 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);
         };
       if (key === "$notify") return notify;
       if (key === "$set")
         return (k, v) => {
-          proxy[k] = v;
+          const parts = k.split(".");
+          if (parts.length === 1) {
+            proxy[k] = v;
+          } else {
+            let obj = proxy;
+            for (let i = 0; i < parts.length - 1; i++) {
+              obj = obj[parts[i]];
+              if (obj == null) return;
+            }
+            const lastKey = parts[parts.length - 1];
+            const old = obj[lastKey];
+            obj[lastKey] = v;
+            if (old !== v) notify();
+          }
         };
       if (key === "$parent") return parent;
       if (key === "$refs") return _refs;

package/src/directives/binding.js

@@ -112,7 +112,7 @@ registerDirective("model", {
       _execStatement(`${expr} = __val`, ctx, { __val: val });
     });
 
-    ctx.$watch(update);
+    _watchExpr(expr, ctx, update);
     update();
   },
 });

package/src/directives/conditionals.js

@@ -71,7 +71,7 @@ registerDirective("if", {
       }
     }
 
-    ctx.$watch(update);
+    _watchExpr(expr, ctx, update);
     update();
   },
 });
@@ -120,7 +120,7 @@ registerDirective("else-if", {
         el.innerHTML = "";
       }
     }
-    ctx.$watch(update);
+    _watchExpr(expr, ctx, update);
     update();
   },
 });
@@ -166,7 +166,7 @@ registerDirective("else", {
       _clearDeclared(el);
       processTree(el);
     }
-    ctx.$watch(update);
+    _watchExpr("", ctx, update);
     update();
   },
 });
@@ -282,7 +282,7 @@ registerDirective("switch", {
       }
     }
 
-    ctx.$watch(update);
+    _watchExpr(expr, ctx, update);
     update();
   },
 });