npm - @adaas/are-html - Versions diffs - 0.0.11 → 0.0.13 - Mend

@adaas/are-html 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/examples/signal-routing/public/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARE · Signal Routing</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: #09090b; color: #f4f4f5; }
+    are-root { display: block; }
+  </style>
+</head>
+<body>
+  <are-root id="app"><app-shell></app-shell></are-root>
+  <script type="module" src="./{{BUNDLE_ID}}.js"></script>
+</body>
+</html>

package/examples/signal-routing/src/components/AboutPage.component.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { AreRoute } from "src/signals/AreRoute.signal";
+/**
+ * About page — rendered when the route is "/about".
+ */
+@Are.Condition([new AreRoute('/about')])
+export class AboutPage extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <section class="page page-about">
+                <h1 class="page-title">About this example</h1>
+                <p class="page-subtitle">
+                    This example demonstrates signal-based SPA routing using the ARE framework.
+                </p>
+                <div class="about-block">
+                    <h2>How it works</h2>
+                    <ol class="steps">
+                        <li>
+                            <strong>Signal emitted</strong> — clicking a nav link calls
+                            <code>bus.emit(new AreRoute('/about'))</code> and updates the browser
+                            URL via <code>history.pushState</code>.
+                        </li>
+                        <li>
+                            <strong>AreRoot reacts</strong> — the root node is subscribed to the
+                            signal bus. When the vector matches a registered condition it replaces
+                            its inner content with the mapped component.
+                        </li>
+                        <li>
+                            <strong>Page renders</strong> — the new component goes through the normal
+                            ARE lifecycle: <code>@Are.Template</code> → <code>@Are.Data</code> →
+                            <code>@Are.Styles</code> → mount.
+                        </li>
+                    </ol>
+                </div>
+                <div class="about-block">
+                    <h2>Key pieces</h2>
+                    <table class="info-table">
+                        <tr><th>AreRoute(path)</th><td>Signal carrying the new URL path.</td></tr>
+                        <tr><th>AreRouteWatcher</th><td>Listens to popstate / pushState and re-emits the signal on browser back/forward.</td></tr>
+                        <tr><th>AreSignalsContext</th><td>Fragment that maps (rootId, signal vector) → component class.</td></tr>
+                        <tr><th>A_SignalState</th><td>Persists the last emitted signal so a fresh page load still routes correctly.</td></tr>
+                    </table>
+                </div>
+            </section>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .page { padding: 48px 40px; max-width: 860px; margin: 0 auto; }
+            .page-title { font-size: 32px; font-weight: 800; color: #f4f4f5; margin-bottom: 12px; }
+            .page-subtitle { font-size: 16px; color: #a1a1aa; line-height: 1.7; margin-bottom: 36px; }
+            .about-block { margin-bottom: 40px; }
+            .about-block h2 { font-size: 18px; font-weight: 700; color: #e4e4e7; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #27272a; }
+            .steps { padding-left: 24px; color: #a1a1aa; line-height: 2; font-size: 14px; }
+            .steps li { margin-bottom: 8px; }
+            .steps strong { color: #e4e4e7; }
+            .steps code, .info-table code { background: #27272a; padding: 1px 6px; border-radius: 4px; color: #a78bfa; font-size: 12px; }
+            .info-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+            .info-table tr { border-bottom: 1px solid #27272a; }
+            .info-table th { text-align: left; padding: 10px 12px; color: #a78bfa; font-weight: 600; width: 200px; }
+            .info-table td { padding: 10px 12px; color: #a1a1aa; }
+        `);
+    }
+}

package/examples/signal-routing/src/components/AppShell.component.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+/**
+ * Root shell — holds the persistent NavBar and the router outlet (`<are-root>`).
+ *
+ * The inner `<are-root id="page-outlet">` is the actual dynamic slot.
+ * `AreSignalsContext` maps route signals to page components keyed by "page-outlet".
+ */
+export class AppShell extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <div class="app-shell">
+                <nav-bar></nav-bar>
+                <main class="app-main">
+                    <are-root id="page-outlet"><home-page></home-page></are-root>
+                </main>
+            </div>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .app-shell {
+                display: flex;
+                flex-direction: column;
+                min-height: 100vh;
+                background: #09090b;
+                color: #f4f4f5;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            }
+            .app-main {
+                flex: 1;
+            }
+        `);
+    }
+}

package/examples/signal-routing/src/components/HomePage.component.ts ADDED Viewed

@@ -0,0 +1,76 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_SignalVector } from "@adaas/a-utils/a-signal";
+import { Are, AreNode, AreSignalsContext, AreStore } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { AreRoute } from "src/signals/AreRoute.signal";
+/**
+ * Home page — rendered when the route is "/".
+ */
+@Are.Condition([new AreRoute('/')])
+export class HomePage extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <section class="page page-home">
+                <div class="page-hero">
+                    <h1 class="page-title">Welcome to Signal Routing</h1>
+                    <p class="page-subtitle">
+                        This page is rendered because the current route matched <code>/</code>.<br/>
+                        Navigate using the links above — no full page reload, just signals.
+                    </p>
+                </div>
+                <div class="card-grid">
+                    <div class="card">
+                        <div class="card-icon">⚡</div>
+                        <h3>Signal-based</h3>
+                        <p>Route changes emit an <code>AreRoute</code> signal on the bus. <code>AreRoot</code> responds and swaps the active component.</p>
+                    </div>
+                    <div class="card">
+                        <div class="card-icon">🔀</div>
+                        <h3>Zero reload</h3>
+                        <p>No browser navigation occurs. <code>history.pushState</code> keeps the URL bar in sync so deep-links and back/forward still work.</p>
+                    </div>
+                    <div class="card">
+                        <div class="card-icon">🧩</div>
+                        <h3>Component-level</h3>
+                        <p>Each page is a plain <code>Are</code> component. Register it in <code>AreSignalsContext</code> and the router does the rest.</p>
+                    </div>
+                </div>
+            </section>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .page { padding: 48px 40px; max-width: 960px; margin: 0 auto; }
+            .page-hero { margin-bottom: 40px; }
+            .page-title { font-size: 32px; font-weight: 800; color: #f4f4f5; margin-bottom: 12px; }
+            .page-subtitle { font-size: 16px; color: #a1a1aa; line-height: 1.7; }
+            .page-subtitle code { background: #27272a; padding: 2px 6px; border-radius: 4px; color: #a78bfa; font-size: 13px; }
+            .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
+            .card { background: #1c1c1f; border: 1px solid #27272a; border-radius: 12px; padding: 24px; }
+            .card-icon { font-size: 28px; margin-bottom: 12px; }
+            .card h3 { font-size: 16px; font-weight: 600; color: #f4f4f5; margin-bottom: 8px; }
+            .card p { font-size: 14px; color: #71717a; line-height: 1.6; }
+            .card p code { background: #27272a; padding: 1px 5px; border-radius: 3px; color: #a78bfa; font-size: 12px; }
+        `);
+    }
+    @Are.Signal
+    async onSignal(
+        @A_Inject(A_Caller) root: AreNode,
+        @A_Inject(A_SignalVector) vector: A_SignalVector,
+        @A_Inject(AreStore) store: AreStore<{ default: string }>,
+        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,
+        ) {
+        const rootId = root.id;
+        console.log(`HomePage received signal: ${vector.toString()} for rootId: ${rootId}`, root, signalsContext);
+    }
+}

package/examples/signal-routing/src/components/NavBar.component.ts ADDED Viewed

@@ -0,0 +1,104 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_SignalBus, A_SignalVector } from "@adaas/a-utils/a-signal";
+import { Are, AreEvent, AreNode, AreSignalsContext, AreStore } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { AreRoute } from "@adaas/are-html/signals/AreRoute.signal";
+/**
+ * Top navigation bar.
+ *
+ * Each nav link dispatches an `AreRoute` signal via the SignalBus.
+ * `AreRoot` picks up the signal and swaps the active page component.
+ *
+ * No browser hard-navigation happens — history.pushState keeps the URL
+ * in sync for deep-linking and the back/forward buttons.
+ */
+export class NavBar extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <nav class="navbar">
+                <div class="navbar-brand">ARE · Signal Router</div>
+                <ul class="navbar-links">
+                    <li><a href="/" @click="$navigate('/')">Home</a></li>
+                    <li><a href="/about" @click="$navigate('/about')">About</a></li>
+                    <li><a href="/settings" @click="$navigate('/settings')">Settings</a></li>
+                </ul>
+            </nav>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .navbar {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 32px;
+                height: 56px;
+                background: #18181b;
+                border-bottom: 1px solid #27272a;
+                position: sticky;
+                top: 0;
+                z-index: 100;
+            }
+            .navbar-brand {
+                font-size: 16px;
+                font-weight: 700;
+                color: #a78bfa;
+                letter-spacing: -0.02em;
+            }
+            .navbar-links {
+                list-style: none;
+                display: flex;
+                gap: 8px;
+                margin: 0;
+                padding: 0;
+            }
+            .navbar-links a {
+                display: inline-block;
+                padding: 6px 16px;
+                border-radius: 6px;
+                text-decoration: none;
+                color: #a1a1aa;
+                font-size: 14px;
+                font-weight: 500;
+                transition: background 0.15s, color 0.15s;
+            }
+            .navbar-links a:hover {
+                background: #27272a;
+                color: #f4f4f5;
+            }
+        `);
+    }
+    @Are.EventHandler
+    navigate(
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(A_SignalBus) bus: A_SignalBus,
+    ) {
+        const e = event.get('native') as MouseEvent;
+        e?.preventDefault();
+        const path = event.get('args')?.[0] as string ?? '/';
+        history.pushState({}, '', path);
+        bus.next(new AreRoute(path));
+    }
+        @Are.Signal
+        async onSignal(
+            @A_Inject(A_Caller) root: AreNode,
+            @A_Inject(A_SignalVector) vector: A_SignalVector,
+            @A_Inject(AreStore) store: AreStore<{ default: string }>,
+            @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,
+            ) {
+            const rootId = root.id;
+            console.log(`NavBar received signal: ${vector.toString()} for rootId: ${rootId}`, root, signalsContext);
+        }
+}

package/examples/signal-routing/src/components/SettingsPage.component.ts ADDED Viewed

@@ -0,0 +1,98 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_SignalBus } from "@adaas/a-utils/a-signal";
+import { Are, AreEvent, AreNode, AreStore } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { AreRoute } from "src/signals/AreRoute.signal";
+/**
+ * Settings page — rendered when the route is "/settings".
+ */
+@Are.Condition([new AreRoute('/settings')])
+export class SettingsPage extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setContent(`
+            <section class="page page-settings">
+                <h1 class="page-title">Settings</h1>
+                <p class="page-subtitle">Preferences are stored in the component's local store.</p>
+                <div class="settings-group">
+                    <h2>Appearance</h2>
+                    <label class="setting-row">
+                        <span>Dark mode</span>
+                        <input type="checkbox" checked disabled />
+                    </label>
+                    <label class="setting-row">
+                        <span>Compact layout</span>
+                        <input type="checkbox" @change="$toggleCompact" />
+                    </label>
+                </div>
+                <div class="settings-group">
+                    <h2>Display name</h2>
+                    <div class="input-row">
+                        <input
+                            id="display-name"
+                            type="text"
+                            placeholder="Enter your name…"
+                            @input="$onNameInput"
+                        />
+                        <span class="preview">Preview: <strong>{{displayName}}</strong></span>
+                    </div>
+                </div>
+                <div class="settings-group">
+                    <h2>Routing state</h2>
+                    <p class="hint">
+                        Current route is held in <code>A_SignalState</code> so refreshing the page
+                        at <code>/settings</code> still lands here — no extra server config needed.
+                    </p>
+                </div>
+            </section>
+        `);
+    }
+    @Are.Data
+    data(@A_Inject(AreStore) store: AreStore) {
+        store.set({ displayName: 'Guest', compact: false });
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .page { padding: 48px 40px; max-width: 720px; margin: 0 auto; }
+            .page-title { font-size: 32px; font-weight: 800; color: #f4f4f5; margin-bottom: 12px; }
+            .page-subtitle { font-size: 15px; color: #a1a1aa; margin-bottom: 36px; }
+            .settings-group { margin-bottom: 36px; }
+            .settings-group h2 { font-size: 15px; font-weight: 700; color: #e4e4e7; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #27272a; }
+            .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; color: #a1a1aa; font-size: 14px; cursor: pointer; }
+            .input-row { display: flex; align-items: center; gap: 16px; }
+            .input-row input[type="text"] { background: #1c1c1f; border: 1px solid #3f3f46; border-radius: 8px; color: #f4f4f5; padding: 8px 14px; font-size: 14px; outline: none; width: 260px; }
+            .input-row input[type="text"]:focus { border-color: #a78bfa; }
+            .preview { font-size: 14px; color: #71717a; }
+            .preview strong { color: #a78bfa; }
+            .hint { font-size: 13px; color: #71717a; line-height: 1.7; }
+            .hint code { background: #27272a; padding: 1px 6px; border-radius: 4px; color: #a78bfa; font-size: 12px; }
+        `);
+    }
+    @Are.EventHandler
+    onNameInput(
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(AreEvent) event: AreEvent,
+    ) {
+        const el = (event.get('native') as Event)?.target as HTMLInputElement;
+        store.set('displayName', el?.value || 'Guest');
+    }
+    @Are.EventHandler
+    toggleCompact(
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(AreEvent) event: AreEvent,
+    ) {
+        const el = (event.get('native') as Event)?.target as HTMLInputElement;
+        store.set('compact', el?.checked ?? false);
+    }
+}

package/examples/signal-routing/src/concept.ts ADDED Viewed

@@ -0,0 +1,114 @@
+import { A_Concept, A_Context } from "@adaas/a-concept";
+import { A_Config, ConfigReader } from "@adaas/a-utils/a-config";
+import { A_Logger, A_LOGGER_ENV_KEYS } from "@adaas/a-utils/a-logger";
+import { A_SignalBus, A_SignalState } from "@adaas/a-utils/a-signal";
+import { A_Polyfill } from "@adaas/a-utils/a-polyfill";
+import {
+    AreContainer,
+    AreInit,
+    AreSignalsContext,
+} from "@adaas/are";
+import {
+    AreRoot,
+    AreHTMLEngine,
+    AreHTMLEngineContext,
+    AreDirectiveIf,
+    AreDirectiveFor,
+    AreRouteWatcher,
+} from "src";
+// ── Components ─────────────────────────────────────────────────────────────
+import { AppShell } from "./components/AppShell.component";
+import { NavBar } from "./components/NavBar.component";
+import { HomePage } from "./components/HomePage.component";
+import { AboutPage } from "./components/AboutPage.component";
+import { SettingsPage } from "./components/SettingsPage.component";
+// ── Signals ────────────────────────────────────────────────────────────────
+// AreRoute must come from are-html (not @adaas/are) — it must match the class
+// NavBar emits.  Using the base-lib class causes state.has() to return false
+// and the bus silently drops every route signal.
+import { AreRoute as AreRouteSignal } from "src/signals/AreRoute.signal";
+(async () => {
+    try {
+        /**
+         * AreSignalsContext maps (rootId → conditions).
+         *
+         * The outer <are-root id="app"> renders the AppShell unconditionally
+         * via the `default` attribute in HTML — no routing config needed there.
+         *
+         * The inner <are-root id="page-outlet"> is the dynamic slot.
+         * Each condition says: "when this AreRoute signal arrives, render this component".
+         */
+        const signalsContext = new AreSignalsContext({
+            'page-outlet': {
+                default: HomePage,
+                pool: [HomePage, AboutPage, SettingsPage],
+                // Route conditions are registered via @Are.Condition decorators
+                // on each page component — no explicit conditions needed here.
+                conditions: [],
+            },
+        });
+        const container = new AreContainer({
+            name: 'ARE Signal Routing',
+            components: [
+                // ── Pages ────────────────────────────────────────────────
+                AppShell,
+                NavBar,
+                HomePage,
+                AboutPage,
+                SettingsPage,
+                // ── Directives ───────────────────────────────────────────
+                AreDirectiveIf,
+                AreDirectiveFor,
+                // ── Engine ───────────────────────────────────────────────
+                A_SignalBus,
+                AreRoot,
+                AreRouteWatcher,
+                ConfigReader,
+                AreHTMLEngine,
+                A_Logger,
+            ],
+            entities: [
+                AreInit,
+                AreRouteSignal,
+            ],
+            fragments: [
+                // Persist the current route so a hard refresh on /about still
+                // renders the correct page.  Both AreInit AND AreRouteSignal
+                // must be in this structure — if either is missing, state.has()
+                // returns false and the bus silently drops the signal.
+                new A_SignalState([AreInit, AreRouteSignal]),
+                signalsContext,
+                new AreHTMLEngineContext({ container: document,  }),
+                new A_Config({
+                    defaults: {
+                        [A_LOGGER_ENV_KEYS.LOG_LEVEL]: 'info',
+                    },
+                }),
+            ],
+        });
+        const concept = new A_Concept({
+            name: 'adaas-are-example-signal-routing',
+            fragments: [
+                new A_Config({
+                    variables: ['CONFIG_VERBOSE', 'DEV_MODE'] as const,
+                    defaults: { CONFIG_VERBOSE: true, DEV_MODE: true },
+                }),
+            ],
+            components: [A_Logger, ConfigReader, A_Polyfill],
+            containers: [container],
+        });
+        await concept.load();
+        await concept.start();
+    } catch (error) {
+        const logger = A_Context.root.resolve<A_Logger>(A_Logger)!;
+        logger.error(error);
+    }
+})();

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@adaas/are-html",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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",
@@ -70,6 +70,8 @@
     "test": "jest",
     "example:jumpstart": "nodemon ./examples/jumpstart/concept.ts",
     "example:dashboard": "nodemon ./examples/dashboard/concept.ts",
+    "example:signal-routing": "nodemon ./examples/signal-routing/concept.ts",
+    "example:component-styles": "nodemon ./examples/component-styles/concept.ts",
     "example:auxta": "nodemon ./examples/auxta/concept.ts",
     "test:test": "nodemon ./src/test/app.ts",
     "release": " npm run build && git add . && git commit -m \"new version created :: $(cat package.json | grep version | head -1  | awk -F: '{ print $2 }'  | sed 's/[\",]//g')\" && npm version patch && npm publish --access public",
@@ -82,14 +84,14 @@
   "peerDependencies": {
     "@adaas/a-concept": "^0.3.17",
     "@adaas/a-frame": "^0.1.2",
-    "@adaas/a-utils": "^0.3.23",
-    "@adaas/are": "^0.0.13"
+    "@adaas/a-utils": "^0.3.24",
+    "@adaas/are": "^0.0.15"
   },
   "devDependencies": {
     "@adaas/a-concept": "^0.3.17",
     "@adaas/a-frame": "^0.1.2",
-    "@adaas/a-utils": "^0.3.23",
-    "@adaas/are": "^0.0.13",
+    "@adaas/a-utils": "^0.3.24",
+    "@adaas/are": "^0.0.15",
     "@types/chai": "^4.3.14",
     "@types/jest": "^29.5.12",
     "@types/mocha": "^10.0.6",

package/src/directives/AreDirectiveFor.directive.ts CHANGED Viewed

@@ -288,7 +288,18 @@ export class AreDirectiveFor extends AreDirective {
                 if (arg.startsWith("'") && arg.endsWith("'")) return arg.slice(1, -1);
                 if (arg.startsWith('"') && arg.endsWith('"')) return arg.slice(1, -1);
                 if (!isNaN(Number(arg))) return Number(arg);
-                return store.get(arg as any);
+                // Dotted-path / optional-chain: e.g. `record?.embedding` or `record.data`
+                const stripped = arg.replace(/\?$/, '');
+                if (stripped.includes('.')) {
+                    const parts = stripped.split('.').map(p => p.replace(/\?$/, ''));
+                    let val: any = store.get(parts[0] as any);
+                    for (let j = 1; j < parts.length; j++) {
+                        if (val == null) return undefined;
+                        val = val[parts[j]];
+                    }
+                    return val ?? undefined;
+                }
+                return store.get(stripped as any);
             });
             result = (fn as Function)(...resolvedArgs);

package/src/engine/AreHTML.compiler.ts CHANGED Viewed

@@ -12,6 +12,8 @@ import { AreText } from "@adaas/are-html/nodes/AreText";
 import { AddAttributeInstruction} from "@adaas/are-html/instructions/AddAttribute.instruction";
 import { AddTextInstruction} from "@adaas/are-html/instructions/AddText.instruction";
 import { AddListenerInstruction} from "@adaas/are-html/instructions/AddListener.instruction";
+import { AddStyleInstruction } from "@adaas/are-html/instructions/AddStyle.instruction";
+import { AreHTMLNode } from "@adaas/are-html/node";
@@ -22,13 +24,28 @@ import { AddListenerInstruction} from "@adaas/are-html/instructions/AddListener.
 })
 export class AreHTMLCompiler extends AreCompiler {
-    // compile(
-    //     @A_Inject(A_Caller) node: AreHTMLNode,
-    //     @A_Inject(AreScene) scene: AreScene,
-    //     ...args: any[]
-    // ): void {
-    //     super.compile(node, scene, ...args);
-    // }
+    /**
+     * Extends the base compile for all AreHTMLNode instances (elements, components, root nodes).
+     * After the standard element/attribute/children instructions are emitted, checks whether
+     * the node has a registered AreStyle and plans an AddStyleInstruction so the interpreter
+     * can inject the CSS into the document head during mount.
+     */
+    @AreCompiler.Compile(AreHTMLNode)
+    compileHTMLNode(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+        @A_Inject(AreScene) scene: AreScene,
+        @A_Inject(A_Logger) logger?: A_Logger,
+        ...args: any[]
+    ): void {
+        super.compile(node, scene, logger, ...args);
+        if (node.styles?.styles) {
+            const host = scene.host;
+            if (host) {
+                scene.plan(new AddStyleInstruction(host, { styles: node.styles.styles }));
+            }
+        }
+    }
     // -----------------------------------------------------------------------------------------
     // -------------------------Are-Interpolation Compile Section-----------------------------------

package/src/engine/AreHTML.context.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { AreContext, AreInstruction, AreNode } from "@adaas/are";
+import { AreContext, AreDeclaration, AreInstruction, AreNode } from "@adaas/are";
 import { AreHTMLContextConstructor } from "./AreHTML.types";
 import { A_Frame } from "@adaas/a-frame/core";
@@ -92,7 +92,10 @@ export class AreHTMLEngineContext extends AreContext {
         this.index.instructionToElement.set(instruction.aseid.toString(), element);
         this.index.elementToInstruction.set(element, instruction.aseid.toString());
-        if (node) {
+        // Only update the host-element pointer for declaration instructions.
+        // Mutations (attributes, styles, event listeners, …) produce auxiliary DOM
+        // that must never overwrite the owning node's primary element in the index.
+        if (node && instruction instanceof AreDeclaration) {
             this.index.nodeToHostElements.set(node.aseid.toString(), element);
         }
@@ -105,7 +108,6 @@ export class AreHTMLEngineContext extends AreContext {
         }
     }
     /**
      * Retrieves the DOM element associated with a given instruction. This method looks up the instruction's ASEID in the instructionToElement map to find the corresponding DOM element. If the instruction is not found, it returns undefined. This allows the engine to efficiently access and manipulate the DOM elements that correspond to specific instructions, enabling dynamic updates and interactions based on the application state.
      *
@@ -134,7 +136,7 @@ export class AreHTMLEngineContext extends AreContext {
             this.index.elementToInstruction.delete(element);
             const node = instruction.owner;
-            if (node) {
+            if (node && instruction instanceof AreDeclaration) {
                 this.index.nodeToHostElements.delete(node.aseid.toString());
             }