smart-lifecycle 0.1.1

package/dist/rendering/managed-host/outlet-resolver.js

@@ -0,0 +1,59 @@
+/**
+ * Implements the responsibility of locating the target outlet element within a rendered component.
+ *
+ * @description
+ * Resolves the outlet element using a prioritized strategy:
+ * 1. Element with `.outlet` class (explicit outlet marker)
+ * 2. First child element if root has single child (common pattern)
+ * 3. Fallback: rootElement itself (conservative approach)
+ *
+ * @example
+ * ```typescript
+ * const resolver = new OutletResolver();
+ * const outlet = resolver.resolve(compiledElement);
+ * // Returns the element that should receive host styling
+ * ```
+ */
+export class OutletResolver {
+    /**
+     * Resolves the outlet element within a compiled component root.
+     *
+     * @param rootElement - The compiled component root element
+     * @returns The outlet element that should receive host styling
+     * @throws Error if rootElement is null or undefined
+     *
+     * @example
+     * ```typescript
+     * // Template: <div><span class="outlet"></span></div>
+     * const outlet = resolver.resolve(rootElement);
+     * // Returns the span.outlet element
+     *
+     * // Template: <div><span>content</span></div>
+     * const outlet = resolver.resolve(rootElement);
+     * // Returns the span (single child)
+     *
+     * // Template: <div>multiple<span>children</span></div>
+     * const outlet = resolver.resolve(rootElement);
+     * // Returns rootElement (fallback)
+     * ```
+     */
+    resolve(rootElement) {
+        if (!rootElement) {
+            throw new Error("Root element is required");
+        }
+        // Strategy 1: Explicit .outlet marker
+        const explicitOutlet = rootElement.querySelector(".outlet");
+        if (explicitOutlet) {
+            return explicitOutlet;
+        }
+        // Strategy 2: Single child element (common pattern)
+        const children = Array.from(rootElement.children).filter((child) => child instanceof
+            (rootElement.ownerDocument?.defaultView?.HTMLElement || HTMLElement));
+        if (children.length === 1) {
+            return children[0];
+        }
+        // Strategy 3: Fallback to root (conservative)
+        return rootElement;
+    }
+}
+//# sourceMappingURL=outlet-resolver.js.map

package/dist/rendering/managed-host/outlet-resolver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlet-resolver.js","sourceRoot":"","sources":["../../../src/rendering/managed-host/outlet-resolver.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,cAAc;IACzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,WAAwB;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QAED,sCAAsC;QACtC,MAAM,cAAc,GAAG,WAAW,CAAC,aAAa,CAAc,SAAS,CAAC,CAAC;QACzE,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO,cAAc,CAAC;QACxB,CAAC;QAED,oDAAoD;QACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CACtD,CAAC,KAAK,EAAE,EAAE,CACR,KAAK;YACL,CAAC,WAAW,CAAC,aAAa,EAAE,WAAW,EAAE,WAAW,IAAI,WAAW,CAAC,CACvE,CAAC;QAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC1B,OAAO,QAAQ,CAAC,CAAC,CAAgB,CAAC;QACpC,CAAC;QAED,8CAA8C;QAC9C,OAAO,WAAW,CAAC;IACrB,CAAC;CACF"}

package/dist/rendering/pipeline/error-renderer.d.ts

