@ecopages/ecopages-jsx 0.2.0-alpha.33 → 0.2.0-alpha.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/ecopages-jsx",
-  "version": "0.2.0-alpha.33",
+  "version": "0.2.0-alpha.35",
   "description": "JSX integration plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -21,8 +21,8 @@
     "vfile": "^6.0.3"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.33",
-    "@ecopages/jsx": "0.3.0-alpha.18",
-    "@ecopages/radiant": "0.3.0-alpha.18"
+    "@ecopages/core": "0.2.0-alpha.34",
+    "@ecopages/jsx": "0.3.0-alpha.21",
+    "@ecopages/radiant": "0.3.0-alpha.21"
   }
 }

package/src/ecopages-jsx-radiant-ssr-policy.d.ts

@@ -21,6 +21,7 @@ export declare class EcopagesJsxRadiantSsrPolicy {
      * Runs one render inside Radiant's server runtime when the policy is enabled.
      */
     withRuntime<T>(render: () => T): Promise<T>;
+    withPreparedRuntime<T>(render: () => T): T;
     /**
      * Converts one Radiant custom-element instance into trusted SSR markup.
      *

package/src/ecopages-jsx-radiant-ssr-policy.js

@@ -1,5 +1,3 @@
-import path from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
 import { createMarkupNodeLike } from "@ecopages/jsx";
 import { isServerRenderHydrationActive } from "@ecopages/jsx/server";
 class EcopagesJsxRadiantSsrPolicy {
@@ -31,6 +29,16 @@ class EcopagesJsxRadiantSsrPolicy {
     }
     return runtimeModules.withServerRadiantElementSsrRuntime(render);
   }
+  withPreparedRuntime(render) {
+    if (!this.enabled) {
+      return render();
+    }
+    const runtimeModules = EcopagesJsxRadiantSsrPolicy.runtimeModules;
+    if (!runtimeModules) {
+      return render();
+    }
+    return runtimeModules.withServerRadiantElementSsrRuntime(render);
+  }
   /**
    * Converts one Radiant custom-element instance into trusted SSR markup.
    *
@@ -51,16 +59,14 @@ class EcopagesJsxRadiantSsrPolicy {
   }
   async ensureRuntimeInstalled() {
     if (!EcopagesJsxRadiantSsrPolicy.runtimeModulesPromise) {
-      const radiantLightDomShimEntry = fileURLToPath(
-        import.meta.resolve("@ecopages/radiant/server/light-dom-shim")
-      );
-      const radiantPackageRoot = path.dirname(path.dirname(path.dirname(radiantLightDomShimEntry)));
-      const radiantElementSsrRuntimeModuleUrl = pathToFileURL(
-        path.join(radiantPackageRoot, "dist/server/radiant-element-ssr-bridge.js")
+      const radiantLightDomShimEntry = import.meta.resolve("@ecopages/radiant/server/light-dom-shim");
+      const radiantElementSsrRuntimeModuleUrl = new URL(
+        "./radiant-element-ssr-bridge.js",
+        radiantLightDomShimEntry
       ).href;
       EcopagesJsxRadiantSsrPolicy.runtimeModulesPromise = Promise.all([
         import(radiantElementSsrRuntimeModuleUrl),
-        import("@ecopages/radiant/server/light-dom-shim")
+        import(radiantLightDomShimEntry)
       ]).then(([radiantElementSsrRuntimeModule, lightDomShimModule2]) => {
         const modules = {
           installLightDomShim: lightDomShimModule2.installLightDomShim,

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

@@ -1,5 +1,6 @@
 import type { ComponentRenderInput, ComponentRenderResult, EcoComponent, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
 import { IntegrationRenderer, type RenderToResponseContext, type RouteModuleLoadOptions } from '@ecopages/core/route-renderer/integration-renderer';
+import type { ForeignChildRuntime } from '@ecopages/core/route-renderer/component-render-context';
 import { type JsxRenderable } from '@ecopages/jsx';
 import { type EcopagesJsxMdxPageModule } from './ecopages-jsx-mdx.js';
 import type { EcopagesJsxRendererOptions } from './ecopages-jsx.types.js';
@@ -15,6 +16,7 @@ export declare class EcopagesJsxRenderer extends IntegrationRenderer<JsxRenderab
     private readonly mdxExtensions;
     private readonly renderSession;
     private readonly radiantSsrPolicy;
+    private normalizeForeignChildProps;
     /**
      * Re-renders queued JSX children inside the owning renderer so nested custom
      * elements and queued foreign subtrees contribute assets to the same frame.
@@ -27,6 +29,10 @@ export declare class EcopagesJsxRenderer extends IntegrationRenderer<JsxRenderab
      * additional browser assets while also replacing placeholder tokens.
      */
     private resolveOwnedForeignSubtreeHtml;
+    protected createForeignChildRuntime(options: {
+        renderInput: ComponentRenderInput;
+        rendererCache: Map<string, IntegrationRenderer<any>>;
+    }): ForeignChildRuntime;
     constructor({ appConfig, assetProcessingService, resolvedIntegrationDependencies, jsxConfig, runtimeOrigin, }: EcopagesJsxRendererOptions);
     /** Returns whether the requested page file should be treated as MDX. */
     isMdxFile(filePath: string): boolean;

package/src/ecopages-jsx-renderer.js

@@ -15,6 +15,25 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
   mdxExtensions;
   renderSession;
   radiantSsrPolicy;
+  normalizeForeignChildProps(props) {
+    if (!("children" in props)) {
+      return props;
+    }
+    const children = props.children;
+    if (children === void 0 || typeof children === "string") {
+      return props;
+    }
+    if (typeof children === "object" && children !== null && "nodeType" in children && typeof children.nodeType === "number" && "outerHTML" in children && typeof children.outerHTML === "string") {
+      return {
+        ...props,
+        children: children.outerHTML
+      };
+    }
+    return {
+      ...props,
+      children: renderToString(children)
+    };
+  }
   /**
    * Re-renders queued JSX children inside the owning renderer so nested custom
    * elements and queued foreign subtrees contribute assets to the same frame.
@@ -60,6 +79,19 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       renderQueuedChildren: async (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => this.renderQueuedForeignSubtreeChildren(children, queuedResolutionsByToken, resolveToken)
     });
   }
+  createForeignChildRuntime(options) {
+    const runtime = super.createForeignChildRuntime(options);
+    const interceptForeignChild = runtime.interceptForeignChild;
+    const interceptForeignChildSync = runtime.interceptForeignChildSync;
+    const wrapInput = (input) => ({
+      ...input,
+      props: input.targetIntegration && input.targetIntegration !== this.name ? this.normalizeForeignChildProps(input.props) : input.props
+    });
+    return {
+      interceptForeignChild: interceptForeignChild ? (input) => interceptForeignChild(wrapInput(input)) : void 0,
+      interceptForeignChildSync: interceptForeignChildSync ? (input) => interceptForeignChildSync(wrapInput(input)) : void 0
+    };
+  }
   constructor({
     appConfig,
     assetProcessingService,
@@ -89,6 +121,7 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
     return this.isMdxFile(file) ? normalizeMdxPageModule(file, module) : module;
   }
   async render(options) {
+    await this.radiantSsrPolicy.prepareRuntime();
     return await this.renderSession.withActiveScope(async () => {
       try {
         return await this.renderPageWithDocumentShell({
@@ -116,6 +149,7 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
     });
   }
   async renderComponent(input) {
+    await this.radiantSsrPolicy.prepareRuntime();
     return await this.renderSession.withActiveScope(async () => {
       const assetFrame = this.renderSession.beginCollectedAssetFrame();
       try {
@@ -158,6 +192,7 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
     });
   }
   async renderToResponse(view, props, ctx) {
+    await this.radiantSsrPolicy.prepareRuntime();
     return await this.renderSession.withActiveScope(async () => {
       try {
         if (typeof view !== "function") {
@@ -177,7 +212,10 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
   }
   async renderJsx(value) {
     const collectedAssets = [];
-    const html = await this.withCustomElementRenderHook(collectedAssets, () => renderToString(value));
+    const html = await this.withCustomElementRenderHook(
+      collectedAssets,
+      () => renderToString(value, { mode: "hydrate" })
+    );
     const dedupedAssets = this.renderSession.recordCollectedAssets(collectedAssets);
     return {
       assets: dedupedAssets,