@ecopages/react 0.2.0-alpha.9 → 0.2.1-beta.0

package/src/utils/hydration-scripts.js

@@ -31,19 +31,44 @@ function getProdPageRootCleanupScript() {
   return 'window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.cleanupPageRoot=()=>{const a=window.__ECO_PAGES__.react?.pageRoot||root;if(!a){window.__ECO_PAGES__.react.pageRoot=null;window.__ECO_PAGES__?.navigation?.releaseOwnership?.("react-router");delete window.__ECO_PAGES__.page;return}window.__ECO_PAGES__.react.pageRoot=null;window.__ECO_PAGES__?.navigation?.releaseOwnership?.("react-router");delete window.__ECO_PAGES__.page;root=null;a.unmount()};';
 }
 function getDevRouterBootstrapRegistrationScript() {
-  return `window.__ECO_PAGES__?.navigation?.register({
+  return `const currentOwnerState = window.__ECO_PAGES__?.navigation?.getOwnerState?.();
+if (!(currentOwnerState?.owner === "react-router" && currentOwnerState.canHandleSpaNavigation)) {
+window.__ECO_PAGES__?.navigation?.register({
   owner: "react-router",
   cleanupBeforeHandoff: async () => {
     window.__ECO_PAGES__?.react?.cleanupPageRoot?.();
   }
 });
-window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");`;
+window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");
+}`;
 }
 function getProdRouterBootstrapRegistrationScript() {
-  return 'window.__ECO_PAGES__?.navigation?.register({owner:"react-router",cleanupBeforeHandoff:async()=>{window.__ECO_PAGES__?.react?.cleanupPageRoot?.()}});window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");';
+  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 getDevRerunRegistrationScript(scriptId) {
+  return `window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+window.__ECO_PAGES__.rerunScripts = window.__ECO_PAGES__.rerunScripts || {};
+window.__ECO_PAGES__.rerunScripts[${JSON.stringify(scriptId)}] = mount;`;
+}
+function getProdRerunRegistrationScript(scriptId) {
+  return `window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.rerunScripts=window.__ECO_PAGES__.rerunScripts||{};window.__ECO_PAGES__.rerunScripts[${JSON.stringify(scriptId)}]=m;`;
 }
 function createDevScriptWithRouter(options) {
-  const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath } = options;
+  const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath, scriptId } = options;
+  const pageModuleUrlExpression = options.pageModuleUrlExpression ?? "import.meta.url";
   const { components, getRouterProps } = router;
   if (!routerImportPath) {
     throw new Error("routerImportPath is required when router adapter is configured");
@@ -53,6 +78,12 @@ import { hydrateRoot } from "${reactDomClientImportPath}";
 import { createElement } from "${reactImportPath}";
 import { ${components.router}, ${components.pageContent} } from "${routerImportPath}";
 ${getImportStatement(importPath, isMdx)}
+const pageModuleUrl = ${pageModuleUrlExpression};
+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 || {};
@@ -61,6 +92,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__");
@@ -73,7 +105,7 @@ const getPageData = () => {
 const props = getPageData();
 
 window.__ECO_PAGES__.page = {
-  module: "${importPath}",
+  module: pageModuleUrl,
   props
 };
 
@@ -83,25 +115,49 @@ const createTree = (Component, props) => {
 };
 
 const mount = () => {
+  const props = getPageData();
+  window.__ECO_PAGES__.page = {
+    module: pageModuleUrl,
+    props
+  };
+
+  if (shouldReuseExistingRouterRoot()) {
+    root = window.__ECO_PAGES__.react.pageRoot;
+    return;
+  }
+
   if (window.__ECO_PAGES__.react?.pageRoot) {
     root = window.__ECO_PAGES__.react.pageRoot;
-    root.render(createTree(Page, props));
-  } else {
-    root = hydrateRoot(document.body, createTree(Page, props), {
-      onRecoverableError: (err) => console.warn("[ecopages] Hydration error:", err)
-    });
-    window.__ECO_PAGES__.react.pageRoot = root;
+    return;
   }
+
+  root = hydrateRoot(document.body, createTree(Page, props), {
+    onRecoverableError: (err) => console.warn("[ecopages] Hydration error:", err)
+  });
+  window.__ECO_PAGES__.react.pageRoot = root;
   window.__ECO_PAGES__.hmrHandlers["${importPath}"] = async (newUrl) => {
-    if (window.__ECO_PAGES__?.navigation?.getOwnerState().owner === "react-router") {
-      await window.__ECO_PAGES__?.navigation?.reloadCurrentPage?.({ clearCache: false, source: "react-router" });
-      console.log("[ecopages] ${getComponentType(isMdx)} component updated via router");
-      return;
-    }
     try {
       const newModule = await import(newUrl);
+      const nextProps = getPageData();
       ${getHmrImportStatement(isMdx)}
-      root.render(createTree(NewPage, props));
+      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: pageModuleUrl,
+        props: nextProps
+      };
+      root.render(createTree(NewPage, nextProps));
       console.log("[ecopages] ${getComponentType(isMdx)} component updated");
     } catch (e) {
       console.error("[ecopages] Failed to hot-reload ${getComponentType(isMdx)} component:", e);
@@ -109,19 +165,29 @@ const mount = () => {
   };
 };
 
+${getDevRerunRegistrationScript(scriptId)}
+
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", mount);
 } else {
   mount();
 }
+}
 `.trim();
 }
 function createDevScriptWithoutRouter(options) {
-  const { importPath, isMdx, reactImportPath, reactDomClientImportPath } = options;
+  const { importPath, isMdx, reactImportPath, reactDomClientImportPath, scriptId } = options;
+  const pageModuleUrlExpression = options.pageModuleUrlExpression ?? "import.meta.url";
   return `
 import { hydrateRoot } from "${reactDomClientImportPath}";
 import { createElement } from "${reactImportPath}";
 ${getImportStatement(importPath, isMdx)}
+const pageModuleUrl = ${pageModuleUrlExpression};
+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 || {};
@@ -141,7 +207,7 @@ const getPageData = () => {
 const props = getPageData();
 
 window.__ECO_PAGES__.page = {
-  module: "${importPath}",
+  module: pageModuleUrl,
   props
 };
 
@@ -153,6 +219,12 @@ const createTree = (Component, props) => {
 };
 
 const mount = () => {
+  const props = getPageData();
+  window.__ECO_PAGES__.page = {
+    module: pageModuleUrl,
+    props
+  };
+
   if (window.__ECO_PAGES__.react?.pageRoot) {
     root = window.__ECO_PAGES__.react.pageRoot;
     root.render(createTree(Page, props));
@@ -174,30 +246,35 @@ const mount = () => {
   };
 };
 
+${getDevRerunRegistrationScript(scriptId)}
+
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", mount);
 } else {
   mount();
 }
+}
 `.trim();
 }
 function createProdScriptWithRouter(options) {
-  const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath } = options;
+  const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath, scriptId } = options;
+  const pageModuleUrlExpression = options.pageModuleUrlExpression ?? "import.meta.url";
   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=${pageModuleUrlExpression};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 ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};if(sr()){root=window.__ECO_PAGES__.react.pageRoot;return}if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};${getProdRerunRegistrationScript(scriptId)}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=${pageModuleUrlExpression};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 ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};if(sr()){root=window.__ECO_PAGES__.react.pageRoot;return}if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};${getProdRerunRegistrationScript(scriptId)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
 }
 function createProdScriptWithoutRouter(options) {
-  const { importPath, isMdx, reactImportPath, reactDomClientImportPath } = options;
+  const { importPath, isMdx, reactImportPath, reactDomClientImportPath, scriptId } = options;
+  const pageModuleUrlExpression = options.pageModuleUrlExpression ?? "import.meta.url";
   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=${pageModuleUrlExpression};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 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=()=>{const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};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};${getProdRerunRegistrationScript(scriptId)}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=${pageModuleUrlExpression};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 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=()=>{const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};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};${getProdRerunRegistrationScript(scriptId)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
 }
 function createHydrationScript(options) {
   const { isDevelopment, router } = options;
@@ -210,6 +287,7 @@ function createIslandHydrationScript(options) {
   const targetSelector = JSON.stringify(options.targetSelector);
   const componentRef = JSON.stringify(options.componentRef ?? "");
   const componentFile = JSON.stringify(options.componentFile ?? "");
+  const scriptId = options.scriptId;
   if (options.isDevelopment) {
     return `
 import { createRoot } from "${options.reactDomClientImportPath}";
@@ -245,19 +323,26 @@ const resolveComponent = () => {
 };
 
 const mount = () => {
-  const target = document.querySelector(${targetSelector});
+  const targets = document.querySelectorAll(${targetSelector});
   const Component = resolveComponent();
-  if (!target || !Component) {
+  if (!Component || targets.length === 0) {
     return;
   }
-  const props = JSON.parse(atob(target.getAttribute("data-eco-props") || "e30="));
-  const container = document.createElement("eco-island");
-  container.style.display = "block";
-  target.replaceWith(container);
-  const root = createRoot(container);
-  root.render(createElement(Component, props));
+  targets.forEach((target) => {
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const props = JSON.parse(atob(target.getAttribute("data-eco-props") || "e30="));
+    const container = document.createElement("eco-island");
+    container.style.display = "block";
+    target.replaceWith(container);
+    const root = createRoot(container);
+    root.render(createElement(Component, props));
+  });
 };
 
+${getDevRerunRegistrationScript(scriptId)}
+
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", mount, { once: true });
 } else {
@@ -265,7 +350,7 @@ if (document.readyState === "loading") {
 }
 `.trim();
   }
-  return `import{createRoot as cr}from"${options.reactDomClientImportPath}";import{createElement as ce}from"${options.reactImportPath}";import*as M from"${options.importPath}";const r=${componentRef};const f=${componentFile};const mv=Object.values(M);const c=mv.find((e)=>{if(typeof e!=="function")return false;const ec=e.config?.__eco;if(!ec)return false;if(r&&ec.id===r)return true;if(f&&ec.file===f)return true;return false;})??(typeof M.default==="function"?M.default:mv.find((e)=>typeof e==="function")??null);const m=()=>{const t=document.querySelector(${targetSelector});if(!t||!c)return;const p=JSON.parse(atob(t.getAttribute("data-eco-props")||"e30="));const ct=document.createElement("eco-island");ct.style.display="block";t.replaceWith(ct);cr(ct).render(ce(c,p))};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m,{once:true}):m()`;
+  return `import{createRoot as cr}from"${options.reactDomClientImportPath}";import{createElement as ce}from"${options.reactImportPath}";import*as M from"${options.importPath}";const r=${componentRef};const f=${componentFile};const mv=Object.values(M);const c=mv.find((e)=>{if(typeof e!=="function")return false;const ec=e.config?.__eco;if(!ec)return false;if(r&&ec.id===r)return true;if(f&&ec.file===f)return true;return false;})??(typeof M.default==="function"?M.default:mv.find((e)=>typeof e==="function")??null);const m=()=>{const ts=document.querySelectorAll(${targetSelector});if(!c||ts.length===0)return;ts.forEach((t)=>{if(!(t instanceof HTMLElement))return;const p=JSON.parse(atob(t.getAttribute("data-eco-props")||"e30="));const ct=document.createElement("eco-island");ct.style.display="block";t.replaceWith(ct);cr(ct).render(ce(c,p))})};${getProdRerunRegistrationScript(scriptId)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m,{once:true}):m()`;
 }
 export {
   createHydrationScript,

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,198 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createHydrationScript } from "./hydration-scripts.js";
+const routerAdapter = {
+  name: "eco-router",
+  bundle: {
+    importPath: "/assets/router.js",
+    outputName: "router",
+    externals: []
+  },
+  components: {
+    router: "EcoRouter",
+    pageContent: "PageContent"
+  },
+  getRouterProps: (page, props) => `{ page: ${page}, pageProps: ${props} }`
+};
+function createModuleUrl(source) {
+  return `data:text/javascript;base64,${btoa(source)}`;
+}
+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 });");
+  const reactDomClientImportPath = createModuleUrl(`
+export const hydrateRoot = (container, tree, options) => {
+  const runtime = window.__ECO_REACT_HYDRATION_TEST__;
+  runtime.hydrateCalls.push({
+    containerTag: container.tagName,
+    hasRecoverableErrorHandler: typeof options?.onRecoverableError === "function",
+    tree,
+  });
+
+  return {
+    render() {},
+    unmount() {
+      runtime.unmountCount += 1;
+    },
+  };
+};
+`);
+  const importPath = createModuleUrl("export default function Page() { return null; }");
+  const routerImportPath = createModuleUrl(`
+export function EcoRouter(props) {
+  return props;
+}
+
+export function PageContent() {
+  return null;
+}
+`);
+  return {
+    importPath,
+    reactImportPath,
+    reactDomClientImportPath,
+    routerImportPath
+  };
+}
+describe("createHydrationScript browser execution", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    const testWindow = window;
+    delete testWindow.__ECO_PAGES__;
+    delete testWindow.__ECO_REACT_HYDRATION_TEST__;
+  });
+  it("registers router ownership and cleanup when the browser hydration bootstrap runs", async () => {
+    const runtimeModules = createRuntimeModules();
+    const testWindow = window;
+    testWindow.__ECO_REACT_HYDRATION_TEST__ = {
+      hydrateCalls: [],
+      renderCalls: [],
+      claimedOwners: [],
+      releasedOwners: [],
+      registrations: [],
+      unmountCount: 0
+    };
+    testWindow.__ECO_PAGES__ = {
+      navigation: {
+        getOwnerState: () => ({
+          owner: "html",
+          canHandleSpaNavigation: false
+        }),
+        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);
+        }
+      }
+    };
+    document.body.innerHTML = `<script id="__ECO_PAGE_DATA__" type="application/json">${JSON.stringify({
+      title: "Hello React",
+      locals: { theme: "dark" }
+    })}<\/script>`;
+    const script = createHydrationScript({
+      ...runtimeModules,
+      scriptId: "ecopages-react-page",
+      isDevelopment: true,
+      isMdx: false,
+      router: routerAdapter
+    });
+    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);
+    expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.claimedOwners).toEqual(["react-router"]);
+    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: moduleUrl,
+      props: {
+        title: "Hello React",
+        locals: { theme: "dark" }
+      }
+    });
+    await testWindow.__ECO_PAGES__?.react?.cleanupPageRoot?.();
+    expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.unmountCount).toBe(1);
+    expect(testWindow.__ECO_REACT_HYDRATION_TEST__?.releasedOwners).toEqual(["react-router"]);
+    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"
+      }
+    });
+  });
+});

