@ecopages/ecopages-jsx 0.2.0-alpha.12 → 0.2.0-alpha.13

package/CHANGELOG.md

@@ -4,18 +4,12 @@
 
 ### Features
 
-- Added `@ecopages/ecopages-jsx` integration plugin for server-side JSX rendering via `@ecopages/jsx`
-- Added optional `radiant` option (default `true`) to include `@ecopages/radiant` and `@ecopages/signals` vendor bundles; set to `false` for pages that do not use Radiant web components
-- Added optional MDX support via `@mdx-js/mdx` compile() when `mdx.enabled: true`
-- Added `jsxImportSource: '@ecopages/jsx'` pragma propagation to both SSR and MDX compile pipelines
+- Added the Ecopages JSX integration with optional Radiant runtime support and optional MDX routes compiled against `@ecopages/jsx`.
 
 ### Bug Fixes
 
-- Fixed the package contract to require the `@ecopages/radiant` peer dependency because the default JSX integration path depends on Radiant runtime assets.
-- Fixed custom Ecopages JSX MDX extension matching to escape full multi-dot extensions in both esbuild and Bun loader filters.
-- Fixed the kitchen-sink Ecopages JSX demo to use the shared light-DOM `radiant-counter` host so mixed routes render without leaking Radiant shadow-root SSR behavior into Lit pages.
-- Fixed Radiant browser bundles to publish the `@ecopages/jsx/server` import-map entry required by the vendored `@ecopages/radiant` runtime.
-- Fixed Ecopages JSX browser bundles to rewrite emitted `@ecopages/jsx` and `@ecopages/radiant` runtime imports to vendor asset URLs and avoid mapping server-only Radiant subpaths into the browser runtime.
-- Fixed the vendored Radiant browser runtime to emit exports from curated public subpaths instead of the package root surface.
-- Fixed MDX setup to register Bun-only loader hooks only when the integration is running on Bun.
-- Fixed deferred template compatibility registration to live on the JSX renderer instead of a side-effect bootstrap module.
+- Fixed mixed-renderer JSX boundary resolution, Radiant/browser runtime asset mapping, required peer dependency wiring, Bun-only MDX loader setup, and multi-dot MDX extension matching.
+
+### Documentation
+
+- Updated the README to document JSX route extensions, Radiant defaults, MDX configuration, and mixed-renderer boundary ownership.

package/README.md

@@ -1,6 +1,6 @@
 # @ecopages/ecopages-jsx
 
