@ecopages/lit 0.2.1-beta.0 → 0.3.0

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

@@ -0,0 +1,181 @@
+import { Worker } from 'node:worker_threads';
+import { fileURLToPath } from 'node:url';
+const workerShutdownTimeoutMs = 30_000;
+const workerExitTimeoutMs = 1_000;
+export class LitStaticRenderWorkerClient {
+    configModulePath;
+    runtimeOrigin;
+    worker = null;
+    workerExitPromise = null;
+    workerExitCode = null;
+    readyPromise = null;
+    pending = new Map();
+    nextRenderId = 0;
+    shutdownHandler = null;
+    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;
+            this.workerExitCode = null;
+            this.workerExitPromise = new Promise((resolveExit) => {
+                worker.once('exit', resolveExit);
+            });
+            worker.on('message', (message) => {
+                if (message.type === 'ready') {
+                    resolveReady();
+                    return;
+                }
+                if (message.type === 'shutdown-complete') {
+                    this.shutdownHandler?.resolve();
+                    this.shutdownHandler = null;
+                    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;
+                    }
+                    const error = new Error(message.message);
+                    this.shutdownHandler?.reject(error);
+                    this.shutdownHandler = null;
+                    rejectReady(error);
+                    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,
+                        sourceDependencyPaths: message.sourceDependencyPaths,
+                        metadata: message.metadata,
+                    });
+                }
+            });
+            worker.on('error', (error) => {
+                rejectReady(error instanceof Error ? error : new Error(String(error)));
+            });
+            worker.on('exit', (code) => {
+                this.workerExitCode = code;
+                const exitError = new Error(code === 0
+                    ? 'Lit static render worker exited'
+                    : `Lit static render worker exited with code ${code}`);
+                this.rejectPending(exitError);
+                this.shutdownHandler?.reject(exitError);
+                this.shutdownHandler = null;
+                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;
+        const workerExit = this.workerExitPromise ?? Promise.resolve(this.workerExitCode ?? 0);
+        this.worker = null;
+        this.workerExitPromise = null;
+        this.readyPromise = null;
+        if (this.workerExitCode !== null) {
+            if (this.workerExitCode !== 0) {
+                throw new Error(`Lit static render worker exited with code ${this.workerExitCode}`);
+            }
+            return;
+        }
+        let shutdownTimeout;
+        const shutdownComplete = new Promise((resolve, reject) => {
+            shutdownTimeout = setTimeout(() => reject(new Error('Lit static render worker shutdown timed out')), workerShutdownTimeoutMs);
+            this.shutdownHandler = {
+                resolve: () => {
+                    if (shutdownTimeout)
+                        clearTimeout(shutdownTimeout);
+                    resolve();
+                },
+                reject: (error) => {
+                    if (shutdownTimeout)
+                        clearTimeout(shutdownTimeout);
+                    reject(error);
+                },
+            };
+        });
+        worker.postMessage({ type: 'shutdown' });
+        let shutdownError;
+        try {
+            await shutdownComplete;
+        }
+        catch (error) {
+            shutdownError = error instanceof Error ? error : new Error(String(error));
+        }
+        if (shutdownTimeout)
+            clearTimeout(shutdownTimeout);
+        const exitResult = await new Promise((resolve) => {
+            const exitTimeout = setTimeout(() => resolve({ timedOut: true }), workerExitTimeoutMs);
+            void workerExit.then((code) => {
+                clearTimeout(exitTimeout);
+                resolve({ code });
+            });
+        });
+        if ('timedOut' in exitResult) {
+            await worker.terminate();
+        }
+        else if (exitResult.code !== 0) {
+            shutdownError ??= new Error(`Lit static render worker exited with code ${exitResult.code}`);
+        }
+        if (shutdownError)
+            throw shutdownError;
+    }
+}
+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,111 @@
+import { parentPort } from 'node:worker_threads';
+import { loadEcoPagesConfig } from '@ecopages/core/config';
+import { setupAppRuntimeIntegrations, setupAppRuntimePlugins, teardownAppRuntimeIntegrations, } from '@ecopages/core/build';
+import { installBuildQueue } from '@ecopages/core/build';
+import { requireAppRuntime } from '@ecopages/core/integration';
+import { RouteRendererFactory } from '@ecopages/core/integration';
+import { toLitStaticRenderResult } from './lit-static-render-result.js';
+import './dom-shim.js';
+let appConfig = null;
+let routeRendererFactory = null;
+let activeRenders = 0;
+let shutdownRequested = false;
+let resolveRendersIdle;
+/**
+ * Loads app config in the worker isolate and bootstraps rendering.
+ *
+ * @remarks
+ * Processor `.setup()` is skipped here because the main thread already prepared disk artifacts
+ * before the Lit worker started (`ECOPAGES_LIT_STATIC_RENDER_WORKER`). Integrations still need
+ * setup in this isolate before route renderers are created.
+ */
+async function initializeWorker(configModulePath, runtimeOrigin) {
+    appConfig = await loadEcoPagesConfig({ configFile: configModulePath });
+    const runtime = requireAppRuntime(appConfig);
+    runtime.origin = runtimeOrigin;
+    await setupAppRuntimePlugins({
+        appConfig,
+    });
+    await setupAppRuntimeIntegrations({ appConfig });
+    installBuildQueue(appConfig);
+    routeRendererFactory = new RouteRendererFactory({
+        appConfig,
+        runtime,
+    });
+}
+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,
+    });
+    return toLitStaticRenderResult(result);
+}
+async function shutdownWorker() {
+    shutdownRequested = true;
+    if (activeRenders > 0) {
+        await new Promise((resolve) => {
+            resolveRendersIdle = resolve;
+        });
+    }
+    try {
+        if (appConfig) {
+            await teardownAppRuntimeIntegrations({ appConfig });
+        }
+        postMessage({ type: 'shutdown-complete' });
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        postMessage({ type: 'error', message: errorMessage });
+    }
+    finally {
+        parentPort?.close();
+    }
+}
+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') {
+            await shutdownWorker();
+            return;
+        }
+        if (message.type === 'render') {
+            if (shutdownRequested) {
+                throw new Error('Lit static render worker is shutting down');
+            }
+            activeRenders += 1;
+            try {
+                const result = await renderPage(message.filePath, message.params, message.query);
+                postMessage({ type: 'result', id: message.id, ...result });
+            }
+            finally {
+                activeRenders -= 1;
+                if (activeRenders === 0) {
+                    resolveRendersIdle?.();
+                    resolveRendersIdle = undefined;
+                }
+            }
+        }
+    }
+    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,8 +3,8 @@
  * @module
  */
 import './console.js';
