@adaas/are-html 0.0.4 → 0.0.6

package/examples/dashboard/dist/{mpioi5ab-8c3oa9.js → mpmt0gys-1r9rcu.js}

@@ -10846,7 +10846,7 @@ AreEngine = __decorateClass3([
   })
 ], AreEngine);
 var _a144;
-var AreRouteWatcher = (_a144 = class extends v {
+var AreWatcher = (_a144 = class extends v {
   /**
    * Initialize the watcher. This method is called once when the watcher is first created. Use this to set up any necessary state or start observing changes.
    */
@@ -10859,16 +10859,16 @@ var AreRouteWatcher = (_a144 = class extends v {
   }
   destroy() {
   }
-}, __name(_a144, "AreRouteWatcher"), _a144);
+}, __name(_a144, "AreWatcher"), _a144);
 __decorateClass3([
   Ce.Stop()
-], AreRouteWatcher.prototype, "destroy", 1);
-AreRouteWatcher = __decorateClass3([
+], AreWatcher.prototype, "destroy", 1);
+AreWatcher = __decorateClass3([
   A3.Define({
     namespace: "A-ARE",
     description: "Abstract base component that observes external changes and emits A_Signals to drive reactive updates within the ARE pipeline. Subclasses override init() to set up initial state and watch() to begin observing \u2014 for example, polling a data source, listening to DOM events, or subscribing to a store \u2014 and call the appropriate signal methods to notify the engine when a re-render is needed."
   })
-], AreRouteWatcher);
+], AreWatcher);
 var _a145;
 var _a146;
 var AreContainer = (_a146 = class extends A_Service {
@@ -10907,7 +10907,7 @@ __decorateClass3([
   __decorateParam3(1, ke(AreContext)),
   __decorateParam3(2, F.All()),
   __decorateParam3(2, F.Flat()),
-  __decorateParam3(2, ke(AreRouteWatcher)),
+  __decorateParam3(2, ke(AreWatcher)),
   __decorateParam3(3, ke(A_Logger))
 ], AreContainer.prototype, _a145, 1);
 var _a147;
@@ -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({
@@ -13537,8 +13596,8 @@ var AreRoot = class extends Are {
       }
     }
     if (!componentName) {
-      const defaultAttr = root.attributes.find((attr) => attr.name === "default");
-      componentName = defaultAttr?.content;
+      const defaultMatch = root.markup?.match(/\bdefault=["']([^"']*)["']/);
+      componentName = defaultMatch?.[1];
     }
     if (!componentName) {
       logger.warning('AreRoot: No component found for initial render. Please ensure a route condition or "default" attribute is set.');
@@ -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.4",
+  "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.compiler.ts

@@ -101,8 +101,26 @@ export class AreHTMLCompiler 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 the attribute value contains {{ }} interpolations, transform them into
+         * a JS string-concatenation expression so the interpreter can evaluate them.
+         * e.g. "color:{{expr}}" → '"color:"+(expr)+""'
+         */
+        if (content.includes('{{')) {
+            const transformed = '"' + content.replace(/\{\{([^}]+)\}\}/g, '"+($1)+"') + '"';
+            scene.plan(new AddAttributeInstruction(scene.host, {
+                name: attribute.name,
+                content: transformed,
+                evaluate: true,
+            }));
+            return;
+        }
+
         /**
-         * Default case when attribute was not able to be identified as a binding, directive, or event, we just want to add it as a regular attribute to the node. This is the most basic case for attributes that don't have any special behavior or processing logic, and it ensures that they are still rendered on the node even if they don't have any dynamic functionality.
+         * Default case: regular static attribute rendered as-is.
          */
         scene.plan(new AddAttributeInstruction(scene.host, {
             name: attribute.name,

package/src/engine/AreHTML.constants.ts

@@ -1,3 +1,19 @@
+/**
+ * Void HTML elements that cannot have children and must not have a closing tag.
+ * Per the HTML5 spec these are treated as self-closing even when written as
+ * `<input>` (without the trailing slash `/>`).
+ *
+ * Reference: https://html.spec.whatwg.org/multipage/syntax.html#void-elements
+ */
+export const VOID_ELEMENTS = new Set<string>([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'link', 'meta', 'param', 'source', 'track', 'wbr',
+]);
+
+export function isVoidElement(tagName: string): boolean {
+    return VOID_ELEMENTS.has(tagName.toLowerCase());
+}
+
 /**
  * Boolean HTML attributes whose presence (regardless of value) implies "true",
  * and whose absence implies "false". Setting these via `setAttribute(name, value)`

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";
@@ -13,6 +13,7 @@ import { AreRootNode } from "@adaas/are-html/nodes/AreRoot";
 import { AreHTMLLifecycle } from "@adaas/are-html/lifecycle";
 import { AreHTMLTransformer } from "@adaas/are-html/transformer";
 import { AreHTMLCompiler } from "./AreHTML.compiler";
+import { isVoidElement } from "./AreHTML.constants";
 
 
 
@@ -80,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({}),
@@ -90,6 +92,11 @@ export class AreHTMLEngine extends AreEngine {
             lifecycle: AreHTMLLifecycle,
             transformer: AreHTMLTransformer,
         });
+
+        if(!signalContext) {
+            signalContext = new AreSignalsContext();
+            scope.register(signalContext);
+        }
     }
 
 
@@ -152,6 +159,15 @@ export class AreHTMLEngine extends AreEngine {
                 return match
             }
 
+            // HTML5 void elements: <input>, <br>, <img>, etc. — treat as self-closing
+            if (isVoidElement(tagName)) {
+                const raw = source.slice(tagStart, openingTagEnd + 1)
+                const content = source.slice(tagStart + tagNameMatch[0].length, openingTagEnd)
+                const match = build(raw, content, tagStart, '>')
+                match.payload = { entity: tagName, selfClose: true, id }
+                return match
+            }
+
             // find matching closing tag respecting nesting
             const closingTag = `</${tagName}>`
             let level = 0

package/src/engine/AreHTML.interpreter.ts

@@ -337,6 +337,9 @@ export class AreHTMLInterpreter extends AreInterpreter {
                 event.set('args', effectiveArgs);
                 event.set('element', element);
                 event.set('instruction', mutation);
+                // Expose the raw DOM event under the conventional 'native' key so that
+                // event handlers can do: event.get('native')?.target as HTMLInputElement
+                if (liveEvent) event.set('native', liveEvent as any);
                 mutation.owner.emit(event);
             };
             handlerScope[`$${handler}`] = handlerFn;

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";
@@ -19,19 +19,8 @@ import { A_Frame } from "@adaas/a-frame/core";
 export class AreHTMLLifecycle extends AreLifecycle {
 
     @AreLifecycle.Init(AreComponentNode)
-    initComponent(
-        @A_Inject(A_Caller) node: AreHTMLNode,
-        @A_Inject(A_Scope) scope: A_Scope,
-        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
-        @A_Inject(A_Logger) logger?: A_Logger,
-        ...args: any[]
-    ): void {
-        super.init(node, scope, context, logger, ...args);
-    }
-
-
     @AreLifecycle.Init(AreRootNode)
-    initRoot(
+    initComponent(
         @A_Inject(A_Caller) node: AreHTMLNode,
         @A_Inject(A_Scope) scope: A_Scope,
         @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
@@ -44,6 +33,18 @@ export class AreHTMLLifecycle extends AreLifecycle {
     }
 
 
+    // initRoot(
+    //     @A_Inject(A_Caller) node: AreHTMLNode,
+    //     @A_Inject(A_Scope) scope: A_Scope,
+    //     @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
+    //     @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,
+    //     @A_Inject(A_Logger) logger?: A_Logger,
+    //     ...args: any[]
+    // ): void {
+    //     super.init(node, scope, context, logger, ...args);
+    // }
+
+
     @AreLifecycle.Init(AreText)
     initText(
         @A_Inject(A_Caller) node: AreHTMLNode,
@@ -71,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,

package/src/lib/AreRoot/AreRoot.component.ts

@@ -54,11 +54,12 @@ export class AreRoot extends Are {
             }
         }
 
-        // 3. Fall back to the 'default' attribute on the node directly
-        //    (store props are not yet compiled at template phase)
+        // 3. Fall back to the 'default' attribute on the node directly.
+        //    Note: root.attributes is NOT populated at this stage because tokenize()
+        //    runs after template() in the lifecycle. Read from raw markup instead.
         if (!componentName) {
-            const defaultAttr = root.attributes.find(attr => attr.name === 'default');
-            componentName = defaultAttr?.content;
+            const defaultMatch = root.markup?.match(/\bdefault=["']([^"']*)["']/);
+            componentName = defaultMatch?.[1];
         }
 
         if (!componentName) {
@@ -78,8 +79,6 @@ export class AreRoot extends Are {
         @A_Inject(A_Logger) logger: A_Logger,
         @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,
     ) {
-        console.log('Received signal vector in AreRoot:', root, vector);
-
         const rootId = root.id;
         // No routing config for this root — signals do not affect its content
         if (signalsContext && !signalsContext.hasRoot(rootId)) {