-Integration plugin for [@ecopages/jsx](https://jsr.io/@ecopages/jsx) templates in Ecopages. It provides server-rendered JSX pages, Radiant-backed web component support, and optional MDX route handling.
+Integration plugin for [@ecopages/jsx](https://jsr.io/@ecopages/jsx) templates in Ecopages. Use it when Ecopages JSX should own `.tsx` routes, Radiant-backed web components, or MDX compiled against the `@ecopages/jsx` runtime.
 
 ## Installation
 
@@ -26,6 +26,22 @@ const config = await new ConfigBuilder()
 export default config;
 ```
 
+## What This Integration Owns
+
+- `.tsx` route files by default. Use `extensions` to change the JSX route suffix list.
+- Optional Radiant runtime assets and import-map entries.
+- Optional `.mdx` routes compiled against the `@ecopages/jsx` runtime.
+
+## Route Extensions
+
+Use `extensions` when JSX routes should use a custom suffix instead of the default `.tsx`.
+
+```ts
+ecopagesJsxPlugin({
+	extensions: ['.page.tsx'],
+});
+```
+
 ## Radiant Support
 
 Radiant runtime bundles are enabled by default so JSX pages can render and hydrate Radiant custom elements.
@@ -51,6 +67,7 @@ const config = await new ConfigBuilder()
 		ecopagesJsxPlugin({
 			mdx: {
 				enabled: true,
+				extensions: ['.mdx', '.md'],
 			},
 		}),
 	])
@@ -58,3 +75,7 @@ const config = await new ConfigBuilder()
 
 export default config;
 ```
+
+## Mixed Rendering
+
+Ecopages JSX can own the outer page shell or just the nested boundary. When another integration reaches a JSX-owned boundary, Ecopages hands that boundary back to the JSX renderer so it can serialize the correct output before the outer renderer resumes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/ecopages-jsx",
-  "version": "0.2.0-alpha.12",
+  "version": "0.2.0-alpha.13",
   "description": "JSX integration plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -21,7 +21,7 @@
     "vfile": "^6.0.3"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.12",
+    "@ecopages/core": "0.2.0-alpha.13",
     "@ecopages/jsx": "^0.3.0-alpha.0",
     "@ecopages/radiant": "^0.3.0-alpha.0"
   }

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

@@ -2,11 +2,7 @@ import type { ComponentRenderInput, ComponentRenderResult, EcoComponent, EcoComp
 import type { EcoPagesAppConfig } from '@ecopages/core/internal-types';
 import { IntegrationRenderer, type RenderToResponseContext } from '@ecopages/core/route-renderer/integration-renderer';
 import type { AssetProcessingService, ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
-import { type DeferredTemplateSerializer, type SerializableTemplateShape } from '@ecopages/core/route-renderer/template-serialization';
-import type { JsxRenderable } from '@ecopages/jsx';
-type EcopagesJsxTemplateShape = SerializableTemplateShape & {
-    _$rType$: 1;
-};
+import { type JsxRenderable } from '@ecopages/jsx';
 type MdxPageModule = EcoPageFile<{
     config?: EcoComponentConfig;
     layout?: EcoComponent;
@@ -19,21 +15,13 @@ type MdxPageModule = EcoPageFile<{
  * async page, layout, and html template components on the server.
  */
 export declare class EcopagesJsxRenderer extends IntegrationRenderer<JsxRenderable> {
-    /**
-     * Deferred template serializers owned by the Ecopages JSX renderer.
-     *
-     * @remarks
-     * Ecopages JSX can emit runtime-specific deferred template payloads during
-     * mixed-integration rendering. Declaring the serializer here keeps JSX
-     * template-shape knowledge colocated with the renderer while the base
-     * `IntegrationRenderer` handles registration automatically.
-     */
-    static readonly deferredTemplateSerializers: DeferredTemplateSerializer<EcopagesJsxTemplateShape>[];
     name: string;
     static mdxExtensions: string[];
     private intrinsicCustomElementAssets;
     private collectedAssetFrames;
     private radiantSsrEnabled;
+    private resolveQueuedBoundaryChildren;
+    private resolveQueuedBoundaryHtml;
     constructor({ appConfig, assetProcessingService, resolvedIntegrationDependencies, runtimeOrigin, }: {
         appConfig: EcoPagesAppConfig;
         assetProcessingService: AssetProcessingService;
@@ -52,12 +40,13 @@ export declare class EcopagesJsxRenderer extends IntegrationRenderer<JsxRenderab
     protected importPageFile(file: string): Promise<MdxPageModule>;
     render(options: IntegrationRendererRenderOptions<JsxRenderable>): Promise<RouteRendererBody>;
     renderComponent(input: ComponentRenderInput): Promise<ComponentRenderResult>;
+    protected createComponentBoundaryRuntime(options: {
+        boundaryInput: ComponentRenderInput;
+        rendererCache: Map<string, IntegrationRenderer<any>>;
+    }): import("@ecopages/core").ComponentBoundaryRuntime;
     renderToResponse<P = any>(view: EcoComponent<P>, props: P, ctx: RenderToResponseContext): Promise<Response>;
-    private resolveViewMetadata;
-    private renderDocument;
     private beginCollectedAssetFrame;
     private endCollectedAssetFrame;
-    private mergeCollectedAssets;
     private renderJsx;
     private renderEcoComponent;
     private createIntrinsicCustomElementRenderHook;

package/src/ecopages-jsx-renderer.js

@@ -1,19 +1,9 @@
 import { rapidhash } from "@ecopages/core/hash";
 import { IntegrationRenderer } from "@ecopages/core/route-renderer/integration-renderer";
-import {
-  serializeTemplateShape
-} from "@ecopages/core/route-renderer/template-serialization";
+import { createMarkupNodeLike } from "@ecopages/jsx";
 import { renderToString, withServerCustomElementRenderHook } from "@ecopages/jsx/server";
 import { ECOPAGES_JSX_PLUGIN_NAME } from "./ecopages-jsx.plugin.js";
 let radiantLightDomShimInstallPromise;
-const ecopagesJsxDeferredTemplateSerializer = {
-  matches(value) {
-    return typeof value === "object" && value !== null && value._$rType$ === 1 && Array.isArray(value.strings) && (value.values === void 0 || Array.isArray(value.values));
-  },
-  serialize(template, serializeValue) {
-    return serializeTemplateShape(template, serializeValue);
-  }
-};
 async function ensureRadiantLightDomShimInstalled() {
   if (!radiantLightDomShimInstallPromise) {
     radiantLightDomShimInstallPromise = import("@ecopages/radiant/server/light-dom-shim").then((module) => {
@@ -45,21 +35,38 @@ const wrapMdxPage = (page, {
   return wrappedPage;
 };
 class EcopagesJsxRenderer extends IntegrationRenderer {
-  /**
-   * Deferred template serializers owned by the Ecopages JSX renderer.
-   *
-   * @remarks
-   * Ecopages JSX can emit runtime-specific deferred template payloads during
-   * mixed-integration rendering. Declaring the serializer here keeps JSX
-   * template-shape knowledge colocated with the renderer while the base
-   * `IntegrationRenderer` handles registration automatically.
-   */
-  static deferredTemplateSerializers = [ecopagesJsxDeferredTemplateSerializer];
   name = ECOPAGES_JSX_PLUGIN_NAME;
   static mdxExtensions = [".mdx"];
   intrinsicCustomElementAssets = /* @__PURE__ */ new Map();
   collectedAssetFrames = [];
   radiantSsrEnabled = false;
+  async resolveQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken) {
+    if (children === void 0) {
+      return { assets: [] };
+    }
+    let assets = [];
+    let html;
+    if (typeof children === "string") {
+      html = children;
+    } else {
+      const renderedChildren = await this.renderJsx(children);
+      html = renderedChildren.html;
+      assets = renderedChildren.assets;
+    }
+    html = await this.resolveQueuedBoundaryTokens(html, queuedResolutionsByToken, resolveToken);
+    return {
+      assets,
+      html
+    };
+  }
+  async resolveQueuedBoundaryHtml(html, runtimeContext) {
+    return this.resolveRendererOwnedQueuedBoundaryHtml({
+      html,
+      runtimeContext,
+      queueLabel: "Ecopages JSX",
+      renderQueuedChildren: async (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => this.resolveQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken)
+    });
+  }
   constructor({
     appConfig,
     assetProcessingService,
@@ -110,30 +117,27 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
     };
   }
   async render(options) {
-    const assetFrame = this.beginCollectedAssetFrame();
     try {
-      const page = await this.renderEcoComponent(options.Page, {
-        ...options.pageProps,
-        locals: options.pageLocals
+      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 ?? {}
       });
-      const content = options.Layout ? await this.renderEcoComponent(options.Layout, {
-        ...options.pageProps,
-        children: page,
-        locals: options.locals
-      }) : page;
-      const document = await this.renderEcoComponent(
-        options.HtmlTemplate,
-        {
-          metadata: options.metadata,
-          pageProps: options.pageProps ?? {},
-          children: content
-        }
-      );
-      const renderedDocument = await this.renderJsx(document);
-      this.mergeCollectedAssets(this.endCollectedAssetFrame(assetFrame));
-      return `${this.DOC_TYPE}${renderedDocument.html}`;
     } catch (error) {
-      this.endCollectedAssetFrame(assetFrame);
       throw this.createRenderError("Error rendering page", error);
     }
   }
@@ -143,22 +147,32 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       if (!isEcoFunctionComponent(input.component)) {
         throw new TypeError("JSX renderer expected a callable component.");
       }
-      const props = input.children === void 0 ? input.props : { ...input.props, children: input.children };
+      let props = input.props;
+      if (input.children !== void 0) {
+        props = {
+          ...input.props,
+          children: typeof input.children === "string" ? createMarkupNodeLike(input.children) : input.children
+        };
+      }
       const content = await this.renderEcoComponent(
         input.component,
         props
       );
       const rendered = await this.renderJsx(content);
+      const queuedBoundaryResolution = await this.resolveQueuedBoundaryHtml(
+        rendered.html,
+        this.getQueuedBoundaryRuntime(input)
+      );
       const componentAssets = input.component.config?.dependencies && typeof this.assetProcessingService?.processDependencies === "function" ? await this.processComponentDependencies([input.component]) : [];
-      const html = rendered.html;
       const assets = this.htmlTransformer.dedupeProcessedAssets([
         ...this.endCollectedAssetFrame(assetFrame),
+        ...queuedBoundaryResolution.assets,
         ...componentAssets
       ]);
       return {
-        html,
+        html: queuedBoundaryResolution.html,
         canAttachAttributes: true,
-        rootTag: this.getRootTagName(html),
+        rootTag: this.getRootTagName(queuedBoundaryResolution.html),
         integrationName: this.name,
         assets
       };
@@ -167,68 +181,27 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       throw this.createRenderError("Error rendering component", error);
     }
   }
+  createComponentBoundaryRuntime(options) {
+    return this.createQueuedBoundaryRuntime({
+      boundaryInput: options.boundaryInput,
+      rendererCache: options.rendererCache
+    });
+  }
   async renderToResponse(view, props, ctx) {
     try {
       if (!isEcoFunctionComponent(view)) {
         throw new TypeError("JSX renderer expected a callable view component.");
       }
-      const layout = ctx.partial ? void 0 : view.config?.layout;
-      await this.prepareViewDependencies(view, layout);
-      const HtmlTemplate = ctx.partial ? void 0 : await this.getHtmlTemplate();
-      const metadata = ctx.partial ? void 0 : await this.resolveViewMetadata(view, props);
-      const assetFrame = this.beginCollectedAssetFrame();
-      const capturedRender = await this.captureHtmlRender(async () => {
-        const viewContent = await this.renderEcoComponent(view, props);
-        if (ctx.partial) {
-          return (await this.renderJsx(viewContent)).html;
-        }
-        return (await this.renderDocument(viewContent, {
-          metadata,
-          pageProps: props ?? {},
-          layout
-        })).html;
+      return await this.renderViewWithDocumentShell({
+        view,
+        props,
+        ctx,
+        layout: view.config?.layout
       });
-      this.mergeCollectedAssets(this.endCollectedAssetFrame(assetFrame));
-      const html = await this.finalizeCapturedHtmlRender({
-        html: capturedRender.html,
-        graphContext: capturedRender.graphContext,
-        componentsToResolve: HtmlTemplate ? layout ? [HtmlTemplate, layout, view] : [HtmlTemplate, view] : [view],
-        partial: ctx.partial
-      });
-      return this.createHtmlResponse(html, ctx);
     } catch (error) {
       throw this.createRenderError("Error rendering view", error);
     }
   }
-  async resolveViewMetadata(view, props) {
-    return view.metadata ? await view.metadata({
-      params: {},
-      query: {},
-      props,
-      appConfig: this.appConfig
-    }) : this.appConfig.defaultMetadata;
-  }
-  async renderDocument(content, {
-    metadata,
-    pageProps,
-    layout
-  }) {
-    const resolvedContent = layout ? await this.renderEcoComponent(layout, {
-      ...pageProps,
-      children: content
-    }) : content;
-    const HtmlTemplate = await this.getHtmlTemplate();
-    const document = await this.renderEcoComponent(HtmlTemplate, {
-      metadata,
-      pageProps,
-      children: resolvedContent
-    });
-    const renderedDocument = await this.renderJsx(document);
-    return {
-      assets: renderedDocument.assets,
-      html: `${this.DOC_TYPE}${renderedDocument.html}`
-    };
-  }
   beginCollectedAssetFrame() {
     const frame = [];
     this.collectedAssetFrames.push(frame);
@@ -241,14 +214,6 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
     }
     return this.htmlTransformer.dedupeProcessedAssets(activeFrame);
   }
-  mergeCollectedAssets(assets) {
-    if (assets.length === 0) {
-      return;
-    }
-    this.htmlTransformer.setProcessedDependencies(
-      this.htmlTransformer.dedupeProcessedAssets([...this.htmlTransformer.getProcessedDependencies(), ...assets])
-    );
-  }
   async renderJsx(value) {
     if (this.radiantSsrEnabled) {
       await ensureRadiantLightDomShimInstalled();

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

@@ -94,14 +94,6 @@ export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable>
      * completes the base integration setup.
      */
     setup(): Promise<void>;
-    /**
-     * Defers boundaries only when another integration renders a component that is
-     * owned by this JSX integration.
-     */
-    shouldDeferComponentBoundary(input: {
-        currentIntegration: string;
-        targetIntegration?: string;
-    }): boolean;
     private ensureMdxLoaderPlugin;
     private setupMdxBunPlugin;
     private buildIntrinsicCustomElementAssetRegistry;

package/src/ecopages-jsx.plugin.js

@@ -149,13 +149,6 @@ class EcopagesJsxPlugin extends IntegrationPlugin {
     await this.buildIntrinsicCustomElementAssetRegistry();
     await super.setup();
   }
-  /**
-   * Defers boundaries only when another integration renders a component that is
-   * owned by this JSX integration.
-   */
-  shouldDeferComponentBoundary(input) {
-    return input.targetIntegration === this.name && input.currentIntegration !== this.name;
-  }
   ensureMdxLoaderPlugin() {
     if (!this.mdxEnabled || !this.mdxCompilerOptions || this.mdxLoaderPlugin) {
       return;