@adaas/are-html 0.0.5 → 0.0.8

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

@@ -1,6 +1,6 @@
 import { __decorateClass, __decorateParam } from '../chunk-EQQGB2QZ.mjs';
 import { A_Inject, A_Caller, A_Scope, A_Feature, A_FormatterHelper } from '@adaas/a-concept';
-import { AreLifecycle, AreSignalsContext, AreAttributeFeatures, AreScene } from '@adaas/are';
+import { AreLifecycle, AreSignalsContext, AreNodeFeatures, AreScene, AreAttributeFeatures } from '@adaas/are';
 import { A_Logger } from '@adaas/a-utils/a-logger';
 import { AreComponentNode } from '@adaas/are-html/nodes/AreComponent';
 import { AreRootNode } from '@adaas/are-html/nodes/AreRoot';
@@ -9,6 +9,7 @@ import { AreText } from '@adaas/are-html/nodes/AreText';
 import { AreDirectiveAttribute } from '@adaas/are-html/attributes/AreDirective.attribute';
 import { AreDirectiveFeatures } from '@adaas/are-html/directive/AreDirective.constants';
 import { AreHTMLEngineContext } from './AreHTML.context';
+import { AreHTMLNode } from '../lib/AreHTMLNode/AreHTMLNode';
 import { A_Frame } from '@adaas/a-frame/core';
 
 let AreHTMLLifecycle = class extends AreLifecycle {
@@ -24,6 +25,14 @@ let AreHTMLLifecycle = class extends AreLifecycle {
     const scene = new AreScene(node.aseid);
     scope.register(scene);
   }
+  mount(node, scene, logger, ...args) {
+    logger?.debug(`[Mount] Component Trigger for <${node.aseid.entity}>  with aseid :{${node.aseid.toString()}}`);
+    node.interpret();
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      child.mount();
+    }
+  }
   updateDirectiveAttribute(directive, scope, feature, logger, ...args) {
     if (directive.component) {
       feature.chain(directive.component, AreDirectiveFeatures.Update, directive.owner.scope);
@@ -55,6 +64,15 @@ __decorateClass([
   __decorateParam(2, A_Inject(AreHTMLEngineContext)),
   __decorateParam(3, A_Inject(A_Logger))
 ], AreHTMLLifecycle.prototype, "initInterpolation", 1);
+__decorateClass([
+  A_Feature.Extend({
+    name: AreNodeFeatures.onMount,
+    scope: [AreHTMLNode]
+  }),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreScene)),
+  __decorateParam(2, A_Inject(A_Logger))
+], AreHTMLLifecycle.prototype, "mount", 1);
 __decorateClass([
   A_Feature.Extend({
     name: AreAttributeFeatures.Update,

package/dist/node/engine/AreHTML.lifecycle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/engine/AreHTML.lifecycle.ts"],"names":[],"mappings":"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","file":"AreHTML.lifecycle.mjs","sourcesContent":["import { A_Caller, A_Feature, A_FormatterHelper, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { AreLifecycle, AreScene, AreAttributeFeatures, AreSignalsContext } from \"@adaas/are\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { AreComponentNode } from \"@adaas/are-html/nodes/AreComponent\";\nimport { AreRootNode } from \"@adaas/are-html/nodes/AreRoot\";\nimport { AreInterpolation } from \"@adaas/are-html/nodes/AreInterpolation\";\nimport { AreText } from \"@adaas/are-html/nodes/AreText\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreDirectiveFeatures } from \"@adaas/are-html/directive/AreDirective.constants\";\nimport { AreHTMLEngineContext } from \"./AreHTML.context\";\nimport { AreHTMLNode } from \"../lib/AreHTMLNode/AreHTMLNode\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'HTML-specific lifecycle handler extending AreLifecycle. Wires DOM-aware init hooks for component nodes, root nodes, interpolations, text nodes, and directive attributes to the ARE rendering pipeline, connecting each entity to its HTML engine context and priming the scene for subsequent compilation and interpretation.'\n})\nexport class AreHTMLLifecycle extends AreLifecycle {\n\n    @AreLifecycle.Init(AreComponentNode)\n    @AreLifecycle.Init(AreRootNode)\n    initComponent(\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ): void {\n        signalsContext?.subscribe(node);\n        super.init(node, scope, context, logger, ...args);\n    }\n\n\n    // initRoot(\n    //     @A_Inject(A_Caller) node: AreHTMLNode,\n    //     @A_Inject(A_Scope) scope: A_Scope,\n    //     @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,\n    //     @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    //     @A_Inject(A_Logger) logger?: A_Logger,\n    //     ...args: any[]\n    // ): void {\n    //     super.init(node, scope, context, logger, ...args);\n    // }\n\n\n    @AreLifecycle.Init(AreText)\n    initText(\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ): void {\n        const scene = new AreScene(node.aseid);\n\n        scope.register(scene);\n    }\n\n\n    @AreLifecycle.Init(AreInterpolation)\n    initInterpolation(\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ): void {\n        const scene = new AreScene(node.aseid);\n\n        scope.register(scene);\n    }\n\n\n\n\n    @A_Feature.Extend({\n        name: AreAttributeFeatures.Update,\n        scope: [AreDirectiveAttribute],\n    })\n    updateDirectiveAttribute(\n        @A_Inject(A_Caller) directive: AreDirectiveAttribute,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(A_Feature) feature: A_Feature,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\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.Update, 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\n}"]}
+{"version":3,"sources":["../../../src/engine/AreHTML.lifecycle.ts"],"names":[],"mappings":"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","file":"AreHTML.lifecycle.mjs","sourcesContent":["import { A_Caller, A_Feature, A_FormatterHelper, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { AreLifecycle, AreScene, AreAttributeFeatures, AreSignalsContext, AreNodeFeatures, AreFeatures } from \"@adaas/are\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { AreComponentNode } from \"@adaas/are-html/nodes/AreComponent\";\nimport { AreRootNode } from \"@adaas/are-html/nodes/AreRoot\";\nimport { AreInterpolation } from \"@adaas/are-html/nodes/AreInterpolation\";\nimport { AreText } from \"@adaas/are-html/nodes/AreText\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreDirectiveFeatures } from \"@adaas/are-html/directive/AreDirective.constants\";\nimport { AreHTMLEngineContext } from \"./AreHTML.context\";\nimport { AreHTMLNode } from \"../lib/AreHTMLNode/AreHTMLNode\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'HTML-specific lifecycle handler extending AreLifecycle. Wires DOM-aware init hooks for component nodes, root nodes, interpolations, text nodes, and directive attributes to the ARE rendering pipeline, connecting each entity to its HTML engine context and priming the scene for subsequent compilation and interpretation.'\n})\nexport class AreHTMLLifecycle extends AreLifecycle {\n\n    @AreLifecycle.Init(AreComponentNode)\n    @AreLifecycle.Init(AreRootNode)\n    initComponent(\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ): void {\n        signalsContext?.subscribe(node);\n        super.init(node, scope, context, logger, ...args);\n    }\n\n\n    // initRoot(\n    //     @A_Inject(A_Caller) node: AreHTMLNode,\n    //     @A_Inject(A_Scope) scope: A_Scope,\n    //     @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,\n    //     @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    //     @A_Inject(A_Logger) logger?: A_Logger,\n    //     ...args: any[]\n    // ): void {\n    //     super.init(node, scope, context, logger, ...args);\n    // }\n\n\n    @AreLifecycle.Init(AreText)\n    initText(\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ): void {\n        const scene = new AreScene(node.aseid);\n\n        scope.register(scene);\n    }\n\n\n    @AreLifecycle.Init(AreInterpolation)\n    initInterpolation(\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ): void {\n        const scene = new AreScene(node.aseid);\n\n        scope.register(scene);\n    }\n\n    @A_Feature.Extend({\n        name: AreNodeFeatures.onMount,\n        scope: [AreHTMLNode]\n    })\n    mount(\n        /**\n         * Node to be mounted\n         */\n        @A_Inject(A_Caller) node: AreHTMLNode,\n        /**\n         * Node Content\n         */\n        @A_Inject(AreScene) scene: AreScene,\n\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\n    ) {\n\n        logger?.debug(`[Mount] Component Trigger for <${node.aseid.entity}>  with aseid :{${node.aseid.toString()}}`);\n\n        /**\n         * 1. We should simply run and render node itself.\n         */\n        node.interpret();\n        /**\n         * 2. Then go through all children of the node and mount the.\n         */\n        for (let i = 0; i < node.children.length; i++) {\n            const child = node.children[i];\n            child.mount();\n        }\n    }\n\n    @A_Feature.Extend({\n        name: AreAttributeFeatures.Update,\n        scope: [AreDirectiveAttribute],\n    })\n    updateDirectiveAttribute(\n        @A_Inject(A_Caller) directive: AreDirectiveAttribute,\n        @A_Inject(A_Scope) scope: A_Scope,\n        @A_Inject(A_Feature) feature: A_Feature,\n        @A_Inject(A_Logger) logger?: A_Logger,\n        ...args: any[]\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.Update, 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\n}"]}

package/examples/dashboard/dist/index.html

@@ -16,7 +16,7 @@
     <dashboard-app></dashboard-app>
   </are-root>
 
-  <script type="module" src="./mpm5e2oi-ghokyu.js"></script>
+  <script type="module" src="./mpmt0gys-1r9rcu.js"></script>
 </body>
 
 </html>

package/examples/dashboard/dist/{mpm5e2oi-ghokyu.js → mpmt0gys-1r9rcu.js}

@@ -11032,6 +11032,9 @@ var _DashboardLogo = class _DashboardLogo extends Are {
       brandName: "ARE Platform"
     });
   }
+  async onMount(node, store) {
+    console.log("!!!!!!!!!!!!!!!!!!!!!!!!!DashboardLogo mounted");
+  }
 };
 __name(_DashboardLogo, "DashboardLogo");
 __decorateClass([
@@ -11042,6 +11045,11 @@ __decorateClass([
   Are.Data,
   __decorateParam(0, ke(AreStore))
 ], _DashboardLogo.prototype, "data", 1);
+__decorateClass([
+  Are.onAfterMount,
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreStore))
+], _DashboardLogo.prototype, "onMount", 1);
 var DashboardLogo = _DashboardLogo;
 
 // examples/dashboard/src/components/DashboardNav.component.ts
