@ecopages/lit 0.2.0-beta.4 → 0.2.0-beta.40

package/src/lit-static-render-worker-client.js

@@ -0,0 +1,109 @@
+import { Worker } from 'node:worker_threads';
+import { fileURLToPath } from 'node:url';
+export class LitStaticRenderWorkerClient {
+    configModulePath;
+    runtimeOrigin;
+    worker = null;
+    readyPromise = null;
+    pending = new Map();
+    nextRenderId = 0;
+    constructor({ configModulePath, runtimeOrigin }) {
+        this.configModulePath = configModulePath;
+        this.runtimeOrigin = runtimeOrigin;
+    }
+    rejectPending(error) {
+        for (const pending of this.pending.values()) {
+            pending.reject(error);
+        }
+        this.pending.clear();
+    }
+    async start() {
+        if (this.readyPromise) {
+            return this.readyPromise;
+        }
+        this.readyPromise = new Promise((resolveReady, rejectReady) => {
+            const worker = new Worker(new URL('./lit-static-render-worker.js', import.meta.url), {
+                execArgv: [...process.execArgv],
+                env: {
+                    ...process.env,
+                    ECOPAGES_LIT_STATIC_RENDER_WORKER: 'true',
+                },
+            });
+            this.worker = worker;
+            worker.on('message', (message) => {
+                if (message.type === 'ready') {
+                    resolveReady();
+                    return;
+                }
+                if (message.type === 'error') {
+                    if (message.id && this.pending.has(message.id)) {
+                        const pending = this.pending.get(message.id);
+                        this.pending.delete(message.id);
+                        pending.reject(new Error(message.message));
+                        return;
+                    }
+                    rejectReady(new Error(message.message));
+                    return;
+                }
+                if (message.type === 'result') {
+                    const pending = this.pending.get(message.id);
+                    if (!pending) {
+                        return;
+                    }
+                    this.pending.delete(message.id);
+                    pending.resolve({ html: message.html, cacheStrategy: message.cacheStrategy });
+                }
+            });
+            worker.on('error', (error) => {
+                rejectReady(error instanceof Error ? error : new Error(String(error)));
+            });
+            worker.on('exit', (code) => {
+                const exitError = new Error(code === 0
+                    ? 'Lit static render worker exited'
+                    : `Lit static render worker exited with code ${code}`);
+                this.rejectPending(exitError);
+                if (code !== 0) {
+                    rejectReady(exitError);
+                }
+            });
+            const initMessage = {
+                type: 'init',
+                configModulePath: this.configModulePath,
+                runtimeOrigin: this.runtimeOrigin,
+            };
+            worker.postMessage(initMessage);
+        });
+        return this.readyPromise;
+    }
+    async renderPage(input) {
+        await this.start();
+        const worker = this.worker;
+        if (!worker) {
+            throw new Error('Lit static render worker is not available');
+        }
+        const id = String(++this.nextRenderId);
+        return new Promise((resolve, reject) => {
+            this.pending.set(id, { resolve, reject });
+            const renderMessage = {
+                type: 'render',
+                id,
+                filePath: input.filePath,
+                params: input.params,
+                query: input.query,
+            };
+            worker.postMessage(renderMessage);
+        });
+    }
+    async dispose() {
+        if (!this.worker) {
+            return;
+        }
+        this.rejectPending(new Error('Lit static render worker was disposed'));
+        const worker = this.worker;
+        this.worker = null;
+        this.readyPromise = null;
+        worker.postMessage({ type: 'shutdown' });
+        await worker.terminate();
+    }
+}
+export const litStaticRenderWorkerEntryPath = fileURLToPath(new URL('./lit-static-render-worker.js', import.meta.url));

package/src/lit-static-render-worker.d.ts

@@ -0,0 +1 @@
+import './dom-shim.js';

package/src/lit-static-render-worker.js