package/src/utils/react-dom-runtime-interop-plugin.d.ts

@@ -1,4 +1,4 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 export declare function createReactDomRuntimeInteropPlugin(options?: {
     name?: string;
     reactSpecifier?: string;

package/src/utils/react-dom-runtime-interop-plugin.js

@@ -1,5 +1,8 @@
 import fs from "node:fs";
 import path from "node:path";
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 function createReactDomRuntimeInteropPlugin(options) {
   const reactDomFileFilter = /[\\/]react-dom[\\/].*\.js$/;
   const reactRequirePattern = /\brequire\((['"])react\1\)/g;
@@ -7,6 +10,12 @@ function createReactDomRuntimeInteropPlugin(options) {
   return {
     name: options?.name ?? "react-dom-runtime-interop",
     setup(build) {
+      if (reactSpecifier.startsWith("/")) {
+        build.onResolve({ filter: new RegExp(`^${escapeRegExp(reactSpecifier)}$`) }, (args) => ({
+          path: args.path,
+          external: true
+        }));
+      }
       build.onLoad({ filter: reactDomFileFilter }, (args) => {
         const content = fs.readFileSync(args.path, "utf-8");
         if (!reactRequirePattern.test(content)) {

package/src/utils/react-mdx-loader-plugin.d.ts

@@ -1,3 +1,3 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 import { type CompileOptions } from '@mdx-js/mdx';
 export declare function createReactMdxLoaderPlugin(compilerOptions?: CompileOptions): EcoBuildPlugin;

package/src/utils/{react-runtime-specifier-map.d.ts → react-runtime-alias-map.d.ts}

@@ -1,6 +1,8 @@
 import type { ReactRouterAdapter } from '../router-adapter.js';
 import type { ReactRuntimeImports } from '../services/react-runtime-bundle.service.js';
+import { type BrowserRuntimeManifest } from '@ecopages/core/build/browser-runtime-manifest';
 export declare const REACT_RUNTIME_SPECIFIERS: readonly ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime", "react-dom/client"];
-export declare function buildReactRuntimeSpecifierMap(runtimeImports: ReactRuntimeImports, routerAdapter?: ReactRouterAdapter): Record<string, string>;
+export declare function buildReactRuntimeAliasMap(runtimeImports: ReactRuntimeImports): Record<string, string>;
+export declare function buildReactRuntimeManifest(runtimeImports: ReactRuntimeImports): BrowserRuntimeManifest;
 export declare function getReactRuntimeExternalSpecifiers(): string[];
 export declare function getReactClientGraphAllowSpecifiers(runtimeSpecifiers: Iterable<string>, routerAdapter?: ReactRouterAdapter): string[];

package/src/utils/react-runtime-alias-map.js

@@ -0,0 +1,90 @@
+import {
+  createBrowserRuntimeManifest,
+  getBrowserRuntimeSpecifierMap
+} from "@ecopages/core/build/browser-runtime-manifest";
+const REACT_RUNTIME_SPECIFIERS = [
+  "react",
+  "react-dom",
+  "react/jsx-runtime",
+  "react/jsx-dev-runtime",
+  "react-dom/client"
+];
+function buildReactRuntimeAliasMap(runtimeImports) {
+  return Object.fromEntries(getBrowserRuntimeSpecifierMap(buildReactRuntimeManifest(runtimeImports)));
+}
+function buildReactRuntimeManifest(runtimeImports) {
+  return createBrowserRuntimeManifest([
+    {
+      specifier: "react",
+      owner: "@ecopages/react",
+      importPath: "react",
+      publicPath: runtimeImports.react
+    },
+    {
+      specifier: "react/jsx-runtime",
+      owner: "@ecopages/react",
+      importPath: "react/jsx-runtime",
+      publicPath: runtimeImports.reactJsxRuntime
+    },
+    {
+      specifier: "react/jsx-dev-runtime",
+      owner: "@ecopages/react",
+      importPath: "react/jsx-dev-runtime",
+      publicPath: runtimeImports.reactJsxDevRuntime
+    },
+    {
+      specifier: "react-dom",
+      owner: "@ecopages/react",
+      importPath: "react-dom",
+      publicPath: runtimeImports.reactDom
+    },
+    {
+      specifier: "react-dom/client",
+      owner: "@ecopages/react",
+      importPath: "react-dom/client",
+      publicPath: runtimeImports.reactDomClient
+    },
+    {
+      specifier: "use-sync-external-store/shim",
+      owner: "@ecopages/react",
+      importPath: "use-sync-external-store/shim",
+      publicPath: runtimeImports.react
+    },
+    {
+      specifier: "use-sync-external-store/shim/index.js",
+      owner: "@ecopages/react",
+      importPath: "use-sync-external-store/shim/index.js",
+      publicPath: runtimeImports.react
+    },
+    {
+      specifier: "use-sync-external-store/shim/with-selector",
+      owner: "@ecopages/react",
+      importPath: "use-sync-external-store/shim/with-selector",
+      publicPath: runtimeImports.useSyncExternalStoreWithSelector
+    },
+    {
+      specifier: "use-sync-external-store/shim/with-selector.js",
+      owner: "@ecopages/react",
+      importPath: "use-sync-external-store/shim/with-selector.js",
+      publicPath: runtimeImports.useSyncExternalStoreWithSelector
+    }
+  ]);
+}
+function getReactRuntimeExternalSpecifiers() {
+  return [...REACT_RUNTIME_SPECIFIERS];
+}
+function getReactClientGraphAllowSpecifiers(runtimeSpecifiers, routerAdapter) {
+  return [
+    "@ecopages/core",
+    ...REACT_RUNTIME_SPECIFIERS,
+    ...routerAdapter ? [routerAdapter.bundle.importPath] : [],
+    ...Array.from(runtimeSpecifiers)
+  ];
+}
+export {
+  REACT_RUNTIME_SPECIFIERS,
+  buildReactRuntimeAliasMap,
+  buildReactRuntimeManifest,
+  getReactClientGraphAllowSpecifiers,
+  getReactRuntimeExternalSpecifiers
+};