@@ -12318,6 +12326,26 @@ AreText = __decorateClass([
 ], AreText);
 
 // src/engine/AreHTML.constants.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function isVoidElement(tagName) {
+  return VOID_ELEMENTS.has(tagName.toLowerCase());
+}
+__name(isVoidElement, "isVoidElement");
 var BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
   "allowfullscreen",
   "async",
@@ -12609,6 +12637,16 @@ var AreHTMLCompiler = class extends AreCompiler {
         title: "Scene Host Not Found",
         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.`
       });
+    const content = attribute.content;
+    if (content.includes("{{")) {
+      const transformed = '"' + content.replace(/\{\{([^}]+)\}\}/g, '"+($1)+"') + '"';
+      scene.plan(new AddAttributeInstruction(scene.host, {
+        name: attribute.name,
+        content: transformed,
+        evaluate: true
+      }));
+      return;
+    }
     scene.plan(new AddAttributeInstruction(scene.host, {
       name: attribute.name,
       content: attribute.content
@@ -12919,6 +12957,7 @@ var AreHTMLInterpreter = class extends AreInterpreter {
         event.set("args", effectiveArgs);
         event.set("element", element);
         event.set("instruction", mutation);
+        if (liveEvent) event.set("native", liveEvent);
         mutation.owner.emit(event);
       }, "handlerFn");
       handlerScope[`$${handler}`] = handlerFn;
@@ -13241,10 +13280,7 @@ AreHTMLTokenizer = __decorateClass([
 
 // src/engine/AreHTML.lifecycle.ts
 var AreHTMLLifecycle = class extends AreLifecycle {
-  initComponent(node, scope, context, logger, ...args) {
-    super.init(node, scope, context, logger, ...args);
-  }
-  initRoot(node, scope, context, signalsContext, logger, ...args) {
+  initComponent(node, scope, context, signalsContext, logger, ...args) {
     signalsContext?.subscribe(node);
     super.init(node, scope, context, logger, ...args);
   }
@@ -13256,6 +13292,14 @@ var AreHTMLLifecycle = class extends AreLifecycle {
     const scene = new AreScene(node.aseid);
     scope.register(scene);
   }
+  mount(node, scene, logger, ...args) {
+    logger?.debug(`[Mount] Component Trigger for <${node.aseid.entity}>  with aseid :{${node.aseid.toString()}}`);
+    node.interpret();
+    for (let i4 = 0; i4 < node.children.length; i4++) {
+      const child = node.children[i4];
+      child.mount();
+    }
+  }
   updateDirectiveAttribute(directive, scope, feature, logger, ...args) {
     if (directive.component) {
       feature.chain(directive.component, AreDirectiveFeatures.Update, directive.owner.scope);
@@ -13267,19 +13311,13 @@ var AreHTMLLifecycle = class extends AreLifecycle {
 __name(AreHTMLLifecycle, "AreHTMLLifecycle");
 __decorateClass([
   AreLifecycle.Init(AreComponentNode),
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(D)),
-  __decorateParam(2, ke(AreHTMLEngineContext)),
-  __decorateParam(3, ke(A_Logger))
-], AreHTMLLifecycle.prototype, "initComponent", 1);
-__decorateClass([
   AreLifecycle.Init(AreRootNode),
   __decorateParam(0, ke(G)),
   __decorateParam(1, ke(D)),
   __decorateParam(2, ke(AreHTMLEngineContext)),
   __decorateParam(3, ke(AreSignalsContext)),
   __decorateParam(4, ke(A_Logger))
-], AreHTMLLifecycle.prototype, "initRoot", 1);
+], AreHTMLLifecycle.prototype, "initComponent", 1);
 __decorateClass([
   AreLifecycle.Init(AreText),
   __decorateParam(0, ke(G)),
@@ -13294,6 +13332,15 @@ __decorateClass([
   __decorateParam(2, ke(AreHTMLEngineContext)),
   __decorateParam(3, ke(A_Logger))
 ], AreHTMLLifecycle.prototype, "initInterpolation", 1);
+__decorateClass([
+  w.Extend({
+    name: AreNodeFeatures.onMount,
+    scope: [AreHTMLNode]
+  }),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreScene)),
+  __decorateParam(2, ke(A_Logger))
+], AreHTMLLifecycle.prototype, "mount", 1);
 __decorateClass([
   w.Extend({
     name: AreAttributeFeatures.Update,
@@ -13386,7 +13433,7 @@ var AreHTMLEngine = class extends AreEngine {
       ]
     });
   }
-  async init(scope) {
+  async init(scope, signalContext) {
     this.package(scope, {
       context: new AreHTMLEngineContext({}),
       syntax: this.DefaultSyntax,
@@ -13396,6 +13443,10 @@ var AreHTMLEngine = class extends AreEngine {
       lifecycle: AreHTMLLifecycle,
       transformer: AreHTMLTransformer
     });
+    if (!signalContext) {
+      signalContext = new AreSignalsContext();
+      scope.register(signalContext);
+    }
   }
   rootElementMatcher(source, from, to, build) {
     const rootTag = "are-root";
@@ -13440,6 +13491,13 @@ var AreHTMLEngine = class extends AreEngine {
         match2.payload = { entity: tagName, selfClose: true, id };
         return match2;
       }
+      if (isVoidElement(tagName)) {
+        const raw = source.slice(tagStart, openingTagEnd + 1);
+        const content2 = source.slice(tagStart + tagNameMatch[0].length, openingTagEnd);
+        const match2 = build(raw, content2, tagStart, ">");
+        match2.payload = { entity: tagName, selfClose: true, id };
+        return match2;
+      }
       const closingTag = `</${tagName}>`;
       let level = 0;
       let searchIndex = openingTagEnd + 1;
@@ -13498,7 +13556,8 @@ __decorateClass([
     name: A_ServiceFeatures.onBeforeLoad,
     before: /.*/
   }),
-  __decorateParam(0, ke(D))
+  __decorateParam(0, ke(D)),
+  __decorateParam(1, ke(AreSignalsContext))
 ], AreHTMLEngine.prototype, "init", 1);
 AreHTMLEngine = __decorateClass([
   A3.Define({
@@ -13547,7 +13606,6 @@ var AreRoot = class extends Are {
     root.setContent(`<${componentName}></${componentName}>`);
   }
   async onSignal(root, vector, store, logger, signalsContext) {
-    console.log("Received signal vector in AreRoot:", root, vector);
     const rootId = root.id;
     if (signalsContext && !signalsContext.hasRoot(rootId)) {
       return;

package/examples/dashboard/src/components/DashboardLogo.component.ts

@@ -26,4 +26,13 @@ export class DashboardLogo extends Are {
             brandName: 'ARE Platform',
         });
     }
+
+
+    @Are.onAfterMount
+    async onMount(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        console.log('!!!!!!!!!!!!!!!!!!!!!!!!!DashboardLogo mounted');
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaas/are-html",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "description": "A-Concept Rendering Engine (ARE) is a powerful rendering engine designed to work seamlessly with the A-Concept framework. This library provides an HTML engine implementation of ARE, enabling developers to create dynamic and interactive user interfaces for web applications using standard HTML syntax.",
   "keywords": [
     "a-concept",
@@ -80,16 +80,16 @@
     "build": "tsup --config tsup.config.ts"
   },
   "peerDependencies": {
-    "@adaas/a-concept": "^0.3.16",
+    "@adaas/a-concept": "^0.3.17",
     "@adaas/a-frame": "^0.1.2",
-    "@adaas/a-utils": "^0.3.20",
-    "@adaas/are": "^0.0.10"
+    "@adaas/a-utils": "^0.3.23",
+    "@adaas/are": "^0.0.13"
   },
   "devDependencies": {
-    "@adaas/a-concept": "^0.3.16",
+    "@adaas/a-concept": "^0.3.17",
     "@adaas/a-frame": "^0.1.2",
-    "@adaas/a-utils": "^0.3.20",
-    "@adaas/are": "^0.0.10",
+    "@adaas/a-utils": "^0.3.23",
+    "@adaas/are": "^0.0.13",
     "@types/chai": "^4.3.14",
     "@types/jest": "^29.5.12",
     "@types/mocha": "^10.0.6",

package/src/directives/AreDirectiveFor.directive.ts

@@ -292,6 +292,14 @@ export class AreDirectiveFor extends AreDirective {
             });
 
             result = (fn as Function)(...resolvedArgs);
+        } else if (arrayExpr.includes('.')) {
+            // dotted-path lookup: e.g. "list.items" → store.get('list').items
+            const parts = arrayExpr.split('.');
+            result = store.get(parts[0] as any);
+            for (let i = 1; i < parts.length; i++) {
+                if (result == null) break;
+                result = result[parts[i]];
+            }
         } else {
             result = store.get(arrayExpr as any);
         }

package/src/engine/AreHTML.engine.ts

@@ -1,7 +1,7 @@
 import { A_Feature, A_Inject, A_Scope } from "@adaas/a-concept";
 import { A_Frame } from "@adaas/a-frame/core"
 import { A_ServiceFeatures } from "@adaas/a-utils/a-service";
-import { AreEngine, AreSyntaxTokenMatch, AreSyntax } from "@adaas/are";
+import { AreEngine, AreSyntaxTokenMatch, AreSyntax, AreSignalsContext } from "@adaas/are";
 import { AreHTMLInterpreter } from "@adaas/are-html/interpreter";
 import { AreHTMLEngineContext } from "./AreHTML.context";
 import { AreInterpolation } from "@adaas/are-html/nodes/AreInterpolation";
@@ -81,6 +81,7 @@ export class AreHTMLEngine extends AreEngine {
     })
     async init(
         @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(AreSignalsContext) signalContext?: AreSignalsContext
     ) {
         this.package(scope, {
             context: new AreHTMLEngineContext({}),
@@ -91,6 +92,11 @@ export class AreHTMLEngine extends AreEngine {
             lifecycle: AreHTMLLifecycle,
             transformer: AreHTMLTransformer,
         });
+
+        if(!signalContext) {
+            signalContext = new AreSignalsContext();
+            scope.register(signalContext);
+        }
     }
 
 

package/src/engine/AreHTML.interpreter.ts

@@ -75,7 +75,7 @@ export class AreHTMLInterpreter extends AreInterpreter {
                 }
 
                 const element = context.container.createElement(tag);
-                element.setAttribute('data-aseid', node.aseid.toString());
+                // element.setAttribute('data-aseid', node.aseid.toString());
 
                 if (mountPoint.nodeType === Node.ELEMENT_NODE) {
                     // parent is a real element — just append
@@ -99,7 +99,7 @@ export class AreHTMLInterpreter extends AreInterpreter {
 
                 const element = context.container.createElement(tag);
 
-                element.setAttribute('data-aseid', node.aseid.toString());
+                // element.setAttribute('data-aseid', node.aseid.toString());
 
                 mountPoint.parentNode?.replaceChild(element, mountPoint);
 

package/src/engine/AreHTML.lifecycle.ts

@@ -1,5 +1,5 @@
 import { A_Caller, A_Feature, A_FormatterHelper, A_Inject, A_Scope } from "@adaas/a-concept";
-import { AreLifecycle, AreScene, AreAttributeFeatures, AreSignalsContext } from "@adaas/are";
+import { AreLifecycle, AreScene, AreAttributeFeatures, AreSignalsContext, AreNodeFeatures, AreFeatures } from "@adaas/are";
 import { A_Logger } from "@adaas/a-utils/a-logger";
 import { AreComponentNode } from "@adaas/are-html/nodes/AreComponent";
 import { AreRootNode } from "@adaas/are-html/nodes/AreRoot";
@@ -72,8 +72,38 @@ export class AreHTMLLifecycle extends AreLifecycle {
         scope.register(scene);
     }
 
+    @A_Feature.Extend({
+        name: AreNodeFeatures.onMount,
+        scope: [AreHTMLNode]
+    })
+    mount(
+        /**
+         * Node to be mounted
+         */
+        @A_Inject(A_Caller) node: AreHTMLNode,
+        /**
+         * Node Content
+         */
+        @A_Inject(AreScene) scene: AreScene,
 
+        @A_Inject(A_Logger) logger?: A_Logger,
+        ...args: any[]
+    ) {
+
+        logger?.debug(`[Mount] Component Trigger for <${node.aseid.entity}>  with aseid :{${node.aseid.toString()}}`);
 
+        /**
+         * 1. We should simply run and render node itself.
+         */
+        node.interpret();
+        /**
+         * 2. Then go through all children of the node and mount the.
+         */
+        for (let i = 0; i < node.children.length; i++) {
+            const child = node.children[i];
+            child.mount();
+        }
+    }
 
     @A_Feature.Extend({
         name: AreAttributeFeatures.Update,