@ecopages/ecopages-jsx 0.2.0-alpha.26 → 0.2.0-alpha.28

package/src/ecopages-jsx-renderer.js

@@ -1,27 +1,25 @@
-import { rapidhash } from "@ecopages/core/hash";
-import { existsSync, readFileSync } from "node:fs";
-import path from "node:path";
 import {
   IntegrationRenderer
 } from "@ecopages/core/route-renderer/integration-renderer";
 import { createMarkupNodeLike } from "@ecopages/jsx";
 import { renderToString, withServerCustomElementRenderHook } from "@ecopages/jsx/server";
 import { ECOPAGES_JSX_PLUGIN_NAME } from "./ecopages-jsx.constants.js";
+import {
+  isMdxFile,
+  normalizeMdxPageModule
+} from "./ecopages-jsx-mdx.js";
+import { EcopagesJsxRenderSession } from "./ecopages-jsx-render-session.js";
+import { EcopagesJsxRadiantSsrPolicy } from "./ecopages-jsx-radiant-ssr-policy.js";
 class EcopagesJsxRenderer extends IntegrationRenderer {
   name = ECOPAGES_JSX_PLUGIN_NAME;
-  static radiantServerRuntimeInstallPromise;
-  static SCRIPT_IMPORT_RE = /import\s+(?:[^'";]+\s+from\s+)?['"](\.[^'"\n]*\.script(?:\.[cm]?[jt]sx?)?)['"]/g;
-  intrinsicCustomElementAssets;
-  intrinsicCustomElementScriptFiles;
-  collectedAssetFrames = [];
-  importedIntrinsicScriptFrames = [];
   mdxExtensions;
-  radiantSsrEnabled;
+  renderSession;
+  radiantSsrPolicy;
   /**
    * Re-renders queued JSX children inside the owning renderer so nested custom
-   * elements and queued foreign boundaries contribute assets to the same frame.
+   * elements and queued foreign subtrees contribute assets to the same frame.
    */
-  async renderQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken) {
+  async renderQueuedForeignSubtreeChildren(children, queuedResolutionsByToken, resolveToken) {
     if (children === void 0) {
       return { assets: [] };
     }
@@ -34,24 +32,32 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       html = renderedChildren.html;
       assets = renderedChildren.assets;
     }
-    html = await this.resolveQueuedBoundaryTokens(html, queuedResolutionsByToken, resolveToken);
+    html = await this.foreignSubtreeExecutionService.resolveQueuedTokens(
+      html,
+      queuedResolutionsByToken,
+      resolveToken
+    );
     return {
       assets,
       html
     };
   }
   /**
-   * Resolves queued foreign boundaries after JSX has been stringified.
+   * Resolves queued foreign subtrees after JSX has been stringified.
    *
-   * JSX content needs one extra render pass because child boundaries may emit
+   * JSX content needs one extra render pass because child foreign subtrees may emit
    * additional browser assets while also replacing placeholder tokens.
    */
-  async resolveOwnedBoundaryHtml(html, runtimeContext) {
-    return this.resolveRendererOwnedQueuedBoundaryHtml({
+  async resolveOwnedForeignSubtreeHtml(html, runtimeContext) {
+    return this.foreignSubtreeExecutionService.resolveQueuedHtml({
+      currentIntegrationName: this.name,
       html,
       runtimeContext,
       queueLabel: "Ecopages JSX",
-      renderQueuedChildren: async (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => this.renderQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken)
+      getOwningRenderer: (integrationName, rendererCache) => this.getIntegrationRendererForName(integrationName, rendererCache),
+      applyAttributesToFirstElement: (resolvedHtml, attributes) => this.htmlTransformer.applyAttributesToFirstElement(resolvedHtml, attributes),
+      dedupeProcessedAssets: (assets) => this.htmlTransformer.dedupeProcessedAssets(assets),
+      renderQueuedChildren: async (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => this.renderQueuedForeignSubtreeChildren(children, queuedResolutionsByToken, resolveToken)
     });
   }
   constructor({
@@ -67,345 +73,126 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       resolvedIntegrationDependencies,
       runtimeOrigin
     });
-    this.intrinsicCustomElementAssets = jsxConfig?.intrinsicCustomElementAssets ?? /* @__PURE__ */ new Map();
-    this.intrinsicCustomElementScriptFiles = jsxConfig?.intrinsicCustomElementScriptFiles ?? /* @__PURE__ */ new Map();
     this.mdxExtensions = jsxConfig?.mdxExtensions ?? [".mdx"];
-    this.radiantSsrEnabled = jsxConfig?.radiantSsrEnabled ?? false;
+    this.renderSession = new EcopagesJsxRenderSession(
+      (assets) => this.htmlTransformer.dedupeProcessedAssets(assets)
+    );
+    this.radiantSsrPolicy = jsxConfig?.radiantSsrPolicy ?? new EcopagesJsxRadiantSsrPolicy(jsxConfig?.radiantSsrEnabled ?? false);
   }
   /** Returns whether the requested page file should be treated as MDX. */
   isMdxFile(filePath) {
-    return this.mdxExtensions.some((ext) => filePath.endsWith(ext));
+    return isMdxFile(filePath, this.mdxExtensions);
   }
   async importPageFile(file, options) {
-    await this.ensureRadiantServerRuntimeIfEnabled();
+    await this.radiantSsrPolicy.prepareRuntime();
     const module = await super.importPageFile(file, options);
-    return this.isMdxFile(file) ? this.normalizeMdxPageModule(file, module) : module;
+    return this.isMdxFile(file) ? normalizeMdxPageModule(file, module) : module;
   }
   async render(options) {
-    const importedScriptFrame = this.beginImportedIntrinsicScriptFrame([
-      options.Page,
-      options.Layout,
-      options.HtmlTemplate
-    ]);
-    try {
-      return await this.renderPageWithDocumentShell({
-        page: {
-          component: options.Page,
-          props: {
-            ...options.pageProps,
-            locals: options.pageLocals
-          }
-        },
-        layout: options.Layout ? {
-          component: options.Layout,
-          props: {
-            ...options.pageProps,
-            locals: options.locals
-          }
-        } : void 0,
-        htmlTemplate: options.HtmlTemplate,
-        metadata: options.metadata,
-        pageProps: options.pageProps ?? {}
-      });
-    } catch (error) {
-      throw this.createRenderError("Error rendering page", error);
-    } finally {
-      this.endImportedIntrinsicScriptFrame(importedScriptFrame);
-    }
+    return await this.renderSession.withActiveScope(async () => {
+      try {
+        return await this.renderPageWithDocumentShell({
+          page: {
+            component: options.Page,
+            props: {
+              ...options.pageProps,
+              locals: options.pageLocals
+            }
+          },
+          layout: options.Layout ? {
+            component: options.Layout,
+            props: {
+              ...options.pageProps,
+              locals: options.locals
+            }
+          } : void 0,
+          htmlTemplate: options.HtmlTemplate,
+          metadata: options.metadata,
+          pageProps: options.pageProps ?? {}
+        });
+      } catch (error) {
+        throw this.createRenderError("Error rendering page", error);
+      }
+    });
   }
   async renderComponent(input) {
-    const importedScriptFrame = this.beginImportedIntrinsicScriptFrame([input.component]);
-    const assetFrame = this.beginCollectedAssetFrame();
-    try {
-      if (!this.isFunctionComponent(input.component)) {
-        throw new TypeError("JSX renderer expected a callable component.");
+    return await this.renderSession.withActiveScope(async () => {
+      const assetFrame = this.renderSession.beginCollectedAssetFrame();
+      try {
+        if (typeof input.component !== "function") {
+          throw new TypeError("JSX renderer expected a callable component.");
+        }
+        const component = input.component;
+        const componentProps = input.children === void 0 ? input.props : {
+          ...input.props,
+          children: typeof input.children === "string" ? createMarkupNodeLike(input.children) : input.children
+        };
+        const componentAssetsFromRender = [];
+        const content = await this.withCustomElementRenderHook(
+          componentAssetsFromRender,
+          () => component(componentProps)
+        );
+        this.renderSession.recordCollectedAssets(componentAssetsFromRender);
+        const rendered = await this.renderJsx(content);
+        const queuedForeignSubtreeResolution = await this.resolveOwnedForeignSubtreeHtml(
+          rendered.html,
+          this.getQueuedForeignSubtreeResolutionContext(input)
+        );
+        const componentAssets = input.component.config?.dependencies && typeof this.assetProcessingService?.processDependencies === "function" ? await this.processComponentDependencies([input.component]) : [];
+        const assets = this.htmlTransformer.dedupeProcessedAssets([
+          ...this.renderSession.endCollectedAssetFrame(assetFrame),
+          ...queuedForeignSubtreeResolution.assets,
+          ...componentAssets
+        ]);
+        return {
+          html: queuedForeignSubtreeResolution.html,
+          canAttachAttributes: true,
+          rootTag: this.getRootTagName(queuedForeignSubtreeResolution.html),
+          integrationName: this.name,
+          assets
+        };
+      } catch (error) {
+        this.renderSession.endCollectedAssetFrame(assetFrame);
+        throw this.createRenderError("Error rendering component", error);
       }
-      const content = await this.renderEcoComponent(input.component, this.createComponentProps(input));
-      const rendered = await this.renderJsx(content);
-      const queuedBoundaryResolution = await this.resolveOwnedBoundaryHtml(
-        rendered.html,
-        this.getQueuedBoundaryRuntime(input)
-      );
-      const componentAssets = await this.collectComponentAssets(input.component);
-      const assets = this.htmlTransformer.dedupeProcessedAssets([
-        ...this.endCollectedAssetFrame(assetFrame),
-        ...queuedBoundaryResolution.assets,
-        ...componentAssets
-      ]);
-      return {
-        html: queuedBoundaryResolution.html,
-        canAttachAttributes: true,
-        rootTag: this.getRootTagName(queuedBoundaryResolution.html),
-        integrationName: this.name,
-        assets
-      };
-    } catch (error) {
-      this.endCollectedAssetFrame(assetFrame);
-      throw this.createRenderError("Error rendering component", error);
-    } finally {
-      this.endImportedIntrinsicScriptFrame(importedScriptFrame);
-    }
-  }
-  createComponentBoundaryRuntime(options) {
-    return this.createQueuedBoundaryRuntime({
-      boundaryInput: options.boundaryInput,
-      rendererCache: options.rendererCache
     });
   }
   async renderToResponse(view, props, ctx) {
-    const importedScriptFrame = this.beginImportedIntrinsicScriptFrame([view, view.config?.layout]);
-    try {
-      if (!this.isFunctionComponent(view)) {
-        throw new TypeError("JSX renderer expected a callable view component.");
+    return await this.renderSession.withActiveScope(async () => {
+      try {
+        if (typeof view !== "function") {
+          throw new TypeError("JSX renderer expected a callable view component.");
+        }
+        const viewComponent = view;
+        return await this.renderViewWithDocumentShell({
+          view: viewComponent,
+          props,
+          ctx,
+          layout: viewComponent.config?.layout
+        });
+      } catch (error) {
+        throw this.createRenderError("Error rendering view", error);
       }
-      return await this.renderViewWithDocumentShell({
-        view,
-        props,
-        ctx,
-        layout: view.config?.layout
-      });
-    } catch (error) {
-      throw this.createRenderError("Error rendering view", error);
-    } finally {
-      this.endImportedIntrinsicScriptFrame(importedScriptFrame);
-    }
-  }
-  /**
-   * Normalizes MDX modules into the same page contract as JSX route modules.
-   *
-   * MDX files export page metadata alongside generated component code, so the
-   * renderer folds those exports back into the Ecopages component shape before
-   * any layout or document-shell logic runs.
-   */
-  normalizeMdxPageModule(file, module) {
-    if (!this.isFunctionComponent(module.default)) {
-      throw new TypeError("MDX file must export a callable default component.");
-    }
-    const Page = module.default;
-    const normalizedConfig = {
-      ...module.config ?? Page.config ?? {},
-      ...module.layout ? { layout: module.layout } : {},
-      __eco: module.config?.__eco ?? Page.config?.__eco ?? this.createEcoMeta(file)
-    };
-    const wrappedPage = this.wrapMdxPage(Page, {
-      config: normalizedConfig,
-      metadata: module.getMetadata ?? Page.metadata
     });
-    return {
-      ...module,
-      default: wrappedPage,
-      config: normalizedConfig
-    };
-  }
-  beginCollectedAssetFrame() {
-    const frame = [];
-    this.collectedAssetFrames.push(frame);
-    return frame;
-  }
-  endCollectedAssetFrame(frame) {
-    const activeFrame = this.collectedAssetFrames.pop();
-    if (!activeFrame || activeFrame !== frame) {
-      return this.htmlTransformer.dedupeProcessedAssets(frame);
-    }
-    return this.htmlTransformer.dedupeProcessedAssets(activeFrame);
   }
   async renderJsx(value) {
-    await this.ensureRadiantServerRuntimeIfEnabled();
     const collectedAssets = [];
-    const html = withServerCustomElementRenderHook(
-      this.createIntrinsicCustomElementRenderHook(collectedAssets),
-      () => renderToString(value)
-    );
-    const dedupedAssets = this.recordCollectedAssets(collectedAssets);
+    const html = await this.withCustomElementRenderHook(collectedAssets, () => renderToString(value));
+    const dedupedAssets = this.renderSession.recordCollectedAssets(collectedAssets);
     return {
       assets: dedupedAssets,
       html
     };
   }
-  async renderEcoComponent(component, props) {
-    await this.ensureRadiantServerRuntimeIfEnabled();
-    const collectedAssets = [];
-    const rendered = await withServerCustomElementRenderHook(
-      this.createIntrinsicCustomElementRenderHook(collectedAssets),
-      () => this.invokeComponent(component, props)
+  async withCustomElementRenderHook(target, render) {
+    await this.radiantSsrPolicy.prepareRuntime();
+    return await this.radiantSsrPolicy.withRuntime(
+      () => withServerCustomElementRenderHook(this.createIntrinsicCustomElementRenderHook(target), render)
     );
-    this.recordCollectedAssets(collectedAssets);
-    return rendered;
-  }
-  recordCollectedAssets(collectedAssets) {
-    const dedupedAssets = this.htmlTransformer.dedupeProcessedAssets(collectedAssets);
-    const activeFrame = this.collectedAssetFrames[this.collectedAssetFrames.length - 1];
-    if (activeFrame) {
-      activeFrame.push(...dedupedAssets);
-    }
-    return dedupedAssets;
-  }
-  beginImportedIntrinsicScriptFrame(components) {
-    const frame = this.collectImportedIntrinsicScriptFiles(components);
-    this.importedIntrinsicScriptFrames.push(frame);
-    return frame;
-  }
-  endImportedIntrinsicScriptFrame(frame) {
-    const activeFrame = this.importedIntrinsicScriptFrames.pop();
-    if (activeFrame !== frame) {
-      this.importedIntrinsicScriptFrames = this.importedIntrinsicScriptFrames.filter((entry) => entry !== frame);
-    }
-  }
-  getActiveImportedIntrinsicScriptFiles() {
-    return this.importedIntrinsicScriptFrames[this.importedIntrinsicScriptFrames.length - 1];
-  }
-  /**
-   * Collects intrinsic custom-element script files already owned by the current
-   * component tree through direct source imports or dependency declarations.
-   */
-  collectImportedIntrinsicScriptFiles(components) {
-    const importedScriptFiles = /* @__PURE__ */ new Set();
-    const visitedFiles = /* @__PURE__ */ new Set();
-    const visit = (component) => {
-      const file = component?.config?.__eco?.file;
-      if (!file || visitedFiles.has(file)) {
-        return;
-      }
-      visitedFiles.add(file);
-      for (const scriptFile of this.extractConfiguredDependencyScriptFiles(component, path.dirname(file))) {
-        importedScriptFiles.add(scriptFile);
-      }
-      for (const scriptFile of this.extractImportedIntrinsicScriptFiles(file)) {
-        importedScriptFiles.add(scriptFile);
-      }
-      for (const nestedComponent of component?.config?.dependencies?.components ?? []) {
-        visit(nestedComponent);
-      }
-      visit(component?.config?.layout);
-    };
-    for (const component of components) {
-      visit(component);
-    }
-    return importedScriptFiles;
-  }
-  extractImportedIntrinsicScriptFiles(file) {
-    let source;
-    try {
-      source = readFileSync(file, "utf8");
-    } catch {
-      return [];
-    }
-    const scriptFiles = /* @__PURE__ */ new Set();
-    const directory = path.dirname(file);
-    for (const match of source.matchAll(EcopagesJsxRenderer.SCRIPT_IMPORT_RE)) {
-      const specifier = match[1];
-      if (!specifier) {
-        continue;
-      }
-      const resolvedScriptFile = this.resolveImportedIntrinsicScriptFile(directory, specifier);
-      if (resolvedScriptFile) {
-        scriptFiles.add(resolvedScriptFile);
-      }
-    }
-    return [...scriptFiles];
-  }
-  extractConfiguredDependencyScriptFiles(component, directory) {
-    const scriptFiles = /* @__PURE__ */ new Set();
-    for (const script of component?.config?.dependencies?.scripts ?? []) {
-      const specifier = typeof script === "string" ? script : script.src;
-      if (!specifier) {
-        continue;
-      }
-      const resolvedScriptFile = this.resolveImportedIntrinsicScriptFile(directory, specifier);
-      if (resolvedScriptFile) {
-        scriptFiles.add(resolvedScriptFile);
-      }
-    }
-    return [...scriptFiles];
   }
-  resolveImportedIntrinsicScriptFile(directory, specifier) {
-    const basePath = path.resolve(directory, specifier);
-    const candidatePaths = [
-      basePath,
-      `${basePath}.ts`,
-      `${basePath}.tsx`,
-      `${basePath}.js`,
-      `${basePath}.jsx`,
-      `${basePath}.mts`,
-      `${basePath}.cts`,
-      `${basePath}.mjs`,
-      `${basePath}.cjs`
-    ];
-    for (const candidatePath of candidatePaths) {
-      if (existsSync(candidatePath)) {
-        return candidatePath;
-      }
-    }
-    return void 0;
-  }
-  async ensureRadiantServerRuntimeIfEnabled() {
-    if (!this.radiantSsrEnabled) {
-      return;
-    }
-    await this.ensureRadiantServerRuntimeInstalled();
-  }
-  async ensureRadiantServerRuntimeInstalled() {
-    if (!EcopagesJsxRenderer.radiantServerRuntimeInstallPromise) {
-      EcopagesJsxRenderer.radiantServerRuntimeInstallPromise = Promise.all([
-        import("@ecopages/radiant/server/render-component"),
-        import("@ecopages/radiant/server/light-dom-shim").then((module) => {
-          module.installLightDomShim();
-        })
-      ]).then(() => void 0);
-    }
-    await EcopagesJsxRenderer.radiantServerRuntimeInstallPromise;
-  }
-  isFunctionComponent(component) {
-    return typeof component === "function";
-  }
-  createComponentProps(input) {
-    if (input.children === void 0) {
-      return input.props;
-    }
-    return {
-      ...input.props,
-      children: typeof input.children === "string" ? createMarkupNodeLike(input.children) : input.children
-    };
-  }
-  async collectComponentAssets(component) {
-    if (!component.config?.dependencies || typeof this.assetProcessingService?.processDependencies !== "function") {
-      return [];
-    }
-    return this.processComponentDependencies([component]);
-  }
-  async invokeComponent(component, props) {
-    return await component(props);
-  }
-  createEcoMeta(file) {
-    return {
-      id: String(rapidhash(file)),
-      file,
-      integration: ECOPAGES_JSX_PLUGIN_NAME
-    };
-  }
-  wrapMdxPage(page, {
-    config,
-    metadata
-  }) {
-    const wrappedPage = async (props) => await this.invokeComponent(page, props);
-    wrappedPage.config = config;
-    if (metadata) {
-      wrappedPage.metadata = metadata;
-    }
-    return wrappedPage;
-  }
-  createIntrinsicCustomElementRenderHook(target) {
-    return ({ tagName }) => {
-      const currentImportedScriptFiles = this.getActiveImportedIntrinsicScriptFiles();
-      const intrinsicScriptFile = this.intrinsicCustomElementScriptFiles.get(tagName);
-      if (intrinsicScriptFile && currentImportedScriptFiles?.has(intrinsicScriptFile)) {
-        return void 0;
-      }
-      const assets = this.intrinsicCustomElementAssets.get(tagName);
-      if (assets) {
-        target.push(...assets);
-      }
-      return void 0;
+  createIntrinsicCustomElementRenderHook(_target) {
+    return ({ instance }) => {
+      return instance ? this.radiantSsrPolicy.renderIntrinsicElementMarkup(instance) : void 0;
     };
   }
 }

package/src/ecopages-jsx.plugin.d.ts

@@ -1,37 +1,19 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import { IntegrationPlugin } from '@ecopages/core/plugins/integration-plugin';
+import { IntegrationPlugin, type EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 import type { JsxRenderable } from '@ecopages/jsx';
 import { EcopagesJsxRenderer } from './ecopages-jsx-renderer.js';
 import type { EcopagesJsxPluginOptions } from './ecopages-jsx.types.js';
-export type { EcopagesJsxMdxCompileOptions, EcopagesJsxMdxOptions, EcopagesJsxPluginOptions, EcopagesJsxRendererConfig, } from './ecopages-jsx.types.js';
+export type { EcopagesJsxMdxOptions, EcopagesJsxPluginOptions, EcopagesJsxRendererConfig, } from './ecopages-jsx.types.js';
 /** JSX integration plugin for Ecopages, supporting `.tsx` templates and optional Radiant web components. */
 export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable> {
     renderer: typeof EcopagesJsxRenderer;
-    private customElementAssets;
-    private customElementScriptFiles;
     private includeRadiant;
     private mdxEnabled;
     private mdxCompilerOptions?;
     private mdxExtensions;
     private mdxLoaderPlugin?;
-    private runtimeBundleService;
-    private runtimeSpecifierMap;
-    private runtimeDepsInitialized;
     /** Returns the build plugins required by the JSX integration. */
     get plugins(): EcoBuildPlugin[];
-    /** Returns the browser-only build plugins required by the JSX integration. */
-    get browserBuildPlugins(): EcoBuildPlugin[];
-    /**
-     * Exposes the bare-module specifier map used by the import map.
-     *
-     * Client bundles keep these imports external so the browser can load the
-     * shared runtime packages from the generated vendor assets.
-     */
-    getRuntimeSpecifierMap(): Record<string, string>;
-    /**
-     * Creates the renderer instance and attaches the discovered intrinsic custom
-     * element assets before the renderer handles any requests.
-     */
+    /** Creates the renderer instance with the resolved JSX integration runtime options. */
     initializeRenderer(options?: {
         rendererModules?: unknown;
     }): EcopagesJsxRenderer;
@@ -39,8 +21,7 @@ export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable>
     /** Ensures MDX build hooks are ready before Ecopages collects contributions. */
     prepareBuildContributions(): Promise<void>;
     /**
-     * Registers MDX tooling, discovers intrinsic custom-element assets, and then
-     * completes the base integration setup.
+     * Registers MDX tooling and completes the base integration setup.
      */
     setup(): Promise<void>;
     private ensureMdxLoaderPlugin;
@@ -51,16 +32,6 @@ export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable>
      * this hook stays isolated from manifest preparation.
      */
     private registerMdxBunPlugin;
-    /**
-     * Scans `src/` for custom-element entry scripts and pre-resolves their assets.
-     *
-     * The renderer's server-side custom-element hook relies on this registry to
-     * attach browser scripts without per-render file-system lookups.
-     */
-    private buildCustomElementRegistry;
-    private collectScriptEntries;
-    private resolveCustomElementAsset;
-    private extractCustomElementTagNames;
 }
 /**
  * Creates the JSX integration plugin with resolved defaults.