@ecopages/lit 0.2.0-alpha.1 → 0.2.0-alpha.10

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.1",
+  "version": "0.2.0-alpha.10",
   "description": "Ecopages lit integration",
   "keywords": [
     "ecopages",
@@ -31,7 +31,7 @@
     "directory": "packages/integrations/lit"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.1",
+    "@ecopages/core": "0.2.0-alpha.10",
     "@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.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/console.ts

@@ -1,19 +0,0 @@
-const originalConsoleWarn = console.warn;
-
-/**
- * Suppresses the warning about CustomElementRegistry already being defined in ssr-dom-shim by lit
- * https://github.com/lit/lit/blob/bd881370b83d366f7654dd510731242a68949a20/packages/labs/ssr-dom-shim/src/index.ts#L140
- * Complete Error Log:
- * 'CustomElementRegistry' already has "lit-counter" defined. This may have been caused by live reload or hot module replacement in which case it can be safely ignored.
- * Make sure to test your application with a production build as repeat registrations will throw in production.
- */
-console.warn = (...messages: any[]) => {
-	if (
-		messages.some(
-			(message) => typeof message === 'string' && message.includes("'CustomElementRegistry' already has"),
-		)
-	) {
-		return;
-	}
-	originalConsoleWarn.apply(console, messages);
-};

package/src/lit-element-hydrate.ts

@@ -1,2 +0,0 @@
-export const litElementHydrateScript =
-	'var k=globalThis,y=k.trustedTypes,p=y?y.createPolicy("lit-html",{createHTML:(q)=>q}):void 0;var P=`lit$${Math.random().toFixed(9).slice(2)}$`,v="?"+P,Kq=`<${v}>`,x=document,C=()=>x.createComment(""),S=(q)=>q===null||typeof q!="object"&&typeof q!="function",L=Array.isArray,h=(q)=>L(q)||typeof q?.[Symbol.iterator]=="function";var U=/<(?:(!--|\\/[^a-zA-Z])|(\\/?[a-zA-Z][^>\\s]*)|(\\/?$))/g,m=/-->/g,a=/>/g,$=/>|[ \\t\\n\\f\\r](?:([^\\s"\'>=\\/]+)([ \\t\\n\\f\\r]*=[ \\t\\n\\f\\r]*(?:[^ \\t\\n\\f\\r"\'\\`<>=]|("|\')|))|$)/g,c=/\'/g,l=/"/g,r=/^(?:script|style|textarea|title)$/i,M=(q)=>(D,...F)=>({_$litType$:q,strings:D,values:F}),Aq=M(1),Pq=M(2),Vq=M(3),V=Symbol.for("lit-noChange"),B=Symbol.for("lit-nothing"),n=new WeakMap,w=x.createTreeWalker(x,129);function o(q,D){if(!L(q)||!q.hasOwnProperty("raw"))throw Error("invalid template strings array");return p!==void 0?p.createHTML(D):D}var e=(q,D)=>{let F=q.length-1,J=[],G,O=D===2?"<svg>":D===3?"<math>":"",K=U;for(let W=0;W<F;W++){let Q=q[W],Y,X,b=-1,A=0;while(A<Q.length&&(K.lastIndex=A,X=K.exec(Q),X!==null))A=K.lastIndex,K===U?X[1]==="!--"?K=m:X[1]!==void 0?K=a:X[2]!==void 0?(r.test(X[2])&&(G=RegExp("</"+X[2],"g")),K=$):X[3]!==void 0&&(K=$):K===$?X[0]===">"?(K=G??U,b=-1):X[1]===void 0?b=-2:(b=K.lastIndex-X[2].length,Y=X[1],K=X[3]===void 0?$:X[3]===\'"\'?l:c):K===l||K===c?K=$:K===m||K===a?K=U:(K=$,G=void 0);const _=K===$&&q[W+1].startsWith("/>")?" ":"";O+=K===U?Q+Kq:b>=0?(J.push(Y),Q.slice(0,b)+"$lit$"+Q.slice(b)+P+_):Q+P+(b===-2?W:_)}return[o(q,O+(q[F]||"<?>")+(D===2?"</svg>":D===3?"</math>":"")),J]};class g{constructor({strings:q,_$litType$:D},F){let J;this.parts=[];let G=0,O=0,K=q.length-1,W=this.parts,[Q,Y]=e(q,D);if(this.el=g.createElement(Q,F),w.currentNode=this.el.content,D===2||D===3){const X=this.el.content.firstChild;X.replaceWith(...X.childNodes)}while((J=w.nextNode())!==null&&W.length<K){if(J.nodeType===1){if(J.hasAttributes())for(const X of J.getAttributeNames())if(X.endsWith("$lit$")){const b=Y[O++],A=J.getAttribute(X).split(P),_=/([.?@])?(.*)/.exec(b);W.push({type:1,index:G,name:_[2],strings:A,ctor:_[1]==="."?R:_[1]==="?"?E:_[1]==="@"?d:I}),J.removeAttribute(X)}else X.startsWith(P)&&(W.push({type:6,index:G}),J.removeAttribute(X));if(r.test(J.tagName)){const X=J.textContent.split(P),b=X.length-1;if(b>0){J.textContent=y?y.emptyScript:"";for(let A=0;A<b;A++)J.append(X[A],C()),w.nextNode(),W.push({type:2,index:++G});J.append(X[b],C())}}}else if(J.nodeType===8)if(J.data===v)W.push({type:2,index:G});else{let X=-1;while((X=J.data.indexOf(P,X+1))!==-1)W.push({type:7,index:G}),X+=P.length-1}G++}}static createElement(q,D){const F=x.createElement("template");return F.innerHTML=q,F}}function z(q,D,F=q,J){if(D===V)return D;let G=J!==void 0?F._$Co?.[J]:F._$Cl,O=S(D)?void 0:D._$litDirective$;return G?.constructor!==O&&(G?._$AO?.(!1),O===void 0?G=void 0:(G=new O(q),G._$AT(q,F,J)),J!==void 0?(F._$Co??=[])[J]=G:F._$Cl=G),G!==void 0&&(D=z(q,G._$AS(q,D.values),G,J)),D}class j{constructor(q,D){this._$AV=[],this._$AN=void 0,this._$AD=q,this._$AM=D}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(q){const{el:{content:D},parts:F}=this._$AD,J=(q?.creationScope??x).importNode(D,!0);w.currentNode=J;let G=w.nextNode(),O=0,K=0,W=F[0];while(W!==void 0){if(O===W.index){let Q;W.type===2?Q=new H(G,G.nextSibling,this,q):W.type===1?Q=new W.ctor(G,W.name,W.strings,this,q):W.type===6&&(Q=new f(G,this,q)),this._$AV.push(Q),W=F[++K]}O!==W?.index&&(G=w.nextNode(),O++)}return w.currentNode=x,J}p(q){let D=0;for(const F of this._$AV)F!==void 0&&(F.strings!==void 0?(F._$AI(q,F,D),D+=F.strings.length-2):F._$AI(q[D])),D++}}class H{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(q,D,F,J){this.type=2,this._$AH=B,this._$AN=void 0,this._$AA=q,this._$AB=D,this._$AM=F,this.options=J,this._$Cv=J?.isConnected??!0}get parentNode(){let q=this._$AA.parentNode,D=this._$AM;return D!==void 0&&q?.nodeType===11&&(q=D.parentNode),q}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(q,D=this){q=z(this,q,D),S(q)?q===B||q==null||q===""?(this._$AH!==B&&this._$AR(),this._$AH=B):q!==this._$AH&&q!==V&&this._(q):q._$litType$!==void 0?this.$(q):q.nodeType!==void 0?this.T(q):h(q)?this.k(q):this._(q)}O(q){return this._$AA.parentNode.insertBefore(q,this._$AB)}T(q){this._$AH!==q&&(this._$AR(),this._$AH=this.O(q))}_(q){this._$AH!==B&&S(this._$AH)?this._$AA.nextSibling.data=q:this.T(x.createTextNode(q)),this._$AH=q}$(q){const{values:D,_$litType$:F}=q,J=typeof F=="number"?this._$AC(q):(F.el===void 0&&(F.el=g.createElement(o(F.h,F.h[0]),this.options)),F);if(this._$AH?._$AD===J)this._$AH.p(D);else{const G=new j(J,this),O=G.u(this.options);G.p(D),this.T(O),this._$AH=G}}_$AC(q){let D=n.get(q.strings);return D===void 0&&n.set(q.strings,D=new g(q)),D}k(q){L(this._$AH)||(this._$AH=[],this._$AR());let D=this._$AH,F,J=0;for(const G of q)J===D.length?D.push(F=new H(this.O(C()),this.O(C()),this,this.options)):F=D[J],F._$AI(G),J++;J<D.length&&(this._$AR(F&&F._$AB.nextSibling,J),D.length=J)}_$AR(q=this._$AA.nextSibling,D){for(this._$AP?.(!1,!0,D);q&&q!==this._$AB;){const F=q.nextSibling;q.remove(),q=F}}setConnected(q){this._$AM===void 0&&(this._$Cv=q,this._$AP?.(q))}}class I{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(q,D,F,J,G){this.type=1,this._$AH=B,this._$AN=void 0,this.element=q,this.name=D,this._$AM=J,this.options=G,F.length>2||F[0]!==""||F[1]!==""?(this._$AH=Array(F.length-1).fill(new String),this.strings=F):this._$AH=B}_$AI(q,D=this,F,J){let G=this.strings,O=!1;if(G===void 0)q=z(this,q,D,0),O=!S(q)||q!==this._$AH&&q!==V,O&&(this._$AH=q);else{let K=q,W,Q;for(q=G[0],W=0;W<G.length-1;W++)Q=z(this,K[F+W],D,W),Q===V&&(Q=this._$AH[W]),O||=!S(Q)||Q!==this._$AH[W],Q===B?q=B:q!==B&&(q+=(Q??"")+G[W+1]),this._$AH[W]=Q}O&&!J&&this.j(q)}j(q){q===B?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,q??"")}}class R extends I{constructor(){super(...arguments),this.type=3}j(q){this.element[this.name]=q===B?void 0:q}}class E extends I{constructor(){super(...arguments),this.type=4}j(q){this.element.toggleAttribute(this.name,!!q&&q!==B)}}class d extends I{constructor(q,D,F,J,G){super(q,D,F,J,G),this.type=5}_$AI(q,D=this){if((q=z(this,q,D,0)??B)===V)return;const F=this._$AH,J=q===B&&F!==B||q.capture!==F.capture||q.once!==F.once||q.passive!==F.passive,G=q!==B&&(F===B||J);J&&this.element.removeEventListener(this.name,this,F),G&&this.element.addEventListener(this.name,this,q),this._$AH=q}handleEvent(q){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,q):this._$AH.handleEvent(q)}}class f{constructor(q,D,F){this.element=q,this.type=6,this._$AN=void 0,this._$AM=D,this.options=F}get _$AU(){return this._$AM._$AU}_$AI(q){z(this,q)}}var Z={M:"$lit$",P,A:v,C:1,L:e,R:j,D:h,V:z,I:H,H:I,N:E,U:d,B:R,F:f},Oq=k.litHtmlPolyfillSupport;Oq?.(g,H),(k.litHtmlVersions??=[]).push("3.2.1");var i=(q,D,F)=>{let J=F?.renderBefore??D,G=J._$litPart$;if(G===void 0){const O=F?.renderBefore??null;J._$litPart$=G=new H(D.insertBefore(C(),O),O,void 0,F??{})}return G._$AI(q),G};var u=null,s={boundAttributeSuffix:Z.M,marker:Z.P,markerMatch:Z.A,HTML_RESULT:Z.C,getTemplateHtml:Z.L,overrideDirectiveResolve:(q,D)=>class extends q{_$AS(F,J){return D(this,J)}},patchDirectiveResolve:(q,D)=>{if(q.prototype._$AS!==D){u??=q.prototype._$AS.name;for(let F=q.prototype;F!==Object.prototype;F=Object.getPrototypeOf(F))if(F.hasOwnProperty(u))return void(F[u]=D);throw Error("Internal error: It is possible that both dev mode and production mode Lit was mixed together during SSR. Please comment on the issue: https://github.com/lit/lit/issues/4527")}},setDirectiveClass(q,D){q._$litDirective$=D},getAttributePartCommittedValue:(q,D,F)=>{let J=V;return q.j=(G)=>J=G,q._$AI(D,q,F),J},connectedDisconnectable:(q)=>({...q,_$AU:!0}),resolveDirective:Z.V,AttributePart:Z.H,PropertyPart:Z.B,BooleanAttributePart:Z.N,EventPart:Z.U,ElementPart:Z.F,TemplateInstance:Z.R,isIterable:Z.D,ChildPart:Z.I};var T={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6};var t=(q)=>q===null||typeof q!="object"&&typeof q!="function";var qq=(q,D)=>D===void 0?q?._$litType$!==void 0:q?._$litType$===D,Dq=(q)=>q?._$litType$?.h!=null;var Fq=(q)=>q.strings===void 0;var{TemplateInstance:Qq,isIterable:Wq,resolveDirective:Gq,ChildPart:N,ElementPart:Xq}=s,Jq=(q,D,F={})=>{if(D._$litPart$!==void 0)throw Error("container already contains a live render");let J,G,O,K=[],W=document.createTreeWalker(D,NodeFilter.SHOW_COMMENT),Q;while((Q=W.nextNode())!==null){const Y=Q.data;if(Y.startsWith("lit-part")){if(K.length===0&&J!==void 0)throw Error(`There must be only one root part per container. Found a part marker (${Q}) when we already have a root part marker (${G})`);O=Yq(q,Q,K,F),J===void 0&&(J=O),G??=Q}else if(Y.startsWith("lit-node"))Zq(Q,K,F);else if(Y.startsWith("/lit-part")){if(K.length===1&&O!==J)throw Error("internal error");O=Bq(Q,O,K)}}if(J===void 0){const Y=D instanceof ShadowRoot?"{container.host.localName}\'s shadow root":D instanceof DocumentFragment?"DocumentFragment":D.localName;console.error(`There should be exactly one root part in a render container, but we didn\'t find any in ${Y}.`)}D._$litPart$=J},Yq=(q,D,F,J)=>{let G,O;if(F.length===0)O=new N(D,null,void 0,J),G=q;else{const K=F[F.length-1];if(K.type==="template-instance")O=new N(D,null,K.instance,J),K.instance._$AV.push(O),G=K.result.values[K.instancePartIndex++],K.templatePartIndex++;else if(K.type==="iterable"){O=new N(D,null,K.part,J);const W=K.iterator.next();if(W.done)throw G=void 0,K.done=!0,Error("Unhandled shorter than expected iterable");G=W.value,K.part._$AH.push(O)}else O=new N(D,null,K.part,J)}if(G=Gq(O,G),G===V)F.push({part:O,type:"leaf"});else if(t(G))F.push({part:O,type:"leaf"}),O._$AH=G;else if(qq(G)){if(Dq(G))throw Error("compiled templates are not supported");const K="lit-part "+bq(G);if(D.data!==K)throw Error("Hydration value mismatch: Unexpected TemplateResult rendered to part");{const W=N.prototype._$AC(G),Q=new Qq(W,O);F.push({type:"template-instance",instance:Q,part:O,templatePartIndex:0,instancePartIndex:0,result:G}),O._$AH=Q}}else Wq(G)?(F.push({part:O,type:"iterable",value:G,iterator:G[Symbol.iterator](),done:!1}),O._$AH=[]):(F.push({part:O,type:"leaf"}),O._$AH=G??"");return O},Bq=(q,D,F)=>{if(D===void 0)throw Error("unbalanced part marker");D._$AB=q;const J=F.pop();if(J.type==="iterable"&&!J.iterator.next().done)throw Error("unexpected longer than expected iterable");if(F.length>0)return F[F.length-1].part},Zq=(q,D,F)=>{const J=/lit-node (\\d+)/.exec(q.data),G=Number.parseInt(J[1]),O=q.nextElementSibling;if(O===null)throw Error("could not find node for attribute parts");O.removeAttribute("defer-hydration");const K=D[D.length-1];if(K.type!=="template-instance")throw Error("Hydration value mismatch: Primitive found where TemplateResult expected. This usually occurs due to conditional rendering that resulted in a different value or template being rendered between the server and client.");{const W=K.instance;for(;;){const Q=W._$AD.parts[K.templatePartIndex];if(Q===void 0||Q.type!==T.ATTRIBUTE&&Q.type!==T.ELEMENT||Q.index!==G)break;if(Q.type===T.ATTRIBUTE){const Y=new Q.ctor(O,Q.name,Q.strings,K.instance,F),X=Fq(Y)?K.result.values[K.instancePartIndex]:K.result.values,b=!(Y.type===T.EVENT||Y.type===T.PROPERTY);Y._$AI(X,Y,K.instancePartIndex,b),K.instancePartIndex+=Q.strings.length-1,W._$AV.push(Y)}else{const Y=new Xq(O,K.instance,F);Gq(Y,K.result.values[K.instancePartIndex++]),W._$AV.push(Y)}K.templatePartIndex++}}},bq=(q)=>{const D=new Uint32Array(2).fill(5381);for(const J of q.strings)for(let G=0;G<J.length;G++)D[G%2]=33*D[G%2]^J.charCodeAt(G);const F=String.fromCharCode(...new Uint8Array(D.buffer));return btoa(F)};globalThis.litElementHydrateSupport=({LitElement:q})=>{const D=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(q),"observedAttributes").get;Object.defineProperty(q,"observedAttributes",{get(){return[...D.call(this),"defer-hydration"]}});const F=q.prototype.attributeChangedCallback;q.prototype.attributeChangedCallback=function(K,W,Q){K==="defer-hydration"&&Q===null&&J.call(this),F.call(this,K,W,Q)};const J=q.prototype.connectedCallback;q.prototype.connectedCallback=function(){this.hasAttribute("defer-hydration")||J.call(this)};const G=q.prototype.createRenderRoot;q.prototype.createRenderRoot=function(){return this.shadowRoot?(this._$AG=!0,this.shadowRoot):G.call(this)};const O=Object.getPrototypeOf(q.prototype).update;q.prototype.update=function(K){const W=this.render();if(O.call(this,K),this._$AG){this._$AG=!1;for(let Q=0;Q<this.attributes.length;Q++){const Y=this.attributes[Q];if(Y.name.startsWith("hydrate-internals-")){const X=Y.name.slice(18);this.removeAttribute(X),this.removeAttribute(Y.name)}}Jq(W,this.renderRoot,this.renderOptions)}else i(W,this.renderRoot,this.renderOptions)}};';

package/src/lit-renderer.ts

@@ -1,210 +0,0 @@
-/**
- * This module contains the Lit renderer
- * @module
- */
-
-import type {
-	ComponentRenderInput,
-	ComponentRenderResult,
-	EcoComponent,
-	EcoPagesElement,
-	IntegrationRendererRenderOptions,
-	PageMetadataProps,
-	RouteRendererBody,
-} from '@ecopages/core';
-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 { LitSsrLazyPreloader } from './lit-ssr-lazy-preloader.ts';
-import { PLUGIN_NAME } from './lit.plugin.ts';
-
-/**
- * A renderer for the Lit integration.
- */
-export class LitRenderer extends IntegrationRenderer<EcoPagesElement> {
-	override name = PLUGIN_NAME;
-
-	/**
-	 * Renders a Lit component boundary for component-level orchestration.
-	 *
-	 * Includes component-scoped dependency assets when declared.
-	 */
-	override async renderComponent(input: ComponentRenderInput): Promise<ComponentRenderResult> {
-		const component = input.component as (
-			props: Record<string, unknown>,
-		) => 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 hasDependencies = Boolean(input.component.config?.dependencies);
-		const canResolveAssets = typeof this.assetProcessingService?.processDependencies === 'function';
-		const assets =
-			hasDependencies && canResolveAssets
-				? await this.processComponentDependencies([input.component])
-				: undefined;
-
-		return {
-			html,
-			canAttachAttributes: true,
-			rootTag: this.getRootTagName(html),
-			integrationName: this.name,
-			assets,
-		};
-	}
-
-	private readonly ssrLazyPreloader = new LitSsrLazyPreloader({
-		resolveDependencyPath: this.resolveDependencyPath.bind(this),
-		processDependencies: this.assetProcessingService?.processDependencies?.bind(this.assetProcessingService),
-	});
-
-	/**
-	 * Detects preload failures that are expected for browser-only modules.
-	 *
-	 * These errors are treated as non-fatal during SSR preload because some
-	 * lazy client scripts intentionally depend on browser globals.
-	 */
-	protected isExpectedSsrPreloadError(error: unknown): boolean {
-		return this.ssrLazyPreloader.isExpectedSsrPreloadError(error);
-	}
-
-	/**
-	 * Collects lazy script file paths eligible for SSR preloading.
-	 *
-	 * Only per-entry lazy script dependencies with `ssr: true` are collected.
-	 * File-backed entries are required (`src` must be present);
-	 * inline content lazy entries are intentionally skipped.
-	 */
-	protected collectSsrPreloadScripts(components: Array<EcoComponent | undefined>): string[] {
-		return this.ssrLazyPreloader.collectSsrPreloadScripts(components);
-	}
-
-	/**
-	 * Preloads SSR-eligible lazy scripts to register custom elements before render.
-	 */
-	protected async preloadSsrLazyScripts(components: Array<EcoComponent | undefined>): Promise<void> {
-		await this.ssrLazyPreloader.preloadSsrLazyScripts(components);
-	}
-
-	/**
-	 * Resolves the concrete JS entrypoint used for SSR preloading.
-	 *
-	 * Scripts are passed through the asset pipeline so preload imports can use
-	 * the same processed output shape as runtime dependencies.
-	 */
-	protected async resolveSsrPreloadEntrypoint(scriptPath: string): Promise<string | null> {
-		return this.ssrLazyPreloader.resolveSsrPreloadEntrypoint(scriptPath);
-	}
-
-	async render({
-		params,
-		query,
-		props,
-		locals,
-		metadata,
-		Page,
-		Layout,
-		HtmlTemplate,
-	}: IntegrationRendererRenderOptions): Promise<RouteRendererBody> {
-		try {
-			await this.preloadSsrLazyScripts([Page, Layout]);
-
-			const pageContent = await Page({ params, query, ...props, locals });
-			const children = Layout
-				? await (Layout as (props: { children: EcoPagesElement } & Record<string, unknown>) => EcoPagesElement)(
-						{
-							children: pageContent,
-							locals,
-						},
-					)
-				: pageContent;
-
-			const template = (await HtmlTemplate({
-				metadata,
-				children: '<--content-->',
-				pageProps: props || {},
-			})) as string;
-
-			const [templateStart, templateEnd] = template.split('<--content-->');
-
-			const DOC_TYPE = this.DOC_TYPE;
-
-			function* streamBody() {
-				yield DOC_TYPE;
-				yield templateStart;
-				yield* render(unsafeHTML(children));
-				yield templateEnd;
-			}
-
-			return new RenderResultReadable(streamBody());
-		} catch (error) {
-			throw this.createRenderError('Error rendering page', error);
-		}
-	}
-
-	async renderToResponse<P = Record<string, unknown>>(
-		view: EcoComponent<P>,
-		props: P,
-		ctx: RenderToResponseContext,
-	): Promise<Response> {
-		try {
-			const viewConfig = view.config;
-			const Layout = viewConfig?.layout as
-				| ((props: { children: EcoPagesElement } & Record<string, unknown>) => EcoPagesElement)
-				| undefined;
-
-			await this.preloadSsrLazyScripts([view as unknown as EcoComponent, Layout as unknown as EcoComponent]);
-
-			const viewFn = view as (props: P) => Promise<EcoPagesElement>;
-			const pageContent = await viewFn(props);
-
-			if (ctx.partial) {
-				function* streamBody() {
-					yield* render(unsafeHTML(pageContent));
-				}
-				const readable = new RenderResultReadable(streamBody());
-				return this.createHtmlResponse(readable as unknown as BodyInit, ctx);
-			}
-
-			const DOC_TYPE = this.DOC_TYPE;
-			const children = Layout ? await Layout({ children: pageContent }) : pageContent;
-
-			const HtmlTemplate = await this.getHtmlTemplate();
-			const metadata: PageMetadataProps = view.metadata
-				? await view.metadata({
-						params: {},
-						query: {},
-						props: props as Record<string, unknown>,
-						appConfig: this.appConfig,
-					})
-				: this.appConfig.defaultMetadata;
-
-			await this.prepareViewDependencies(view, Layout as EcoComponent | undefined);
-
-			const template = (await HtmlTemplate({
-				metadata,
-				children: '<--content-->',
-				pageProps: props as Record<string, unknown>,
-			})) as string;
-
-			const [templateStart, templateEnd] = template.split('<--content-->');
-
-			function* streamBody() {
-				yield DOC_TYPE;
-				yield templateStart;
-				yield* render(unsafeHTML(children));
-				yield templateEnd;
-			}
-			const stream = new RenderResultReadable(streamBody());
-			const transformedResponse = await this.htmlTransformer.transform(
-				new Response(stream as any, {
-					headers: { 'Content-Type': 'text/html' },
-				}),
-			);
-
-			return this.createHtmlResponse(transformedResponse.body as BodyInit, ctx);
-		} catch (error) {
-			throw this.createRenderError('Error rendering view', error);
-		}
-	}
-}

package/src/lit-ssr-lazy-preloader.ts

@@ -1,202 +0,0 @@
-import type { EcoComponent, EcoComponentConfig } from '@ecopages/core';
-import { AssetFactory } from '@ecopages/core/services/asset-processing-service';
-import type { AssetDefinition } from '@ecopages/core/services/asset-processing-service';
-import path from 'node:path';
-import { pathToFileURL } from 'node:url';
-
-type ProcessDependencies = (
-	dependencies: AssetDefinition[],
-	integrationName: string,
-) => Promise<Array<{ filepath?: string }>>;
-
-export interface LitSsrLazyPreloaderOptions {
-	resolveDependencyPath: (componentDir: string, sourcePath: string) => string;
-	processDependencies?: ProcessDependencies;
-}
-
-/**
- * Encapsulates SSR lazy script preload behavior for Lit components.
- *
- * Collects `dependencies.scripts` lazy entries with `ssr: true`, resolves the
- * processed entrypoint through the asset pipeline, and imports the module so
- * custom elements are registered before SSR rendering.
- */
-export class LitSsrLazyPreloader {
-	private readonly resolveDependencyPath: (componentDir: string, sourcePath: string) => string;
-	private readonly processDependencies?: ProcessDependencies;
-	private readonly ssrPreloadedScripts = new Set<string>();
-	private readonly ssrPreloadFailedScripts = new Set<string>();
-	private readonly ssrPreloadEntrypointCache = new Map<string, string>();
-
-	constructor({ resolveDependencyPath, processDependencies }: LitSsrLazyPreloaderOptions) {
-		this.resolveDependencyPath = resolveDependencyPath;
-		this.processDependencies = processDependencies;
-	}
-
-	/**
-	 * Detects preload failures that are expected for browser-only modules.
-	 */
-	isExpectedSsrPreloadError(error: unknown): boolean {
-		const errorMessage = error instanceof Error ? error.message : String(error);
-		const errorCode =
-			typeof error === 'object' && error !== null && 'code' in error
-				? String((error as { code?: unknown }).code ?? '')
-				: '';
-
-		if (errorCode === 'ERR_UNKNOWN_FILE_EXTENSION') {
-			return true;
-		}
-
-		return (
-			errorMessage.includes(`reading 'Element'`) ||
-			errorMessage.includes('window is not defined') ||
-			errorMessage.includes('document is not defined') ||
-			errorMessage.includes('navigator is not defined')
-		);
-	}
-
-	/**
-	 * Collects lazy script file paths eligible for SSR preloading.
-	 */
-	collectSsrPreloadScripts(components: Array<EcoComponent | undefined>): string[] {
-		const scriptPaths = new Set<string>();
-		const visitedConfigs = new Set<EcoComponentConfig>();
-
-		const collect = (component?: EcoComponent) => {
-			const config = component?.config;
-			if (!config || visitedConfigs.has(config)) {
-				return;
-			}
-
-			visitedConfigs.add(config);
-
-			const scriptEntries = config.dependencies?.scripts ?? [];
-			const componentFile = config.__eco?.file;
-
-			if (componentFile) {
-				const componentDir = path.dirname(componentFile);
-				for (const script of scriptEntries) {
-					if (typeof script === 'string') {
-						continue;
-					}
-
-					if (!script.lazy || script.ssr !== true) {
-						continue;
-					}
-
-					if (!script.src) {
-						continue;
-					}
-
-					scriptPaths.add(this.resolveDependencyPath(componentDir, script.src));
-				}
-			}
-
-			if (config.layout) {
-				collect(config.layout);
-			}
-
-			for (const nestedComponent of config.dependencies?.components || []) {
-				collect(nestedComponent);
-			}
-		};
-
-		for (const component of components) {
-			collect(component);
-		}
-
-		return Array.from(scriptPaths);
-	}
-
-	/**
-	 * Preloads SSR-eligible lazy scripts to register custom elements before render.
-	 */
-	async preloadSsrLazyScripts(components: Array<EcoComponent | undefined>): Promise<void> {
-		const scripts = this.collectSsrPreloadScripts(components);
-		if (scripts.length === 0) {
-			return;
-		}
-
-		await Promise.all(
-			scripts
-				.filter((scriptPath) => {
-					if (this.ssrPreloadedScripts.has(scriptPath)) {
-						return false;
-					}
-					if (this.ssrPreloadFailedScripts.has(scriptPath)) {
-						return false;
-					}
-					return true;
-				})
-				.map(async (scriptPath) => {
-					const preloadEntrypoint = await this.resolveSsrPreloadEntrypoint(scriptPath);
-					if (!preloadEntrypoint) {
-						this.ssrPreloadFailedScripts.add(scriptPath);
-						return;
-					}
-
-					try {
-						await import(pathToFileURL(preloadEntrypoint).href);
-						this.ssrPreloadedScripts.add(scriptPath);
-					} catch (error) {
-						this.ssrPreloadFailedScripts.add(scriptPath);
-
-						if (this.isExpectedSsrPreloadError(error)) {
-							if (process.env.ECOPAGES_DEBUG === 'true') {
-								console.warn(
-									`[ecopages][lit] Skipping SSR preload for browser-only lazy script: ${scriptPath}`,
-								);
-							}
-							return;
-						}
-
-						console.warn(`[ecopages][lit] Failed to preload lazy SSR script: ${scriptPath}`, error);
-					}
-				}),
-		);
-	}
-
-	/**
-	 * Resolves the concrete JS entrypoint used for SSR preloading.
-	 */
-	async resolveSsrPreloadEntrypoint(scriptPath: string): Promise<string | null> {
-		const cachedEntrypoint = this.ssrPreloadEntrypointCache.get(scriptPath);
-		if (cachedEntrypoint) {
-			return cachedEntrypoint;
-		}
-
-		if (!this.processDependencies) {
-			return scriptPath;
-		}
-
-		try {
-			const processed = await this.processDependencies(
-				[
-					AssetFactory.createInlineFileScript({
-						filepath: scriptPath,
-						position: 'head',
-						bundle: true,
-						attributes: {
-							type: 'module',
-							defer: '',
-						},
-					}),
-				],
-				`lit-ssr-preload:${scriptPath}`,
-			);
-
-			const entrypoint = processed[0]?.filepath;
-			if (!entrypoint) {
-				return scriptPath;
-			}
-
-			this.ssrPreloadEntrypointCache.set(scriptPath, entrypoint);
-			return entrypoint;
-		} catch (error) {
-			if (process.env.ECOPAGES_DEBUG === 'true') {
-				console.warn(`[ecopages][lit] Failed to resolve SSR preload entrypoint for: ${scriptPath}`, error);
-			}
-			return scriptPath;
-		}
-	}
-}

package/src/lit.plugin.ts

@@ -1,70 +0,0 @@
-/**
- * This module contains the Lit plugin
- * @module
- */
-
-import '@lit-labs/ssr/lib/install-global-dom-shim.js';
-import './console';
-import { IntegrationPlugin, type IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
-import { type AssetDefinition, AssetFactory } from '@ecopages/core/services/asset-processing-service';
-import { litElementHydrateScript } from './lit-element-hydrate.ts';
-import { LitRenderer } from './lit-renderer.ts';
-
-/**
- * The name of the Lit plugin
- */
-export const PLUGIN_NAME = 'lit';
-
-/**
- * The Lit plugin class
- * This plugin provides support for Lit components in Ecopages
- */
-export class LitPlugin extends IntegrationPlugin {
-	renderer = LitRenderer;
-
-	constructor(options?: Omit<IntegrationPluginConfig, 'name'>) {
-		super({
-			name: PLUGIN_NAME,
-			extensions: ['.lit.tsx'],
-			staticBuildStep: 'fetch',
-			...options,
-		});
-
-		this.integrationDependencies.unshift(...this.getDependencies());
-	}
-
-	getDependencies(): AssetDefinition[] {
-		return [
-			/**
-			 * BUG ALERT
-			 * Due to an issue appeared in Bun 1.2.2, we need to use a workaround to import the hydrate script.
-			 * This is a temporary solution until the issue is resolved.
-			 * The litElementHydrateScript is the same file built on Bun 1.1.45.
-			 * https://github.com/oven-sh/bun/issues/17180
-			 *
-			 * AssetFactory.createNodeModuleScript({
-			 *    position: 'head',
-			 *    importPath: '@lit-labs/ssr-client/lit-element-hydrate-support.js'
-			 * })
-			 */
-			AssetFactory.createInlineContentScript({
-				position: 'head',
-				content: litElementHydrateScript,
-				bundle: false,
-				attributes: {
-					'data-eco-rerun': 'true',
-					'data-eco-script-id': 'lit-hydrate-support',
-				},
-			}),
-		];
-	}
-}
-
-/**
- * Factory function to create a Lit plugin instance
- * @param options Configuration options for the Lit plugin
- * @returns A new LitPlugin instance
- */
-export function litPlugin(options?: Omit<IntegrationPluginConfig, 'name'>): LitPlugin {
-	return new LitPlugin(options);
-}

package/src/styled-mixin.ts

@@ -1,27 +0,0 @@
-/**
- * This module contains StyledMixin
- * It is used to add styles to a LitElement
- * @module
- */
-import { type LitElement, unsafeCSS } from 'lit';
-
-type Constructor<T> = new (...args: any[]) => T;
-
-/**
- * A mixin to add styles to a LitElement
- * @param superClass - The class to mix into
- * @param css - The styles to add
- * @returns The class with the styles added
- */
-export const StyledMixin = <T extends Constructor<LitElement>>(
-	superClass: T,
-	css: string[] = [],
-): Constructor<LitElement> & T => {
-	class StyledMixinClass extends superClass {
-		static styles = [
-			(superClass as unknown as typeof LitElement).styles ?? [],
-			...css.map((styles) => unsafeCSS(styles)),
-		];
-	}
-	return StyledMixinClass as Constructor<LitElement> & T;
-};