@@ -0,0 +1,80 @@
+import { parentPort } from 'node:worker_threads';
+import { pathToFileURL } from 'node:url';
+import { setupAppRuntimePlugins } from '@ecopages/core/build/build-adapter';
+import { installBuildRuntime } from '@ecopages/core/build/build-runtime';
+import { RouteRendererFactory } from '@ecopages/core/route-renderer/route-renderer';
+import './dom-shim.js';
+let appConfig = null;
+let routeRendererFactory = null;
+/**
+ * Loads app config in the worker isolate and bootstraps rendering.
+ *
+ * @remarks
+ * Processor `.setup()` is skipped here — the main thread already prepared disk artifacts
+ * before the Lit worker started (`ECOPAGES_LIT_STATIC_RENDER_WORKER`).
+ */
+async function initializeWorker(configModulePath, runtimeOrigin) {
+    const configModule = await import(/* @vite-ignore */ pathToFileURL(configModulePath).href);
+    appConfig = (configModule.default ?? configModule);
+    await setupAppRuntimePlugins({
+        appConfig,
+        runtimeOrigin,
+    });
+    installBuildRuntime(appConfig);
+    routeRendererFactory = new RouteRendererFactory({
+        appConfig,
+        runtimeOrigin,
+    });
+}
+async function renderPage(filePath, params, query) {
+    if (!routeRendererFactory) {
+        throw new Error('Lit static render worker is not initialized');
+    }
+    const result = await routeRendererFactory.getPageRenderer(filePath).execute({
+        file: filePath,
+        params,
+        query,
+    });
+    const body = result.body;
+    if (typeof body === 'string') {
+        return { html: body, cacheStrategy: result.cacheStrategy };
+    }
+    if (Buffer.isBuffer(body)) {
+        return { html: body.toString('utf8'), cacheStrategy: result.cacheStrategy };
+    }
+    if (body instanceof ReadableStream) {
+        return { html: await new Response(body).text(), cacheStrategy: result.cacheStrategy };
+    }
+    throw new TypeError(`Unsupported Lit static render body type: ${typeof body}`);
+}
+function postMessage(message) {
+    parentPort?.postMessage(message);
+}
+if (!parentPort) {
+    throw new Error('Lit static render worker must be started as a worker thread');
+}
+parentPort.on('message', async (message) => {
+    try {
+        if (message.type === 'init') {
+            await initializeWorker(message.configModulePath, message.runtimeOrigin);
+            postMessage({ type: 'ready' });
+            return;
+        }
+        if (message.type === 'shutdown') {
+            process.exit(0);
+            return;
+        }
+        if (message.type === 'render') {
+            const result = await renderPage(message.filePath, message.params, message.query);
+            postMessage({ type: 'result', id: message.id, ...result });
+        }
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        if (message.type === 'render') {
+            postMessage({ type: 'error', id: message.id, message: errorMessage });
+            return;
+        }
+        postMessage({ type: 'error', message: errorMessage });
+    }
+});

package/src/lit.constants.js

@@ -1,4 +1 @@
-const LIT_PLUGIN_NAME = "lit";
-export {
-  LIT_PLUGIN_NAME
-};
+export const LIT_PLUGIN_NAME = 'lit';

package/src/lit.plugin.d.ts

@@ -3,7 +3,7 @@
  * @module
  */
 import './console.js';
-import { IntegrationPlugin, type IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
+import { IntegrationPlugin, type IntegrationPluginConfig, type StaticExportContext } from '@ecopages/core/plugins/integration-plugin';
 import { type AssetDefinition } from '@ecopages/core/services/asset-processing-service';
 import { LitRenderer } from './lit-renderer.js';
 /**
@@ -13,11 +13,24 @@ export declare const PLUGIN_NAME = "lit";
 /**
  * The Lit plugin class
  * This plugin provides support for Lit components in Ecopages
+ *
+ * @remarks
+ * Owns the {@link LitStaticRenderSession} for worker SSR. Renderers receive a
+ * lazy `getRenderSession` accessor so construction before {@link setup} still
+ * observes the session once setup assigns it.
  */
 export declare class LitPlugin extends IntegrationPlugin {
     renderer: typeof LitRenderer;
+    private renderSession;
     constructor(options?: Omit<IntegrationPluginConfig, 'name'>);
     getDependencies(): AssetDefinition[];
+    private createRenderSession;
+    initializeRenderer(options?: {
+        rendererModules?: unknown;
+    }): LitRenderer;
+    setup(): Promise<void>;
+    teardown(): Promise<void>;
+    beforeStaticExport(context: StaticExportContext): Promise<void>;
 }
 /**
  * Factory function to create a Lit plugin instance

package/src/lit.plugin.js

@@ -1,51 +1,116 @@
-import "./console.js";
-import { IntegrationPlugin } from "@ecopages/core/plugins/integration-plugin";
-import { AssetFactory } from "@ecopages/core/services/asset-processing-service";
-import { litElementHydrateScript } from "./lit-element-hydrate.js";
-import { LIT_PLUGIN_NAME } from "./lit.constants.js";
-import { LitRenderer } from "./lit-renderer.js";
-const PLUGIN_NAME = LIT_PLUGIN_NAME;
-class LitPlugin extends IntegrationPlugin {
-  renderer = LitRenderer;
-  constructor(options) {
-    super({
-      name: PLUGIN_NAME,
-      extensions: [".lit.tsx"],
-      staticBuildStep: "fetch",
-      ...options
-    });
-    this.integrationDependencies.unshift(...this.getDependencies());
-  }
-  getDependencies() {
-    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-script-id": "lit-hydrate-support"
+/**
+ * This module contains the Lit plugin
+ * @module
+ */
+import './console.js';
+import { IntegrationPlugin, } from '@ecopages/core/plugins/integration-plugin';
+import { isLitStaticRenderWorkerThread } from '@ecopages/core/build/lit-static-render-worker-context';
+import path from 'node:path';
+import { AssetFactory } from '@ecopages/core/services/asset-processing-service';
+import { litElementHydrateScript } from './lit-element-hydrate.js';
+import { LIT_PLUGIN_NAME } from './lit.constants.js';
+import { LitRenderer } from './lit-renderer.js';
+import { LitStaticRenderSession } from './lit-static-render-session.js';
+/**
+ * The name of the Lit plugin
+ */
+export const PLUGIN_NAME = LIT_PLUGIN_NAME;
+/**
+ * The Lit plugin class
+ * This plugin provides support for Lit components in Ecopages
+ *
+ * @remarks
+ * Owns the {@link LitStaticRenderSession} for worker SSR. Renderers receive a
+ * lazy `getRenderSession` accessor so construction before {@link setup} still
+ * observes the session once setup assigns it.
+ */
+export class LitPlugin extends IntegrationPlugin {
+    renderer = LitRenderer;
+    renderSession = null;
+    constructor(options) {
+        super({
+            name: PLUGIN_NAME,
+            extensions: ['.lit.tsx'],
+            ...options,
+        });
+        this.integrationDependencies.unshift(...this.getDependencies());
+    }
+    getDependencies() {
+        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-script-id': 'lit-hydrate-support',
+                },
+            }),
+        ];
+    }
+    createRenderSession() {
+        if (!this.appConfig || !this.assetProcessingService) {
+            throw new Error('Lit plugin must be initialized before starting the render worker');
         }
-      })
-    ];
-  }
+        return new LitStaticRenderSession({
+            resolveDependencyPath: (componentDir, sourcePath) => path.join(componentDir, sourcePath),
+            processDependencies: this.assetProcessingService.processDependencies.bind(this.assetProcessingService),
+            preferSourceImports: typeof Bun !== 'undefined',
+        });
+    }
+    initializeRenderer(options) {
+        const renderer = new this.renderer({
+            ...this.createRendererOptions(options),
+            getRenderSession: () => this.renderSession ?? undefined,
+        });
+        return this.attachRendererRuntimeServices(renderer);
+    }
+    async setup() {
+        await super.setup();
+        if (!this.appConfig?.absolutePaths?.config) {
+            throw new Error('[ecopages][lit] Lit server rendering requires appConfig.absolutePaths.config');
+        }
+        if (isLitStaticRenderWorkerThread()) {
+            return;
+        }
+        this.renderSession = this.createRenderSession();
+        await this.renderSession.ensureWorker({
+            configModulePath: this.appConfig.absolutePaths.config,
+            runtimeOrigin: this.runtimeOrigin,
+        });
+    }
+    async teardown() {
+        await this.renderSession?.dispose();
+        this.renderSession = null;
+        await super.teardown();
+    }
+    async beforeStaticExport(context) {
+        if (!this.renderSession) {
+            this.renderSession = this.createRenderSession();
+            await this.renderSession.ensureWorker({
+                configModulePath: context.appConfig.absolutePaths.config,
+                runtimeOrigin: context.baseUrl,
+            });
+        }
+        await this.renderSession.preloadStaticRoutes(context);
+    }
 }
