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

@adaas/are-html 0.0.12 → 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 (108) hide show

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

@@ -14,6 +14,7 @@ import { AddCommentInstruction } from "@adaas/are-html/instructions/AddComment.i
 import { AddElementInstruction } from "@adaas/are-html/instructions/AddElement.instruction";
 import { AddListenerInstruction } from "@adaas/are-html/instructions/AddListener.instruction";
 import { AddTextInstruction } from "@adaas/are-html/instructions/AddText.instruction";
+import { AddStyleInstruction } from "@adaas/are-html/instructions/AddStyle.instruction";
 import { AreDirectiveContext } from "@adaas/are-html/directive/AreDirective.context";
 import { AreHTMLNode } from "../lib/AreHTMLNode/AreHTMLNode";
 import { AreHTMLEngineContext } from "./AreHTML.context";
@@ -620,6 +621,59 @@ export class AreHTMLInterpreter extends AreInterpreter {
         context.removeInstructionElement(declaration);
     }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // ── AddStyle — Apply / Update / Revert ───────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────────────────
+    @A_Frame.Define({
+        description: 'Inject a <style> element into the document <head> carrying the component CSS. Keyed by instruction ASEID so multiple components with styles do not collide. Subsequent Update calls refresh the textContent in-place.'
+    })
+    @AreInterpreter.Apply(AreHTMLInstructions.AddStyle)
+    @AreInterpreter.Update(AreHTMLInstructions.AddStyle)
+    addStyle(
+        @A_Inject(A_Caller) mutation: AddStyleInstruction,
+        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
+        @A_Inject(A_Logger) logger?: A_Logger,
+    ): void {
+        try {
+            const { styles } = mutation.payload;
+            const styleId = `are-style-${String(mutation.aseid)}`;
+            const existing = context.getElementByInstruction(mutation) as HTMLStyleElement | undefined;
+            if (existing) {
+                existing.textContent = styles;
+            } else {
+                const styleEl = context.container.createElement('style') as HTMLStyleElement;
+                styleEl.setAttribute('data-are-id', styleId);
+                styleEl.textContent = styles;
+                (context.container.head ?? context.container.body).appendChild(styleEl);
+                context.setInstructionElement(mutation, styleEl);
+                logger?.debug('green', `Style injected for ${String(mutation.aseid)}`);
+            }
+        } catch (error) {
+            logger?.error(error);
+        }
+    }
+    @A_Frame.Define({
+        description: 'Remove the <style> element that was injected by addStyle, cleaning up the document head.'
+    })
+    @AreInterpreter.Revert(AreHTMLInstructions.AddStyle)
+    removeStyle(
+        @A_Inject(A_Caller) mutation: AddStyleInstruction,
+        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
+    ): void {
+        const styleEl = context.getElementByInstruction(mutation);
+        if (styleEl?.parentNode) {
+            styleEl.parentNode.removeChild(styleEl);
+        }
+        context.removeInstructionElement(mutation);
+    }
     // ─────────────────────────────────────────────────────────────────────────────
     // ── SVG helpers ───────────────────────────────────────────────────────────────
     // ─────────────────────────────────────────────────────────────────────────────

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

