@ecopages/react 0.2.0-alpha.23 → 0.2.0-alpha.25

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to `@ecopages/react` are documented here.
 
 ### Bug Fixes
 
+- Fixed router-managed React HMR page entries to reload the active route with a cleared persisted-layout cache so shared layout edits apply while the current page stays mounted.
+- Fixed router-managed React HMR handlers to forward the active page HMR entry when reloading the current route through React Router.
+- Fixed React route hydration bundles to resolve the router through the published import-map key and keep rerun navigation on the shared runtime graph.
+- Removed the redundant React page props bootstrap script so route hydration relies on the canonical `__ECO_PAGE_DATA__` payload.
 - Fixed React hydration, Fast Refresh, module loading, doctype handling, island asset reuse, and mixed-renderer boundary resolution across Bun, Vite, and Nitro flows.
 - Restored direct `ReactPlugin` construction so the exported class still accepts the public plugin options shape.
 - Fixed React boundary payload compatibility coverage and removed the plugin/renderer integration-name import cycle.
@@ -18,6 +22,7 @@ All notable changes to `@ecopages/react` are documented here.
 
 ### Refactoring
 
+- Collapsed React route hydration into one page-owned entry module that re-exports the page component and bundles runtime dependencies in production.
 - Consolidated React bundling, hydration, and runtime state behind shared service boundaries and `window.__ECO_PAGES__`.
 - Moved React plugin option/default resolution into the factory and replaced renderer static config with instance-owned runtime wiring.
 - Extracted React page-payload and locals serialization into a dedicated service to keep the renderer focused on orchestration.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react",
