@erickxavier/no-js 1.1.0 → 1.2.0

package/package.json

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

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

@@ -64,7 +64,20 @@ export function createContext(data = {}, parent = null) {
       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();
   },
 });