@@ -19,7 +19,6 @@ import { A_Frame } from "@adaas/a-frame/core";
 export class AreHTMLLifecycle extends AreLifecycle {
     @AreLifecycle.Init(AreComponentNode)
-    @AreLifecycle.Init(AreRootNode)
     initComponent(
         @A_Inject(A_Caller) node: AreHTMLNode,
         @A_Inject(A_Scope) scope: A_Scope,
@@ -28,21 +27,26 @@ export class AreHTMLLifecycle extends AreLifecycle {
         @A_Inject(A_Logger) logger?: A_Logger,
         ...args: any[]
     ): void {
-        signalsContext?.subscribe(node);
+        if (node.component)
+            signalsContext?.subscribe(node);
         super.init(node, scope, context, logger, ...args);
     }
-    // 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(AreRootNode)
+    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 {
+        signalsContext?.subscribe(node);
+        super.init(node, scope, context, logger, ...args);
+    }
     @AreLifecycle.Init(AreText)

package/src/instructions/AreHTML.instructions.types.ts CHANGED Viewed

@@ -30,10 +30,8 @@ export type AreHtmlAddCommentInstructionPayload = {
 }
 export type AreHtmlAddStyleInstructionPayload = {
-    /** CSS property name in camelCase (e.g. "backgroundColor") or kebab-case (e.g. "background-color") */
-    property: string;
-    /** CSS property value */
-    value: string;
+    /** Full CSS string to inject as a <style> block scoped to the component. Applied to the document head and reverted on unmount. */
+    styles: string;
 }
 export type AreHtmlAddListenerInstructionPayload = {

package/src/lib/AreHTMLNode/AreHTMLNode.ts CHANGED Viewed

@@ -80,4 +80,19 @@ export class AreHTMLNode extends AreNode {
         return this.scope.resolveFlat<AreStyle>(AreStyle)!;
     }
+    /**
+     * Registers or updates the component-scoped CSS string for this node.
+     * Called by the @Are.Styles-decorated method on the associated component.
+     * A new AreStyle fragment is registered in scope on first call; subsequent
+     * calls update the existing fragment in-place.
+     */
+    setStyles(css: string): void {
+        const existing = this.scope.resolveFlat<AreStyle>(AreStyle);
+        if (existing) {
+            existing.styles = css;
+        } else {
+            this.scope.register(new AreStyle(css, this.aseid.toString()));
+        }
+    }
 }

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

@@ -2,7 +2,8 @@ import { A_Caller, A_Context, A_FormatterHelper, A_Inject, } from "@adaas/a-conc
 import { A_Frame } from "@adaas/a-frame/core";
 import { A_Logger } from "@adaas/a-utils/a-logger";
 import { A_SignalVector } from "@adaas/a-utils/a-signal";
-import { Are, ArePropDefinition, AreStore, AreNode, AreSignals, AreSignalsMeta, AreSignalsContext, AreRoute } from "@adaas/are";
+import { Are, ArePropDefinition, AreStore, AreNode, AreSignals, AreSignalsMeta, AreSignalsContext } from "@adaas/are";
+import { AreRoute } from "@adaas/are-html/signals/AreRoute.signal";
 @A_Frame.Define({
@@ -28,8 +29,18 @@ export class AreRoot extends Are {
         const rootId = root.id;
-        // No routing config for this root — leave the existing template content intact
+        // No routing config for this root — but still honour body content or
+        // a 'default' attribute if one is present on the markup.
         if (signalsContext && !signalsContext.hasRoot(rootId)) {
+            if (!root.content?.trim()) {
+                // Fallback: legacy default= attribute
+                const defaultMatch = root.markup?.match(/\bdefault=["']([^"']*)["']/);
+                const defaultComponent = defaultMatch?.[1];
+                if (defaultComponent) {
+                    root.setContent(`<${defaultComponent}></${defaultComponent}>`);
+                }
+            }
+            // Body content (or none) — tokenizer picks it up without intervention
             return;
         }
@@ -54,16 +65,23 @@ export class AreRoot extends Are {
             }
         }
-        // 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.
+        // 3. Fall back to body content (the nodes already placed inside the
+        //    <are-root> tag act as the default).  No setContent() call needed —
+        //    the tokenizer will process root.content as-is.
+        if (!componentName) {
+            if (root.content?.trim()) {
+                return;
+            }
+        }
+        // 4. Last resort: legacy default= attribute on the markup.
         if (!componentName) {
             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.');
+            logger.warning('AreRoot: No component found for initial render. Provide body content, a route condition, or a "default" attribute.');
             return;
         }
@@ -80,6 +98,7 @@ export class AreRoot extends Are {
         @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,
     ) {
         const rootId = root.id;
         // No routing config for this root — signals do not affect its content
         if (signalsContext && !signalsContext.hasRoot(rootId)) {
             return;
@@ -98,15 +117,20 @@ export class AreRoot extends Are {
             ? A_FormatterHelper.toKebabCase(renderTarget.name)
             : store.get('default');
+        // No matching condition for this signal vector (e.g. AreInit before any route).
+        // Keep the current outlet content and do nothing.
         if (!componentName) {
-            logger.warning('No component found for rendering in AreRoot. Please ensure that the signal vector matches at least one component or that a default component name is provided in the store.');
             return;
         }
         root.setContent(`<${componentName}></${componentName}>`);
+        // Unsubscribe old children BEFORE destroying them.
+        // Without this, AreSignals.handleSignalVector keeps iterating stale
+        // (scope-less) nodes on every subsequent signal and throws an error.
         for (let i = 0; i < root.children.length; i++) {
             const child = root.children[i];
+            signalsContext?.unsubscribe(child);
             child.unmount();
             child.destroy();
             root.removeChild(child);