@adaas/are-html 0.0.23 → 0.0.25

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

@@ -27,7 +27,23 @@ import '@adaas/a-utils/a-execution';
 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;
-    update(attribute: AreDirectiveAttribute, store: AreStore, scope: A_Scope, syntax: AreSyntax, scene: AreScene, ...args: any[]): void;
+    update(attribute: AreDirectiveAttribute, store: AreStore, scope: A_Scope, syntax: AreSyntax, scene: AreScene, directiveContext?: AreDirectiveContext, ...args: any[]): void;
+    /**
+     * Evaluates the `$if` condition defensively.
+     *
+     * A condition can reference data that is momentarily unavailable — most
+     * commonly a nested `$if` (e.g. `$if="selected.fields.length"`) living
+     * inside a parent `$if="selected"` whose object has just become `null`.
+     * Because the nested directive is still subscribed to the store, its
+     * update fires on that same change and the raw expression would throw
+     * `Cannot read properties of null`, crashing the whole update pipeline.
+     *
+     * Treating an evaluation error as `false` is the correct contract for a
+     * conditional: if the condition cannot be resolved, the subtree simply
+     * stays hidden until the referenced data is present again (at which point
+     * the parent `$if` re-activates and re-evaluates this one).
+     */
+    private evaluateCondition;
 }
 
 export { AreDirectiveIf };

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

@@ -27,7 +27,23 @@ import '@adaas/a-utils/a-execution';
 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;
-    update(attribute: AreDirectiveAttribute, store: AreStore, scope: A_Scope, syntax: AreSyntax, scene: AreScene, ...args: any[]): void;
+    update(attribute: AreDirectiveAttribute, store: AreStore, scope: A_Scope, syntax: AreSyntax, scene: AreScene, directiveContext?: AreDirectiveContext, ...args: any[]): void;
+    /**
+     * Evaluates the `$if` condition defensively.
+     *
+     * A condition can reference data that is momentarily unavailable — most
+     * commonly a nested `$if` (e.g. `$if="selected.fields.length"`) living
+     * inside a parent `$if="selected"` whose object has just become `null`.
+     * Because the nested directive is still subscribed to the store, its
+     * update fires on that same change and the raw expression would throw
+     * `Cannot read properties of null`, crashing the whole update pipeline.
+     *
+     * Treating an evaluation error as `false` is the correct contract for a
+     * conditional: if the condition cannot be resolved, the subtree simply
+     * stays hidden until the referenced data is present again (at which point
+     * the parent `$if` re-activates and re-evaluates this one).
+     */
+    private evaluateCondition;
 }
 
 export { AreDirectiveIf };

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

@@ -35,9 +35,7 @@ exports.AreDirectiveIf = class AreDirectiveIf extends AreDirective_component.Are
     attribute.template = ifTemplate;
   }
   compile(attribute, store, scene, syntax, directiveContext, ...args) {
-    attribute.value = syntax.evaluate(attribute.content, store, {
-      ...directiveContext?.scope || {}
-    });
+    attribute.value = this.evaluateCondition(syntax, attribute, store, directiveContext);
     const hostInstruction = scene.host;
     const commentIdentifier = ` --- if: ${attribute.template.id} --- `;
     const declaration = new AddComment_instruction.AddCommentInstruction({ content: commentIdentifier });
@@ -49,9 +47,9 @@ exports.AreDirectiveIf = class AreDirectiveIf extends AreDirective_component.Are
     else
       attribute.template.scene.deactivate();
   }
