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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/ecopages-jsx",
-  "version": "0.2.0-alpha.35",
+  "version": "0.2.0-alpha.36",
   "description": "JSX integration plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -22,7 +22,7 @@
   },
   "peerDependencies": {
     "@ecopages/core": "0.2.0-alpha.34",
-    "@ecopages/jsx": "0.3.0-alpha.21",
-    "@ecopages/radiant": "0.3.0-alpha.21"
+    "@ecopages/jsx": "0.3.0-alpha.23",
+    "@ecopages/radiant": "0.3.0-alpha.23"
   }
 }

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

@@ -1,5 +1,9 @@
 import { createMarkupNodeLike } from "@ecopages/jsx";
-import { isServerRenderHydrationActive } from "@ecopages/jsx/server";
+import {
+  createServerHydrationBindingState,
+  isServerRenderHydrationActive,
+  withServerHydrationBindingState
+} from "@ecopages/jsx/server";
 class EcopagesJsxRadiantSsrPolicy {
   static runtimeModules;
   static runtimeModulesPromise;
@@ -52,9 +56,12 @@ class EcopagesJsxRadiantSsrPolicy {
       return void 0;
     }
     return createMarkupNodeLike(
-      renderBridge.renderHostToString({
-        mode: isServerRenderHydrationActive() ? "hydrate" : "plain"
-      })
+      withServerHydrationBindingState(
+        createServerHydrationBindingState(),
+        () => renderBridge.renderHostToString({
+          mode: isServerRenderHydrationActive() ? "hydrate" : "plain"
+        })
+      )
     );
   }
   async ensureRuntimeInstalled() {

package/src/ecopages-jsx-render-session.d.ts

@@ -24,6 +24,13 @@ export declare class EcopagesJsxRenderSession {
      * JSX SSR scope bridge.
      */
     withActiveScope<T>(render: () => T): T;
+    /**
+     * Runs work with the current page-level hydrate binding namespace attached to JSX SSR.
+     *
+     * This lets page, layout, and document renders participate in one client-owned
+     * hydration root even though Ecopages composes them through multiple sibling render calls.
+     */
+    withHydrationBindingScope<T>(render: () => T): T;
     beginCollectedAssetFrame(): ProcessedAsset[];
     endCollectedAssetFrame(frame: ProcessedAsset[]): ProcessedAsset[];
     recordCollectedAssets(collectedAssets: ProcessedAsset[]): ProcessedAsset[];

package/src/ecopages-jsx-render-session.js

@@ -1,5 +1,10 @@
 import { AsyncLocalStorage } from "node:async_hooks";
-import { getActiveSsrScopeValue, withActiveSsrScopeValue } from "@ecopages/jsx/server";
+import {
+  createServerHydrationBindingState,
+  getActiveSsrScopeValue,
+  withActiveSsrScopeValue,
+  withServerHydrationBindingState
+} from "@ecopages/jsx/server";
 const ECOPAGES_JSX_SSR_RENDER_STATE_KEY = /* @__PURE__ */ Symbol.for("@ecopages/ecopages-jsx.ssr-render-state");
 const renderStateStorage = new AsyncLocalStorage();
 class EcopagesJsxRenderSession {
@@ -27,13 +32,23 @@ class EcopagesJsxRenderSession {
       return renderStateStorage.run(jsxScopeState, () => render());
     }
     const state = {
-      collectedAssetFrames: []
+      collectedAssetFrames: [],
+      hydrationBindingState: createServerHydrationBindingState()
     };
     return renderStateStorage.run(
       state,
       () => withActiveSsrScopeValue(ECOPAGES_JSX_SSR_RENDER_STATE_KEY, state, render)
     );
   }
+  /**
+   * Runs work with the current page-level hydrate binding namespace attached to JSX SSR.
+   *
+   * This lets page, layout, and document renders participate in one client-owned
+   * hydration root even though Ecopages composes them through multiple sibling render calls.
+   */
+  withHydrationBindingScope(render) {
+    return withServerHydrationBindingState(this.getState().hydrationBindingState, render);
+  }
   beginCollectedAssetFrame() {
     const state = this.getState();
     const frame = [];

package/src/ecopages-jsx-renderer.js

@@ -212,9 +212,8 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
   }
   async renderJsx(value) {
     const collectedAssets = [];
-    const html = await this.withCustomElementRenderHook(
-      collectedAssets,
-      () => renderToString(value, { mode: "hydrate" })
+    const html = await this.renderSession.withHydrationBindingScope(
+      () => this.withCustomElementRenderHook(collectedAssets, () => renderToString(value, { mode: "hydrate" }))
     );
     const dedupedAssets = this.renderSession.recordCollectedAssets(collectedAssets);
     return {