@ecopages/lit 0.2.0-alpha.11 → 0.2.0-alpha.12

package/CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to `@ecopages/lit` are documented here.
 
 - Fixed mixed-template SSR composition, placeholder cleanup, lazy preload handling, and browser-router bootstrap reruns.
 - Routed Lit SSR through the static template pipeline so registered custom elements emit declarative shadow DOM.
+- Fixed component-boundary SSR to inject serialized children through both direct Lit interpolation and repeated Lit child slots when Lit is hosted by other integrations.
 
 ### Refactoring
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/lit",
-  "version": "0.2.0-alpha.11",
+  "version": "0.2.0-alpha.12",
   "description": "Ecopages lit integration",
   "keywords": [
     "ecopages",
@@ -31,7 +31,7 @@
     "directory": "packages/integrations/lit"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.11",
+    "@ecopages/core": "0.2.0-alpha.12",
     "@lit-labs/ssr": "^3.3.0",
     "@lit-labs/ssr-client": "^1.1.7",
     "lit": "^3.2.1"

package/src/lit-renderer.d.ts

@@ -3,14 +3,16 @@
  * @module
  */
 import type { ComponentRenderInput, ComponentRenderResult, EcoComponent, EcoPagesElement, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
+import '@lit-labs/ssr/lib/install-global-dom-shim.js';
 import { IntegrationRenderer, type RenderToResponseContext } from '@ecopages/core/route-renderer/integration-renderer';
 /**
  * A renderer for the Lit integration.
  */
 export declare class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
     name: string;
-    protected shouldRenderPageComponent(): boolean;
+    private normalizeDeclarativeShadowRootMarkup;
     private createRenderableMarkup;
+    protected shouldRenderPageComponent(): boolean;
     private renderMarkupToString;
     private renderValueToString;
     private isLitManagedComponent;

package/src/lit-renderer.js

@@ -1,23 +1,31 @@
+import "@lit-labs/ssr/lib/install-global-dom-shim.js";
 import { IntegrationRenderer } from "@ecopages/core/route-renderer/integration-renderer";
 import { render } from "@lit-labs/ssr";
 import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
 import { LitSsrLazyPreloader } from "./lit-ssr-lazy-preloader.js";
 import { PLUGIN_NAME } from "./lit.plugin.js";
 const HTML_TEMPLATE_SLOT_MARKER = "<--content-->";
+const COMPONENT_CHILDREN_SLOT_MARKER = "<!--eco-lit-component-children-->";
+const ESCAPED_COMPONENT_CHILDREN_SLOT_MARKER = "&lt;!--eco-lit-component-children--&gt;";
+const DOUBLE_ESCAPED_COMPONENT_CHILDREN_SLOT_MARKER = "&amp;lt;!--eco-lit-component-children--&amp;gt;";
+const DUPLICATE_DECLARATIVE_SHADOW_ROOT_ATTRIBUTE = /\sshadowroot=(['"])(open|closed)\1(?=\sshadowrootmode=\1\2\1)/g;
 class LitRenderer extends IntegrationRenderer {
   name = PLUGIN_NAME;
-  shouldRenderPageComponent() {
-    return false;
+  normalizeDeclarativeShadowRootMarkup(markup) {
+    return markup.replace(DUPLICATE_DECLARATIVE_SHADOW_ROOT_ATTRIBUTE, "");
   }
   createRenderableMarkup(markup) {
     return staticHtml`${unsafeStatic(markup)}`;
   }
+  shouldRenderPageComponent() {
+    return false;
+  }
   async renderMarkupToString(markup) {
     let renderedHtml = "";
     for (const chunk of render(this.createRenderableMarkup(markup))) {
       renderedHtml += chunk;
     }
-    return renderedHtml;
+    return this.normalizeDeclarativeShadowRootMarkup(renderedHtml);
   }
   async renderValueToString(value) {
     if (typeof value === "string") {
@@ -27,14 +35,23 @@ class LitRenderer extends IntegrationRenderer {
     for (const chunk of render(value)) {
       renderedHtml += chunk;
     }
-    return renderedHtml;
+    return this.normalizeDeclarativeShadowRootMarkup(renderedHtml);
   }
   isLitManagedComponent(component) {
     return component?.config?.integration === this.name || component?.config?.__eco?.integration === this.name;
   }
   injectRenderedChildren(template, renderedChildren) {
+    for (const marker of [
+      COMPONENT_CHILDREN_SLOT_MARKER,
+      ESCAPED_COMPONENT_CHILDREN_SLOT_MARKER,
+      DOUBLE_ESCAPED_COMPONENT_CHILDREN_SLOT_MARKER
+    ]) {
+      if (template.includes(marker)) {
+        return template.split(marker).join(renderedChildren);
+      }
+    }
     if (template.includes(HTML_TEMPLATE_SLOT_MARKER)) {
-      return template.replace(HTML_TEMPLATE_SLOT_MARKER, renderedChildren);
+      return template.split(HTML_TEMPLATE_SLOT_MARKER).join(renderedChildren);
     }
     if (template.includes("</body>")) {
       return template.replace("</body>", `${renderedChildren}</body>`);
@@ -73,9 +90,14 @@ class LitRenderer extends IntegrationRenderer {
   async renderComponent(input) {
     await this.preloadSsrLazyScripts([input.component]);
     const component = input.component;
-    const props = input.children === void 0 ? input.props : { ...input.props, children: input.children };
+    const renderedChildren = input.children === void 0 ? void 0 : typeof input.children === "string" ? input.children : await this.renderValueToString(input.children);
+    const props = renderedChildren === void 0 ? input.props : {
+      ...input.props,
+      children: COMPONENT_CHILDREN_SLOT_MARKER
+    };
     const content = await component(props);
-    const html = await this.renderValueToString(content);
+    const renderedHtml = await this.renderValueToString(content);
+    const html = renderedChildren === void 0 ? renderedHtml : this.injectRenderedChildren(renderedHtml, renderedChildren);
     const hasDependencies = Boolean(input.component.config?.dependencies);
     const canResolveAssets = typeof this.assetProcessingService?.processDependencies === "function";
     const assets = hasDependencies && canResolveAssets ? await this.processComponentDependencies([input.component]) : void 0;
@@ -148,7 +170,7 @@ class LitRenderer extends IntegrationRenderer {
         children: pageHtml,
         locals
       }) : pageHtml;
-      const renderedChildren = this.isLitManagedComponent(HtmlTemplate) ? await this.renderMarkupToString(String(children)) : String(children);
+      const renderedChildren = this.normalizeDeclarativeShadowRootMarkup(String(children));
       return this.DOC_TYPE + await this.renderHtmlTemplate({
         HtmlTemplate,
         metadata,
@@ -180,10 +202,10 @@ class LitRenderer extends IntegrationRenderer {
         const pageContent = await viewFn(props);
         const pageHtml = await this.renderValueToString(pageContent);
         if (ctx.partial) {
-          return await this.renderMarkupToString(pageHtml);
+          return this.normalizeDeclarativeShadowRootMarkup(pageHtml);
         }
         const children = Layout ? this.isLitManagedComponent(Layout) ? await this.renderValueToString(await Layout({ children: pageContent })) : await Layout({ children: pageHtml }) : pageHtml;
-        const renderedChildren = this.isLitManagedComponent(HtmlTemplate) ? await this.renderMarkupToString(String(children)) : String(children);
+        const renderedChildren = this.normalizeDeclarativeShadowRootMarkup(String(children));
         return this.DOC_TYPE + await this.renderHtmlTemplate({
           HtmlTemplate,
           metadata: metadata ?? this.appConfig.defaultMetadata,

package/src/lit.plugin.d.ts

@@ -2,7 +2,6 @@
  * This module contains the Lit plugin
  * @module
  */
-import '@lit-labs/ssr/lib/install-global-dom-shim.js';
 import './console.js';
 import { IntegrationPlugin, type ComponentBoundaryPolicyInput, type IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
 import { type AssetDefinition } from '@ecopages/core/services/asset-processing-service';

package/src/lit.plugin.js

@@ -1,4 +1,3 @@
-import "@lit-labs/ssr/lib/install-global-dom-shim.js";
 import "./console.js";
 import {
   IntegrationPlugin