@@ -0,0 +1,107 @@
+import { IDomContext } from "../dom-context/dom-context.interface.js";
+import { IDomAdapter } from "../dom/dom-adapter.interface.js";
+/**
+ * Defines the responsibility of carrying error rendering options.
+ *
+ * @description
+ * Encapsulates optional data required by `ErrorRenderer` to display a custom
+ * error overlay, including an HTML template and static constants for
+ * preprocessing.
+ */
+export interface ErrorRenderOptions {
+    /**
+     * Optional HTML template used to render the error overlay. Supports
+     * `{{message}}` placeholder, which will be replaced by the final error message.
+     */
+    errorTemplate?: string;
+    /**
+     * Optional constants object used by the static binding resolver to preprocess
+     * template placeholders like `[[Styles.ERROR]]`.
+     */
+    constants?: Record<string, unknown>;
+}
+/**
+ * Defines the responsibility of rendering error states and overlays.
+ *
+ * @description
+ * Defines the contract for rendering error states when component rendering fails,
+ * including custom error templates and fallback overlays.
+ */
+export interface IErrorRenderer {
+    /**
+     * Renders an error overlay in the DOM context.
+     *
+     * @param domContext - DOM context for managing the error display
+     * @param errorMessage - Error message to display
+     * @param options - Optional custom template and constants to render error overlay
+     * @throws Error if domContext or errorMessage are null/undefined
+     */
+    render(domContext: IDomContext, errorMessage: string, options?: ErrorRenderOptions): Promise<void>;
+}
+/**
+ * Implements the responsibility of rendering error states and overlays.
+ *
+ * @description
+ * Handles the rendering of error states when component rendering fails.
+ * Supports custom error templates from component metadata and provides
+ * a coherent fallback error overlay without hardcoded styles.
+ *
+ * @architecture
+ * Error Display Priority:
+ * 1. Custom error template: @SmartRender({ errorTemplate: '...' })
+ * 2. Fallback overlay: Simple HTML structure with message
+ */
+export declare class ErrorRenderer implements IErrorRenderer {
+    private readonly domAdapter;
+    /**
+     * Initializes a new instance of ErrorRenderer.
+     *
+     * @param domAdapter - Adapter for DOM element creation
+     * @throws Error if domAdapter is null or undefined
+     */
+    constructor(domAdapter: IDomAdapter);
+    /**
+     * Renders an error overlay in the DOM context
+     *
+     * @description
+     * Displays error message by either using custom error template from metadata
+     * or showing a simple fallback overlay. Preprocesses constants in custom templates.
+     *
+     * @param domContext - DOM context for managing the error display
+     * @param errorMessage - Error message to display
+     * @param componentId - Component identifier for custom error template lookup
+     *
+     * @example
+     * ```typescript
+     * // Custom error template with constants
+     * @SmartRender({
+     *   selector: 'my-component',
+     *   constants: { Styles: { ERROR: 'error-overlay' } },
+     *   errorTemplate: `<div class="[[Styles.ERROR]]">{{message}}</div>`
+     * })
+     *
+     * // Fallback: Simple structure without styles
+     * <div><div>⚠️</div><div>Error message</div></div>
+     * ```
+     */
+    render(domContext: IDomContext, errorMessage: string, options?: ErrorRenderOptions): Promise<void>;
+    private tryRenderCustomErrorTemplate;
+    private renderCustomErrorTemplate;
+    private renderDefaultErrorOverlay;
+    /**
+     * Safely replaces text placeholders in DOM tree to prevent XSS.
+     *
+     * @param element - Root element to search
+     * @param placeholder - Placeholder text to find
+     * @param value - Safe text value to insert
+     */
+    private replaceTextPlaceholder;
+    /**
+     * Recursively walks all text nodes in an element.
+     *
+     * @param node - Node to start walking from
+     * @param callback - Function to call for each text node
+     */
+    private walkTextNodes;
+}
+//# sourceMappingURL=error-renderer.d.ts.map

package/dist/rendering/pipeline/error-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-renderer.d.ts","sourceRoot":"","sources":["../../../src/rendering/pipeline/error-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EAEZ,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;;;;OAOG;IACH,MAAM,CACJ,UAAU,EAAE,WAAW,EACvB,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,qBAAa,aAAc,YAAW,cAAc;IAOtC,OAAO,CAAC,QAAQ,CAAC,UAAU;IANvC;;;;;OAKG;gBAC0B,UAAU,EAAE,WAAW;IAGpD;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACG,MAAM,CACV,UAAU,EAAE,WAAW,EACvB,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC,IAAI,CAAC;YAaF,4BAA4B;YAe5B,yBAAyB;IA0BvC,OAAO,CAAC,yBAAyB;IAqBjC;;;;;;OAMG;IACH,OAAO,CAAC,sBAAsB;IAe9B;;;;;OAKG;IACH,OAAO,CAAC,aAAa;CAQtB"}

package/dist/rendering/pipeline/error-renderer.js

