@adaas/are-html 0.0.5 → 0.0.6

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.6",
   "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",

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.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,