@ecopages/lit 0.2.0-alpha.13 → 0.2.0-alpha.15

package/CHANGELOG.md

@@ -17,3 +17,7 @@ All notable changes to `@ecopages/lit` are documented here.
 ### Tests
 
 - Updated integration coverage for explicit boundary composition and Node and esbuild compatibility.
+
+### Refactoring
+
+- Moved Lit HTML serialization and child-slot reinjection mechanics into a dedicated utility so the renderer stays focused on preload and boundary orchestration.

package/package.json

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

package/src/lit-renderer.d.ts

@@ -12,14 +12,8 @@ export declare class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
     name: string;
     private resolveQueuedBoundaryChildren;
     private resolveQueuedBoundaryHtml;
-    private normalizeDeclarativeShadowRootMarkup;
-    private createRenderableMarkup;
     protected shouldRenderPageComponent(): boolean;
-    private renderMarkupToString;
-    private renderValueToString;
     private isLitManagedComponent;
-    private injectRenderedChildren;
-    private renderHtmlTemplate;
     /**
      * Renders a Lit component boundary for component-level orchestration.
      *

package/src/lit-renderer.js

@@ -1,21 +1,20 @@
 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;
+import {
+  injectLitRenderedChildren,
+  LIT_COMPONENT_CHILDREN_SLOT_MARKER,
+  normalizeLitHtml,
+  renderLitValueToString
+} from "./utils/lit-html-rendering.js";
 class LitRenderer extends IntegrationRenderer {
   name = PLUGIN_NAME;
   async resolveQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken) {
     if (children === void 0) {
       return void 0;
     }
-    let renderedChildren = typeof children === "string" ? children : await this.renderValueToString(children);
+    let renderedChildren = typeof children === "string" ? children : await renderLitValueToString(children);
     renderedChildren = await this.resolveQueuedBoundaryTokens(
       renderedChildren,
       queuedResolutionsByToken,
@@ -45,73 +44,12 @@ class LitRenderer extends IntegrationRenderer {
       assets: queuedBoundaryResolution.assets.length > 0 ? queuedBoundaryResolution.assets : void 0
     };
   }
-  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 this.normalizeDeclarativeShadowRootMarkup(renderedHtml);
-  }
-  async renderValueToString(value) {
-    if (typeof value === "string") {
-      return await this.renderMarkupToString(value);
-    }
-    let renderedHtml = "";
-    for (const chunk of render(value)) {
-      renderedHtml += chunk;
-    }
-    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.split(HTML_TEMPLATE_SLOT_MARKER).join(renderedChildren);
-    }
-    if (template.includes("</body>")) {
-      return template.replace("</body>", `${renderedChildren}</body>`);
-    }
-    if (template.includes("</html>")) {
-      return template.replace("</html>", `${renderedChildren}</html>`);
-    }
-    return `${template}${renderedChildren}`;
-  }
-  async renderHtmlTemplate(options) {
-    if (!options.isLitManagedHtmlTemplate) {
-      return String(
-        await options.HtmlTemplate({
-          metadata: options.metadata,
-          children: options.renderedChildren,
-          pageProps: options.pageProps
-        })
-      );
-    }
-    const template = await options.HtmlTemplate({
-      metadata: options.metadata,
-      children: HTML_TEMPLATE_SLOT_MARKER,
-      pageProps: options.pageProps
-    });
-    return this.injectRenderedChildren(String(template), options.renderedChildren);
-  }
   /**
    * Renders a Lit component boundary for component-level orchestration.
    *
@@ -126,18 +64,18 @@ class LitRenderer extends IntegrationRenderer {
     const component = input.component;
     let renderedChildren;
     if (input.children !== void 0) {
-      renderedChildren = typeof input.children === "string" ? input.children : await this.renderValueToString(input.children);
+      renderedChildren = typeof input.children === "string" ? input.children : await renderLitValueToString(input.children);
     }
     let props = input.props;
     if (renderedChildren !== void 0) {
       props = {
         ...input.props,
-        children: COMPONENT_CHILDREN_SLOT_MARKER
+        children: LIT_COMPONENT_CHILDREN_SLOT_MARKER
       };
     }
     const content = await component(props);
-    const renderedHtml = await this.renderValueToString(content);
-    const html = renderedChildren === void 0 ? renderedHtml : this.injectRenderedChildren(renderedHtml, renderedChildren);
+    const renderedHtml = await renderLitValueToString(content);
+    const html = renderedChildren === void 0 ? renderedHtml : injectLitRenderedChildren(renderedHtml, renderedChildren);
     const queuedBoundaryResolution = await this.resolveQueuedBoundaryHtml(
       html,
       this.getQueuedBoundaryRuntime(input)
@@ -229,7 +167,7 @@ class LitRenderer extends IntegrationRenderer {
         htmlTemplate: HtmlTemplate,
         metadata,
         pageProps: props || {},
-        transformDocumentHtml: (html) => this.normalizeDeclarativeShadowRootMarkup(html)
+        transformDocumentHtml: normalizeLitHtml
       });
     } catch (error) {
       throw this.createRenderError("Error rendering page", error);
@@ -242,7 +180,7 @@ class LitRenderer extends IntegrationRenderer {
           view,
           props,
           ctx,
-          transformHtml: (html) => this.normalizeDeclarativeShadowRootMarkup(html)
+          transformHtml: normalizeLitHtml
         });
       }
       const viewConfig = view.config;
@@ -270,7 +208,7 @@ class LitRenderer extends IntegrationRenderer {
       });
       this.appendProcessedDependencies(pageRender.assets, layoutRender?.assets, documentRender.assets);
       const body = await this.finalizeResolvedHtml({
-        html: `${this.DOC_TYPE}${this.normalizeDeclarativeShadowRootMarkup(documentRender.html)}`,
+        html: `${this.DOC_TYPE}${normalizeLitHtml(documentRender.html)}`,
         partial: false
       });
       return this.createHtmlResponse(body, ctx);

package/src/utils/lit-html-rendering.d.ts

@@ -0,0 +1,5 @@
+export declare const LIT_HTML_TEMPLATE_SLOT_MARKER = "<--content-->";
+export declare const LIT_COMPONENT_CHILDREN_SLOT_MARKER = "<!--eco-lit-component-children-->";
+export declare function normalizeLitHtml(markup: string): string;
+export declare function injectLitRenderedChildren(template: string, renderedChildren: string): string;
+export declare function renderLitValueToString(value: unknown): Promise<string>;

package/src/utils/lit-html-rendering.js

@@ -0,0 +1,52 @@
+import { render } from "@lit-labs/ssr";
+import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
+const LIT_HTML_TEMPLATE_SLOT_MARKER = "<--content-->";
+const LIT_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;
+function normalizeLitHtml(markup) {
+  return markup.replace(DUPLICATE_DECLARATIVE_SHADOW_ROOT_ATTRIBUTE, "");
+}
+function injectLitRenderedChildren(template, renderedChildren) {
+  for (const marker of [
+    LIT_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(LIT_HTML_TEMPLATE_SLOT_MARKER)) {
+    return template.split(LIT_HTML_TEMPLATE_SLOT_MARKER).join(renderedChildren);
+  }
+  if (template.includes("</body>")) {
+    return template.replace("</body>", `${renderedChildren}</body>`);
+  }
+  if (template.includes("</html>")) {
+    return template.replace("</html>", `${renderedChildren}</html>`);
+  }
+  return `${template}${renderedChildren}`;
+}
+async function renderLitValueToString(value) {
+  if (typeof value === "string") {
+    let renderedHtml2 = "";
+    for (const chunk of render(staticHtml`${unsafeStatic(value)}`)) {
+      renderedHtml2 += chunk;
+    }
+    return normalizeLitHtml(renderedHtml2);
+  }
+  let renderedHtml = "";
+  for (const chunk of render(value)) {
+    renderedHtml += chunk;
+  }
+  return normalizeLitHtml(renderedHtml);
+}
+export {
+  LIT_COMPONENT_CHILDREN_SLOT_MARKER,
+  LIT_HTML_TEMPLATE_SLOT_MARKER,
+  injectLitRenderedChildren,
+  normalizeLitHtml,
+  renderLitValueToString
+};