-  update(attribute, store, scope, syntax, scene, ...args) {
+  update(attribute, store, scope, syntax, scene, directiveContext, ...args) {
     const previous = !!attribute.value;
-    const next = !!syntax.evaluate(attribute.content, store);
+    const next = this.evaluateCondition(syntax, attribute, store, directiveContext);
     attribute.value = next;
     if (previous === next) return;
     if (next) {
@@ -62,6 +60,30 @@ exports.AreDirectiveIf = class AreDirectiveIf extends AreDirective_component.Are
       attribute.template.scene.deactivate();
     }
   }
+  /**
+   * Evaluates the `$if` condition defensively.
+   *
+   * A condition can reference data that is momentarily unavailable — most
+   * commonly a nested `$if` (e.g. `$if="selected.fields.length"`) living
+   * inside a parent `$if="selected"` whose object has just become `null`.
+   * Because the nested directive is still subscribed to the store, its
+   * update fires on that same change and the raw expression would throw
+   * `Cannot read properties of null`, crashing the whole update pipeline.
+   *
+   * Treating an evaluation error as `false` is the correct contract for a
+   * conditional: if the condition cannot be resolved, the subtree simply
+   * stays hidden until the referenced data is present again (at which point
+   * the parent `$if` re-activates and re-evaluates this one).
+   */
+  evaluateCondition(syntax, attribute, store, directiveContext) {
+    try {
+      return !!syntax.evaluate(attribute.content, store, {
+        ...directiveContext?.scope || {}
+      });
+    } catch {
+      return false;
+    }
+  }
 };
 __decorateClass([
   AreDirective_component.AreDirective.Transform,
@@ -85,7 +107,8 @@ __decorateClass([
   __decorateParam(1, aConcept.A_Inject(are.AreStore)),
   __decorateParam(2, aConcept.A_Inject(aConcept.A_Scope)),
   __decorateParam(3, aConcept.A_Inject(are.AreSyntax)),
-  __decorateParam(4, aConcept.A_Inject(are.AreScene))
+  __decorateParam(4, aConcept.A_Inject(are.AreScene)),
+  __decorateParam(5, aConcept.A_Inject(AreDirective_context.AreDirectiveContext))
 ], exports.AreDirectiveIf.prototype, "update", 1);
 exports.AreDirectiveIf = __decorateClass([
   core.A_Frame.Define({

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","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}"]}
+{"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 = this.evaluateCondition(syntax, attribute, store, directiveContext);\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        @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        const previous = !!attribute.value;\n        const next = this.evaluateCondition(syntax, attribute, store, directiveContext);\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    /**\n     * Evaluates the `$if` condition defensively.\n     *\n     * A condition can reference data that is momentarily unavailable — most\n     * commonly a nested `$if` (e.g. `$if=\"selected.fields.length\"`) living\n     * inside a parent `$if=\"selected\"` whose object has just become `null`.\n     * Because the nested directive is still subscribed to the store, its\n     * update fires on that same change and the raw expression would throw\n     * `Cannot read properties of null`, crashing the whole update pipeline.\n     *\n     * Treating an evaluation error as `false` is the correct contract for a\n     * conditional: if the condition cannot be resolved, the subtree simply\n     * stays hidden until the referenced data is present again (at which point\n     * the parent `$if` re-activates and re-evaluates this one).\n     */\n    private evaluateCondition(\n        syntax: AreSyntax,\n        attribute: AreDirectiveAttribute,\n        store: AreStore,\n        directiveContext?: AreDirectiveContext,\n    ): boolean {\n        try {\n            return !!syntax.evaluate(attribute.content, store, {\n                ...(directiveContext?.scope || {}),\n            });\n        } catch {\n            return false;\n        }\n    }\n\n}"]}

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

@@ -23,9 +23,7 @@ let AreDirectiveIf = class extends AreDirective {
     attribute.template = ifTemplate;
   }
   compile(attribute, store, scene, syntax, directiveContext, ...args) {
-    attribute.value = syntax.evaluate(attribute.content, store, {
-      ...directiveContext?.scope || {}
-    });
+    attribute.value = this.evaluateCondition(syntax, attribute, store, directiveContext);
     const hostInstruction = scene.host;
     const commentIdentifier = ` --- if: ${attribute.template.id} --- `;
     const declaration = new AddCommentInstruction({ content: commentIdentifier });
@@ -37,9 +35,9 @@ let AreDirectiveIf = class extends AreDirective {
     else
       attribute.template.scene.deactivate();
   }
-  update(attribute, store, scope, syntax, scene, ...args) {
+  update(attribute, store, scope, syntax, scene, directiveContext, ...args) {
     const previous = !!attribute.value;
-    const next = !!syntax.evaluate(attribute.content, store);
+    const next = this.evaluateCondition(syntax, attribute, store, directiveContext);
     attribute.value = next;
     if (previous === next) return;
     if (next) {
@@ -50,6 +48,30 @@ let AreDirectiveIf = class extends AreDirective {
       attribute.template.scene.deactivate();
     }
   }
+  /**
+   * Evaluates the `$if` condition defensively.
+   *
+   * A condition can reference data that is momentarily unavailable — most
+   * commonly a nested `$if` (e.g. `$if="selected.fields.length"`) living
+   * inside a parent `$if="selected"` whose object has just become `null`.
+   * Because the nested directive is still subscribed to the store, its
+   * update fires on that same change and the raw expression would throw
+   * `Cannot read properties of null`, crashing the whole update pipeline.
+   *
+   * Treating an evaluation error as `false` is the correct contract for a
+   * conditional: if the condition cannot be resolved, the subtree simply
+   * stays hidden until the referenced data is present again (at which point
+   * the parent `$if` re-activates and re-evaluates this one).
+   */
+  evaluateCondition(syntax, attribute, store, directiveContext) {
+    try {
+      return !!syntax.evaluate(attribute.content, store, {
+        ...directiveContext?.scope || {}
+      });
+    } catch {
+      return false;
+    }
+  }
 };
 __decorateClass([
   AreDirective.Transform,
@@ -73,7 +95,8 @@ __decorateClass([
   __decorateParam(1, A_Inject(AreStore)),
   __decorateParam(2, A_Inject(A_Scope)),
   __decorateParam(3, A_Inject(AreSyntax)),
-  __decorateParam(4, A_Inject(AreScene))
+  __decorateParam(4, A_Inject(AreScene)),
+  __decorateParam(5, A_Inject(AreDirectiveContext))
 ], AreDirectiveIf.prototype, "update", 1);
 AreDirectiveIf = __decorateClass([
   A_Frame.Define({

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\";\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}"]}
+{"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 = this.evaluateCondition(syntax, attribute, store, directiveContext);\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        @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        const previous = !!attribute.value;\n        const next = this.evaluateCondition(syntax, attribute, store, directiveContext);\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    /**\n     * Evaluates the `$if` condition defensively.\n     *\n     * A condition can reference data that is momentarily unavailable — most\n     * commonly a nested `$if` (e.g. `$if=\"selected.fields.length\"`) living\n     * inside a parent `$if=\"selected\"` whose object has just become `null`.\n     * Because the nested directive is still subscribed to the store, its\n     * update fires on that same change and the raw expression would throw\n     * `Cannot read properties of null`, crashing the whole update pipeline.\n     *\n     * Treating an evaluation error as `false` is the correct contract for a\n     * conditional: if the condition cannot be resolved, the subtree simply\n     * stays hidden until the referenced data is present again (at which point\n     * the parent `$if` re-activates and re-evaluates this one).\n     */\n    private evaluateCondition(\n        syntax: AreSyntax,\n        attribute: AreDirectiveAttribute,\n        store: AreStore,\n        directiveContext?: AreDirectiveContext,\n    ): boolean {\n        try {\n            return !!syntax.evaluate(attribute.content, store, {\n                ...(directiveContext?.scope || {}),\n            });\n        } catch {\n            return false;\n        }\n    }\n\n}"]}

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

@@ -4,7 +4,9 @@ import { AreCompiler, AreScene, AreStore, AreSyntax } from '@adaas/are';
 import { e as AreHTMLNode, f as AreStaticAttribute, b as AreDirectiveAttribute, c as AreEventAttribute, A as AreBindingAttribute } from '../AreBinding.attribute-BWzEIw6H.mjs';
 import { AreInterpolation } from '../nodes/AreInterpolation.mjs';
 import { AreText } from '../nodes/AreText.mjs';
+import { AreDirectiveContext } from '../lib/AreDirective/AreDirective.context.mjs';
 import '../lib/AreStyle/AreStyle.context.mjs';
+import '@adaas/a-utils/a-execution';
 
 declare class AreHTMLCompiler extends AreCompiler {
     /**
@@ -28,7 +30,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, syntax: AreSyntax, ...args: any[]): void;
+    compileBindingAttribute(attribute: AreBindingAttribute, scene: AreScene, parentStore: AreStore, store: AreStore, syntax: AreSyntax, directiveContext?: AreDirectiveContext, ...args: any[]): void;
 }
 
 export { AreHTMLCompiler };

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

@@ -4,7 +4,9 @@ import { AreCompiler, AreScene, AreStore, AreSyntax } from '@adaas/are';
 import { e as AreHTMLNode, f as AreStaticAttribute, b as AreDirectiveAttribute, c as AreEventAttribute, A as AreBindingAttribute } from '../AreBinding.attribute-GpT-5Qmf.js';
 import { AreInterpolation } from '../nodes/AreInterpolation.js';
 import { AreText } from '../nodes/AreText.js';
+import { AreDirectiveContext } from '../lib/AreDirective/AreDirective.context.js';
 import '../lib/AreStyle/AreStyle.context.js';
+import '@adaas/a-utils/a-execution';
 
 declare class AreHTMLCompiler extends AreCompiler {
     /**
@@ -28,7 +30,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, syntax: AreSyntax, ...args: any[]): void;
+    compileBindingAttribute(attribute: AreBindingAttribute, scene: AreScene, parentStore: AreStore, store: AreStore, syntax: AreSyntax, directiveContext?: AreDirectiveContext, ...args: any[]): void;
 }
 
 export { AreHTMLCompiler };

package/dist/node/engine/AreHTML.compiler.js

@@ -17,6 +17,7 @@ var AddListener_instruction = require('@adaas/are-html/instructions/AddListener.
 var AddStyle_instruction = require('@adaas/are-html/instructions/AddStyle.instruction');
 var AddStaticHTML_instruction = require('@adaas/are-html/instructions/AddStaticHTML.instruction');
 var node = require('@adaas/are-html/node');
+var AreDirective_context = require('@adaas/are-html/directive/AreDirective.context');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -92,7 +93,7 @@ exports.AreHTMLCompiler = class AreHTMLCompiler extends are.AreCompiler {
       handler: attribute.content
     }));
   }
-  compileBindingAttribute(attribute, scene, parentStore, store, syntax, ...args) {
+  compileBindingAttribute(attribute, scene, parentStore, store, syntax, directiveContext, ...args) {
     if (!scene.host)
       throw new are.AreCompilerError({
         title: "Scene Host Not Found",
@@ -128,11 +129,12 @@ exports.AreHTMLCompiler = class AreHTMLCompiler extends are.AreCompiler {
         }
         return value;
       };
+      const directiveScope = () => directiveContext?.scope ?? {};
       const watcher = {
         update: () => {
           try {
             parentStore.watch(watcher);
-            const next = coerce(syntax.evaluate(attribute.content, parentStore));
+            const next = coerce(syntax.evaluate(attribute.content, parentStore, directiveScope()));
             parentStore.unwatch(watcher);
             store.set(propName, next);
           } catch (e) {
@@ -141,7 +143,7 @@ exports.AreHTMLCompiler = class AreHTMLCompiler extends are.AreCompiler {
         }
       };
       parentStore.watch(watcher);
-      const initial = coerce(syntax.evaluate(attribute.content, parentStore));
+      const initial = coerce(syntax.evaluate(attribute.content, parentStore, directiveScope()));
       parentStore.unwatch(watcher);
       store.set(propName, initial);
       return;
@@ -197,7 +199,8 @@ __decorateClass([
   __decorateParam(2, aConcept.A_Dependency.Parent()),
   __decorateParam(2, aConcept.A_Inject(are.AreStore)),
   __decorateParam(3, aConcept.A_Inject(are.AreStore)),
-  __decorateParam(4, aConcept.A_Inject(are.AreSyntax))
+  __decorateParam(4, aConcept.A_Inject(are.AreSyntax)),
+  __decorateParam(5, aConcept.A_Inject(AreDirective_context.AreDirectiveContext))
 ], exports.AreHTMLCompiler.prototype, "compileBindingAttribute", 1);
 exports.AreHTMLCompiler = __decorateClass([
   core.A_Frame.Define({

package/dist/node/engine/AreHTML.compiler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/engine/AreHTML.compiler.ts"],"names":["AreHTMLCompiler","AreCompiler","AddStaticHTMLInstruction","AddStyleInstruction","AddTextInstruction","AreCompilerError","AddAttributeInstruction","AreDirectiveFeatures","A_FormatterHelper","AddListenerInstruction","AreHTMLNode","A_Caller","AreScene","A_Logger","AreInterpolation","AreStore","AreText","AreStaticAttribute","AreDirectiveAttribute","A_Feature","AreEventAttribute","AreBindingAttribute","AreSyntax","A_Frame"],"mappings":"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","file":"AreHTML.compiler.js","sourcesContent":["import { A_Caller, A_Dependency, A_Feature, A_FormatterHelper, A_Inject } from \"@adaas/a-concept\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { AreCompiler, AreScene, AreCompilerError, AreStore, AreSyntax } from \"@adaas/are\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreStaticAttribute } from \"@adaas/are-html/attributes/AreStatic.attribute\";\nimport { AreDirectiveFeatures } from \"@adaas/are-html/directive/AreDirective.constants\";\nimport { AreEventAttribute } from \"@adaas/are-html/attributes/AreEvent.attribute\";\nimport { AreBindingAttribute } from \"@adaas/are-html/attributes/AreBinding.attribute\";\nimport { AreInterpolation } from \"@adaas/are-html/nodes/AreInterpolation\";\nimport { AreText } from \"@adaas/are-html/nodes/AreText\";\nimport { AddAttributeInstruction} from \"@adaas/are-html/instructions/AddAttribute.instruction\";\nimport { AddTextInstruction} from \"@adaas/are-html/instructions/AddText.instruction\";\nimport { AddListenerInstruction} from \"@adaas/are-html/instructions/AddListener.instruction\";\nimport { AddStyleInstruction } from \"@adaas/are-html/instructions/AddStyle.instruction\";\nimport { AddStaticHTMLInstruction } from \"@adaas/are-html/instructions/AddStaticHTML.instruction\";\nimport { AreHTMLNode } from \"@adaas/are-html/node\";\n\n\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'HTML-specific compiler for A-Concept Rendering Engine (ARE) components, extending the base AreCompiler to handle HTML templates, styles, and rendering logic tailored for web environments.'\n})\nexport class AreHTMLCompiler extends AreCompiler {\n\n    /**\n     * Extends the base compile for all AreHTMLNode instances (elements, components, root nodes).\n     * After the standard element/attribute/children instructions are emitted, checks whether\n     * the node has a registered AreStyle and plans an AddStyleInstruction so the interpreter\n     * can inject the CSS into the document head during mount.\n     */\n    @AreCompiler.Compile(AreHTMLNode)\n    compileHTMLNode(\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ): void {\n        super.compile(node, scene, logger, ...args);\n\n        /**\n         * Static-island materialisation. When the tokenizer flagged this node as\n         * a static island its inner subtree was never exploded into child nodes,\n         * so there is nothing for the base compiler to walk. Emit a single\n         * AddStaticHTML instruction carrying the captured inner markup; the\n         * interpreter injects it onto the host element in one pass (and decodes\n         * HTML entities for free).\n         */\n        if (node.isStaticIsland && scene.host) {\n            scene.plan(new AddStaticHTMLInstruction(scene.host, { html: node.staticInnerHTML! }));\n        }\n\n        if (node.styles?.styles) {\n            const host = scene.host;\n            if (host) {\n                scene.plan(new AddStyleInstruction(host, { styles: node.styles.styles }));\n            }\n        }\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // -------------------------Are-Interpolation Compile Section-----------------------------------\n    // -----------------------------------------------------------------------------------------\n    /**\n     * Default compile method for interpolations, which can be overridden by specific implementations if needed.\n     * \n     * @param interpolation \n     * @param scope \n     * @param scene \n     * @param store \n     * @param feature \n     */\n    @AreCompiler.Compile(AreInterpolation)\n    compileInterpolation(\n        @A_Inject(A_Caller) interpolation: AreInterpolation,\n        @A_Inject(AreScene) scene: AreScene,\n\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ) {\n        // if (scene.host)\n        //     console.log('Scene Host: ', scene.host);\n\n        // let content = '';\n\n        // logger?.debug('green', `AreHTMLCompiler: compile interpolation <${interpolation.aseid.toString()}> with key: \"${interpolation.content}\"`, store.get(interpolation.content));\n\n        // try {\n        //     content = AreCommonHelper.evaluate(interpolation.content, store);\n\n        // } catch (error) {\n        //     content = ''\n        // }\n\n        scene.plan(new AddTextInstruction({ content: interpolation.content, evaluate: true }));\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // ------------------------------Are-Text Compile Section-----------------------------------\n    // -----------------------------------------------------------------------------------------\n    @AreCompiler.Compile(AreText)\n    compileText(\n        @A_Inject(A_Caller) text: AreText,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ) {\n        logger?.debug('cyan', `AreHTMLCompiler: compile text node <${text.aseid.toString()}> with content: \"${text.content}\"`);\n        if (scene.host)\n            scene.unPlan(scene.host);\n\n        scene.plan(new AddTextInstruction({ content: text.content }));\n\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // -------------------------Are-Attribute Compile Section-----------------------------------\n    // -----------------------------------------------------------------------------------------\n\n    @AreCompiler.Compile(AreStaticAttribute)\n    compileStaticAttribute(\n        @A_Inject(A_Caller) attribute: AreStaticAttribute,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ) {\n        if (!scene.host)\n            throw new AreCompilerError({\n                title: 'Scene Host Not Found',\n                description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`\n            });\n\n        const content = attribute.content;\n\n        /**\n         * If the attribute value contains {{ }} interpolations, transform them into\n         * a JS string-concatenation expression so the interpreter can evaluate them.\n         * e.g. \"color:{{expr}}\" → '\"color:\"+(expr)+\"\"'\n         */\n        if (content.includes('{{')) {\n            const transformed = '\"' + content.replace(/\\{\\{([^}]+)\\}\\}/g, '\"+($1)+\"') + '\"';\n            scene.plan(new AddAttributeInstruction(scene.host, {\n                name: attribute.name,\n                content: transformed,\n                evaluate: true,\n            }));\n            return;\n        }\n\n        /**\n         * Default case: regular static attribute rendered as-is.\n         */\n        scene.plan(new AddAttributeInstruction(scene.host, {\n            name: attribute.name,\n            content: attribute.content\n        }));\n    }\n\n    @AreCompiler.Compile(AreDirectiveAttribute)\n    compileDirectiveAttribute(\n        @A_Inject(A_Caller) directive: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(A_Feature) feature: A_Feature,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ) {\n        store.watch(directive);\n\n        /**\n         * 3. If the attribute is a directive, then we should find a component that is responsible for\n         *    the directive compiling logic, and call it. \n         *    In case component is not found we just want to log a warning, \n         *    since the directive may be handled by some parent component or simply is a mistake in the template.\n         */\n        if (directive.component) {\n            feature.chain(directive.component, AreDirectiveFeatures.Compile, directive.owner.scope);\n        } else {\n            logger?.warning(`Directive handler component not found for directive: ${directive.name}. Make sure to create a component named \"AreDirective${A_FormatterHelper.toPascalCase(directive.name)}\" to handle this directive.`);\n        }\n\n        store.unwatch(directive);\n    }\n\n\n    @AreCompiler.Compile(AreEventAttribute)\n    compileEventAttribute(\n        @A_Inject(A_Caller) attribute: AreEventAttribute,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ) {\n\n        if (!scene.host)\n            throw new AreCompilerError({\n                title: 'Scene Host Not Found',\n                description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`\n            });\n        /**\n         * 2. In case the attribute is an event listener, then \n         *    we should simply add a callback handler that will be used to proxy an event \n         *    into the ComponentNode component.  \n         *[!] In this case AreAttribute is AreEventAttribute that has prepared callback function to be used \n         *    in the event listener. It is important to store callback function once \n         *    to prevent duplicated functions in case of multiple compilations during development.\n         */\n        scene.plan(new AddListenerInstruction(scene.host, {\n            name: attribute.name,\n            handler: attribute.content\n        }));\n    }\n\n\n    @AreCompiler.Compile(AreBindingAttribute)\n    compileBindingAttribute(\n        @A_Inject(A_Caller) attribute: AreBindingAttribute,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Dependency.Parent()\n        @A_Inject(AreStore) parentStore: AreStore,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n        ...args: any[]\n    ) {\n        if (!scene.host)\n            throw new AreCompilerError({\n                title: 'Scene Host Not Found',\n                description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`\n            });\n\n\n        const node = attribute.owner;\n        const props = node.component?.props;\n\n        // Component prop names are typically declared in camelCase, while template\n        // markup uses kebab-case. Try both forms when matching.\n        let propName: string | undefined;\n        if (props) {\n            if (props[attribute.name]) {\n                propName = attribute.name;\n            } else {\n                const camel = A_FormatterHelper.toCamelCase(attribute.name);\n                if (props[camel]) propName = camel;\n            }\n        }\n\n        /**\n         * 1. Component prop binding — evaluate against the parent store and\n         *    keep the child store reactive to upstream changes.\n         */\n        if (propName && props) {\n            const propDefinition = props[propName];\n\n            const coerce = (raw: any): any => {\n                let value = raw;\n                if (propDefinition.type) {\n                    switch (propDefinition.type) {\n                        case 'string': value = value === undefined || value === null ? '' : String(value); break;\n                        case 'number': value = Number(value); break;\n                        case 'boolean': value = Boolean(value); break;\n                    }\n                }\n                return value;\n            };\n\n            // The watcher entity below is registered against parentStore so that\n            // updates to the bound expression in the parent flow into the child store.\n            const watcher = {\n                update: () => {\n                    try {\n                        parentStore.watch(watcher);\n                        const next = coerce(syntax.evaluate(attribute.content, parentStore));\n                        parentStore.unwatch(watcher);\n                        store.set(propName!, next);\n                    } catch (e) {\n                        parentStore.unwatch(watcher);\n                    }\n                }\n            };\n\n            // Initial read with watch active so dependencies are recorded.\n            parentStore.watch(watcher);\n            const initial = coerce(syntax.evaluate(attribute.content, parentStore));\n            parentStore.unwatch(watcher);\n\n            store.set(propName, initial);\n            return;\n        }\n\n        /**\n         * 2. Default attribute binding — evaluated reactively against the local store.\n         */\n        const instruction = new AddAttributeInstruction(scene.host, {\n            name: attribute.name,\n            content: attribute.content,\n            evaluate: true\n        })\n\n        scene.plan(instruction);\n    }\n\n\n}"]}
+{"version":3,"sources":["../../../src/engine/AreHTML.compiler.ts"],"names":["AreHTMLCompiler","AreCompiler","AddStaticHTMLInstruction","AddStyleInstruction","AddTextInstruction","AreCompilerError","AddAttributeInstruction","AreDirectiveFeatures","A_FormatterHelper","AddListenerInstruction","AreHTMLNode","A_Caller","AreScene","A_Logger","AreInterpolation","AreStore","AreText","AreStaticAttribute","AreDirectiveAttribute","A_Feature","AreEventAttribute","AreBindingAttribute","AreSyntax","AreDirectiveContext","A_Frame"],"mappings":"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","file":"AreHTML.compiler.js","sourcesContent":["import { A_Caller, A_Dependency, A_Feature, A_FormatterHelper, A_Inject } from \"@adaas/a-concept\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { AreCompiler, AreScene, AreCompilerError, AreStore, AreSyntax } from \"@adaas/are\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreStaticAttribute } from \"@adaas/are-html/attributes/AreStatic.attribute\";\nimport { AreDirectiveFeatures } from \"@adaas/are-html/directive/AreDirective.constants\";\nimport { AreEventAttribute } from \"@adaas/are-html/attributes/AreEvent.attribute\";\nimport { AreBindingAttribute } from \"@adaas/are-html/attributes/AreBinding.attribute\";\nimport { AreInterpolation } from \"@adaas/are-html/nodes/AreInterpolation\";\nimport { AreText } from \"@adaas/are-html/nodes/AreText\";\nimport { AddAttributeInstruction} from \"@adaas/are-html/instructions/AddAttribute.instruction\";\nimport { AddTextInstruction} from \"@adaas/are-html/instructions/AddText.instruction\";\nimport { AddListenerInstruction} from \"@adaas/are-html/instructions/AddListener.instruction\";\nimport { AddStyleInstruction } from \"@adaas/are-html/instructions/AddStyle.instruction\";\nimport { AddStaticHTMLInstruction } from \"@adaas/are-html/instructions/AddStaticHTML.instruction\";\nimport { AreHTMLNode } from \"@adaas/are-html/node\";\nimport { AreDirectiveContext } from \"@adaas/are-html/directive/AreDirective.context\";\n\n\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'HTML-specific compiler for A-Concept Rendering Engine (ARE) components, extending the base AreCompiler to handle HTML templates, styles, and rendering logic tailored for web environments.'\n})\nexport class AreHTMLCompiler extends AreCompiler {\n\n    /**\n     * Extends the base compile for all AreHTMLNode instances (elements, components, root nodes).\n     * After the standard element/attribute/children instructions are emitted, checks whether\n     * the node has a registered AreStyle and plans an AddStyleInstruction so the interpreter\n     * can inject the CSS into the document head during mount.\n     */\n    @AreCompiler.Compile(AreHTMLNode)\n    compileHTMLNode(\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ): void {\n        super.compile(node, scene, logger, ...args);\n\n        /**\n         * Static-island materialisation. When the tokenizer flagged this node as\n         * a static island its inner subtree was never exploded into child nodes,\n         * so there is nothing for the base compiler to walk. Emit a single\n         * AddStaticHTML instruction carrying the captured inner markup; the\n         * interpreter injects it onto the host element in one pass (and decodes\n         * HTML entities for free).\n         */\n        if (node.isStaticIsland && scene.host) {\n            scene.plan(new AddStaticHTMLInstruction(scene.host, { html: node.staticInnerHTML! }));\n        }\n\n        if (node.styles?.styles) {\n            const host = scene.host;\n            if (host) {\n                scene.plan(new AddStyleInstruction(host, { styles: node.styles.styles }));\n            }\n        }\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // -------------------------Are-Interpolation Compile Section-----------------------------------\n    // -----------------------------------------------------------------------------------------\n    /**\n     * Default compile method for interpolations, which can be overridden by specific implementations if needed.\n     * \n     * @param interpolation \n     * @param scope \n     * @param scene \n     * @param store \n     * @param feature \n     */\n    @AreCompiler.Compile(AreInterpolation)\n    compileInterpolation(\n        @A_Inject(A_Caller) interpolation: AreInterpolation,\n        @A_Inject(AreScene) scene: AreScene,\n\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ) {\n        // if (scene.host)\n        //     console.log('Scene Host: ', scene.host);\n\n        // let content = '';\n\n        // logger?.debug('green', `AreHTMLCompiler: compile interpolation <${interpolation.aseid.toString()}> with key: \"${interpolation.content}\"`, store.get(interpolation.content));\n\n        // try {\n        //     content = AreCommonHelper.evaluate(interpolation.content, store);\n\n        // } catch (error) {\n        //     content = ''\n        // }\n\n        scene.plan(new AddTextInstruction({ content: interpolation.content, evaluate: true }));\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // ------------------------------Are-Text Compile Section-----------------------------------\n    // -----------------------------------------------------------------------------------------\n    @AreCompiler.Compile(AreText)\n    compileText(\n        @A_Inject(A_Caller) text: AreText,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ) {\n        logger?.debug('cyan', `AreHTMLCompiler: compile text node <${text.aseid.toString()}> with content: \"${text.content}\"`);\n        if (scene.host)\n            scene.unPlan(scene.host);\n\n        scene.plan(new AddTextInstruction({ content: text.content }));\n\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // -------------------------Are-Attribute Compile Section-----------------------------------\n    // -----------------------------------------------------------------------------------------\n\n    @AreCompiler.Compile(AreStaticAttribute)\n    compileStaticAttribute(\n        @A_Inject(A_Caller) attribute: AreStaticAttribute,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ) {\n        if (!scene.host)\n            throw new AreCompilerError({\n                title: 'Scene Host Not Found',\n                description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`\n            });\n\n        const content = attribute.content;\n\n        /**\n         * If the attribute value contains {{ }} interpolations, transform them into\n         * a JS string-concatenation expression so the interpreter can evaluate them.\n         * e.g. \"color:{{expr}}\" → '\"color:\"+(expr)+\"\"'\n         */\n        if (content.includes('{{')) {\n            const transformed = '\"' + content.replace(/\\{\\{([^}]+)\\}\\}/g, '\"+($1)+\"') + '\"';\n            scene.plan(new AddAttributeInstruction(scene.host, {\n                name: attribute.name,\n                content: transformed,\n                evaluate: true,\n            }));\n            return;\n        }\n\n        /**\n         * Default case: regular static attribute rendered as-is.\n         */\n        scene.plan(new AddAttributeInstruction(scene.host, {\n            name: attribute.name,\n            content: attribute.content\n        }));\n    }\n\n    @AreCompiler.Compile(AreDirectiveAttribute)\n    compileDirectiveAttribute(\n        @A_Inject(A_Caller) directive: AreDirectiveAttribute,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(A_Feature) feature: A_Feature,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ) {\n        store.watch(directive);\n\n        /**\n         * 3. If the attribute is a directive, then we should find a component that is responsible for\n         *    the directive compiling logic, and call it. \n         *    In case component is not found we just want to log a warning, \n         *    since the directive may be handled by some parent component or simply is a mistake in the template.\n         */\n        if (directive.component) {\n            feature.chain(directive.component, AreDirectiveFeatures.Compile, directive.owner.scope);\n        } else {\n            logger?.warning(`Directive handler component not found for directive: ${directive.name}. Make sure to create a component named \"AreDirective${A_FormatterHelper.toPascalCase(directive.name)}\" to handle this directive.`);\n        }\n\n        store.unwatch(directive);\n    }\n\n\n    @AreCompiler.Compile(AreEventAttribute)\n    compileEventAttribute(\n        @A_Inject(A_Caller) attribute: AreEventAttribute,\n        @A_Inject(AreScene) scene: AreScene,\n        ...args: any[]\n    ) {\n\n        if (!scene.host)\n            throw new AreCompilerError({\n                title: 'Scene Host Not Found',\n                description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`\n            });\n        /**\n         * 2. In case the attribute is an event listener, then \n         *    we should simply add a callback handler that will be used to proxy an event \n         *    into the ComponentNode component.  \n         *[!] In this case AreAttribute is AreEventAttribute that has prepared callback function to be used \n         *    in the event listener. It is important to store callback function once \n         *    to prevent duplicated functions in case of multiple compilations during development.\n         */\n        scene.plan(new AddListenerInstruction(scene.host, {\n            name: attribute.name,\n            handler: attribute.content\n        }));\n    }\n\n\n    @AreCompiler.Compile(AreBindingAttribute)\n    compileBindingAttribute(\n        @A_Inject(A_Caller) attribute: AreBindingAttribute,\n        @A_Inject(AreScene) scene: AreScene,\n        @A_Dependency.Parent()\n        @A_Inject(AreStore) parentStore: AreStore,\n        @A_Inject(AreStore) store: AreStore,\n        @A_Inject(AreSyntax) syntax: AreSyntax,\n        @A_Inject(AreDirectiveContext) directiveContext?: AreDirectiveContext,\n        ...args: any[]\n    ) {\n        if (!scene.host)\n            throw new AreCompilerError({\n                title: 'Scene Host Not Found',\n                description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`\n            });\n\n\n        const node = attribute.owner;\n        const props = node.component?.props;\n\n        // Component prop names are typically declared in camelCase, while template\n        // markup uses kebab-case. Try both forms when matching.\n        let propName: string | undefined;\n        if (props) {\n            if (props[attribute.name]) {\n                propName = attribute.name;\n            } else {\n                const camel = A_FormatterHelper.toCamelCase(attribute.name);\n                if (props[camel]) propName = camel;\n            }\n        }\n\n        /**\n         * 1. Component prop binding — evaluate against the parent store and\n         *    keep the child store reactive to upstream changes.\n         */\n        if (propName && props) {\n            const propDefinition = props[propName];\n\n            const coerce = (raw: any): any => {\n                let value = raw;\n                if (propDefinition.type) {\n                    switch (propDefinition.type) {\n                        case 'string': value = value === undefined || value === null ? '' : String(value); break;\n                        case 'number': value = Number(value); break;\n                        case 'boolean': value = Boolean(value); break;\n                    }\n                }\n                return value;\n            };\n\n            // Item-scoped variables from an enclosing directive (the `item`/`index`\n            // of a `$for`, or any scope a `$if` merged in) so a prop binding like\n            // `:title=\"item.name\"` resolves the loop variable — checked BEFORE the\n            // store, exactly like plain attribute bindings do in the interpreter.\n            // Read `.scope` lazily inside each evaluation so keyed `$for` updates\n            // that reassign the context's scope are always reflected.\n            const directiveScope = () => directiveContext?.scope ?? {};\n\n            // The watcher entity below is registered against parentStore so that\n            // updates to the bound expression in the parent flow into the child store.\n            const watcher = {\n                update: () => {\n                    try {\n                        parentStore.watch(watcher);\n                        const next = coerce(syntax.evaluate(attribute.content, parentStore, directiveScope()));\n                        parentStore.unwatch(watcher);\n                        store.set(propName!, next);\n                    } catch (e) {\n                        parentStore.unwatch(watcher);\n                    }\n                }\n            };\n\n            // Initial read with watch active so dependencies are recorded.\n            parentStore.watch(watcher);\n            const initial = coerce(syntax.evaluate(attribute.content, parentStore, directiveScope()));\n            parentStore.unwatch(watcher);\n\n            store.set(propName, initial);\n            return;\n        }\n\n        /**\n         * 2. Default attribute binding — evaluated reactively against the local store.\n         */\n        const instruction = new AddAttributeInstruction(scene.host, {\n            name: attribute.name,\n            content: attribute.content,\n            evaluate: true\n        })\n\n        scene.plan(instruction);\n    }\n\n\n}"]}

package/dist/node/engine/AreHTML.compiler.mjs

@@ -16,6 +16,7 @@ import { AddListenerInstruction } from '@adaas/are-html/instructions/AddListener
 import { AddStyleInstruction } from '@adaas/are-html/instructions/AddStyle.instruction';
 import { AddStaticHTMLInstruction } from '@adaas/are-html/instructions/AddStaticHTML.instruction';
 import { AreHTMLNode } from '@adaas/are-html/node';
+import { AreDirectiveContext } from '@adaas/are-html/directive/AreDirective.context';
 
 let AreHTMLCompiler = class extends AreCompiler {
   compileHTMLNode(node, scene, logger, ...args) {
@@ -80,7 +81,7 @@ let AreHTMLCompiler = class extends AreCompiler {
       handler: attribute.content
     }));
   }
-  compileBindingAttribute(attribute, scene, parentStore, store, syntax, ...args) {
+  compileBindingAttribute(attribute, scene, parentStore, store, syntax, directiveContext, ...args) {
     if (!scene.host)
       throw new AreCompilerError({
         title: "Scene Host Not Found",
@@ -116,11 +117,12 @@ let AreHTMLCompiler = class extends AreCompiler {
         }
         return value;
       };
+      const directiveScope = () => directiveContext?.scope ?? {};
       const watcher = {
         update: () => {
           try {
             parentStore.watch(watcher);
-            const next = coerce(syntax.evaluate(attribute.content, parentStore));
+            const next = coerce(syntax.evaluate(attribute.content, parentStore, directiveScope()));
             parentStore.unwatch(watcher);
             store.set(propName, next);
           } catch (e) {
@@ -129,7 +131,7 @@ let AreHTMLCompiler = class extends AreCompiler {
         }
       };
       parentStore.watch(watcher);
-      const initial = coerce(syntax.evaluate(attribute.content, parentStore));
+      const initial = coerce(syntax.evaluate(attribute.content, parentStore, directiveScope()));
       parentStore.unwatch(watcher);
       store.set(propName, initial);
       return;
@@ -185,7 +187,8 @@ __decorateClass([
   __decorateParam(2, A_Dependency.Parent()),
   __decorateParam(2, A_Inject(AreStore)),
   __decorateParam(3, A_Inject(AreStore)),
-  __decorateParam(4, A_Inject(AreSyntax))
+  __decorateParam(4, A_Inject(AreSyntax)),
+  __decorateParam(5, A_Inject(AreDirectiveContext))
 ], AreHTMLCompiler.prototype, "compileBindingAttribute", 1);
 AreHTMLCompiler = __decorateClass([
   A_Frame.Define({