-  "version": "0.2.0-alpha.23",
+  "version": "0.2.0-alpha.25",
   "description": "React integration for Ecopages",
   "keywords": [
     "ecopages",
@@ -53,14 +53,14 @@
     "directory": "packages/integrations/react"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.23",
+    "@ecopages/core": "0.2.0-alpha.25",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
-    "@ecopages/file-system": "0.2.0-alpha.23",
+    "@ecopages/file-system": "0.2.0-alpha.25",
     "@ecopages/logger": "^0.2.3",
     "@mdx-js/esbuild": "^3.0.1",
     "@mdx-js/mdx": "^3.1.0",

package/src/react-renderer.d.ts

@@ -80,6 +80,7 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      * already selected the React integration.
      */
     private isReactManagedComponent;
+    private getComponentRequires;
     private getRouterDocumentAttributes;
     /**
      * Commits a framework-agnostic component to React semantics.

package/src/react-renderer.js

@@ -118,6 +118,9 @@ class ReactRenderer extends IntegrationRenderer {
     const integration = this.getComponentIntegration(component);
     return integration === void 0 || integration === this.name;
   }
+  getComponentRequires(component) {
+    return component?.requires;
+  }
   getRouterDocumentAttributes() {
     if (!this.routerAdapter) {
       return void 0;
@@ -351,7 +354,9 @@ class ReactRenderer extends IntegrationRenderer {
    */
   async renderReactComponentBoundary(input, runtimeContext) {
     const componentConfig = input.component.config;
-    const context = input.integrationContext ?? {};
+    const context = {
+      componentInstanceId: input.integrationContext?.componentInstanceId
+    };
     const hasResolvedChildHtml = input.children !== void 0;
     let html = this.renderComponentHtml(input, context, runtimeContext);
     const queuedBoundaryResolution = await this.resolveQueuedBoundaryHtml(html, runtimeContext);
@@ -498,10 +503,7 @@ class ReactRenderer extends IntegrationRenderer {
     pageProps
   }) {
     try {
-      const safeLocals = this.pagePayloadService.getSerializableLocals(
-        locals,
-        Page.requires
-      );
+      const safeLocals = this.pagePayloadService.getSerializableLocals(locals, this.getComponentRequires(Page));
       const allPageProps = this.pagePayloadService.buildSerializedPageProps({
         pageProps,
         params,

package/src/services/react-bundle.service.d.ts

@@ -19,6 +19,16 @@ export interface ReactBundleServiceConfig {
     nonReactExtensions?: string[];
     jsxImportSource?: string;
 }
+/**
+ * Optional flags that adjust how a React client entry is bundled.
+ */
+export interface ReactClientBundleOptions {
+    /**
+     * When `true`, bundle React runtime dependencies into the emitted entry instead of
+     * rewriting them to external runtime specifiers.
+     */
+    includeRuntime?: boolean;
+}
 /**
  * Manages esbuild bundle configuration and plugin creation for React page/component builds.
  */
@@ -38,7 +48,7 @@ export declare class ReactBundleService {
      * @param declaredModules - Explicitly declared browser module specifiers
      * @returns Bundle options object for the build adapter
      */
-    createBundleOptions(componentName: string, isMdx: boolean, declaredModules: string[]): Promise<Record<string, unknown>>;
+    createBundleOptions(componentName: string, isMdx: boolean, declaredModules: string[], bundleOptions?: ReactClientBundleOptions): Promise<Record<string, unknown>>;
     /**
      * Creates the esbuild plugin that rewrites bare React specifiers
      * to their runtime asset URLs.

package/src/services/react-bundle.service.js

@@ -32,11 +32,8 @@ class ReactBundleService {
    * @param declaredModules - Explicitly declared browser module specifiers
    * @returns Bundle options object for the build adapter
    */
-  async createBundleOptions(componentName, isMdx, declaredModules) {
-    const runtimeImports = this.getRuntimeImports();
-    const runtimeSpecifierMap = buildReactRuntimeSpecifierMap(runtimeImports, this.config.routerAdapter);
+  async createBundleOptions(componentName, isMdx, declaredModules, bundleOptions = {}) {
     const options = {
-      external: getReactRuntimeExternalSpecifiers(),
       mainFields: ["module", "browser", "main"],
       naming: `${componentName}.[ext]`,
       ...import.meta.env?.NODE_ENV === "production" && {
@@ -45,6 +42,9 @@ class ReactBundleService {
         treeshaking: true
       }
     };
+    if (!bundleOptions.includeRuntime) {
+      options.external = getReactRuntimeExternalSpecifiers();
+    }
     const graphBoundaryPlugin = createClientGraphBoundaryPlugin({
       absWorkingDir: this.config.rootDir,
       declaredModules,
@@ -55,18 +55,22 @@ class ReactBundleService {
       hostJsxImportSource: this.config.jsxImportSource ?? "react",
       foreignExtensions: this.config.nonReactExtensions ?? []
     });
-    const runtimeAliasPlugin = this.createRuntimeAliasPlugin(runtimeSpecifierMap);
     const useSyncExternalStoreShimPlugin = createUseSyncExternalStoreShimPlugin({
       name: "react-renderer-use-sync-external-store-shim",
       namespace: "ecopages-react-renderer-shim"
     });
+    const runtimePlugins = bundleOptions.includeRuntime ? [] : [
+      this.createRuntimeAliasPlugin(
+        buildReactRuntimeSpecifierMap(this.getRuntimeImports(), this.config.routerAdapter)
+      )
+    ];
     if (isMdx && this.config.mdxCompilerOptions) {
       const { createReactMdxLoaderPlugin } = await import("../utils/react-mdx-loader-plugin.js");
       const mdxPlugin = createReactMdxLoaderPlugin(this.config.mdxCompilerOptions);
       options.plugins = [
         foreignJsxOverridePlugin,
         graphBoundaryPlugin,
-        runtimeAliasPlugin,
+        ...runtimePlugins,
         mdxPlugin,
         useSyncExternalStoreShimPlugin
       ];
@@ -74,7 +78,7 @@ class ReactBundleService {
       options.plugins = [
         foreignJsxOverridePlugin,
         graphBoundaryPlugin,
-        runtimeAliasPlugin,
+        ...runtimePlugins,
         useSyncExternalStoreShimPlugin
       ];
     }

package/src/services/react-hydration-asset.service.d.ts

@@ -1,9 +1,8 @@
 /**
  * Hydration asset creation service for React integration.
  *
- * Builds the asset definitions (bundled component scripts + hydration bootstrap scripts)
- * required for client-side React rendering — both at the page level and the component
- * island level.
+ * Builds the asset definitions required for client-side React rendering — both at
+ * the page level and the component island level.
  *
  * @module
  */
@@ -33,27 +32,26 @@ export declare class ReactHydrationAssetService {
     private getIslandBundleName;
     private getIslandHydrationName;
     /**
-     * Resolves the import path for the bundled page component.
+     * Resolves the browser import path used for a React-owned page or island module.
      * Uses HMR manager for development or constructs static path for production.
      *
      * @param pagePath - Absolute path to the page source file
      * @param assetName - Generated asset name
-     * @returns The resolved import path for the bundled component
+     * @returns The resolved browser import path for the module
      */
     resolveAssetImportPath(pagePath: string, assetName: string): Promise<string>;
     /**
-     * Creates the asset dependencies for a page: the bundled component and hydration script.
+     * Creates the page-owned route entry asset for hydration and client navigation.
      *
      * @param pagePath - Absolute path to the page source file
      * @param componentName - Generated unique component name
-     * @param importPath - Resolved import path for the bundled component
+     * @param importPath - Resolved browser import path used by development HMR
      * @param bundleOptions - Bundle configuration options
      * @param isDevelopment - Whether running in development mode with HMR
      * @param isMdx - Whether the source file is an MDX file
-     * @param props - Optional page props for client serialization
-     * @returns Array of asset definitions for processing
+     * @returns One page-owned asset definition for processing
      */
-    createPageDependencies(pagePath: string, componentName: string, importPath: string, bundleOptions: Record<string, unknown>, isDevelopment: boolean, isMdx: boolean, props?: Record<string, unknown>): AssetDefinition[];
+    createPageDependencies(pagePath: string, componentName: string, importPath: string, bundleOptions: Record<string, unknown>, isDevelopment: boolean, isMdx: boolean): AssetDefinition[];
     /**
      * Builds client-side assets for a React component island.
      *

package/src/services/react-hydration-asset.service.js

@@ -21,12 +21,12 @@ class ReactHydrationAssetService {
     return `${bundleName}-hydration-${componentKey}`;
   }
   /**
-   * Resolves the import path for the bundled page component.
+   * Resolves the browser import path used for a React-owned page or island module.
    * Uses HMR manager for development or constructs static path for production.
    *
    * @param pagePath - Absolute path to the page source file
    * @param assetName - Generated asset name
-   * @returns The resolved import path for the bundled component
+   * @returns The resolved browser import path for the module
    */
   async resolveAssetImportPath(pagePath, assetName) {
     const hmrManager = this.config.assetProcessingService?.getHmrManager();
@@ -36,71 +36,44 @@ class ReactHydrationAssetService {
     return `/${path.join(RESOLVED_ASSETS_DIR, path.relative(this.config.srcDir, pagePath)).replace(path.basename(pagePath), `${assetName}.js`).replace(/\\/g, "/")}`;
   }
   /**
-   * Creates the asset dependencies for a page: the bundled component and hydration script.
+   * Creates the page-owned route entry asset for hydration and client navigation.
    *
    * @param pagePath - Absolute path to the page source file
    * @param componentName - Generated unique component name
-   * @param importPath - Resolved import path for the bundled component
+   * @param importPath - Resolved browser import path used by development HMR
    * @param bundleOptions - Bundle configuration options
    * @param isDevelopment - Whether running in development mode with HMR
    * @param isMdx - Whether the source file is an MDX file
-   * @param props - Optional page props for client serialization
-   * @returns Array of asset definitions for processing
+   * @returns One page-owned asset definition for processing
    */
-  createPageDependencies(pagePath, componentName, importPath, bundleOptions, isDevelopment, isMdx, props) {
+  createPageDependencies(pagePath, componentName, importPath, bundleOptions, isDevelopment, isMdx) {
     const runtimeImports = this.config.bundleService.getRuntimeImports();
-    const dependencies = [
-      AssetFactory.createFileScript({
-        position: "head",
-        filepath: pagePath,
-        name: componentName,
-        excludeFromHtml: true,
-        bundle: true,
-        bundleOptions,
-        attributes: {
-          type: "module",
-          defer: "",
-          "data-eco-persist": "true"
-        }
-      })
-    ];
-    if (props && Object.keys(props).length > 0) {
-      dependencies.push(
-        AssetFactory.createContentScript({
-          position: "head",
-          content: `window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.page={module:"${importPath}",props:${JSON.stringify(props)}};`,
-          name: `${componentName}-props`,
-          bundle: false,
-          attributes: {
-            type: "module"
-          }
-        })
-      );
-    }
-    dependencies.push(
+    return [
       AssetFactory.createContentScript({
         position: "head",
         content: createHydrationScript({
-          importPath,
-          reactImportPath: runtimeImports.react,
-          reactDomClientImportPath: runtimeImports.reactDomClient,
-          routerImportPath: runtimeImports.router,
+          importPath: isDevelopment ? importPath : pagePath,
+          reactImportPath: isDevelopment ? runtimeImports.react : "react",
+          reactDomClientImportPath: isDevelopment ? runtimeImports.reactDomClient : "react-dom/client",
+          routerImportPath: isDevelopment ? runtimeImports.router : this.config.routerAdapter?.importMapKey,
           isDevelopment,
           isMdx,
-          router: this.config.routerAdapter
+          router: this.config.routerAdapter,
+          scriptId: componentName
         }),
-        name: `${componentName}-hydration`,
-        bundle: false,
+        name: componentName,
+        packageRole: "page-script",
+        bundle: !isDevelopment,
+        bundleOptions,
         attributes: {
           type: "module",
           defer: "",
           "data-eco-rerun": "true",
-          "data-eco-script-id": `${componentName}-hydration`,
+          "data-eco-script-id": componentName,
           "data-eco-persist": "true"
         }
       })
-    );
-    return dependencies;
+    ];
   }
   /**
    * Builds client-side assets for a React component island.
@@ -133,6 +106,7 @@ class ReactHydrationAssetService {
         position: "head",
         filepath: componentFile,
         name: componentName,
+        packageRole: "dynamic-chunk",
         excludeFromHtml: true,
         bundle: true,
         bundleOptions,
@@ -154,6 +128,7 @@ class ReactHydrationAssetService {
           isDevelopment
         }),
         name: hydrationName,
+        packageRole: "keep-separate",
         bundle: false,
         attributes: {
           type: "module",

package/src/services/react-page-module.service.d.ts

@@ -46,7 +46,9 @@ export declare class ReactPageModuleService {
     importMdxPageFile(filePath: string, options?: {
         bypassCache?: boolean;
         cacheScope?: string;
-    }): Promise<unknown>;
+    }): Promise<EcoPageFile<{
+        config?: EcoComponentConfig;
+    }>>;
     /**
      * Ensures that an EcoComponentConfig has proper `__eco` metadata attached.
      * Resolves the file path from dependency declarations when not already set.

package/src/utils/hydration-scripts.d.ts

@@ -1,6 +1,6 @@
 /**
  * Hydration script generators for React pages.
- * These functions create the client-side scripts that hydrate React components.
+ * These functions create the page entry modules that hydrate React routes.
  * @module
  */
 import type { ReactRouterAdapter } from '../router-adapter.js';
@@ -8,8 +8,10 @@ import type { ReactRouterAdapter } from '../router-adapter.js';
  * Options for generating a hydration script.
  */
 export type HydrationScriptOptions = {
-    /** The import path for the bundled page component */
+    /** The module path imported by the page entry module. */
     importPath: string;
+    /** Stable id of the page entry script tag in the document. */
+    scriptId: string;
     /** Direct import path for React runtime module */
     reactImportPath: string;
     /** Direct import path for react-dom/client runtime module */

package/src/utils/hydration-scripts.js

@@ -45,8 +45,21 @@ window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");
 function getProdRouterBootstrapRegistrationScript() {
   return 'const o=window.__ECO_PAGES__?.navigation?.getOwnerState?.();if(!(o?.owner==="react-router"&&o.canHandleSpaNavigation)){window.__ECO_PAGES__?.navigation?.register({owner:"react-router",cleanupBeforeHandoff:async()=>{window.__ECO_PAGES__?.react?.cleanupPageRoot?.()}});window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router")}';
 }
+function getDevReuseExistingRouterRootScript() {
+  return `const shouldReuseExistingRouterRoot = () => {
+  const ownerState = window.__ECO_PAGES__?.navigation?.getOwnerState?.();
+  return Boolean(
+    window.__ECO_PAGES__.react?.pageRoot &&
+      ownerState?.owner === "react-router" &&
+      ownerState.canHandleSpaNavigation
+  );
+};`;
+}
+function getProdReuseExistingRouterRootScript() {
+  return 'const sr=()=>{const o=window.__ECO_PAGES__?.navigation?.getOwnerState?.();return!!(window.__ECO_PAGES__.react?.pageRoot&&o?.owner==="react-router"&&o.canHandleSpaNavigation)};';
+}
 function createDevScriptWithRouter(options) {
-  const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath } = options;
+  const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath, scriptId } = options;
   const { components, getRouterProps } = router;
   if (!routerImportPath) {
     throw new Error("routerImportPath is required when router adapter is configured");
@@ -56,6 +69,12 @@ import { hydrateRoot } from "${reactDomClientImportPath}";
 import { createElement } from "${reactImportPath}";
 import { ${components.router}, ${components.pageContent} } from "${routerImportPath}";
 ${getImportStatement(importPath, isMdx)}
+const pageModuleUrl = import.meta.url;
+export default Page;
+export const config = Page.config;
+const isActivePageEntry = Boolean(document.querySelector('script[data-eco-script-id="${scriptId}"]'));
+
+if (isActivePageEntry) {
 
 window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
 window.__ECO_PAGES__.hmrHandlers = window.__ECO_PAGES__.hmrHandlers || {};
@@ -64,6 +83,7 @@ window.__ECO_PAGES__.react.pageRoot = window.__ECO_PAGES__.react.pageRoot || nul
 let root = window.__ECO_PAGES__.react.pageRoot;
 ${getDevPageRootCleanupScript()}
 ${getDevRouterBootstrapRegistrationScript()}
+${getDevReuseExistingRouterRootScript()}
 
 const getPageData = () => {
   const el = document.getElementById("__ECO_PAGE_DATA__");
@@ -76,7 +96,7 @@ const getPageData = () => {
 const props = getPageData();
 
 window.__ECO_PAGES__.page = {
-  module: "${importPath}",
+  module: pageModuleUrl,
   props
 };
 
@@ -86,7 +106,9 @@ const createTree = (Component, props) => {
 };
 
 const mount = () => {
-  if (window.__ECO_PAGES__.react?.pageRoot) {
+  if (shouldReuseExistingRouterRoot()) {
+    root = window.__ECO_PAGES__.react.pageRoot;
+  } else if (window.__ECO_PAGES__.react?.pageRoot) {
     root = window.__ECO_PAGES__.react.pageRoot;
     root.render(createTree(Page, props));
   } else {
@@ -100,16 +122,25 @@ const mount = () => {
       const newModule = await import(newUrl);
       const nextProps = getPageData();
       ${getHmrImportStatement(isMdx)}
+      const currentPageLayout = Page.config?.layout;
+      const nextPageLayout = NewPage.config?.layout;
+
+      if (window.__ECO_PAGES__?.navigation?.getOwnerState().owner === "react-router") {
+        await window.__ECO_PAGES__?.navigation?.reloadCurrentPage?.({
+          clearCache: currentPageLayout !== nextPageLayout,
+          moduleUrl: "${importPath}",
+          source: "react-router"
+        });
+        console.log("[ecopages] ${getComponentType(isMdx)} component updated via router");
+        return;
+      }
+
       window.__ECO_PAGES__.page = {
-        module: "${importPath}",
+        module: pageModuleUrl,
         props: nextProps
       };
       root.render(createTree(NewPage, nextProps));
-      if (window.__ECO_PAGES__?.navigation?.getOwnerState().owner === "react-router") {
-        console.log("[ecopages] ${getComponentType(isMdx)} component updated via router");
-      } else {
-        console.log("[ecopages] ${getComponentType(isMdx)} component updated");
-      }
+      console.log("[ecopages] ${getComponentType(isMdx)} component updated");
     } catch (e) {
       console.error("[ecopages] Failed to hot-reload ${getComponentType(isMdx)} component:", e);
     }
@@ -121,14 +152,21 @@ if (document.readyState === "loading") {
 } else {
   mount();
 }
+}
 `.trim();
 }
 function createDevScriptWithoutRouter(options) {
-  const { importPath, isMdx, reactImportPath, reactDomClientImportPath } = options;
+  const { importPath, isMdx, reactImportPath, reactDomClientImportPath, scriptId } = options;
   return `
 import { hydrateRoot } from "${reactDomClientImportPath}";
 import { createElement } from "${reactImportPath}";
 ${getImportStatement(importPath, isMdx)}
+const pageModuleUrl = import.meta.url;
+export default Page;
+export const config = Page.config;
+const isActivePageEntry = Boolean(document.querySelector('script[data-eco-script-id="${scriptId}"]'));
+
+if (isActivePageEntry) {
 
 window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
 window.__ECO_PAGES__.hmrHandlers = window.__ECO_PAGES__.hmrHandlers || {};
@@ -148,7 +186,7 @@ const getPageData = () => {
 const props = getPageData();
 
 window.__ECO_PAGES__.page = {
-  module: "${importPath}",
+  module: pageModuleUrl,
   props
 };
 
@@ -186,25 +224,26 @@ if (document.readyState === "loading") {
 } else {
   mount();
 }
+}
 `.trim();
 }
 function createProdScriptWithRouter(options) {
-  const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath } = options;
+  const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath, scriptId } = options;
   const { components, getRouterProps } = router;
   if (!routerImportPath) {
     throw new Error("routerImportPath is required when router adapter is configured");
   }
   if (isMdx) {
-    return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import{${components.router} as R,${components.pageContent} as PC}from"${routerImportPath}";import*as M from"${importPath}";const P=M.default;if(M.config)P.config=M.config;window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}${getProdRouterBootstrapRegistrationScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:"${importPath}",props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()`;
+    return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import{${components.router} as R,${components.pageContent} as PC}from"${routerImportPath}";import*as M from"${importPath}";const P=M.default;if(M.config)P.config=M.config;const u=import.meta.url;export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}${getProdRouterBootstrapRegistrationScript()}${getProdReuseExistingRouterRootScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{if(sr()){root=window.__ECO_PAGES__.react.pageRoot;return}if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
   }
-  return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import{${components.router} as R,${components.pageContent} as PC}from"${routerImportPath}";import P from"${importPath}";window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}${getProdRouterBootstrapRegistrationScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:"${importPath}",props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()`;
+  return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import{${components.router} as R,${components.pageContent} as PC}from"${routerImportPath}";import P from"${importPath}";const u=import.meta.url;export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}${getProdRouterBootstrapRegistrationScript()}${getProdReuseExistingRouterRootScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{if(sr()){root=window.__ECO_PAGES__.react.pageRoot;return}if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
 }
 function createProdScriptWithoutRouter(options) {
-  const { importPath, isMdx, reactImportPath, reactDomClientImportPath } = options;
+  const { importPath, isMdx, reactImportPath, reactDomClientImportPath, scriptId } = options;
   if (isMdx) {
-    return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import*as M from"${importPath}";const P=M.default;if(M.config)P.config=M.config;window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:"${importPath}",props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);const lp=p?.locals?{locals:p.locals}:null;return L?ce(L,lp,pe):pe};const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()`;
+    return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import*as M from"${importPath}";const P=M.default;if(M.config)P.config=M.config;const u=import.meta.url;export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);const lp=p?.locals?{locals:p.locals}:null;return L?ce(L,lp,pe):pe};const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
   }
-  return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import P from"${importPath}";window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:"${importPath}",props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);const lp=p?.locals?{locals:p.locals}:null;return L?ce(L,lp,pe):pe};const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()`;
+  return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import P from"${importPath}";const u=import.meta.url;export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);const lp=p?.locals?{locals:p.locals}:null;return L?ce(L,lp,pe):pe};const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
 }
 function createHydrationScript(options) {
   const { isDevelopment, router } = options;

package/src/utils/hydration-scripts.test.browser.js

@@ -17,11 +17,18 @@ const routerAdapter = {
 function createModuleUrl(source) {
   return `data:text/javascript;base64,${btoa(source)}`;
 }
-async function importModule(moduleUrl) {
+async function importModule(moduleUrl, scriptId) {
+  let marker;
+  if (scriptId) {
+    marker = document.createElement("script");
+    marker.setAttribute("data-eco-script-id", scriptId);
+    document.head.appendChild(marker);
+  }
   await import(
     /* @vite-ignore */
     moduleUrl
   );
+  marker?.remove();
 }
 function createRuntimeModules() {
   const reactImportPath = createModuleUrl("export const createElement = (...args) => ({ args });");
@@ -71,6 +78,7 @@ describe("createHydrationScript browser execution", () => {
     const testWindow = window;
     testWindow.__ECO_REACT_HYDRATION_TEST__ = {
       hydrateCalls: [],
+      renderCalls: [],
       claimedOwners: [],
       releasedOwners: [],
       registrations: [],
@@ -99,11 +107,13 @@ describe("createHydrationScript browser execution", () => {
     })}<\/script>`;
     const script = createHydrationScript({
       ...runtimeModules,
+      scriptId: "ecopages-react-page",
       isDevelopment: true,
       isMdx: false,
       router: routerAdapter
     });
-    await importModule(createModuleUrl(script));
+    const moduleUrl = createModuleUrl(script);
+    await importModule(moduleUrl, "ecopages-react-page");
     expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.hydrateCalls).toHaveLength(1);
     expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.hydrateCalls[0]?.containerTag).toBe("BODY");
     expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.hydrateCalls[0]?.hasRecoverableErrorHandler).toBe(true);
@@ -111,7 +121,7 @@ describe("createHydrationScript browser execution", () => {
     expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.registrations).toHaveLength(1);
     expect(typeof testWindow.__ECO_PAGES__?.react?.cleanupPageRoot).toBe("function");
     expect(testWindow.__ECO_PAGES__?.page).toEqual({
-      module: runtimeModules.importPath,
+      module: moduleUrl,
       props: {
         title: "Hello React",
         locals: { theme: "dark" }
@@ -123,4 +133,67 @@ describe("createHydrationScript browser execution", () => {
     expect(testWindow.__ECO_PAGES__?.page).toBeUndefined();
     expect(testWindow.__ECO_PAGES__?.react?.pageRoot).toBeNull();
   });
+  it("reuses an existing router-owned page root during rerun bootstrap execution", async () => {
+    const runtimeModules = createRuntimeModules();
+    const testWindow = window;
+    testWindow.__ECO_REACT_HYDRATION_TEST__ = {
+      hydrateCalls: [],
+      renderCalls: [],
+      claimedOwners: [],
+      releasedOwners: [],
+      registrations: [],
+      unmountCount: 0
+    };
+    const existingRoot = {
+      render: (tree) => {
+        testWindow.__ECO_REACT_HYDRATION_TEST__?.renderCalls.push(tree);
+      },
+      unmount: () => {
+        testWindow.__ECO_REACT_HYDRATION_TEST__.unmountCount += 1;
+      }
+    };
+    testWindow.__ECO_PAGES__ = {
+      navigation: {
+        getOwnerState: () => ({
+          owner: "react-router",
+          canHandleSpaNavigation: true
+        }),
+        register: (registration) => {
+          testWindow.__ECO_REACT_HYDRATION_TEST__?.registrations.push(registration);
+        },
+        claimOwnership: (owner) => {
+          testWindow.__ECO_REACT_HYDRATION_TEST__?.claimedOwners.push(owner);
+        },
+        releaseOwnership: (owner) => {
+          testWindow.__ECO_REACT_HYDRATION_TEST__?.releasedOwners.push(owner);
+        }
+      },
+      react: {
+        pageRoot: existingRoot
+      }
+    };
+    document.body.innerHTML = `<script id="__ECO_PAGE_DATA__" type="application/json">${JSON.stringify({
+      title: "Rerun"
+    })}<\/script>`;
+    const script = createHydrationScript({
+      ...runtimeModules,
+      scriptId: "ecopages-react-page-rerun",
+      isDevelopment: true,
+      isMdx: false,
+      router: routerAdapter
+    });
+    const moduleUrl = createModuleUrl(script);
+    await importModule(moduleUrl, "ecopages-react-page-rerun");
+    expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.hydrateCalls).toHaveLength(0);
+    expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.renderCalls).toHaveLength(0);
+    expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.claimedOwners).toHaveLength(0);
+    expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.registrations).toHaveLength(0);
+    expect(testWindow.__ECO_PAGES__?.react?.pageRoot).toBe(existingRoot);
+    expect(testWindow.__ECO_PAGES__?.page).toEqual({
+      module: moduleUrl,
+      props: {
+        title: "Rerun"
+      }
+    });
+  });
 });