@ecopages/lit 0.2.0-alpha.5 → 0.2.0-alpha.7

package/CHANGELOG.md

@@ -8,14 +8,17 @@ All notable changes to `@ecopages/lit` are documented here.
 
 ### Features
 
-- Aligned Lit renderer with full orchestration mode — removed legacy rendering path (`fc07bdb0`).
-- Integration updated to work with the new lazy dependency map and global injector rendering mode.
+- Aligned Lit with the unified orchestration pipeline and the shared lazy dependency and global injector flow.
+
+### Bug Fixes
+
+- Prevented the shared Lit hydrate-support bootstrap from re-running on every browser-router navigation.
+- Routed Lit renderer output through Lit's static SSR template pipeline so registered custom elements render declarative shadow DOM during SSR instead of staying as bare host tags.
 
 ### Refactoring
 
-- Ambient module declarations cleaned up (`5f46ecc5`).
-- Updated test suite for esbuild adapter and Node.js runtime compatibility (`31a44458`).
+- Cleaned up ambient module declarations.
 
 ### Tests
 
-- Updated integration tests to the new orchestration model.
+- Updated integration coverage for the orchestration pipeline and Node and esbuild compatibility.

package/README.md

@@ -1,8 +1,10 @@
-# Ecopages Lit Integration Plugin
+# @ecopages/lit
 
