@ecopages/ecopages-jsx 0.2.0-alpha.37 → 0.2.0-alpha.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/ecopages-jsx",
-  "version": "0.2.0-alpha.37",
+  "version": "0.2.0-alpha.39",
   "description": "JSX integration plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -11,6 +11,20 @@
   "main": "./src/ecopages-jsx.plugin.js",
   "types": "./src/ecopages-jsx.plugin.d.ts",
   "type": "module",
+  "exports": {
+    ".": {
+      "default": "./src/ecopages-jsx.plugin.js",
+      "types": "./src/ecopages-jsx.plugin.d.ts"
+    },
+    "./eco-embed": {
+      "default": "./src/eco-embed.js",
+      "types": "./src/eco-embed.d.ts"
+    },
+    "./eco-embed.ts": {
+      "default": "./src/eco-embed.js",
+      "types": "./src/eco-embed.d.ts"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ecopages/ecopages.git",
@@ -21,8 +35,8 @@
     "vfile": "^6.0.3"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.34",
-    "@ecopages/jsx": "0.3.0-alpha.24",
-    "@ecopages/radiant": "0.3.0-alpha.24"
+    "@ecopages/core": "0.2.0-alpha.39",
+    "@ecopages/jsx": "0.3.0-alpha.25",
+    "@ecopages/radiant": "0.3.0-alpha.25"
   }
 }

package/src/eco-embed.d.ts

@@ -0,0 +1,11 @@
+import type { EcoComponent, EcoEmbedProps as CoreEcoEmbedProps } from '@ecopages/core';
+import type { JsxRenderable } from '@ecopages/jsx';
+/**
+ * Props for the Ecopages JSX-owned `EcoEmbed` adapter.
+ */
+export type EcoEmbedProps<TComponent extends EcoComponent> = CoreEcoEmbedProps<TComponent>;
+/**
+ * Renders a foreign or same-integration eco component from an Ecopages JSX
+ * file without forcing inline mixed-JSX authoring.
+ */
+export declare function EcoEmbed<TComponent extends EcoComponent>({ component, props, children, }: EcoEmbedProps<TComponent>): JsxRenderable;

package/src/eco-embed.js

@@ -0,0 +1,11 @@
+import { eco } from "@ecopages/core";
+function EcoEmbed({
+  component,
+  props,
+  children
+}) {
+  return eco.embed(component, props, children);
+}
+export {
+  EcoEmbed
+};

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

@@ -21,7 +21,6 @@ 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,7 +1,6 @@
 import { createMarkupNodeLike } from "@ecopages/jsx";
 import {
   createServerHydrationBindingState,
-  isServerRenderHydrationActive,
   withServerHydrationBindingState
 } from "@ecopages/jsx/server";
 class EcopagesJsxRadiantSsrPolicy {
@@ -33,16 +32,6 @@ 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.
    *
@@ -59,7 +48,7 @@ class EcopagesJsxRadiantSsrPolicy {
       withServerHydrationBindingState(
         createServerHydrationBindingState(),
         () => renderBridge.renderHostToString({
-          mode: isServerRenderHydrationActive() ? "hydrate" : "plain"
+          mode: "hydrate"
         })
       )
     );

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

@@ -42,5 +42,6 @@ export declare class EcopagesJsxRenderer extends IntegrationRenderer<JsxRenderab
     renderToResponse<P = any>(view: EcoComponent<P>, props: P, ctx: RenderToResponseContext): Promise<Response>;
     private renderJsx;
     private withCustomElementRenderHook;
+    private withPreparedRadiantRuntime;
     private createIntrinsicCustomElementRenderHook;
 }

package/src/ecopages-jsx-renderer.js

