@adaas/are-html 0.0.3 → 0.0.5

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

@@ -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";
 
 
 
@@ -152,6 +153,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

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

package/src/index.ts

@@ -75,6 +75,6 @@ export * from './lib/AreStyle/AreStyle.context';
 export * from './lib/AreStyle/AreStyle.types';
 
 // ─────────────────────────────────────────────────────────────────────────────
-// ── Lib / AreWatcher ─────────────────────────────────────────────────────────
+// ── Lib / AreRouteWatcher ─────────────────────────────────────────────────────────
 // ─────────────────────────────────────────────────────────────────────────────
-export * from './lib/AreWatcher/AreWatcher.component';
+export * from './lib/AreRouteWatcher/AreRouteWatcher.component';

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)) {

package/src/lib/{AreWatcher/AreWatcher.component.ts → AreRouteWatcher/AreRouteWatcher.component.ts}

@@ -3,9 +3,9 @@ import { A_Frame } from "@adaas/a-frame/core";
 
 @A_Frame.Define({
     namespace: 'a-are-html',
-    description: 'AreWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework.'
+    description: 'AreRouteWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework.'
 })
-export class AreWatcher extends A_Component {
+export class AreRouteWatcher extends A_Component {
 
     private readonly handlers: Set<(url: URL) => void> = new Set();
     private current: URL = new URL(window.location.href);

package/src/signals/AreRoute.signal.ts

@@ -7,7 +7,7 @@ import { A_Frame } from "@adaas/a-frame/core";
 
 @A_Frame.Define({
     namespace: 'a-are-html',
-    description: 'ARE signal that carries an A_Route value. Dispatched by AreWatcher on client-side navigation events (pushState, replaceState, popstate). The signal bus delivers it to all subscribed root nodes, triggering route-based conditional rendering across the component tree.'
+    description: 'ARE signal that carries an A_Route value. Dispatched by AreRouteWatcher on client-side navigation events (pushState, replaceState, popstate). The signal bus delivers it to all subscribed root nodes, triggering route-based conditional rendering across the component tree.'
 })
 export class AreRoute extends AreSignal<A_Route> {
 

package/dist/node/lib/AreWatcher/AreWatcher.component.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/lib/AreWatcher/AreWatcher.component.ts"],"names":["AreWatcher","A_Component","A_Frame"],"mappings":";;;;;;;;;;;;;AAOaA,kBAAA,GAAN,yBAAyBC,oBAAA,CAAY;AAAA,EAKxC,WAAA,GAAc;AACV,IAAA,KAAA,EAAM;AAJV,IAAA,IAAA,CAAiB,QAAA,uBAAwC,GAAA,EAAI;AAC7D,IAAA,IAAA,CAAQ,OAAA,GAAe,IAAI,GAAA,CAAI,MAAA,CAAO,SAAS,IAAI,CAAA;AA4BnD;AAAA,IAAA,IAAA,CAAQ,aAAa,MAAY;AAC7B,MAAA,IAAA,CAAK,MAAA,EAAO;AAAA,IAChB,CAAA;AAEA,IAAA,IAAA,CAAQ,eAAe,MAAY;AAC/B,MAAA,IAAA,CAAK,MAAA,EAAO;AAAA,IAChB,CAAA;AAEA,IAAA,IAAA,CAAQ,cAAc,MAAY;AAC9B,MAAA,IAAA,CAAK,MAAA,EAAO;AAAA,IAChB,CAAA;AAlCI,IAAA,IAAA,CAAK,YAAA,EAAa;AAClB,IAAA,IAAA,CAAK,eAAA,EAAgB;AAAA,EACzB;AAAA;AAAA,EAIA,SAAS,OAAA,EAAyC;AAC9C,IAAA,IAAA,CAAK,QAAA,CAAS,IAAI,OAAO,CAAA;AACzB,IAAA,OAAO,MAAM,IAAA,CAAK,QAAA,CAAS,MAAA,CAAO,OAAO,CAAA;AAAA,EAC7C;AAAA,EAEA,IAAI,GAAA,GAAW;AACX,IAAA,OAAO,IAAA,CAAK,OAAA;AAAA,EAChB;AAAA,EAEA,OAAA,GAAgB;AACZ,IAAA,MAAA,CAAO,mBAAA,CAAoB,UAAA,EAAY,IAAA,CAAK,UAAU,CAAA;AACtD,IAAA,MAAA,CAAO,mBAAA,CAAoB,YAAA,EAAc,IAAA,CAAK,YAAY,CAAA;AAC1D,IAAA,MAAA,CAAO,mBAAA,CAAoB,WAAA,EAAa,IAAA,CAAK,WAAW,CAAA;AACxD,IAAA,IAAA,CAAK,SAAS,KAAA,EAAM;AAAA,EACxB;AAAA,EAgBQ,eAAA,GAAwB;AAC5B,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAA,EAAY,IAAA,CAAK,UAAU,CAAA;AACnD,IAAA,MAAA,CAAO,gBAAA,CAAiB,YAAA,EAAc,IAAA,CAAK,YAAY,CAAA;AACvD,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAA,EAAa,IAAA,CAAK,WAAW,CAAA;AAAA,EACzD;AAAA;AAAA,EAIQ,YAAA,GAAqB;AACzB,IAAA,MAAM,KAAA,GAAQ,CAAC,QAAA,KACX,SAAA,GAA4B,IAAA,EAA4C;AACpE,MAAA,QAAA,CAAS,KAAA,CAAM,MAAM,IAAI,CAAA;AACzB,MAAA,MAAA,CAAO,aAAA,CAAc,IAAI,KAAA,CAAM,WAAW,CAAC,CAAA;AAAA,IAC/C,CAAA;AAEJ,IAAA,OAAA,CAAQ,SAAA,GAAY,KAAA,CAAM,OAAA,CAAQ,SAAS,CAAA;AAC3C,IAAA,OAAA,CAAQ,YAAA,GAAe,KAAA,CAAM,OAAA,CAAQ,YAAY,CAAA;AAAA,EACrD;AAAA;AAAA,EAIQ,MAAA,GAAe;AACnB,IAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,MAAA,CAAO,SAAS,IAAI,CAAA;AAEzC,IAAA,IAAI,IAAA,CAAK,IAAA,KAAS,IAAA,CAAK,OAAA,CAAQ,IAAA,EAAM;AAErC,IAAA,IAAA,CAAK,OAAA,GAAU,IAAA;AAEf,IAAA,KAAA,MAAW,OAAA,IAAW,KAAK,QAAA,EAAU;AACjC,MAAA,OAAA,CAAQ,KAAK,OAAO,CAAA;AAAA,IACxB;AAAA,EACJ;AACJ;AA3EaD,kBAAA,GAAN,eAAA,CAAA;AAAA,EAJNE,aAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACYF,kBAAA,CAAA","file":"AreWatcher.component.js","sourcesContent":["import { A_Component } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'AreWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework.'\n})\nexport class AreWatcher extends A_Component {\n\n    private readonly handlers: Set<(url: URL) => void> = new Set();\n    private current: URL = new URL(window.location.href);\n\n    constructor() {\n        super();\n        this.patchHistory();\n        this.attachListeners();\n    }\n\n    // ── Public ────────────────────────────────────────────────────────────────\n\n    onChange(handler: (url: URL) => void): () => void {\n        this.handlers.add(handler);\n        return () => this.handlers.delete(handler);   // returns unsubscribe fn\n    }\n\n    get url(): URL {\n        return this.current;\n    }\n\n    destroy(): void {\n        window.removeEventListener('popstate', this.onPopState);\n        window.removeEventListener('hashchange', this.onHashChange);\n        window.removeEventListener('urlchange', this.onURLChange);\n        this.handlers.clear();\n    }\n\n    // ── Listeners ─────────────────────────────────────────────────────────────\n\n    private onPopState = (): void => {\n        this.notify();\n    }\n\n    private onHashChange = (): void => {\n        this.notify();\n    }\n\n    private onURLChange = (): void => {\n        this.notify();\n    }\n\n    private attachListeners(): void {\n        window.addEventListener('popstate', this.onPopState);\n        window.addEventListener('hashchange', this.onHashChange);\n        window.addEventListener('urlchange', this.onURLChange);   // custom event from patch\n    }\n\n    // ── Patch pushState / replaceState ────────────────────────────────────────\n\n    private patchHistory(): void {\n        const patch = (original: typeof history.pushState) =>\n            function (this: History, ...args: Parameters<typeof history.pushState>) {\n                original.apply(this, args);\n                window.dispatchEvent(new Event('urlchange'));\n            };\n\n        history.pushState = patch(history.pushState);\n        history.replaceState = patch(history.replaceState);\n    }\n\n    // ── Notify ────────────────────────────────────────────────────────────────\n\n    private notify(): void {\n        const next = new URL(window.location.href);\n\n        if (next.href === this.current.href) return;   // no actual change\n\n        this.current = next;\n\n        for (const handler of this.handlers) {\n            handler(this.current);\n        }\n    }\n}"]}

package/dist/node/lib/AreWatcher/AreWatcher.component.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/lib/AreWatcher/AreWatcher.component.ts"],"names":[],"mappings":";;;;AAOO,IAAM,UAAA,GAAN,cAAyB,WAAA,CAAY;AAAA,EAKxC,WAAA,GAAc;AACV,IAAA,KAAA,EAAM;AAJV,IAAA,IAAA,CAAiB,QAAA,uBAAwC,GAAA,EAAI;AAC7D,IAAA,IAAA,CAAQ,OAAA,GAAe,IAAI,GAAA,CAAI,MAAA,CAAO,SAAS,IAAI,CAAA;AA4BnD;AAAA,IAAA,IAAA,CAAQ,aAAa,MAAY;AAC7B,MAAA,IAAA,CAAK,MAAA,EAAO;AAAA,IAChB,CAAA;AAEA,IAAA,IAAA,CAAQ,eAAe,MAAY;AAC/B,MAAA,IAAA,CAAK,MAAA,EAAO;AAAA,IAChB,CAAA;AAEA,IAAA,IAAA,CAAQ,cAAc,MAAY;AAC9B,MAAA,IAAA,CAAK,MAAA,EAAO;AAAA,IAChB,CAAA;AAlCI,IAAA,IAAA,CAAK,YAAA,EAAa;AAClB,IAAA,IAAA,CAAK,eAAA,EAAgB;AAAA,EACzB;AAAA;AAAA,EAIA,SAAS,OAAA,EAAyC;AAC9C,IAAA,IAAA,CAAK,QAAA,CAAS,IAAI,OAAO,CAAA;AACzB,IAAA,OAAO,MAAM,IAAA,CAAK,QAAA,CAAS,MAAA,CAAO,OAAO,CAAA;AAAA,EAC7C;AAAA,EAEA,IAAI,GAAA,GAAW;AACX,IAAA,OAAO,IAAA,CAAK,OAAA;AAAA,EAChB;AAAA,EAEA,OAAA,GAAgB;AACZ,IAAA,MAAA,CAAO,mBAAA,CAAoB,UAAA,EAAY,IAAA,CAAK,UAAU,CAAA;AACtD,IAAA,MAAA,CAAO,mBAAA,CAAoB,YAAA,EAAc,IAAA,CAAK,YAAY,CAAA;AAC1D,IAAA,MAAA,CAAO,mBAAA,CAAoB,WAAA,EAAa,IAAA,CAAK,WAAW,CAAA;AACxD,IAAA,IAAA,CAAK,SAAS,KAAA,EAAM;AAAA,EACxB;AAAA,EAgBQ,eAAA,GAAwB;AAC5B,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAA,EAAY,IAAA,CAAK,UAAU,CAAA;AACnD,IAAA,MAAA,CAAO,gBAAA,CAAiB,YAAA,EAAc,IAAA,CAAK,YAAY,CAAA;AACvD,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAA,EAAa,IAAA,CAAK,WAAW,CAAA;AAAA,EACzD;AAAA;AAAA,EAIQ,YAAA,GAAqB;AACzB,IAAA,MAAM,KAAA,GAAQ,CAAC,QAAA,KACX,SAAA,GAA4B,IAAA,EAA4C;AACpE,MAAA,QAAA,CAAS,KAAA,CAAM,MAAM,IAAI,CAAA;AACzB,MAAA,MAAA,CAAO,aAAA,CAAc,IAAI,KAAA,CAAM,WAAW,CAAC,CAAA;AAAA,IAC/C,CAAA;AAEJ,IAAA,OAAA,CAAQ,SAAA,GAAY,KAAA,CAAM,OAAA,CAAQ,SAAS,CAAA;AAC3C,IAAA,OAAA,CAAQ,YAAA,GAAe,KAAA,CAAM,OAAA,CAAQ,YAAY,CAAA;AAAA,EACrD;AAAA;AAAA,EAIQ,MAAA,GAAe;AACnB,IAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,MAAA,CAAO,SAAS,IAAI,CAAA;AAEzC,IAAA,IAAI,IAAA,CAAK,IAAA,KAAS,IAAA,CAAK,OAAA,CAAQ,IAAA,EAAM;AAErC,IAAA,IAAA,CAAK,OAAA,GAAU,IAAA;AAEf,IAAA,KAAA,MAAW,OAAA,IAAW,KAAK,QAAA,EAAU;AACjC,MAAA,OAAA,CAAQ,KAAK,OAAO,CAAA;AAAA,IACxB;AAAA,EACJ;AACJ;AA3Ea,UAAA,GAAN,eAAA,CAAA;AAAA,EAJN,QAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACY,UAAA,CAAA","file":"AreWatcher.component.mjs","sourcesContent":["import { A_Component } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'AreWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework.'\n})\nexport class AreWatcher extends A_Component {\n\n    private readonly handlers: Set<(url: URL) => void> = new Set();\n    private current: URL = new URL(window.location.href);\n\n    constructor() {\n        super();\n        this.patchHistory();\n        this.attachListeners();\n    }\n\n    // ── Public ────────────────────────────────────────────────────────────────\n\n    onChange(handler: (url: URL) => void): () => void {\n        this.handlers.add(handler);\n        return () => this.handlers.delete(handler);   // returns unsubscribe fn\n    }\n\n    get url(): URL {\n        return this.current;\n    }\n\n    destroy(): void {\n        window.removeEventListener('popstate', this.onPopState);\n        window.removeEventListener('hashchange', this.onHashChange);\n        window.removeEventListener('urlchange', this.onURLChange);\n        this.handlers.clear();\n    }\n\n    // ── Listeners ─────────────────────────────────────────────────────────────\n\n    private onPopState = (): void => {\n        this.notify();\n    }\n\n    private onHashChange = (): void => {\n        this.notify();\n    }\n\n    private onURLChange = (): void => {\n        this.notify();\n    }\n\n    private attachListeners(): void {\n        window.addEventListener('popstate', this.onPopState);\n        window.addEventListener('hashchange', this.onHashChange);\n        window.addEventListener('urlchange', this.onURLChange);   // custom event from patch\n    }\n\n    // ── Patch pushState / replaceState ────────────────────────────────────────\n\n    private patchHistory(): void {\n        const patch = (original: typeof history.pushState) =>\n            function (this: History, ...args: Parameters<typeof history.pushState>) {\n                original.apply(this, args);\n                window.dispatchEvent(new Event('urlchange'));\n            };\n\n        history.pushState = patch(history.pushState);\n        history.replaceState = patch(history.replaceState);\n    }\n\n    // ── Notify ────────────────────────────────────────────────────────────────\n\n    private notify(): void {\n        const next = new URL(window.location.href);\n\n        if (next.href === this.current.href) return;   // no actual change\n\n        this.current = next;\n\n        for (const handler of this.handlers) {\n            handler(this.current);\n        }\n    }\n}"]}