-import { IntegrationPlugin, type IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
-import { type AssetDefinition } from '@ecopages/core/services/asset-processing-service';
+import { IntegrationPlugin, type IntegrationRendererBase, type IntegrationRuntimeContext, type IntegrationPluginConfig, type StaticExportContext, type StaticExportRelease } from '@ecopages/core/integration';
+import { type AssetDefinition } from '@ecopages/core/integration';
 import { LitRenderer } from './lit-renderer.js';
 /**
  * The name of the Lit plugin
@@ -13,11 +13,44 @@ 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;
+    renderer: new (options: import("@ecopages/core/integration").IntegrationRendererOptions) => import("@ecopages/core/integration").IntegrationRenderer<import("@ecopages/core").EcoPagesElement> & {
+        name: string;
+    };
+    private renderSession;
     constructor(options?: Omit<IntegrationPluginConfig, 'name'>);
+    /**
+     * Returns the global integration dependencies required in the browser.
+     *
+     * @remarks
+     * Injects Lit's hydration support script into the document head before any
+     * custom element connects. While `@lit-labs/ssr-client/lit-element-hydrate-support.js`
+     * can be resolved directly in modern Bun and Node environments, an inline self-contained
+     * script is currently emitted to ensure synchronous availability before custom-element
+     * registration without requiring an import map for `@lit-labs/ssr-client` subpath imports.
+     */
     getDependencies(): AssetDefinition[];
+    private createRenderSession;
+    createRenderer(base: IntegrationRendererBase): LitRenderer;
+    hmr(context: IntegrationRuntimeContext): void;
+    setup(context: IntegrationRuntimeContext): Promise<void>;
+    teardown(): Promise<void>;
+    /**
+     * Reconciles the render worker with the export origin and preloads Lit routes.
+     *
+     * @remarks
+     * `setup()` can start the session with the runtime origin before static export resolves its own base URL. The
+     * session reuses the worker when the identities match and restarts it when the export origin differs. The returned
+     * release stops the worker once the export ends, so an in-process export leaves no worker thread running. A later
+     * render in the same process falls back to rendering in-process.
+     */
+    staticExport(context: StaticExportContext): Promise<StaticExportRelease>;
 }
 /**
  * Factory function to create a Lit plugin instance

package/src/lit.plugin.js

@@ -1,51 +1,141 @@
-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"
+import { CUSTOM_ELEMENT_SSR_PRELOAD_CACHE_SCOPES, invalidateCustomElementScriptPreload, } from '@ecopages/core/integration';
+/**
+ * This module contains the Lit plugin
+ * @module
+ */
+import './console.js';
+import { IntegrationPlugin, } from '@ecopages/core/integration';
+import { isLitStaticRenderWorkerThread } from '@ecopages/core/build';
+import path from 'node:path';
+import { AssetFactory } from '@ecopages/core/integration';
+import { litElementHydrateScript } from './lit-element-hydrate.js';
+import { LIT_PLUGIN_NAME } from './lit.constants.js';
+import { createLitRenderer, 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());
+    }
+    /**
+     * Returns the global integration dependencies required in the browser.
+     *
+     * @remarks
+     * Injects Lit's hydration support script into the document head before any
+     * custom element connects. While `@lit-labs/ssr-client/lit-element-hydrate-support.js`
+     * can be resolved directly in modern Bun and Node environments, an inline self-contained
+     * script is currently emitted to ensure synchronous availability before custom-element
+     * registration without requiring an import map for `@lit-labs/ssr-client` subpath imports.
+     */
+    getDependencies() {
+        return [
+            AssetFactory.createInlineContentScript({
+                position: 'head',
+                content: `(() => {${litElementHydrateScript}})();`,
+                bundle: false,
+                attributes: {
+                    'data-eco-script-id': 'lit-hydrate-support',
+                },
+            }),
+        ];
+    }
+    createRenderSession() {
+        if (!this.appConfig || !this.runtime || !this.assetProcessingService) {
+            throw new Error('Lit plugin must be initialized before starting the render worker');
         }
-      })
-    ];
-  }
+        const assetProcessingService = this.assetProcessingService;
+        return new LitStaticRenderSession({
+            preloadScopes: this.runtime.customElementSsrPreloadScopes,
+            integration: this,
+            resolveDependencyPath: (componentDir, sourcePath) => path.join(componentDir, sourcePath),
+            processDependencies: (dependencies, integration) => assetProcessingService.processDependencies(dependencies, integration),
+            getInvalidationVersion: () => this.runtime?.moduleLoader.getDevelopmentGeneration() ?? 0,
+        });
+    }
+    createRenderer(base) {
+        const Renderer = this.renderer === LitRenderer ? createLitRenderer(() => this.renderSession ?? undefined) : this.renderer;
+        const renderer = new Renderer(base);
+        renderer.name ||= this.name;
+        return renderer;
+    }
+    hmr(context) {
+        super.hmr(context);
+        const manager = context.runtime.hmr;
+        if (!manager)
+            return;
+        const preloadScopes = context.runtime.customElementSsrPreloadScopes;
+        manager.onScriptEntrypointChanged?.((scriptPath) => {
+            invalidateCustomElementScriptPreload(preloadScopes, scriptPath, CUSTOM_ELEMENT_SSR_PRELOAD_CACHE_SCOPES.lit);
+        });
+    }
+    async setup(context) {
+        await super.setup(context);
+        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: context.runtime.origin,
+        });
+    }
+    async teardown() {
+        await this.renderSession?.dispose();
+        this.renderSession = null;
+        await super.teardown();
+    }
+    /**
+     * Reconciles the render worker with the export origin and preloads Lit routes.
+     *
+     * @remarks
+     * `setup()` can start the session with the runtime origin before static export resolves its own base URL. The
+     * session reuses the worker when the identities match and restarts it when the export origin differs. The returned
+     * release stops the worker once the export ends, so an in-process export leaves no worker thread running. A later
+     * render in the same process falls back to rendering in-process.
+     */
+    async staticExport(context) {
+        this.renderSession ??= this.createRenderSession();
+        await this.renderSession.ensureWorker({
+            configModulePath: context.appConfig.absolutePaths.config,
+            runtimeOrigin: context.baseUrl,
+        });
+        const session = this.renderSession;
+        await session.preloadStaticRoutes(context);
+        return async () => {
+            await session.dispose();
+            if (this.renderSession === session) {
+                this.renderSession = null;
+            }
+        };
+    }
 }
-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;
 };