@adaas/are-html 0.0.2 → 0.0.4

package/dist/node/directives/AreDirectiveFor.directive.mjs

@@ -5,6 +5,7 @@ import { AreStore, AreScene, AreCompilerError } from '@adaas/are';
 import { AreDirective } from '@adaas/are-html/directive/AreDirective.component';
 import { AddCommentInstruction } from '@adaas/are-html/instructions/AddComment.instruction';
 import { AreDirectiveContext } from '@adaas/are-html/directive/AreDirective.context';
+import { A_Frame } from '@adaas/a-frame/core';
 
 let AreDirectiveFor = class extends AreDirective {
   transform(attribute, scope, store, scene, logger, ...args) {
@@ -21,11 +22,9 @@ let AreDirectiveFor = class extends AreDirective {
     const { key, index, arrayExpr } = this.parseExpression(attribute.content);
     const array = this.resolveArray(store, arrayExpr, attribute.content);
     attribute.value = array;
-    console.log('Initial array for "for" directive:', scene);
     for (let i = 0; i < array.length; i++) {
       this.spawnItemNode(attribute.template, attribute.owner, key, index, array[i], i);
     }
-    console.log('Template for "for" directive:', forTemplate);
   }
   compile(attribute, store, scene, ...args) {
     const hostInstruction = scene.host;
@@ -36,49 +35,78 @@ let AreDirectiveFor = class extends AreDirective {
     scene.unPlan(hostInstruction);
   }
   update(attribute, store, scene, ...args) {
-    const { key, index, arrayExpr } = this.parseExpression(attribute.content);
+    const { key, index, arrayExpr, trackExpr } = this.parseExpression(attribute.content);
     const newArray = this.resolveArray(store, arrayExpr, attribute.content);
     const owner = attribute.owner;
     const currentChildren = [...owner.children];
     attribute.value = newArray;
-    const newLen = newArray.length;
-    const newItemSet = new Set(newArray);
-    const keptChildren = [];
-    const removedChildren = [];
-    for (const child of currentChildren) {
+    const computeKey = this.makeKeyFn(key, index, trackExpr);
+    const childByKey = /* @__PURE__ */ new Map();
+    const remaining = /* @__PURE__ */ new Set();
+    for (let i = 0; i < currentChildren.length; i++) {
+      const child = currentChildren[i];
       const ctx = child.scope.resolveFlat(AreDirectiveContext);
-      if (ctx && newItemSet.has(ctx.scope[key])) {
-        keptChildren.push(child);
+      const k = ctx ? computeKey(ctx.scope[key], ctx.scope[index || "index"]) : /* @__PURE__ */ Symbol("orphan");
+      childByKey.set(k, child);
+      remaining.add(child);
+    }
+    const newOnes = [];
+    for (let i = 0; i < newArray.length; i++) {
+      const item = newArray[i];
+      const k = computeKey(item, i);
+      const existing = childByKey.get(k);
+      if (existing) {
+        remaining.delete(existing);
+        let directiveContext = existing.scope.resolveFlat(AreDirectiveContext);
+        if (!directiveContext) {
+          directiveContext = new AreDirectiveContext(existing.aseid);
+          existing.scope.register(directiveContext);
+        }
+        directiveContext.scope = {
+          ...directiveContext.scope,
+          [key]: item,
+          [index || "index"]: i
+        };
       } else {
-        removedChildren.push(child);
+        const itemNode = this.spawnItemNode(attribute.template, owner, key, index, item, i);
+        newOnes.push(itemNode);
       }
     }
-    for (const child of removedChildren) {
+    for (const child of remaining) {
       child.unmount();
       owner.removeChild(child);
     }
-    for (let i = 0; i < keptChildren.length; i++) {
-      let directiveContext = keptChildren[i].scope.resolveFlat(AreDirectiveContext);
-      if (!directiveContext) {
-        directiveContext = new AreDirectiveContext(keptChildren[i].aseid);
-        keptChildren[i].scope.register(directiveContext);
-      }
-      directiveContext.scope = {
-        ...directiveContext.scope,
-        [key]: newArray[i],
-        [index || "index"]: i
-      };
-    }
-    for (let i = keptChildren.length; i < newLen; i++) {
-      const itemNode = this.spawnItemNode(attribute.template, owner, key, index, newArray[i], i);
-      itemNode.transform();
-      itemNode.compile();
-      itemNode.mount();
+    for (const child of newOnes) {
+      child.transform();
+      child.compile();
+      child.mount();
     }
   }
   // ─────────────────────────────────────────────────────────────────────────────
   // ── Helpers ──────────────────────────────────────────────────────────────────
   // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Build a key-function that derives a stable identity from each item.
+   * If the user provided a `track <expr>` clause, evaluate it as a path on
+   * the item; otherwise fall back to the item identity (reference equality).
+   */
+  makeKeyFn(key, index, trackExpr) {
+    if (!trackExpr) {
+      return (item, i) => item ?? i;
+    }
+    const path = trackExpr.startsWith(key + ".") ? trackExpr.slice(key.length + 1) : trackExpr;
+    return (item, i) => {
+      if (item == null) return i;
+      if (path === key || path === "$index") return path === "$index" ? i : item;
+      const parts = path.split(".");
+      let v = item;
+      for (const p of parts) {
+        if (v == null) return i;
+        v = v[p];
+      }
+      return v ?? i;
+    };
+  }
   /**
    * Parses the $for expression string into its constituent parts.
    *
@@ -88,16 +116,29 @@ let AreDirectiveFor = class extends AreDirective {
    *   (item, index) in items
    *   item in filter(items)
    *   item, index in filter(items, 'active')
+   *   item in items track item.id
+   *   (item, i) in items track item.id
    */
   parseExpression(content) {
-    const inIndex = content.lastIndexOf(" in ");
-    const keyAndIndex = content.slice(0, inIndex).trim().replace(/^\(|\)$/g, "");
-    const arrayExpr = content.slice(inIndex + 4).trim();
+    let trackExpr;
+    const trackIdx = content.search(/\s+track\s+/);
+    let body = content;
+    if (trackIdx !== -1) {
+      const m = content.slice(trackIdx).match(/\s+track\s+(.+)$/);
+      if (m) {
+        trackExpr = m[1].trim();
+        body = content.slice(0, trackIdx).trim();
+      }
+    }
+    const inIndex = body.lastIndexOf(" in ");
+    const keyAndIndex = body.slice(0, inIndex).trim().replace(/^\(|\)$/g, "");
+    const arrayExpr = body.slice(inIndex + 4).trim();
     const keyParts = keyAndIndex.split(",").map((p) => p.trim());
     return {
       key: keyParts[0],
       index: keyParts[1] || void 0,
-      arrayExpr
+      arrayExpr,
+      trackExpr
     };
   }
   /**
@@ -188,6 +229,10 @@ __decorateClass([
   __decorateParam(2, A_Inject(AreScene))
 ], AreDirectiveFor.prototype, "update", 1);
 AreDirectiveFor = __decorateClass([
+  A_Frame.Define({
+    namespace: "a-are-html",
+    description: "Built-in $for directive. Iterates over an array expression resolved from the store and renders a cloned template fragment per item, managing per-item subscopes and comment-node anchors. Supports keyed diffing via an optional track clause to minimise DOM mutations on collection updates."
+  }),
   AreDirective.Priority(1)
 ], AreDirectiveFor);
 

package/dist/node/directives/AreDirectiveFor.directive.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/directives/AreDirectiveFor.directive.ts"],"names":[],"mappings":";;;;;;;;AAkBO,IAAM,eAAA,GAAN,cAA8B,YAAA,CAAa;AAAA,EAI9C,UACwB,SAAA,EACD,KAAA,EACC,KAAA,EACA,KAAA,EACA,WACjB,IAAA,EACL;AAEE,IAAA,MAAA,CAAO,MAAM,CAAA,gCAAA,EAAmC,SAAA,CAAU,MAAM,KAAA,CAAM,QAAA,EAAU,CAAA,CAAA,CAAG,CAAA;AAEnF,IAAA,MAAM,OAAO,SAAA,CAAU,KAAA;AAQvB,IAAA,MAAM,WAAA,GAAc,KAAK,cAAA,EAAe;AAOxC,IAAA,MAAM,OAAA,GAAU,YAAY,UAAA,CAAW,IAAA,CAAK,OAAK,CAAA,CAAE,IAAA,KAAS,UAAU,IAAI,CAAA;AAE1E,IAAA,IAAI,OAAA,EAAS;AACT,MAAA,WAAA,CAAY,KAAA,CAAM,WAAW,OAAO,CAAA;AACpC,MAAA,IAAA,CAAK,KAAA,CAAM,SAAS,OAAO,CAAA;AAAA,IAC/B;AAMA,IAAA,IAAA,CAAK,IAAA,EAAK;AAKV,IAAA,SAAA,CAAU,QAAA,GAAW,WAAA;AAMrB,IAAA,MAAM,EAAE,KAAK,KAAA,EAAO,SAAA,KAAc,IAAA,CAAK,eAAA,CAAgB,UAAU,OAAO,CAAA;AACxE,IAAA,MAAM,QAAQ,IAAA,CAAK,YAAA,CAAa,KAAA,EAAO,SAAA,EAAW,UAAU,OAAO,CAAA;AAEnE,IAAA,SAAA,CAAU,KAAA,GAAQ,KAAA;AAElB,IAAA,OAAA,CAAQ,GAAA,CAAI,sCAAsC,KAAK,CAAA;AAUvD,IAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,KAAA,CAAM,QAAQ,CAAA,EAAA,EAAK;AACnC,MAAA,IAAA,CAAK,aAAA,CAAc,SAAA,CAAU,QAAA,EAAW,SAAA,CAAU,KAAA,EAAO,KAAK,KAAA,EAAO,KAAA,CAAM,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,IACpF;AAEA,IAAA,OAAA,CAAQ,GAAA,CAAI,iCAAiC,WAAW,CAAA;AAAA,EAC5D;AAAA,EAIA,OAAA,CACwB,SAAA,EACA,KAAA,EACA,KAAA,EAAA,GACjB,IAAA,EACC;AAMJ,IAAA,MAAM,kBAAkB,KAAA,CAAM,IAAA;AAC9B,IAAA,MAAM,iBAAA,GAAoB,CAAA,UAAA,EAAa,SAAA,CAAU,QAAA,CAAU,EAAE,CAAA,KAAA,CAAA;AAC7D,IAAA,MAAM,cAAc,IAAI,qBAAA,CAAsB,EAAE,OAAA,EAAS,mBAAmB,CAAA;AAE5E,IAAA,KAAA,CAAM,QAAQ,WAAW,CAAA;AACzB,IAAA,KAAA,CAAM,UAAA,CAAW,aAAa,eAAe,CAAA;AAC7C,IAAA,KAAA,CAAM,OAAO,eAAe,CAAA;AAAA,EAChC;AAAA,EAIA,MAAA,CACwB,SAAA,EACA,KAAA,EACA,KAAA,EAAA,GACjB,IAAA,EACC;AAIJ,IAAA,MAAM,EAAE,KAAK,KAAA,EAAO,SAAA,KAAc,IAAA,CAAK,eAAA,CAAgB,UAAU,OAAO,CAAA;AACxE,IAAA,MAAM,WAAW,IAAA,CAAK,YAAA,CAAa,KAAA,EAAO,SAAA,EAAW,UAAU,OAAO,CAAA;AAEtE,IAAA,MAAM,QAAQ,SAAA,CAAU,KAAA;AACxB,IAAA,MAAM,eAAA,GAAkB,CAAC,GAAG,KAAA,CAAM,QAAQ,CAAA;AAE1C,IAAA,SAAA,CAAU,KAAA,GAAQ,QAAA;AAElB,IAAA,MAAM,SAAS,QAAA,CAAS,MAAA;AAMxB,IAAA,MAAM,UAAA,GAAa,IAAI,GAAA,CAAI,QAAQ,CAAA;AAOnC,IAAA,MAAM,eAA8B,EAAC;AACrC,IAAA,MAAM,kBAAiC,EAAC;AAExC,IAAA,KAAA,MAAW,SAAS,eAAA,EAAiB;AACjC,MAAA,MAAM,GAAA,GAAM,KAAA,CAAM,KAAA,CAAM,WAAA,CAAY,mBAAmB,CAAA;AAEvD,MAAA,IAAI,OAAO,UAAA,CAAW,GAAA,CAAI,IAAI,KAAA,CAAM,GAAG,CAAC,CAAA,EAAG;AACvC,QAAA,YAAA,CAAa,KAAK,KAAK,CAAA;AAAA,MAC3B,CAAA,MAAO;AACH,QAAA,eAAA,CAAgB,KAAK,KAAK,CAAA;AAAA,MAC9B;AAAA,IACJ;AAKA,IAAA,KAAA,MAAW,SAAS,eAAA,EAAiB;AACjC,MAAA,KAAA,CAAM,OAAA,EAAQ;AACd,MAAA,KAAA,CAAM,YAAY,KAAK,CAAA;AAAA,IAC3B;AAMA,IAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,YAAA,CAAa,QAAQ,CAAA,EAAA,EAAK;AAC1C,MAAA,IAAI,mBAAmB,YAAA,CAAa,CAAC,CAAA,CAAE,KAAA,CAAM,YAAY,mBAAmB,CAAA;AAE5E,MAAA,IAAI,CAAC,gBAAA,EAAkB;AACnB,QAAA,gBAAA,GAAmB,IAAI,mBAAA,CAAoB,YAAA,CAAa,CAAC,EAAE,KAAK,CAAA;AAChE,QAAA,YAAA,CAAa,CAAC,CAAA,CAAE,KAAA,CAAM,QAAA,CAAS,gBAAgB,CAAA;AAAA,MACnD;AAEA,MAAA,gBAAA,CAAiB,KAAA,GAAQ;AAAA,QACrB,GAAG,gBAAA,CAAiB,KAAA;AAAA,QACpB,CAAC,GAAG,GAAG,QAAA,CAAS,CAAC,CAAA;AAAA,QACjB,CAAC,KAAA,IAAS,OAAO,GAAG;AAAA,OACxB;AAAA,IACJ;AAOA,IAAA,KAAA,IAAS,CAAA,GAAI,YAAA,CAAa,MAAA,EAAQ,CAAA,GAAI,QAAQ,CAAA,EAAA,EAAK;AAC/C,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,aAAA,CAAc,SAAA,CAAU,QAAA,EAAW,KAAA,EAAO,GAAA,EAAK,KAAA,EAAO,QAAA,CAAS,CAAC,CAAA,EAAG,CAAC,CAAA;AAE1F,MAAA,QAAA,CAAS,SAAA,EAAU;AACnB,MAAA,QAAA,CAAS,OAAA,EAAQ;AACjB,MAAA,QAAA,CAAS,KAAA,EAAM;AAAA,IACnB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBQ,gBAAgB,OAAA,EAAmC;AACvD,IAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,WAAA,CAAY,MAAM,CAAA;AAC1C,IAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,KAAA,CAAM,CAAA,EAAG,OAAO,EAAE,IAAA,EAAK,CAAE,OAAA,CAAQ,UAAA,EAAY,EAAE,CAAA;AAC3E,IAAA,MAAM,YAAY,OAAA,CAAQ,KAAA,CAAM,OAAA,GAAU,CAAC,EAAE,IAAA,EAAK;AAClD,IAAA,MAAM,QAAA,GAAW,YAAY,KAAA,CAAM,GAAG,EAAE,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,IAAA,EAAM,CAAA;AAEzD,IAAA,OAAO;AAAA,MACH,GAAA,EAAK,SAAS,CAAC,CAAA;AAAA,MACf,KAAA,EAAO,QAAA,CAAS,CAAC,CAAA,IAAK,MAAA;AAAA,MACtB;AAAA,KACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,YAAA,CAAa,KAAA,EAAiB,SAAA,EAAmB,WAAA,EAA4B;AACjF,IAAA,IAAI,MAAA;AACJ,IAAA,MAAM,SAAA,GAAY,SAAA,CAAU,KAAA,CAAM,mBAAmB,CAAA;AAErD,IAAA,IAAI,SAAA,EAAW;AACX,MAAA,MAAM,MAAA,GAAS,SAAA,CAAU,CAAC,CAAA,CAAE,IAAA,EAAK;AACjC,MAAA,MAAM,EAAA,GAAK,KAAA,CAAM,GAAA,CAAI,MAAa,CAAA;AAElC,MAAA,IAAI,OAAO,EAAA,KAAO,UAAA;AACd,QAAA,MAAM,IAAI,gBAAA,CAAiB;AAAA,UACvB,KAAA,EAAO,kCAAA;AAAA,UACP,WAAA,EAAa,CAAA,gBAAA,EAAmB,MAAM,CAAA,gFAAA,EAAmF,OAAO,EAAE,CAAA;AAAA,SACrI,CAAA;AAEL,MAAA,MAAM,OAAA,GAAU,SAAA,CAAU,CAAC,CAAA,CAAE,KAAA,CAAM,GAAG,CAAA,CAAE,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,IAAA,EAAM,CAAA;AACzD,MAAA,MAAM,YAAA,GAAe,OAAA,CAAQ,GAAA,CAAI,CAAA,GAAA,KAAO;AACpC,QAAA,IAAI,GAAA,CAAI,UAAA,CAAW,GAAG,CAAA,IAAK,GAAA,CAAI,QAAA,CAAS,GAAG,CAAA,EAAG,OAAO,GAAA,CAAI,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA;AACpE,QAAA,IAAI,GAAA,CAAI,UAAA,CAAW,GAAG,CAAA,IAAK,GAAA,CAAI,QAAA,CAAS,GAAG,CAAA,EAAG,OAAO,GAAA,CAAI,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA;AACpE,QAAA,IAAI,CAAC,MAAM,MAAA,CAAO,GAAG,CAAC,CAAA,EAAG,OAAO,OAAO,GAAG,CAAA;AAC1C,QAAA,OAAO,KAAA,CAAM,IAAI,GAAU,CAAA;AAAA,MAC/B,CAAC,CAAA;AAED,MAAA,MAAA,GAAU,EAAA,CAAgB,GAAG,YAAY,CAAA;AAAA,IAC7C,CAAA,MAAO;AACH,MAAA,MAAA,GAAS,KAAA,CAAM,IAAI,SAAgB,CAAA;AAAA,IACvC;AAEA,IAAA,IAAI,CAAC,KAAA,CAAM,OAAA,CAAQ,MAAM,CAAA;AACrB,MAAA,MAAM,IAAI,gBAAA,CAAiB;AAAA,QACvB,KAAA,EAAO,+BAAA;AAAA,QACP,WAAA,EAAa,CAAA,6CAAA,EAAgD,OAAO,MAAM,CAAA,eAAA,EAAkB,WAAW,CAAA,aAAA,EAAgB,IAAA,CAAK,SAAA,CAAU,MAAM,CAAC,CAAA;AAAA,OAChJ,CAAA;AAEL,IAAA,OAAO,MAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWQ,cACJ,QAAA,EACA,KAAA,EACA,GAAA,EACA,KAAA,EACA,MACA,CAAA,EACW;AACX,IAAA,MAAM,QAAA,GAAW,SAAS,KAAA,EAAM;AAEhC,IAAA,KAAA,CAAM,SAAS,QAAQ,CAAA;AAEvB,IAAA,MAAM,KAAA,GAAQ,CAAC,QAAQ,CAAA;AAEvB,IAAA,OAAO,KAAA,CAAM,SAAS,CAAA,EAAG;AACrB,MAAA,MAAM,OAAA,GAAU,MAAM,KAAA,EAAM;AAE5B,MAAA,OAAA,CAAQ,IAAA,EAAK;AAEb,MAAA,KAAA,CAAM,IAAA,CAAK,GAAG,OAAA,CAAQ,QAAyB,CAAA;AAAA,IACnD;AAKA,IAAA,IAAI,gBAAA,GAAmB,QAAA,CAAS,KAAA,CAAM,WAAA,CAAY,mBAAmB,CAAA;AAErE,IAAA,IAAI,CAAC,gBAAA,EAAkB;AACnB,MAAA,gBAAA,GAAmB,IAAI,mBAAA,CAAoB,QAAA,CAAS,KAAK,CAAA;AACzD,MAAA,QAAA,CAAS,KAAA,CAAM,SAAS,gBAAgB,CAAA;AAAA,IAC5C;AAEA,IAAA,gBAAA,CAAiB,KAAA,GAAQ;AAAA,MACrB,GAAG,gBAAA,CAAiB,KAAA;AAAA,MACpB,CAAC,GAAG,GAAG,IAAA;AAAA,MACP,CAAC,KAAA,IAAS,OAAO,GAAG;AAAA,KACxB;AAEA,IAAA,QAAA,CAAS,MAAM,QAAA,EAAS;AAExB,IAAA,OAAO,QAAA;AAAA,EACX;AACJ;AA3SI,eAAA,CAAA;AAAA,EADC,YAAA,CAAa,SAAA;AAAA,EAET,4BAAS,QAAQ,CAAA,CAAA;AAAA,EACjB,4BAAS,OAAO,CAAA,CAAA;AAAA,EAChB,4BAAS,QAAQ,CAAA,CAAA;AAAA,EACjB,4BAAS,QAAQ,CAAA,CAAA;AAAA,EACjB,4BAAS,QAAQ,CAAA;AAAA,CAAA,EATb,eAAA,CAIT,SAAA,EAAA,WAAA,EAAA,CAAA,CAAA;AAwEA,eAAA,CAAA;AAAA,EADC,YAAA,CAAa,OAAA;AAAA,EAET,4BAAS,QAAQ,CAAA,CAAA;AAAA,EACjB,4BAAS,QAAQ,CAAA,CAAA;AAAA,EACjB,4BAAS,QAAQ,CAAA;AAAA,CAAA,EA/Eb,eAAA,CA4ET,SAAA,EAAA,SAAA,EAAA,CAAA,CAAA;AAsBA,eAAA,CAAA;AAAA,EADC,YAAA,CAAa,MAAA;AAAA,EAET,4BAAS,QAAQ,CAAA,CAAA;AAAA,EACjB,4BAAS,QAAQ,CAAA,CAAA;AAAA,EACjB,4BAAS,QAAQ,CAAA;AAAA,CAAA,EArGb,eAAA,CAkGT,SAAA,EAAA,QAAA,EAAA,CAAA,CAAA;AAlGS,eAAA,GAAN,eAAA,CAAA;AAAA,EADN,YAAA,CAAa,SAAS,CAAC;AAAA,CAAA,EACX,eAAA,CAAA","file":"AreDirectiveFor.directive.mjs","sourcesContent":["import { A_Caller, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreCompilerError, AreScene, AreStore } from \"@adaas/are\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AddCommentInstruction } from \"@adaas/are-html/instructions/AddComment.instruction\";\nimport { AreHTMLNode } from \"@adaas/are-html/node\";\nimport { AreDirectiveContext } from \"@adaas/are-html/directive/AreDirective.context\";\n\n\ntype AreForExpression = {\n    key: string;\n    index: string | undefined;\n    arrayExpr: string;\n};\n\n\n@AreDirective.Priority(1)\nexport class AreDirectiveFor extends AreDirective {\n\n\n    @AreDirective.Transform\n    transform(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger: A_Logger,\n        ...args: any[]\n    ) {\n\n        logger.debug(`[Transform] directive $FOR for <${attribute.owner.aseid.toString()}>`)\n\n        const node = attribute.owner;\n\n        /**\n         * Transfer the original node's scope (with all registered attributes and children)\n         * to the template clone, and give the owner node a fresh empty scope.\n         * This mirrors the $if directive's approach, making the owner a lightweight\n         * group container whose sole visible presence is a comment placeholder.\n         */\n        const forTemplate = node.cloneWithScope();\n\n        /**\n         * Remove the $for attribute from the template so iterative clones do not\n         * re-trigger this directive during their own transform phase.\n         * Re-register it on the owner so the reactive compile/update pipeline keeps working.\n         */\n        const forAttr = forTemplate.attributes.find(d => d.name === attribute.name);\n\n        if (forAttr) {\n            forTemplate.scope.deregister(forAttr);\n            node.scope.register(forAttr);\n        }\n\n        /**\n         * Re-initialize the owner node with its fresh scope so it becomes a valid\n         * group container that will own the generated item nodes as children.\n         */\n        node.init();\n\n        /**\n         * Store the template for use in compile and update.\n         */\n        attribute.template = forTemplate;\n\n\n        /**\n         * Parse the $for expression and evaluate the source array.\n         */\n        const { key, index, arrayExpr } = this.parseExpression(attribute.content);\n        const array = this.resolveArray(store, arrayExpr, attribute.content);\n\n        attribute.value = array;\n\n        console.log('Initial array for \"for\" directive:', scene);\n\n        /**\n         * For each item in the array, spawn a clone of the template with the\n         * item's store values pre-set and its scene activated.\n         *\n         * The children are added to the owner node before the main compiler's\n         * children iteration loop runs, so the main cycle will compile them —\n         * no explicit child.compile() call is needed here.\n         */\n        for (let i = 0; i < array.length; i++) {\n            this.spawnItemNode(attribute.template!, attribute.owner, key, index, array[i], i);\n        }\n\n        console.log('Template for \"for\" directive:', forTemplate);\n    }\n\n\n    @AreDirective.Compile\n    compile(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ): void {\n        /**\n         * Replace the group node's default host declaration with a comment placeholder\n         * so the owner element itself does not render as a DOM element — the item nodes\n         * render as its children instead.\n         */\n        const hostInstruction = scene.host!;\n        const commentIdentifier = ` --- for: ${attribute.template!.id} --- `;\n        const declaration = new AddCommentInstruction({ content: commentIdentifier });\n\n        scene.setHost(declaration);\n        scene.planBefore(declaration, hostInstruction);\n        scene.unPlan(hostInstruction);\n    }\n\n\n    @AreDirective.Update\n    update(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ): void {\n        /**\n         * Re-evaluate the source array.\n         */\n        const { key, index, arrayExpr } = this.parseExpression(attribute.content);\n        const newArray = this.resolveArray(store, arrayExpr, attribute.content);\n\n        const owner = attribute.owner;\n        const currentChildren = [...owner.children] as AreHTMLNode[];\n\n        attribute.value = newArray;\n\n        const newLen = newArray.length;\n\n        /**\n         * Build a set of new items for O(1) identity lookup.\n         * Uses reference equality — items that exist in newArray are \"kept\".\n         */\n        const newItemSet = new Set(newArray);\n\n        /**\n         * Partition existing children by identity: nodes whose stored item is\n         * still present in the new array are kept; the rest are removed.\n         * This correctly handles deletions from any position, not just the tail.\n         */\n        const keptChildren: AreHTMLNode[] = [];\n        const removedChildren: AreHTMLNode[] = [];\n\n        for (const child of currentChildren) {\n            const ctx = child.scope.resolveFlat(AreDirectiveContext);\n\n            if (ctx && newItemSet.has(ctx.scope[key])) {\n                keptChildren.push(child);\n            } else {\n                removedChildren.push(child);\n            }\n        }\n\n        /**\n         * Unmount and detach nodes whose items are no longer in the array.\n         */\n        for (const child of removedChildren) {\n            child.unmount();\n            owner.removeChild(child);\n        }\n\n        /**\n         * Update store values on kept nodes so their reactive bindings pick up\n         * the latest data and corrected indices without a full re-render.\n         */\n        for (let i = 0; i < keptChildren.length; i++) {\n            let directiveContext = keptChildren[i].scope.resolveFlat(AreDirectiveContext);\n\n            if (!directiveContext) {\n                directiveContext = new AreDirectiveContext(keptChildren[i].aseid);\n                keptChildren[i].scope.register(directiveContext);\n            }\n\n            directiveContext.scope = {\n                ...directiveContext.scope,\n                [key]: newArray[i],\n                [index || 'index']: i,\n            };\n        }\n\n        /**\n         * Append nodes for items added beyond the current kept count.\n         * These are created outside the main compile cycle so they need an\n         * explicit compile + mount to appear in the DOM.\n         */\n        for (let i = keptChildren.length; i < newLen; i++) {\n            const itemNode = this.spawnItemNode(attribute.template!, owner, key, index, newArray[i], i);\n\n            itemNode.transform();\n            itemNode.compile();\n            itemNode.mount();\n        }\n    }\n\n\n    // ─────────────────────────────────────────────────────────────────────────────\n    // ── Helpers ──────────────────────────────────────────────────────────────────\n    // ─────────────────────────────────────────────────────────────────────────────\n\n    /**\n     * Parses the $for expression string into its constituent parts.\n     *\n     * Supported formats:\n     *   item in items\n     *   item, index in items\n     *   (item, index) in items\n     *   item in filter(items)\n     *   item, index in filter(items, 'active')\n     */\n    private parseExpression(content: string): AreForExpression {\n        const inIndex = content.lastIndexOf(' in ');\n        const keyAndIndex = content.slice(0, inIndex).trim().replace(/^\\(|\\)$/g, '');\n        const arrayExpr = content.slice(inIndex + 4).trim();\n        const keyParts = keyAndIndex.split(',').map(p => p.trim());\n\n        return {\n            key: keyParts[0],\n            index: keyParts[1] || undefined,\n            arrayExpr,\n        };\n    }\n\n    /**\n     * Resolves the array expression against the store.\n     * Supports both plain key lookups and function-call expressions:\n     *   items          → store.get('items')\n     *   filter(items)  → store.get('filter')(store.get('items'))\n     */\n    private resolveArray(store: AreStore, arrayExpr: string, fullContent: string): any[] {\n        let result: any;\n        const callMatch = arrayExpr.match(/^([^(]+)\\((.+)\\)$/);\n\n        if (callMatch) {\n            const fnName = callMatch[1].trim();\n            const fn = store.get(fnName as any);\n\n            if (typeof fn !== 'function')\n                throw new AreCompilerError({\n                    title: 'Invalid \"for\" Directive Function',\n                    description: `The expression \"${fnName}\" in the \"for\" directive does not resolve to a function in the store. Received: ${typeof fn}`,\n                });\n\n            const rawArgs = callMatch[2].split(',').map(a => a.trim());\n            const resolvedArgs = rawArgs.map(arg => {\n                if (arg.startsWith(\"'\") && arg.endsWith(\"'\")) return arg.slice(1, -1);\n                if (arg.startsWith('\"') && arg.endsWith('\"')) return arg.slice(1, -1);\n                if (!isNaN(Number(arg))) return Number(arg);\n                return store.get(arg as any);\n            });\n\n            result = (fn as Function)(...resolvedArgs);\n        } else {\n            result = store.get(arrayExpr as any);\n        }\n\n        if (!Array.isArray(result))\n            throw new AreCompilerError({\n                title: 'Invalid \"for\" Directive Value',\n                description: `The \"for\" directive expects an array but got ${typeof result}. Expression: \"${fullContent}\". Received: ${JSON.stringify(result)}`,\n            });\n\n        return result;\n    }\n\n    /**\n     * Creates a single item node from the template, registers it as a child of\n     * the owner, initialises it, injects item-scoped store values, and activates\n     * its scene so the mount/compile cycle will include it.\n     *\n     * NOTE: This method does NOT call compile() or mount() — the caller is\n     * responsible for doing so when the main lifecycle cycle won't cover it\n     * (i.e. during update, but not during the initial compile phase).\n     */\n    private spawnItemNode(\n        template: AreHTMLNode,\n        owner: AreHTMLNode,\n        key: string,\n        index: string | undefined,\n        item: any,\n        i: number,\n    ): AreHTMLNode {\n        const itemNode = template.clone() as AreHTMLNode;\n\n        owner.addChild(itemNode);\n\n        const queue = [itemNode];\n\n        while (queue.length > 0) {\n            const current = queue.shift()!\n\n            current.init();\n\n            queue.push(...current.children as AreHTMLNode[]);\n        }\n\n        /**\n         * Resolve or create a directive context for the item node. This is needed to hold the item-specific store values (e.g. the \"item\" and \"index\" in a \"for\" loop) that the template's bindings will reference during compile and update. The context is shared among all clones of the same template, but that's fine because each clone gets its own scope values assigned here.\n         */\n        let directiveContext = itemNode.scope.resolveFlat(AreDirectiveContext);\n\n        if (!directiveContext) {\n            directiveContext = new AreDirectiveContext(itemNode.aseid);\n            itemNode.scope.register(directiveContext);\n        }\n\n        directiveContext.scope = {\n            ...directiveContext.scope,\n            [key]: item,\n            [index || 'index']: i,\n        }\n\n        itemNode.scene.activate();\n\n        return itemNode;\n    }\n}"]}
+{"version":3,"sources":["../../../src/directives/AreDirectiveFor.directive.ts"],"names":[],"mappings":"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","file":"AreDirectiveFor.directive.mjs","sourcesContent":["import { A_Caller, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreCompilerError, AreScene, AreStore } from \"@adaas/are\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AddCommentInstruction } from \"@adaas/are-html/instructions/AddComment.instruction\";\nimport { AreHTMLNode } from \"@adaas/are-html/node\";\nimport { AreDirectiveContext } from \"@adaas/are-html/directive/AreDirective.context\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\n\n\ntype AreForExpression = {\n    key: string;\n    index: string | undefined;\n    arrayExpr: string;\n    /** Optional `track <expr>` clause, e.g. `track row.id` */\n    trackExpr: string | undefined;\n};\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'Built-in $for directive. Iterates over an array expression resolved from the store and renders a cloned template fragment per item, managing per-item subscopes and comment-node anchors. Supports keyed diffing via an optional track clause to minimise DOM mutations on collection updates.'\n})\n@AreDirective.Priority(1)\nexport class AreDirectiveFor extends AreDirective {\n\n\n    @AreDirective.Transform\n    transform(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger: A_Logger,\n        ...args: any[]\n    ) {\n\n        logger.debug(`[Transform] directive $FOR for <${attribute.owner.aseid.toString()}>`)\n\n        const node = attribute.owner;\n\n        /**\n         * Transfer the original node's scope (with all registered attributes and children)\n         * to the template clone, and give the owner node a fresh empty scope.\n         * This mirrors the $if directive's approach, making the owner a lightweight\n         * group container whose sole visible presence is a comment placeholder.\n         */\n        const forTemplate = node.cloneWithScope();\n\n        /**\n         * Remove the $for attribute from the template so iterative clones do not\n         * re-trigger this directive during their own transform phase.\n         * Re-register it on the owner so the reactive compile/update pipeline keeps working.\n         */\n        const forAttr = forTemplate.attributes.find(d => d.name === attribute.name);\n\n        if (forAttr) {\n            forTemplate.scope.deregister(forAttr);\n            node.scope.register(forAttr);\n        }\n\n        /**\n         * Re-initialize the owner node with its fresh scope so it becomes a valid\n         * group container that will own the generated item nodes as children.\n         */\n        node.init();\n\n        /**\n         * Store the template for use in compile and update.\n         */\n        attribute.template = forTemplate;\n\n\n        /**\n         * Parse the $for expression and evaluate the source array.\n         */\n        const { key, index, arrayExpr } = this.parseExpression(attribute.content);\n        const array = this.resolveArray(store, arrayExpr, attribute.content);\n\n        attribute.value = array;\n\n        /**\n         * For each item in the array, spawn a clone of the template with the\n         * item's store values pre-set and its scene activated.\n         *\n         * The children are added to the owner node before the main compiler's\n         * children iteration loop runs, so the main cycle will compile them —\n         * no explicit child.compile() call is needed here.\n         */\n        for (let i = 0; i < array.length; i++) {\n            this.spawnItemNode(attribute.template!, attribute.owner, key, index, array[i], i);\n        }\n    }\n\n\n    @AreDirective.Compile\n    compile(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ): void {\n        /**\n         * Replace the group node's default host declaration with a comment placeholder\n         * so the owner element itself does not render as a DOM element — the item nodes\n         * render as its children instead.\n         */\n        const hostInstruction = scene.host!;\n        const commentIdentifier = ` --- for: ${attribute.template!.id} --- `;\n        const declaration = new AddCommentInstruction({ content: commentIdentifier });\n\n        scene.setHost(declaration);\n        scene.planBefore(declaration, hostInstruction);\n        scene.unPlan(hostInstruction);\n    }\n\n\n    @AreDirective.Update\n    update(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ): void {\n        /**\n         * Re-evaluate the source array.\n         */\n        const { key, index, arrayExpr, trackExpr } = this.parseExpression(attribute.content);\n        const newArray = this.resolveArray(store, arrayExpr, attribute.content);\n\n        const owner = attribute.owner;\n        const currentChildren = [...owner.children] as AreHTMLNode[];\n\n        attribute.value = newArray;\n\n        const computeKey = this.makeKeyFn(key, index, trackExpr);\n\n        // ── 1. Index existing children by stable key ────────────────────────\n        const childByKey = new Map<any, AreHTMLNode>();\n        const remaining = new Set<AreHTMLNode>();\n\n        for (let i = 0; i < currentChildren.length; i++) {\n            const child = currentChildren[i];\n            const ctx = child.scope.resolveFlat(AreDirectiveContext);\n            const k = ctx ? computeKey(ctx.scope[key], ctx.scope[index || 'index']) : Symbol('orphan');\n            childByKey.set(k, child);\n            remaining.add(child);\n        }\n\n        // ── 2. Walk desired list; reuse existing or spawn new ───────────────\n        const desired: AreHTMLNode[] = [];\n        const newOnes: AreHTMLNode[] = [];\n\n        for (let i = 0; i < newArray.length; i++) {\n            const item = newArray[i];\n            const k = computeKey(item, i);\n            const existing = childByKey.get(k);\n\n            if (existing) {\n                remaining.delete(existing);\n\n                let directiveContext = existing.scope.resolveFlat(AreDirectiveContext);\n                if (!directiveContext) {\n                    directiveContext = new AreDirectiveContext(existing.aseid);\n                    existing.scope.register(directiveContext);\n                }\n                directiveContext.scope = {\n                    ...directiveContext.scope,\n                    [key]: item,\n                    [index || 'index']: i,\n                };\n                desired.push(existing);\n            } else {\n                const itemNode = this.spawnItemNode(attribute.template!, owner, key, index, item, i);\n                desired.push(itemNode);\n                newOnes.push(itemNode);\n            }\n        }\n\n        // ── 3. Unmount + detach removed children ─────────────────────────────\n        for (const child of remaining) {\n            child.unmount();\n            owner.removeChild(child);\n        }\n\n        // ── 4. Mount only the new ones (kept children stay where they are). ─\n        for (const child of newOnes) {\n            child.transform();\n            child.compile();\n            child.mount();\n        }\n    }\n\n\n    // ─────────────────────────────────────────────────────────────────────────────\n    // ── Helpers ──────────────────────────────────────────────────────────────────\n    // ─────────────────────────────────────────────────────────────────────────────\n\n    /**\n     * Build a key-function that derives a stable identity from each item.\n     * If the user provided a `track <expr>` clause, evaluate it as a path on\n     * the item; otherwise fall back to the item identity (reference equality).\n     */\n    private makeKeyFn(key: string, index: string | undefined, trackExpr: string | undefined): (item: any, i: number) => any {\n        if (!trackExpr) {\n            return (item, i) => item ?? i;\n        }\n\n        // Strip any leading `key.` so users can write `track row.id`.\n        const path = trackExpr.startsWith(key + '.') ? trackExpr.slice(key.length + 1) : trackExpr;\n\n        return (item, i) => {\n            if (item == null) return i;\n            if (path === key || path === '$index') return path === '$index' ? i : item;\n\n            // dotted path lookup\n            const parts = path.split('.');\n            let v: any = item;\n            for (const p of parts) {\n                if (v == null) return i;\n                v = v[p];\n            }\n            return v ?? i;\n        };\n    }\n\n    /**\n     * Parses the $for expression string into its constituent parts.\n     *\n     * Supported formats:\n     *   item in items\n     *   item, index in items\n     *   (item, index) in items\n     *   item in filter(items)\n     *   item, index in filter(items, 'active')\n     *   item in items track item.id\n     *   (item, i) in items track item.id\n     */\n    private parseExpression(content: string): AreForExpression {\n        // Strip optional `track <expr>` suffix first.\n        let trackExpr: string | undefined;\n        const trackIdx = content.search(/\\s+track\\s+/);\n        let body = content;\n        if (trackIdx !== -1) {\n            const m = content.slice(trackIdx).match(/\\s+track\\s+(.+)$/);\n            if (m) {\n                trackExpr = m[1].trim();\n                body = content.slice(0, trackIdx).trim();\n            }\n        }\n\n        const inIndex = body.lastIndexOf(' in ');\n        const keyAndIndex = body.slice(0, inIndex).trim().replace(/^\\(|\\)$/g, '');\n        const arrayExpr = body.slice(inIndex + 4).trim();\n        const keyParts = keyAndIndex.split(',').map(p => p.trim());\n\n        return {\n            key: keyParts[0],\n            index: keyParts[1] || undefined,\n            arrayExpr,\n            trackExpr,\n        };\n    }\n\n    /**\n     * Resolves the array expression against the store.\n     * Supports both plain key lookups and function-call expressions:\n     *   items          → store.get('items')\n     *   filter(items)  → store.get('filter')(store.get('items'))\n     */\n    private resolveArray(store: AreStore, arrayExpr: string, fullContent: string): any[] {\n        let result: any;\n        const callMatch = arrayExpr.match(/^([^(]+)\\((.+)\\)$/);\n\n        if (callMatch) {\n            const fnName = callMatch[1].trim();\n            const fn = store.get(fnName as any);\n\n            if (typeof fn !== 'function')\n                throw new AreCompilerError({\n                    title: 'Invalid \"for\" Directive Function',\n                    description: `The expression \"${fnName}\" in the \"for\" directive does not resolve to a function in the store. Received: ${typeof fn}`,\n                });\n\n            const rawArgs = callMatch[2].split(',').map(a => a.trim());\n            const resolvedArgs = rawArgs.map(arg => {\n                if (arg.startsWith(\"'\") && arg.endsWith(\"'\")) return arg.slice(1, -1);\n                if (arg.startsWith('\"') && arg.endsWith('\"')) return arg.slice(1, -1);\n                if (!isNaN(Number(arg))) return Number(arg);\n                return store.get(arg as any);\n            });\n\n            result = (fn as Function)(...resolvedArgs);\n        } else {\n            result = store.get(arrayExpr as any);\n        }\n\n        if (!Array.isArray(result))\n            throw new AreCompilerError({\n                title: 'Invalid \"for\" Directive Value',\n                description: `The \"for\" directive expects an array but got ${typeof result}. Expression: \"${fullContent}\". Received: ${JSON.stringify(result)}`,\n            });\n\n        return result;\n    }\n\n    /**\n     * Creates a single item node from the template, registers it as a child of\n     * the owner, initialises it, injects item-scoped store values, and activates\n     * its scene so the mount/compile cycle will include it.\n     *\n     * NOTE: This method does NOT call compile() or mount() — the caller is\n     * responsible for doing so when the main lifecycle cycle won't cover it\n     * (i.e. during update, but not during the initial compile phase).\n     */\n    private spawnItemNode(\n        template: AreHTMLNode,\n        owner: AreHTMLNode,\n        key: string,\n        index: string | undefined,\n        item: any,\n        i: number,\n    ): AreHTMLNode {\n        const itemNode = template.clone() as AreHTMLNode;\n\n        owner.addChild(itemNode);\n\n        const queue = [itemNode];\n\n        while (queue.length > 0) {\n            const current = queue.shift()!\n\n            current.init();\n\n            queue.push(...current.children as AreHTMLNode[]);\n        }\n\n        /**\n         * Resolve or create a directive context for the item node. This is needed to hold the item-specific store values (e.g. the \"item\" and \"index\" in a \"for\" loop) that the template's bindings will reference during compile and update. The context is shared among all clones of the same template, but that's fine because each clone gets its own scope values assigned here.\n         */\n        let directiveContext = itemNode.scope.resolveFlat(AreDirectiveContext);\n\n        if (!directiveContext) {\n            directiveContext = new AreDirectiveContext(itemNode.aseid);\n            itemNode.scope.register(directiveContext);\n        }\n\n        directiveContext.scope = {\n            ...directiveContext.scope,\n            [key]: item,\n            [index || 'index']: i,\n        }\n\n        itemNode.scene.activate();\n\n        return itemNode;\n    }\n}"]}

package/dist/node/directives/AreDirectiveIf.directive.d.mts

@@ -6,6 +6,24 @@ import { AreDirectiveContext } from '../lib/AreDirective/AreDirective.context.mj
 import '../lib/AreStyle/AreStyle.context.mjs';
 import '@adaas/a-utils/a-execution';
 
+/**
+ * `$if` directive — conditionally renders a node based on an expression.
+ *
+ * ⚠️ Known limitation: do NOT use `$if` and `$for` on the SAME element.
+ *    Doing so produces duplicated DOM on toggle because the two directives
+ *    share an owner node and clone its scope independently. Wrap one in a
+ *    parent element instead, e.g.:
+ *
+ *        <div $if="visible">
+ *            <li $for="item in items">{{item.name}}</li>
+ *        </div>
+ *
+ *    or
+ *
+ *        <ul $for="item in items">
+ *            <li $if="item.visible">{{item.name}}</li>
+ *        </ul>
+ */
 declare class AreDirectiveIf extends AreDirective {
     transform(attribute: AreDirectiveAttribute, scope: A_Scope, store: AreStore, scene: AreScene, logger: A_Logger, ...args: any[]): void;
     compile(attribute: AreDirectiveAttribute, store: AreStore, scene: AreScene, syntax: AreSyntax, directiveContext?: AreDirectiveContext, ...args: any[]): void;

package/dist/node/directives/AreDirectiveIf.directive.d.ts

@@ -6,6 +6,24 @@ import { AreDirectiveContext } from '../lib/AreDirective/AreDirective.context.js
 import '../lib/AreStyle/AreStyle.context.js';
 import '@adaas/a-utils/a-execution';
 
+/**
+ * `$if` directive — conditionally renders a node based on an expression.
+ *
+ * ⚠️ Known limitation: do NOT use `$if` and `$for` on the SAME element.
+ *    Doing so produces duplicated DOM on toggle because the two directives
+ *    share an owner node and clone its scope independently. Wrap one in a
+ *    parent element instead, e.g.:
+ *
+ *        <div $if="visible">
+ *            <li $for="item in items">{{item.name}}</li>
+ *        </div>
+ *
+ *    or
+ *
+ *        <ul $for="item in items">
+ *            <li $if="item.visible">{{item.name}}</li>
+ *        </ul>
+ */
 declare class AreDirectiveIf extends AreDirective {
     transform(attribute: AreDirectiveAttribute, scope: A_Scope, store: AreStore, scene: AreScene, logger: A_Logger, ...args: any[]): void;
     compile(attribute: AreDirectiveAttribute, store: AreStore, scene: AreScene, syntax: AreSyntax, directiveContext?: AreDirectiveContext, ...args: any[]): void;

package/dist/node/directives/AreDirectiveIf.directive.js

@@ -6,6 +6,7 @@ var are = require('@adaas/are');
 var AreDirective_component = require('@adaas/are-html/directive/AreDirective.component');
 var AddComment_instruction = require('@adaas/are-html/instructions/AddComment.instruction');
 var AreDirective_context = require('@adaas/are-html/directive/AreDirective.context');
+var core = require('@adaas/a-frame/core');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -34,7 +35,6 @@ exports.AreDirectiveIf = class AreDirectiveIf extends AreDirective_component.Are
     attribute.template = ifTemplate;
   }
   compile(attribute, store, scene, syntax, directiveContext, ...args) {
-    console.log('Compiling directive "if" with attribute content:', attribute);
     attribute.value = syntax.evaluate(attribute.content, store, {
       ...directiveContext?.scope || {}
     });
@@ -50,8 +50,11 @@ exports.AreDirectiveIf = class AreDirectiveIf extends AreDirective_component.Are
       attribute.template.scene.deactivate();
   }
   update(attribute, store, scope, syntax, scene, ...args) {
-    attribute.value = syntax.evaluate(attribute.content, store);
-    if (attribute.value) {
+    const previous = !!attribute.value;
+    const next = !!syntax.evaluate(attribute.content, store);
+    attribute.value = next;
+    if (previous === next) return;
+    if (next) {
       attribute.template.scene.activate();
       attribute.template.mount();
     } else {
@@ -85,6 +88,10 @@ __decorateClass([
   __decorateParam(4, aConcept.A_Inject(are.AreScene))
 ], exports.AreDirectiveIf.prototype, "update", 1);
 exports.AreDirectiveIf = __decorateClass([
+  core.A_Frame.Define({
+    namespace: "a-are-html",
+    description: "Built-in $if directive. Conditionally renders a subtree based on a store expression. Replaces the target element with a stable comment anchor when the condition is false and restores the fully rendered subtree when it becomes true, preventing any leaking of the host element between states."
+  }),
   AreDirective_component.AreDirective.Priority(2)
 ], exports.AreDirectiveIf);
 //# sourceMappingURL=AreDirectiveIf.directive.js.map

package/dist/node/directives/AreDirectiveIf.directive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/directives/AreDirectiveIf.directive.ts"],"names":["AreDirectiveIf","AreDirective","AddCommentInstruction","A_Caller","A_Scope","AreStore","AreScene","A_Logger","AreSyntax","AreDirectiveContext"],"mappings":"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","file":"AreDirectiveIf.directive.js","sourcesContent":["import { A_Caller, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport {  AreScene, AreStore, AreSyntax } from \"@adaas/are\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AddCommentInstruction } from \"@adaas/are-html/instructions/AddComment.instruction\";\nimport { AreDirectiveContext } from \"@adaas/are-html/directive/AreDirective.context\";\n\n\n\n@AreDirective.Priority(2)\nexport class AreDirectiveIf extends AreDirective {\n\n\n    @AreDirective.Transform\n    transform(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(A_Scope) scope: A_Scope,\n\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger: A_Logger,\n        ...args: any[]\n    ) {\n        logger.debug(`[Transform] directive $IF for <${attribute.owner.aseid.toString()}>`)\n\n        const node = attribute.owner;\n\n        /**\n         * We have to keep this node as a group node, and copy all data into the child node that would be actual node. \n         */\n        const ifTemplate = node.cloneWithScope();\n\n        const ifAttr = ifTemplate.attributes.find(d => d.name === attribute.name);\n\n        if (ifAttr) {\n            ifTemplate.scope.deregister(ifAttr);\n            node.scope.register(ifAttr);\n        }\n\n        node.init();\n\n        node.addChild(ifTemplate);\n\n        /**\n         * Resolve or create a directive context for the item node. This is needed to hold the item-specific store values (e.g. the \"item\" and \"index\" in a \"for\" loop) that the template's bindings will reference during compile and update. The context is shared among all clones of the same template, but that's fine because each clone gets its own scope values assigned here.\n         */\n        // let directiveContext = ifTemplate.scope.resolveFlat(AreDirectiveContext);\n\n        // if (!directiveContext) {\n        //     directiveContext = new AreDirectiveContext(ifTemplate.aseid);\n        //     ifTemplate.scope.register(directiveContext);\n        // }\n\n        ifTemplate.scene.deactivate();\n\n        attribute.template = ifTemplate;\n\n    }\n\n\n    @AreDirective.Compile\n    compile(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n\n        @A_Inject(AreDirectiveContext) directiveContext?: AreDirectiveContext,\n        ...args: any[]\n    ): void {\n\n        console.log('Compiling directive \"if\" with attribute content:', attribute);\n\n        /**\n         * 1. Extract the value from the store based on the attribute content \n         *    (which is the path to the value in the store)\n         */\n        attribute.value = syntax.evaluate(attribute.content, store, {\n            ...(directiveContext?.scope || {}),\n        });\n\n        /**\n         * 2. If the value is falsy, remove the node from the scene by planning a RemoveElement instruction.\n         *    If the value is truthy, ensure the node is in the scene by planning an AddElement instruction if it's not already planned.\n         */\n        const hostInstruction = scene.host!;\n        const commentIdentifier = ` --- if: ${attribute.template!.id} --- `;\n        const declaration = new AddCommentInstruction({ content: commentIdentifier })\n\n        scene.setHost(declaration);\n        scene.planBefore(declaration, hostInstruction);\n        scene.unPlan(hostInstruction);\n\n        if (attribute.value)\n            attribute.template!.scene.activate();\n        else\n            attribute.template!.scene.deactivate();\n    }\n\n\n\n    @AreDirective.Update\n    update(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ): void {\n        /**\n         * 1. Extract the value from the store based on the attribute content \n         *    (which is the path to the value in the store)\n         */\n        attribute.value = syntax.evaluate(attribute.content, store);\n\n        if (attribute.value) {\n            attribute.template!.scene.activate();\n\n            attribute.template!.mount()\n        }\n        else {\n            attribute.template!.unmount();\n\n            attribute.template!.scene.deactivate();\n        }\n    }\n\n}"]}
+{"version":3,"sources":["../../../src/directives/AreDirectiveIf.directive.ts"],"names":["AreDirectiveIf","AreDirective","AddCommentInstruction","A_Caller","A_Scope","AreStore","AreScene","A_Logger","AreSyntax","AreDirectiveContext","A_Frame"],"mappings":"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","file":"AreDirectiveIf.directive.js","sourcesContent":["import { A_Caller, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport {  AreScene, AreStore, AreSyntax } from \"@adaas/are\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AddCommentInstruction } from \"@adaas/are-html/instructions/AddComment.instruction\";\nimport { AreDirectiveContext } from \"@adaas/are-html/directive/AreDirective.context\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\n\n\n\n/**\n * `$if` directive — conditionally renders a node based on an expression.\n *\n * ⚠️ Known limitation: do NOT use `$if` and `$for` on the SAME element.\n *    Doing so produces duplicated DOM on toggle because the two directives\n *    share an owner node and clone its scope independently. Wrap one in a\n *    parent element instead, e.g.:\n *\n *        <div $if=\"visible\">\n *            <li $for=\"item in items\">{{item.name}}</li>\n *        </div>\n *\n *    or\n *\n *        <ul $for=\"item in items\">\n *            <li $if=\"item.visible\">{{item.name}}</li>\n *        </ul>\n */\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'Built-in $if directive. Conditionally renders a subtree based on a store expression. Replaces the target element with a stable comment anchor when the condition is false and restores the fully rendered subtree when it becomes true, preventing any leaking of the host element between states.'\n})\n@AreDirective.Priority(2)\nexport class AreDirectiveIf extends AreDirective {\n\n\n    @AreDirective.Transform\n    transform(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(A_Scope) scope: A_Scope,\n\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger: A_Logger,\n        ...args: any[]\n    ) {\n        logger.debug(`[Transform] directive $IF for <${attribute.owner.aseid.toString()}>`)\n\n        const node = attribute.owner;\n\n        /**\n         * We have to keep this node as a group node, and copy all data into the child node that would be actual node. \n         */\n        const ifTemplate = node.cloneWithScope();\n\n        const ifAttr = ifTemplate.attributes.find(d => d.name === attribute.name);\n\n        if (ifAttr) {\n            ifTemplate.scope.deregister(ifAttr);\n            node.scope.register(ifAttr);\n        }\n\n        node.init();\n\n        node.addChild(ifTemplate);\n\n        /**\n         * Resolve or create a directive context for the item node. This is needed to hold the item-specific store values (e.g. the \"item\" and \"index\" in a \"for\" loop) that the template's bindings will reference during compile and update. The context is shared among all clones of the same template, but that's fine because each clone gets its own scope values assigned here.\n         */\n        // let directiveContext = ifTemplate.scope.resolveFlat(AreDirectiveContext);\n\n        // if (!directiveContext) {\n        //     directiveContext = new AreDirectiveContext(ifTemplate.aseid);\n        //     ifTemplate.scope.register(directiveContext);\n        // }\n\n        ifTemplate.scene.deactivate();\n\n        attribute.template = ifTemplate;\n\n    }\n\n\n    @AreDirective.Compile\n    compile(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n\n        @A_Inject(AreDirectiveContext) directiveContext?: AreDirectiveContext,\n        ...args: any[]\n    ): void {\n        /**\n         * 1. Extract the value from the store based on the attribute content\n         *    (which is the path to the value in the store)\n         */\n        attribute.value = syntax.evaluate(attribute.content, store, {\n            ...(directiveContext?.scope || {}),\n        });\n\n        /**\n         * 2. If the value is falsy, remove the node from the scene by planning a RemoveElement instruction.\n         *    If the value is truthy, ensure the node is in the scene by planning an AddElement instruction if it's not already planned.\n         */\n        const hostInstruction = scene.host!;\n        const commentIdentifier = ` --- if: ${attribute.template!.id} --- `;\n        const declaration = new AddCommentInstruction({ content: commentIdentifier })\n\n        scene.setHost(declaration);\n        scene.planBefore(declaration, hostInstruction);\n        scene.unPlan(hostInstruction);\n\n        if (attribute.value)\n            attribute.template!.scene.activate();\n        else\n            attribute.template!.scene.deactivate();\n    }\n\n\n\n    @AreDirective.Update\n    update(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ): void {\n        /**\n         * 1. Extract the value from the store based on the attribute content\n         *    (which is the path to the value in the store)\n         */\n        const previous = !!attribute.value;\n        const next = !!syntax.evaluate(attribute.content, store);\n        attribute.value = next;\n\n        // Skip when truthiness has not changed — avoids redundant mount/unmount.\n        if (previous === next) return;\n\n        if (next) {\n            attribute.template!.scene.activate();\n            attribute.template!.mount();\n        } else {\n            attribute.template!.unmount();\n            attribute.template!.scene.deactivate();\n        }\n    }\n\n}"]}

package/dist/node/directives/AreDirectiveIf.directive.mjs

@@ -5,6 +5,7 @@ import { AreStore, AreScene, AreSyntax } from '@adaas/are';
 import { AreDirective } from '@adaas/are-html/directive/AreDirective.component';
 import { AddCommentInstruction } from '@adaas/are-html/instructions/AddComment.instruction';
 import { AreDirectiveContext } from '@adaas/are-html/directive/AreDirective.context';
+import { A_Frame } from '@adaas/a-frame/core';
 
 let AreDirectiveIf = class extends AreDirective {
   transform(attribute, scope, store, scene, logger, ...args) {
@@ -22,7 +23,6 @@ let AreDirectiveIf = class extends AreDirective {
     attribute.template = ifTemplate;
   }
   compile(attribute, store, scene, syntax, directiveContext, ...args) {
-    console.log('Compiling directive "if" with attribute content:', attribute);
     attribute.value = syntax.evaluate(attribute.content, store, {
       ...directiveContext?.scope || {}
     });
@@ -38,8 +38,11 @@ let AreDirectiveIf = class extends AreDirective {
       attribute.template.scene.deactivate();
   }
   update(attribute, store, scope, syntax, scene, ...args) {
-    attribute.value = syntax.evaluate(attribute.content, store);
-    if (attribute.value) {
+    const previous = !!attribute.value;
+    const next = !!syntax.evaluate(attribute.content, store);
+    attribute.value = next;
+    if (previous === next) return;
+    if (next) {
       attribute.template.scene.activate();
       attribute.template.mount();
     } else {
@@ -73,6 +76,10 @@ __decorateClass([
   __decorateParam(4, A_Inject(AreScene))
 ], AreDirectiveIf.prototype, "update", 1);
 AreDirectiveIf = __decorateClass([
+  A_Frame.Define({
+    namespace: "a-are-html",
+    description: "Built-in $if directive. Conditionally renders a subtree based on a store expression. Replaces the target element with a stable comment anchor when the condition is false and restores the fully rendered subtree when it becomes true, preventing any leaking of the host element between states."
+  }),
   AreDirective.Priority(2)
 ], AreDirectiveIf);
 

package/dist/node/directives/AreDirectiveIf.directive.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/directives/AreDirectiveIf.directive.ts"],"names":[],"mappings":"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","file":"AreDirectiveIf.directive.mjs","sourcesContent":["import { A_Caller, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport {  AreScene, AreStore, AreSyntax } from \"@adaas/are\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AddCommentInstruction } from \"@adaas/are-html/instructions/AddComment.instruction\";\nimport { AreDirectiveContext } from \"@adaas/are-html/directive/AreDirective.context\";\n\n\n\n@AreDirective.Priority(2)\nexport class AreDirectiveIf extends AreDirective {\n\n\n    @AreDirective.Transform\n    transform(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(A_Scope) scope: A_Scope,\n\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger: A_Logger,\n        ...args: any[]\n    ) {\n        logger.debug(`[Transform] directive $IF for <${attribute.owner.aseid.toString()}>`)\n\n        const node = attribute.owner;\n\n        /**\n         * We have to keep this node as a group node, and copy all data into the child node that would be actual node. \n         */\n        const ifTemplate = node.cloneWithScope();\n\n        const ifAttr = ifTemplate.attributes.find(d => d.name === attribute.name);\n\n        if (ifAttr) {\n            ifTemplate.scope.deregister(ifAttr);\n            node.scope.register(ifAttr);\n        }\n\n        node.init();\n\n        node.addChild(ifTemplate);\n\n        /**\n         * Resolve or create a directive context for the item node. This is needed to hold the item-specific store values (e.g. the \"item\" and \"index\" in a \"for\" loop) that the template's bindings will reference during compile and update. The context is shared among all clones of the same template, but that's fine because each clone gets its own scope values assigned here.\n         */\n        // let directiveContext = ifTemplate.scope.resolveFlat(AreDirectiveContext);\n\n        // if (!directiveContext) {\n        //     directiveContext = new AreDirectiveContext(ifTemplate.aseid);\n        //     ifTemplate.scope.register(directiveContext);\n        // }\n\n        ifTemplate.scene.deactivate();\n\n        attribute.template = ifTemplate;\n\n    }\n\n\n    @AreDirective.Compile\n    compile(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n\n        @A_Inject(AreDirectiveContext) directiveContext?: AreDirectiveContext,\n        ...args: any[]\n    ): void {\n\n        console.log('Compiling directive \"if\" with attribute content:', attribute);\n\n        /**\n         * 1. Extract the value from the store based on the attribute content \n         *    (which is the path to the value in the store)\n         */\n        attribute.value = syntax.evaluate(attribute.content, store, {\n            ...(directiveContext?.scope || {}),\n        });\n\n        /**\n         * 2. If the value is falsy, remove the node from the scene by planning a RemoveElement instruction.\n         *    If the value is truthy, ensure the node is in the scene by planning an AddElement instruction if it's not already planned.\n         */\n        const hostInstruction = scene.host!;\n        const commentIdentifier = ` --- if: ${attribute.template!.id} --- `;\n        const declaration = new AddCommentInstruction({ content: commentIdentifier })\n\n        scene.setHost(declaration);\n        scene.planBefore(declaration, hostInstruction);\n        scene.unPlan(hostInstruction);\n\n        if (attribute.value)\n            attribute.template!.scene.activate();\n        else\n            attribute.template!.scene.deactivate();\n    }\n\n\n\n    @AreDirective.Update\n    update(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ): void {\n        /**\n         * 1. Extract the value from the store based on the attribute content \n         *    (which is the path to the value in the store)\n         */\n        attribute.value = syntax.evaluate(attribute.content, store);\n\n        if (attribute.value) {\n            attribute.template!.scene.activate();\n\n            attribute.template!.mount()\n        }\n        else {\n            attribute.template!.unmount();\n\n            attribute.template!.scene.deactivate();\n        }\n    }\n\n}"]}
+{"version":3,"sources":["../../../src/directives/AreDirectiveIf.directive.ts"],"names":[],"mappings":"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","file":"AreDirectiveIf.directive.mjs","sourcesContent":["import { A_Caller, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport {  AreScene, AreStore, AreSyntax } from \"@adaas/are\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AddCommentInstruction } from \"@adaas/are-html/instructions/AddComment.instruction\";\nimport { AreDirectiveContext } from \"@adaas/are-html/directive/AreDirective.context\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\n\n\n\n/**\n * `$if` directive — conditionally renders a node based on an expression.\n *\n * ⚠️ Known limitation: do NOT use `$if` and `$for` on the SAME element.\n *    Doing so produces duplicated DOM on toggle because the two directives\n *    share an owner node and clone its scope independently. Wrap one in a\n *    parent element instead, e.g.:\n *\n *        <div $if=\"visible\">\n *            <li $for=\"item in items\">{{item.name}}</li>\n *        </div>\n *\n *    or\n *\n *        <ul $for=\"item in items\">\n *            <li $if=\"item.visible\">{{item.name}}</li>\n *        </ul>\n */\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'Built-in $if directive. Conditionally renders a subtree based on a store expression. Replaces the target element with a stable comment anchor when the condition is false and restores the fully rendered subtree when it becomes true, preventing any leaking of the host element between states.'\n})\n@AreDirective.Priority(2)\nexport class AreDirectiveIf extends AreDirective {\n\n\n    @AreDirective.Transform\n    transform(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(A_Scope) scope: A_Scope,\n\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger: A_Logger,\n        ...args: any[]\n    ) {\n        logger.debug(`[Transform] directive $IF for <${attribute.owner.aseid.toString()}>`)\n\n        const node = attribute.owner;\n\n        /**\n         * We have to keep this node as a group node, and copy all data into the child node that would be actual node. \n         */\n        const ifTemplate = node.cloneWithScope();\n\n        const ifAttr = ifTemplate.attributes.find(d => d.name === attribute.name);\n\n        if (ifAttr) {\n            ifTemplate.scope.deregister(ifAttr);\n            node.scope.register(ifAttr);\n        }\n\n        node.init();\n\n        node.addChild(ifTemplate);\n\n        /**\n         * Resolve or create a directive context for the item node. This is needed to hold the item-specific store values (e.g. the \"item\" and \"index\" in a \"for\" loop) that the template's bindings will reference during compile and update. The context is shared among all clones of the same template, but that's fine because each clone gets its own scope values assigned here.\n         */\n        // let directiveContext = ifTemplate.scope.resolveFlat(AreDirectiveContext);\n\n        // if (!directiveContext) {\n        //     directiveContext = new AreDirectiveContext(ifTemplate.aseid);\n        //     ifTemplate.scope.register(directiveContext);\n        // }\n\n        ifTemplate.scene.deactivate();\n\n        attribute.template = ifTemplate;\n\n    }\n\n\n    @AreDirective.Compile\n    compile(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n\n        @A_Inject(AreDirectiveContext) directiveContext?: AreDirectiveContext,\n        ...args: any[]\n    ): void {\n        /**\n         * 1. Extract the value from the store based on the attribute content\n         *    (which is the path to the value in the store)\n         */\n        attribute.value = syntax.evaluate(attribute.content, store, {\n            ...(directiveContext?.scope || {}),\n        });\n\n        /**\n         * 2. If the value is falsy, remove the node from the scene by planning a RemoveElement instruction.\n         *    If the value is truthy, ensure the node is in the scene by planning an AddElement instruction if it's not already planned.\n         */\n        const hostInstruction = scene.host!;\n        const commentIdentifier = ` --- if: ${attribute.template!.id} --- `;\n        const declaration = new AddCommentInstruction({ content: commentIdentifier })\n\n        scene.setHost(declaration);\n        scene.planBefore(declaration, hostInstruction);\n        scene.unPlan(hostInstruction);\n\n        if (attribute.value)\n            attribute.template!.scene.activate();\n        else\n            attribute.template!.scene.deactivate();\n    }\n\n\n\n    @AreDirective.Update\n    update(\n        @A_Inject(A_Caller) attribute: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ): void {\n        /**\n         * 1. Extract the value from the store based on the attribute content\n         *    (which is the path to the value in the store)\n         */\n        const previous = !!attribute.value;\n        const next = !!syntax.evaluate(attribute.content, store);\n        attribute.value = next;\n\n        // Skip when truthiness has not changed — avoids redundant mount/unmount.\n        if (previous === next) return;\n\n        if (next) {\n            attribute.template!.scene.activate();\n            attribute.template!.mount();\n        } else {\n            attribute.template!.unmount();\n            attribute.template!.scene.deactivate();\n        }\n    }\n\n}"]}

package/dist/node/engine/AreHTML.compiler.d.mts

@@ -1,6 +1,6 @@
 import { A_Feature } from '@adaas/a-concept';
 import { A_Logger } from '@adaas/a-utils/a-logger';
-import { AreCompiler, AreScene, AreStore } from '@adaas/are';
+import { AreCompiler, AreScene, AreStore, AreSyntax } from '@adaas/are';
 import { f as AreStaticAttribute, b as AreDirectiveAttribute, c as AreEventAttribute, A as AreBindingAttribute } from '../AreBinding.attribute-C6qrxN8K.mjs';
 import { AreInterpolation } from '../nodes/AreInterpolation.mjs';
 import { AreText } from '../nodes/AreText.mjs';
@@ -21,7 +21,7 @@ declare class AreHTMLCompiler extends AreCompiler {
     compileStaticAttribute(attribute: AreStaticAttribute, scene: AreScene, ...args: any[]): void;
     compileDirectiveAttribute(directive: AreDirectiveAttribute, store: AreStore, feature: A_Feature, logger?: A_Logger, ...args: any[]): void;
     compileEventAttribute(attribute: AreEventAttribute, scene: AreScene, ...args: any[]): void;
-    compileBindingAttribute(attribute: AreBindingAttribute, scene: AreScene, parentStore: AreStore, store: AreStore, ...args: any[]): void;
+    compileBindingAttribute(attribute: AreBindingAttribute, scene: AreScene, parentStore: AreStore, store: AreStore, syntax: AreSyntax, ...args: any[]): void;
 }
 
 export { AreHTMLCompiler };

package/dist/node/engine/AreHTML.compiler.d.ts

@@ -1,6 +1,6 @@
 import { A_Feature } from '@adaas/a-concept';
 import { A_Logger } from '@adaas/a-utils/a-logger';
-import { AreCompiler, AreScene, AreStore } from '@adaas/are';
+import { AreCompiler, AreScene, AreStore, AreSyntax } from '@adaas/are';
 import { f as AreStaticAttribute, b as AreDirectiveAttribute, c as AreEventAttribute, A as AreBindingAttribute } from '../AreBinding.attribute-C6JasbJL.js';
 import { AreInterpolation } from '../nodes/AreInterpolation.js';
 import { AreText } from '../nodes/AreText.js';
@@ -21,7 +21,7 @@ declare class AreHTMLCompiler extends AreCompiler {
     compileStaticAttribute(attribute: AreStaticAttribute, scene: AreScene, ...args: any[]): void;
     compileDirectiveAttribute(directive: AreDirectiveAttribute, store: AreStore, feature: A_Feature, logger?: A_Logger, ...args: any[]): void;
     compileEventAttribute(attribute: AreEventAttribute, scene: AreScene, ...args: any[]): void;
-    compileBindingAttribute(attribute: AreBindingAttribute, scene: AreScene, parentStore: AreStore, store: AreStore, ...args: any[]): void;
+    compileBindingAttribute(attribute: AreBindingAttribute, scene: AreScene, parentStore: AreStore, store: AreStore, syntax: AreSyntax, ...args: any[]): void;
 }
 
 export { AreHTMLCompiler };