@@ -0,0 +1,127 @@
+import { DomContentType, } from "../dom-context/dom-context.interface.js";
+import { NodeType } from "../dom/node-types.js";
+/**
+ * Implements the responsibility of rendering error states and overlays.
+ *
+ * @description
+ * Handles the rendering of error states when component rendering fails.
+ * Supports custom error templates from component metadata and provides
+ * a coherent fallback error overlay without hardcoded styles.
+ *
+ * @architecture
+ * Error Display Priority:
+ * 1. Custom error template: @SmartRender({ errorTemplate: '...' })
+ * 2. Fallback overlay: Simple HTML structure with message
+ */
+export class ErrorRenderer {
+    domAdapter;
+    /**
+     * Initializes a new instance of ErrorRenderer.
+     *
+     * @param domAdapter - Adapter for DOM element creation
+     * @throws Error if domAdapter is null or undefined
+     */
+    constructor(domAdapter) {
+        this.domAdapter = domAdapter;
+        if (!domAdapter)
+            throw new Error("Dom adapter is required");
+    }
+    /**
+     * Renders an error overlay in the DOM context
+     *
+     * @description
+     * Displays error message by either using custom error template from metadata
+     * or showing a simple fallback overlay. Preprocesses constants in custom templates.
+     *
+     * @param domContext - DOM context for managing the error display
+     * @param errorMessage - Error message to display
+     * @param componentId - Component identifier for custom error template lookup
+     *
+     * @example
+     * ```typescript
+     * // Custom error template with constants
+     * @SmartRender({
+     *   selector: 'my-component',
+     *   constants: { Styles: { ERROR: 'error-overlay' } },
+     *   errorTemplate: `<div class="[[Styles.ERROR]]">{{message}}</div>`
+     * })
+     *
+     * // Fallback: Simple structure without styles
+     * <div><div>⚠️</div><div>Error message</div></div>
+     * ```
+     */
+    async render(domContext, errorMessage, options) {
+        if (!domContext)
+            throw new Error("DOM context is required");
+        if (!errorMessage)
+            throw new Error("Error message is required");
+        if (await this.tryRenderCustomErrorTemplate(domContext, errorMessage, options)) {
+            return;
+        }
+        this.renderDefaultErrorOverlay(domContext, errorMessage);
+    }
+    async tryRenderCustomErrorTemplate(domContext, errorMessage, options) {
+        if (!options?.errorTemplate)
+            return false;
+        await this.renderCustomErrorTemplate(domContext, errorMessage, options.errorTemplate, options.constants);
+        return true;
+    }
+    async renderCustomErrorTemplate(domContext, errorMessage, errorTemplate, constants) {
+        let template = errorTemplate;
+        if (constants) {
+            const { StaticBindingResolver } = await import("../bindings/static-binding-resolver.js");
+            const resolver = new StaticBindingResolver();
+            template = resolver.resolve(template, constants);
+        }
+        const wrapper = this.domAdapter.createElement("div");
+        const placeholder = "__ERROR_MESSAGE_PLACEHOLDER__";
+        wrapper.innerHTML = template.replace(/\{\{\s*message\s*\}\}/g, placeholder);
+        // Replace placeholder with safe text content to prevent XSS
+        this.replaceTextPlaceholder(wrapper, placeholder, errorMessage);
+        wrapper.setAttribute("data-error", "true");
+        domContext.setElement(wrapper, DomContentType.ERROR);
+    }
+    renderDefaultErrorOverlay(domContext, errorMessage) {
+        const overlay = this.domAdapter.createElement("div");
+        overlay.setAttribute("data-error", "true");
+        const container = this.domAdapter.createElement("div");
+        const icon = this.domAdapter.createElement("div");
+        icon.textContent = "⚠️";
+        const message = this.domAdapter.createElement("div");
+        message.textContent = errorMessage;
+        container.appendChild(icon);
+        container.appendChild(message);
+        overlay.appendChild(container);
+        domContext.setElement(overlay, DomContentType.ERROR);
+    }
+    /**
+     * Safely replaces text placeholders in DOM tree to prevent XSS.
+     *
+     * @param element - Root element to search
+     * @param placeholder - Placeholder text to find
+     * @param value - Safe text value to insert
+     */
+    replaceTextPlaceholder(element, placeholder, value) {
+        this.walkTextNodes(element, (textNode) => {
+            if (textNode.textContent?.includes(placeholder)) {
+                textNode.textContent = textNode.textContent.replace(new RegExp(placeholder, "g"), value);
+            }
+        });
+    }
+    /**
+     * Recursively walks all text nodes in an element.
+     *
+     * @param node - Node to start walking from
+     * @param callback - Function to call for each text node
+     */
+    walkTextNodes(node, callback) {
+        if (node.nodeType === NodeType.TEXT_NODE) {
+            callback(node);
+        }
+        else if (node.nodeType === NodeType.ELEMENT_NODE) {
+            const children = Array.from(node.childNodes);
+            children.forEach((child) => this.walkTextNodes(child, callback));
+        }
+    }
+}
+//# sourceMappingURL=error-renderer.js.map