-The `@ecopages/lit` package enables the integration of [Lit](https://lit.dev/), a powerful library for building fast, lightweight web components. This integration is optimized for use alongside `@ecopages/kitajs`, facilitating the use of Lit within a proper HTML template engine context provided by Kita. This combination allows developers to leverage the best of both worlds: the component-based architecture of Lit and the JSX template capabilities of Kita, enhancing the development of dynamic and interactive web pages.
+Integration plugin for [Lit](https://lit.dev/) web components in Ecopages.
 
-## Install
+This integration is optimized for use alongside `@ecopages/kitajs` (or another HTML JSX engine), allowing you to author your pages in Kitajs JSX templates while embedding interactive Lit components where needed.
+
+## Installation
 
 ```bash
 bunx jsr add @ecopages/lit
@@ -10,10 +12,10 @@ bunx jsr add @ecopages/lit
 
 ## Usage
 
-For effective utilization of Lit in your Ecopages projects, it is recommended to use it in conjunction with Kita. This ensures a seamless development experience, allowing you to incorporate Lit components within JSX templates effortlessly. Configure your project to include both `@ecopages/lit` and `@ecopages/kitajs` as follows:
+It is recommended to use `@ecopages/lit` in conjunction with `@ecopages/kitajs`. Configure your project to include both integrations in your `eco.config.ts`:
 
 ```ts
-import { ConfigBuilder } from '@ecopages/core';
+import { ConfigBuilder } from '@ecopages/core/config-builder';
 import { kitajsPlugin } from '@ecopages/kitajs';
 import { litPlugin } from '@ecopages/lit';
 
@@ -25,4 +27,4 @@ const config = await new ConfigBuilder()
 export default config;
 ```
 
-Adopting this setup empowers developers to fully exploit Lit's capabilities within the Ecopages framework, paving the way for the creation of rich, interactive web components.
+This setup enables server-rendered KitaJS pages that embed and hydrate Lit custom elements on the client.

package/package.json

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

package/src/lit-renderer.d.ts

@@ -9,6 +9,8 @@ import { IntegrationRenderer, type RenderToResponseContext } from '@ecopages/cor
  */
 export declare class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
     name: string;
+    private createRenderableMarkup;
+    private renderMarkupToString;
     /**
      * Renders a Lit component boundary for component-level orchestration.
      *

package/src/lit-renderer.js

@@ -1,11 +1,21 @@
 import { IntegrationRenderer } from "@ecopages/core/route-renderer/integration-renderer";
 import { render } from "@lit-labs/ssr";
 import { RenderResultReadable } from "@lit-labs/ssr/lib/render-result-readable.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
+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";
 class LitRenderer extends IntegrationRenderer {
   name = PLUGIN_NAME;
+  createRenderableMarkup(markup) {
+    return staticHtml`${unsafeStatic(markup)}`;
+  }
+  async renderMarkupToString(markup) {
+    let renderedHtml = "";
+    for (const chunk of render(this.createRenderableMarkup(markup))) {
+      renderedHtml += chunk;
+    }
+    return renderedHtml;
+  }
   /**
    * Renders a Lit component boundary for component-level orchestration.
    *
@@ -15,14 +25,15 @@ class LitRenderer extends IntegrationRenderer {
     const component = input.component;
     const props = input.children === void 0 ? input.props : { ...input.props, children: input.children };
     const content = await component(props);
-    const html = String(content);
+    const markup = String(content);
+    const html = await this.renderMarkupToString(markup);
     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;
     return {
       html,
       canAttachAttributes: true,
-      rootTag: this.getRootTagName(html),
+      rootTag: this.getRootTagName(markup),
       integrationName: this.name,
       assets
     };
@@ -94,7 +105,7 @@ class LitRenderer extends IntegrationRenderer {
       function* streamBody() {
         yield DOC_TYPE;
         yield templateStart;
-        yield* render(unsafeHTML(children));
+        yield* render(staticHtml`${unsafeStatic(children)}`);
         yield templateEnd;
       }
       return new RenderResultReadable(streamBody());
@@ -111,7 +122,7 @@ class LitRenderer extends IntegrationRenderer {
       const pageContent = await viewFn(props);
       if (ctx.partial) {
         function* streamBody2() {
-          yield* render(unsafeHTML(pageContent));
+          yield* render(staticHtml`${unsafeStatic(pageContent)}`);
         }
         const readable = new RenderResultReadable(streamBody2());
         return this.createHtmlResponse(readable, ctx);
@@ -135,7 +146,7 @@ class LitRenderer extends IntegrationRenderer {
       function* streamBody() {
         yield DOC_TYPE;
         yield templateStart;
-        yield* render(unsafeHTML(children));
+        yield* render(staticHtml`${unsafeStatic(children)}`);
         yield templateEnd;
       }
       const stream = new RenderResultReadable(streamBody());

package/src/lit-renderer.ts

@@ -15,7 +15,7 @@ import type {
 import { IntegrationRenderer, type RenderToResponseContext } from '@ecopages/core/route-renderer/integration-renderer';
 import { render } from '@lit-labs/ssr';
 import { RenderResultReadable } from '@lit-labs/ssr/lib/render-result-readable.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 import { LitSsrLazyPreloader } from './lit-ssr-lazy-preloader.ts';
 import { PLUGIN_NAME } from './lit.plugin.ts';
 
@@ -25,6 +25,18 @@ import { PLUGIN_NAME } from './lit.plugin.ts';
 export class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
 	override name = PLUGIN_NAME;
 
+	private createRenderableMarkup(markup: string) {
+		return staticHtml`${unsafeStatic(markup)}`;
+	}
+
+	private async renderMarkupToString(markup: string): Promise<string> {
+		let renderedHtml = '';
+		for (const chunk of render(this.createRenderableMarkup(markup))) {
+			renderedHtml += chunk;
+		}
+		return renderedHtml;
+	}
+
 	/**
 	 * Renders a Lit component boundary for component-level orchestration.
 	 *
@@ -36,7 +48,8 @@ export class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
 		) => Promise<EcoPagesElement> | EcoPagesElement;
 		const props = input.children === undefined ? input.props : { ...input.props, children: input.children };
 		const content = await component(props);
-		const html = String(content);
+		const markup = String(content);
+		const html = await this.renderMarkupToString(markup);
 		const hasDependencies = Boolean(input.component.config?.dependencies);
 		const canResolveAssets = typeof this.assetProcessingService?.processDependencies === 'function';
 		const assets =
@@ -47,7 +60,7 @@ export class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
 		return {
 			html,
 			canAttachAttributes: true,
-			rootTag: this.getRootTagName(html),
+			rootTag: this.getRootTagName(markup),
 			integrationName: this.name,
 			assets,
 		};
@@ -132,7 +145,7 @@ export class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
 			function* streamBody() {
 				yield DOC_TYPE;
 				yield templateStart;
-				yield* render(unsafeHTML(children));
+				yield* render(staticHtml`${unsafeStatic(children)}`);
 				yield templateEnd;
 			}
 
@@ -160,7 +173,7 @@ export class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
 
 			if (ctx.partial) {
 				function* streamBody() {
-					yield* render(unsafeHTML(pageContent));
+					yield* render(staticHtml`${unsafeStatic(pageContent)}`);
 				}
 				const readable = new RenderResultReadable(streamBody());
 				return this.createHtmlResponse(readable as unknown as BodyInit, ctx);
@@ -192,7 +205,7 @@ export class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
 			function* streamBody() {
 				yield DOC_TYPE;
 				yield templateStart;
-				yield* render(unsafeHTML(children));
+				yield* render(staticHtml`${unsafeStatic(children)}`);
 				yield templateEnd;
 			}
 			const stream = new RenderResultReadable(streamBody());

package/src/lit.plugin.js

@@ -35,7 +35,6 @@ class LitPlugin extends IntegrationPlugin {
         content: litElementHydrateScript,
         bundle: false,
         attributes: {
-          "data-eco-rerun": "true",
           "data-eco-script-id": "lit-hydrate-support"
         }
       })

package/src/lit.plugin.ts

@@ -52,7 +52,6 @@ export class LitPlugin extends IntegrationPlugin {
 				content: litElementHydrateScript,
 				bundle: false,
 				attributes: {
-					'data-eco-rerun': 'true',
 					'data-eco-script-id': 'lit-hydrate-support',
 				},
 			}),