-function litPlugin(options) {
-  return new LitPlugin(options);
+/**
+ * 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) {
+    return new LitPlugin(options);
 }
-export {
-  LitPlugin,
-  PLUGIN_NAME,
-  litPlugin
-};

package/src/styled-mixin.js

@@ -1,13 +1,21 @@
-import { unsafeCSS } from "lit";
-const StyledMixin = (superClass, css = []) => {
-  class StyledMixinClass extends superClass {
-    static styles = [
-      superClass.styles ?? [],
-      ...css.map((styles) => unsafeCSS(styles))
-    ];
-  }
-  return StyledMixinClass;
-};
-export {
-  StyledMixin
+/**
+ * This module contains StyledMixin
+ * It is used to add styles to a LitElement
+ * @module
+ */
+import { unsafeCSS } from 'lit';
+/**
+ * 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 = (superClass, css = []) => {
+    class StyledMixinClass extends superClass {
+        static styles = [
+            superClass.styles ?? [],
+            ...css.map((styles) => unsafeCSS(styles)),
+        ];
+    }
+    return StyledMixinClass;
 };

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

@@ -1,52 +1,45 @@
-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;";
+import { render } from '@lit-labs/ssr';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
+export const LIT_HTML_TEMPLATE_SLOT_MARKER = '<--content-->';
+export 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, "");
+export 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);
+export 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}`;
+    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;
+export async function renderLitValueToString(value) {
+    if (typeof value === 'string') {
+        let renderedHtml = '';
+        for (const chunk of render(staticHtml `${unsafeStatic(value)}`)) {
+            renderedHtml += chunk;
+        }
+        return normalizeLitHtml(renderedHtml);
+    }
+    let renderedHtml = '';
+    for (const chunk of render(value)) {
+        renderedHtml += chunk;
     }
-    return normalizeLitHtml(renderedHtml2);
-  }
-  let renderedHtml = "";
-  for (const chunk of render(value)) {
-    renderedHtml += chunk;
-  }
-  return normalizeLitHtml(renderedHtml);
+    return normalizeLitHtml(renderedHtml);
 }
-export {
-  LIT_COMPONENT_CHILDREN_SLOT_MARKER,
-  LIT_HTML_TEMPLATE_SLOT_MARKER,
-  injectLitRenderedChildren,
-  normalizeLitHtml,
-  renderLitValueToString
-};