package/dist/rendering/pipeline/error-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-renderer.js","sourceRoot":"","sources":["../../../src/rendering/pipeline/error-renderer.ts"],"names":[],"mappings":"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"}

package/dist/rendering/pipeline/render-pipeline.d.ts

@@ -0,0 +1,87 @@
+import { SmartComponent } from "../../core/smart-component.js";
+import { RenderResult } from "../render-engine.js";
+import { IRenderPipeline, PipelineOptions } from "./render-pipeline.interface.js";
+import type { IListenerInitializer } from "../../decorators/listen/listener-initializer.interface.js";
+import { ITemplateCompiler } from "../templates/template-compiler.interface.js";
+import { IErrorRenderer } from "./error-renderer.js";
+import { IOutletResolver, IHostStyleMigrator } from "../managed-host/index.js";
+import type { IManagedElementRegistry } from "../managed-host/managed-element-registry.js";
+import type { IHostResolver } from "../dom-context/host-resolver.interface.js";
+import type { ISharedStylesRegistry } from "../styles/shared-styles-registry.js";
+/**
+ * Implements the responsibility of orchestrating the complete component rendering pipeline.
+ *
+ * @description
+ * Coordinates the execution of the rendering pipeline steps: initialization,
+ * template compilation, DOM replacement, and lifecycle management. Acts as
+ * the central orchestrator for component rendering after skeleton display.
+ *
+ * @architecture
+ * Pipeline Steps:
+ * 1. Check for initializer and execute async initialization
+ * 2. Retrieve and preprocess template source
+ * 3. Compile template with reactive bindings
+ * 4. Replace skeleton with compiled element
+ * 5. Start lifecycle manager
+ * 6. Handle errors with overlay display
+ */
+export declare class RenderPipeline implements IRenderPipeline {
+    private readonly hostResolver;
+    private readonly templateCompiler;
+    private readonly errorHandler;
+    private readonly outletResolver;
+    private readonly styleMigrator;
+    private readonly managedRegistry;
+    private readonly listenerInitializer;
+    private readonly sharedStyles;
+    /**
+     * Creates a RenderPipeline instance
+     *
+     * @param hostResolver - Host resolver for component-DOM context mapping
+     * @param templateCompiler - Compiler for template processing
+     * @param errorHandler - Renderer for error display
+     * @param outletResolver - Resolver for outlet element lookup
+     * @param styleMigrator - Migrator for host styling
+     * @param managedRegistry - Registry for managed element tracking
+     * @param listenerInitializer - Initializer for event listener bindings
+     * @param sharedStyles - Optional shared styles registry for adoptedStyleSheets
+     */
+    constructor(hostResolver: IHostResolver | null, templateCompiler: ITemplateCompiler, errorHandler: IErrorRenderer, outletResolver: IOutletResolver, styleMigrator: IHostStyleMigrator, managedRegistry: IManagedElementRegistry, listenerInitializer: IListenerInitializer, sharedStyles?: ISharedStylesRegistry | null);
+    /**
+     * Executes the complete render pipeline for a component
+     *
+     * @description
+     * Runs the full rendering sequence: initialization, compilation, DOM update,
+     * and lifecycle setup. Handles errors by showing error overlays.
+     *
+     * @param options - Pipeline execution options
+     * @returns Promise<RenderResult> - Component, DOM context, lifecycle, and cleanup
+     *
+     * @example
+     * ```typescript
+     * const result = await pipeline.execute({
+     *   component,
+     *   metadata,
+     *   domContext,
+     *   compiledTemplate,
+     *   hostElement
+     * });
+     * // Result includes cleanup function
+     * ```
+     */
+    execute<T extends SmartComponent>(options: PipelineOptions<T>): Promise<RenderResult>;
+    /**
+     * Processes a managed host element with SmartComponent association.
+     *
+     * @description
+     * Executes the managed host policy for elements rendered by the SmartComponents engine:
+     * 1. Resolve outlet element (target for styling migration)
+     * 2. Migrate class/id from host to outlet
+     *
+     * @param rootElement - The compiled root element
+     * @param hostElement - The managed host element
+     * @param metadata - Component metadata for input declarations
+     */
+    private processManagedHost;
+}
+//# sourceMappingURL=render-pipeline.d.ts.map