@@ -116,118 +116,120 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
     return isMdxFile(filePath, this.mdxExtensions);
   }
   async importPageFile(file, options) {
-    await this.radiantSsrPolicy.prepareRuntime();
-    const module = await super.importPageFile(file, options);
-    return this.isMdxFile(file) ? normalizeMdxPageModule(file, module) : module;
+    return await this.withPreparedRadiantRuntime(async () => {
+      const module = await super.importPageFile(file, options);
+      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({
-          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);
-      }
-    });
+    return await this.withPreparedRadiantRuntime(
+      () => 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) {
-    await this.radiantSsrPolicy.prepareRuntime();
-    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.");
+    return await this.withPreparedRadiantRuntime(
+      () => 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 content = await this.withCustomElementRenderHook(() => component(componentProps));
+          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 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);
-      }
-    });
+      })
+    );
   }
   async renderToResponse(view, props, ctx) {
-    await this.radiantSsrPolicy.prepareRuntime();
-    return await this.renderSession.withActiveScope(async () => {
-      try {
-        if (typeof view !== "function") {
-          throw new TypeError("JSX renderer expected a callable view component.");
+    return await this.withPreparedRadiantRuntime(
+      () => 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);
         }
-        const viewComponent = view;
-        return await this.renderViewWithDocumentShell({
-          view: viewComponent,
-          props,
-          ctx,
-          layout: viewComponent.config?.layout
-        });
-      } catch (error) {
-        throw this.createRenderError("Error rendering view", error);
-      }
-    });
+      })
+    );
   }
   async renderJsx(value) {
     const collectedAssets = [];
-    const html = await this.renderSession.withHydrationBindingScope(
-      () => this.withCustomElementRenderHook(collectedAssets, () => renderToString(value, { mode: "hydrate" }))
-    );
+    const html = await this.withCustomElementRenderHook(() => renderToString(value));
     const dedupedAssets = this.renderSession.recordCollectedAssets(collectedAssets);
     return {
       assets: dedupedAssets,
       html
     };
   }
-  async withCustomElementRenderHook(target, render) {
-    await this.radiantSsrPolicy.prepareRuntime();
+  async withCustomElementRenderHook(render) {
     return await this.radiantSsrPolicy.withRuntime(
-      () => withServerCustomElementRenderHook(this.createIntrinsicCustomElementRenderHook(target), render)
+      () => withServerCustomElementRenderHook(this.createIntrinsicCustomElementRenderHook(), render)
     );
   }
-  createIntrinsicCustomElementRenderHook(_target) {
+  async withPreparedRadiantRuntime(render) {
+    await this.radiantSsrPolicy.prepareRuntime();
+    return await render();
+  }
+  createIntrinsicCustomElementRenderHook() {
     return ({ instance }) => {
       return instance ? this.radiantSsrPolicy.renderIntrinsicElementMarkup(instance) : void 0;
     };

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

@@ -18,6 +18,7 @@ export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable>
         rendererModules?: unknown;
     }): EcopagesJsxRenderer;
     constructor(options?: EcopagesJsxPluginOptions);
+    private getDependencies;
     /** Ensures MDX build hooks are ready before Ecopages collects contributions. */
     prepareBuildContributions(): Promise<void>;
     /**

package/src/ecopages-jsx.plugin.js

@@ -1,6 +1,7 @@
 import {
   IntegrationPlugin
 } from "@ecopages/core/plugins/integration-plugin";
+import { AssetFactory } from "@ecopages/core/services/asset-processing-service";
 import { ECOPAGES_JSX_PLUGIN_NAME } from "./ecopages-jsx.constants.js";
 import {
   appendMdxExtensions,
@@ -9,6 +10,7 @@ import {
   resolveMdxCompilerOptions
 } from "./ecopages-jsx-mdx.js";
 import { EcopagesJsxRenderer } from "./ecopages-jsx-renderer.js";
+const RADIANT_HYDRATOR_SCRIPT_ID = "ecopages-jsx-radiant-hydrator";
 const resolvePluginOptions = (options) => {
   const { extensions: userExtensions, radiant, mdx, ...baseConfig } = options ?? {};
   const extensions = [...userExtensions ?? [".tsx"]];
@@ -62,6 +64,21 @@ class EcopagesJsxPlugin extends IntegrationPlugin {
     this.mdxEnabled = mdxEnabled;
     this.mdxExtensions = mdxExtensions;
     this.mdxCompilerOptions = mdxCompilerOptions;
+    if (this.includeRadiant) {
+      this.integrationDependencies.unshift(...this.getDependencies());
+    }
+  }
+  getDependencies() {
+    return [
+      AssetFactory.createNodeModuleScript({
+        position: "head",
+        importPath: "@ecopages/radiant/client/install-hydrator",
+        bundle: false,
+        attributes: {
+          "data-eco-script-id": RADIANT_HYDRATOR_SCRIPT_ID
+        }
+      })
+    ];
   }
   /** Ensures MDX build hooks are ready before Ecopages collects contributions. */
   async prepareBuildContributions() {