package/dist/rendering/pipeline/render-pipeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-pipeline.d.ts","sourceRoot":"","sources":["../../../src/rendering/pipeline/render-pipeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAG/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EACL,eAAe,EACf,eAAe,EAChB,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2DAA2D,CAAC;AACtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC/E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAC3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAEjF;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,cAAe,YAAW,eAAe;IAoBlD,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,gBAAgB;IACjC,OAAO,CAAC,QAAQ,CAAC,YAAY;IArB/B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAkB;IACjD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;IACnD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA0B;IAC1D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAuB;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA+B;IAE5D;;;;;;;;;;;OAWG;gBAEgB,YAAY,EAAE,aAAa,GAAG,IAAI,EAClC,gBAAgB,EAAE,iBAAiB,EACnC,YAAY,EAAE,cAAc,EAC7C,cAAc,EAAE,eAAe,EAC/B,aAAa,EAAE,kBAAkB,EACjC,eAAe,EAAE,uBAAuB,EACxC,mBAAmB,EAAE,oBAAoB,EACzC,YAAY,GAAE,qBAAqB,GAAG,IAAW;IAiBnD;;;;;;;;;;;;;;;;;;;;;OAqBG;IACG,OAAO,CAAC,CAAC,SAAS,cAAc,EACpC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,GAC1B,OAAO,CAAC,YAAY,CAAC;IAoIxB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,kBAAkB;CAW3B"}

package/dist/rendering/pipeline/render-pipeline.interface.d.ts

@@ -0,0 +1,54 @@
+import { SmartComponent } from "../../core/smart-component.js";
+import { ComponentMetadata } from "../../core/component-metadata.js";
+import { RenderResult } from "../render-engine.js";
+import { IDomContext } from "../dom-context/dom-context.interface.js";
+import { ICompiledTemplate } from "../templates/compiled-template.interface.js";
+/**
+ * Defines the responsibility of configuring pipeline execution.
+ */
+export interface PipelineOptions<T extends SmartComponent = SmartComponent> {
+    /** The component instance to render */
+    component: T;
+    /** Component metadata (template, initializer, lifecycle, etc) */
+    metadata: ComponentMetadata;
+    /** DOM context for managing subscriptions and cleanup */
+    domContext: IDomContext;
+    /** Pre-compiled template (from cache or fresh compilation) */
+    compiledTemplate: ICompiledTemplate;
+    /** The custom element itself (for host projection content) */
+    hostElement?: HTMLElement;
+}
+/**
+ * Defines the responsibility of orchestrating the complete component rendering pipeline.
+ *
+ * @description
+ * Defines the contract for executing the complete component rendering pipeline,
+ * coordinating initialization, compilation, and lifecycle management.
+ */
+export interface IRenderPipeline {
+    /**
+     * Executes the complete render pipeline for a component.
+     *
+     * @param options - Pipeline configuration options
+     * @param domContext - DOM context for managing subscriptions and cleanup
+     * @returns Promise resolving to render result with cleanup function
+     * @throws Error if options are null/undefined
+     *
+     * @example
+     * ```typescript
+     * const result = await renderPipeline.execute(
+     *   {
+     *     component: myComponent,
+     *     metadata,
+     *     domContext,
+     *     compiledTemplate,
+     *     hostElement: customElement
+     *   },
+     *   domContext
+     * );
+     * // Call result.cleanup() when done
+     * ```
+     */
+    execute(options: PipelineOptions, domContext: IDomContext): Promise<RenderResult>;
+}
+//# sourceMappingURL=render-pipeline.interface.d.ts.map

package/dist/rendering/pipeline/render-pipeline.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-pipeline.interface.d.ts","sourceRoot":"","sources":["../../../src/rendering/pipeline/render-pipeline.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAEhF;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc;IACxE,uCAAuC;IACvC,SAAS,EAAE,CAAC,CAAC;IACb,iEAAiE;IACjE,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,yDAAyD;IACzD,UAAU,EAAE,WAAW,CAAC;IACxB,8DAA8D;IAC9D,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CACL,OAAO,EAAE,eAAe,EACxB,UAAU,EAAE,WAAW,GACtB,OAAO,CAAC,YAAY,CAAC,CAAC;CAC1B"}

package/dist/rendering/pipeline/render-pipeline.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=render-pipeline.interface.js.map

package/dist/rendering/pipeline/render-pipeline.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-pipeline.interface.js","sourceRoot":"","sources":["../../../src/rendering/pipeline/render-pipeline.interface.ts"],"names":[],"mappings":""}

package/dist/rendering/pipeline/render-pipeline.js

@@ -0,0 +1,201 @@
+import { DomContentType } from "../dom-context/dom-context.interface.js";
+/**
+ * Implements the responsibility of orchestrating the complete component rendering pipeline.
+ *
+ * @description
+ * Coordinates the execution of the rendering pipeline steps: initialization,
+ * template compilation, DOM replacement, and lifecycle management. Acts as
+ * the central orchestrator for component rendering after skeleton display.
+ *
+ * @architecture
+ * Pipeline Steps:
+ * 1. Check for initializer and execute async initialization
+ * 2. Retrieve and preprocess template source
+ * 3. Compile template with reactive bindings
+ * 4. Replace skeleton with compiled element
+ * 5. Start lifecycle manager
+ * 6. Handle errors with overlay display
+ */
+export class RenderPipeline {
+    hostResolver;
+    templateCompiler;
+    errorHandler;
+    outletResolver;
+    styleMigrator;
+    managedRegistry;
+    listenerInitializer;
+    sharedStyles;
+    /**
+     * Creates a RenderPipeline instance
+     *
+     * @param hostResolver - Host resolver for component-DOM context mapping
+     * @param templateCompiler - Compiler for template processing
+     * @param errorHandler - Renderer for error display
+     * @param outletResolver - Resolver for outlet element lookup
+     * @param styleMigrator - Migrator for host styling
+     * @param managedRegistry - Registry for managed element tracking
+     * @param listenerInitializer - Initializer for event listener bindings
+     * @param sharedStyles - Optional shared styles registry for adoptedStyleSheets
+     */
+    constructor(hostResolver, templateCompiler, errorHandler, outletResolver, styleMigrator, managedRegistry, listenerInitializer, sharedStyles = null) {
+        this.hostResolver = hostResolver;
+        this.templateCompiler = templateCompiler;
+        this.errorHandler = errorHandler;
+        if (!templateCompiler)
+            throw new Error("TemplateCompiler is required");
+        if (!errorHandler)
+            throw new Error("ErrorHandler is required");
+        if (!outletResolver)
+            throw new Error("OutletResolver is required");
+        if (!styleMigrator)
+            throw new Error("StyleMigrator is required");
+        if (!managedRegistry)
+            throw new Error("ManagedElementRegistry is required");
+        if (!listenerInitializer)
+            throw new Error("ListenerInitializer is required");
+        this.outletResolver = outletResolver;
+        this.styleMigrator = styleMigrator;
+        this.managedRegistry = managedRegistry;
+        this.listenerInitializer = listenerInitializer;
+        this.sharedStyles = sharedStyles;
+    }
+    /**
+     * Executes the complete render pipeline for a component
+     *
+     * @description
+     * Runs the full rendering sequence: initialization, compilation, DOM update,
+     * and lifecycle setup. Handles errors by showing error overlays.
+     *
+     * @param options - Pipeline execution options
+     * @returns Promise<RenderResult> - Component, DOM context, lifecycle, and cleanup
+     *
+     * @example
+     * ```typescript
+     * const result = await pipeline.execute({
+     *   component,
+     *   metadata,
+     *   domContext,
+     *   compiledTemplate,
+     *   hostElement
+     * });
+     * // Result includes cleanup function
+     * ```
+     */
+    async execute(options) {
+        const { component, metadata, domContext, compiledTemplate, hostElement } = options;
+        let lifecycleManager = null;
+        try {
+            // Execute initializer factory if configured
+            const initializerFactory = metadata.initializer;
+            if (initializerFactory) {
+                const initializerInstance = initializerFactory();
+                const success = await initializerInstance.initialize(component);
+                if (!success) {
+                    const errorMsg = "Component initialization failed";
+                    const resolvedConstants = typeof metadata.constants === "function"
+                        ? metadata.constants(hostElement ?? component)
+                        : metadata.constants;
+                    await this.errorHandler.render(domContext, errorMsg, {
+                        errorTemplate: metadata.errorTemplate,
+                        constants: resolvedConstants,
+                    });
+                    throw new Error(errorMsg);
+                }
+            }
+            // Compile template to HTML element
+            const templateSource = compiledTemplate.templateString;
+            const compiledElement = await this.templateCompiler.compile(templateSource, component, domContext, metadata);
+            // Apply managed host processing if host element provided
+            if (hostElement) {
+                // Register host element as managed BEFORE processing
+                this.managedRegistry.register(hostElement, metadata.selector);
+                this.processManagedHost(compiledElement, hostElement, metadata);
+            }
+            // Register root element as managed component element
+            this.managedRegistry.register(compiledElement, metadata.selector);
+            // Register element in DOM context — this also replaces the skeleton in the DOM.
+            domContext.setElement(compiledElement, DomContentType.COMPONENT);
+            // Apply shared stylesheets via adoptedStyleSheets (Lit pattern)
+            const targetRoot = domContext.getTargetRoot();
+            if (this.sharedStyles &&
+                typeof ShadowRoot !== "undefined" &&
+                targetRoot instanceof ShadowRoot) {
+                this.sharedStyles.applyTo(targetRoot);
+            }
+            // Inject component styles into the Shadow Root after setElement
+            if (metadata.styles) {
+                const styleEl = compiledElement.ownerDocument.createElement("style");
+                styleEl.textContent = metadata.styles;
+                domContext.getTargetRoot().prepend(styleEl);
+            }
+            // Initialize event listeners after DOM replacement
+            this.listenerInitializer.initialize(domContext, component);
+            // Notify component of render completion
+            component.onRenderComplete?.();
+            // Register component in host resolver before starting lifecycle
+            if (this.hostResolver) {
+                this.hostResolver.register(component, domContext);
+            }
+            // Start lifecycle manager if configured
+            const lifecycleFactory = metadata.lifecycle;
+            if (lifecycleFactory) {
+                const lifecycleManagerInstance = lifecycleFactory();
+                lifecycleManagerInstance.startListening(component);
+                lifecycleManager = lifecycleManagerInstance;
+            }
+            return {
+                cleanup: () => {
+                    // Unregister from host resolver
+                    if (this.hostResolver) {
+                        this.hostResolver.unregister(component);
+                    }
+                    // Unregister managed elements on cleanup
+                    if (hostElement) {
+                        this.managedRegistry.unregister(hostElement);
+                    }
+                    this.managedRegistry.unregister(compiledElement);
+                    if (lifecycleManager) {
+                        lifecycleManager.stopListening();
+                        lifecycleManager.dispose();
+                    }
+                    domContext.destroy();
+                },
+            };
+        }
+        catch (error) {
+            const errorMsg = error instanceof Error ? error.message : "Render pipeline failed";
+            console.error("[RenderPipeline] Pipeline failed:", errorMsg, error);
+            const resolvedConstants = typeof metadata.constants === "function"
+                ? metadata.constants(hostElement ?? component)
+                : metadata.constants;
+            await this.errorHandler.render(domContext, errorMsg, {
+                errorTemplate: metadata.errorTemplate,
+                constants: resolvedConstants,
+            });
+            return {
+                cleanup: () => {
+                    domContext.destroy();
+                },
+            };
+        }
+    }
+    /**
+     * Processes a managed host element with SmartComponent association.
+     *
+     * @description
+     * Executes the managed host policy for elements rendered by the SmartComponents engine:
+     * 1. Resolve outlet element (target for styling migration)
+     * 2. Migrate class/id from host to outlet
+     *
+     * @param rootElement - The compiled root element
+     * @param hostElement - The managed host element
+     * @param metadata - Component metadata for input declarations
+     */
+    processManagedHost(rootElement, hostElement, _metadata) {
+        // Step 1: Resolve outlet element
+        const outlet = this.outletResolver.resolve(rootElement);
+        // Step 2: Migrate class/id styling from host to outlet
+        this.styleMigrator.migrate(hostElement, outlet);
+    }
+}
+//# sourceMappingURL=render-pipeline.js.map