@ecopages/react 0.2.0-alpha.5 → 0.2.0-alpha.7

package/src/utils/hydration-scripts.js

@@ -9,6 +9,39 @@ function getHmrImportStatement(isMdx) {
 function getComponentType(isMdx) {
   return isMdx ? "MDX" : "React";
 }
+function getDevPageRootCleanupScript() {
+  return `window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+window.__ECO_PAGES__.react = window.__ECO_PAGES__.react || {};
+window.__ECO_PAGES__.react.cleanupPageRoot = () => {
+  const activeRoot = window.__ECO_PAGES__.react?.pageRoot || root;
+  if (!activeRoot) {
+    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;
+  activeRoot.unmount();
+};`;
+}
+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({
+  owner: "react-router",
+  cleanupBeforeHandoff: async () => {
+    window.__ECO_PAGES__?.react?.cleanupPageRoot?.();
+  }
+});
+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");';
+}
 function createDevScriptWithRouter(options) {
   const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath } = options;
   const { components, getRouterProps } = router;
@@ -21,10 +54,13 @@ import { createElement } from "${reactImportPath}";
 import { ${components.router}, ${components.pageContent} } from "${routerImportPath}";
 ${getImportStatement(importPath, isMdx)}
 
-window.__ecopages_hmr_handlers__ = window.__ecopages_hmr_handlers__ || {};
-window.__ecopages_router_active__ = false;
-window.__ecopages_reload_current_page__ = null;
-let root = null;
+window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+window.__ECO_PAGES__.hmrHandlers = window.__ECO_PAGES__.hmrHandlers || {};
+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;
+${getDevPageRootCleanupScript()}
+${getDevRouterBootstrapRegistrationScript()}
 
 const getPageData = () => {
   const el = document.getElementById("__ECO_PAGE_DATA__");
@@ -36,7 +72,7 @@ const getPageData = () => {
 
 const props = getPageData();
 
-window.__ECO_PAGE__ = {
+window.__ECO_PAGES__.page = {
   module: "${importPath}",
   props
 };
@@ -47,13 +83,18 @@ const createTree = (Component, props) => {
 };
 
 const mount = () => {
-  root = hydrateRoot(document, createTree(Page, props), {
-    onRecoverableError: (err) => console.warn("[ecopages] Hydration error:", err)
-  });
-  window.__ecopages_router_active__ = true;
-  window.__ecopages_hmr_handlers__["${importPath}"] = async (newUrl) => {
-    if (window.__ecopages_router_active__ && window.__ecopages_reload_current_page__) {
-      await window.__ecopages_reload_current_page__();
+  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;
+  }
+  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;
     }
@@ -82,8 +123,12 @@ import { hydrateRoot } from "${reactDomClientImportPath}";
 import { createElement } from "${reactImportPath}";
 ${getImportStatement(importPath, isMdx)}
 
-window.__ecopages_hmr_handlers__ = window.__ecopages_hmr_handlers__ || {};
-let root = null;
+window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+window.__ECO_PAGES__.hmrHandlers = window.__ECO_PAGES__.hmrHandlers || {};
+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;
+${getDevPageRootCleanupScript()}
 
 const getPageData = () => {
   const el = document.getElementById("__ECO_PAGE_DATA__");
@@ -95,7 +140,7 @@ const getPageData = () => {
 
 const props = getPageData();
 
-window.__ECO_PAGE__ = {
+window.__ECO_PAGES__.page = {
   module: "${importPath}",
   props
 };
@@ -103,14 +148,21 @@ window.__ECO_PAGE__ = {
 const createTree = (Component, props) => {
   const Layout = Component.config?.layout;
   const pageElement = createElement(Component, props);
-  return Layout ? createElement(Layout, null, pageElement) : pageElement;
+  const layoutProps = props?.locals ? { locals: props.locals } : null;
+  return Layout ? createElement(Layout, layoutProps, pageElement) : pageElement;
 };
 
 const mount = () => {
-  root = hydrateRoot(document, createTree(Page, props), {
-    onRecoverableError: (err) => console.warn("[ecopages] Hydration error:", err)
-  });
-  window.__ecopages_hmr_handlers__["${importPath}"] = async (newUrl) => {
+  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;
+  }
+  window.__ECO_PAGES__.hmrHandlers["${importPath}"] = async (newUrl) => {
     try {
       const newModule = await import(newUrl);
       ${getHmrImportStatement(isMdx)}
@@ -136,16 +188,16 @@ function createProdScriptWithRouter(options) {
     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;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_PAGE__={module:"${importPath}",props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>hr(document,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});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;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 gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGE__={module:"${importPath}",props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>hr(document,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});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()`;
 }
 function createProdScriptWithoutRouter(options) {
   const { importPath, isMdx, reactImportPath, reactDomClientImportPath } = 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;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_PAGE__={module:"${importPath}",props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);return L?ce(L,null,pe):pe};const m=()=>hr(document,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});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;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 gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGE__={module:"${importPath}",props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);return L?ce(L,null,pe):pe};const m=()=>hr(document,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});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()`;
 }
 function createHydrationScript(options) {
   const { isDevelopment, router } = options;
@@ -156,10 +208,8 @@ function createHydrationScript(options) {
 }
 function createIslandHydrationScript(options) {
   const targetSelector = JSON.stringify(options.targetSelector);
-  const serializedProps = JSON.stringify(options.props ?? {});
   const componentRef = JSON.stringify(options.componentRef ?? "");
   const componentFile = JSON.stringify(options.componentFile ?? "");
-  const mountedAttribute = "data-eco-react-mounted";
   if (options.isDevelopment) {
     return `
 import { createRoot } from "${options.reactDomClientImportPath}";
@@ -197,16 +247,17 @@ const resolveComponent = () => {
 const mount = () => {
   const target = document.querySelector(${targetSelector});
   const Component = resolveComponent();
-  if (!target || !Component || target.hasAttribute("${mountedAttribute}")) {
+  if (!target || !Component) {
     return;
   }
-  const props = ${serializedProps};
-  target.setAttribute("${mountedAttribute}", "true");
-  const root = createRoot(target);
+  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));
 };
 
-document.addEventListener("eco:after-swap", mount);
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", mount, { once: true });
 } else {
@@ -214,7 +265,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||t.hasAttribute("${mountedAttribute}"))return;const p=${serializedProps};t.setAttribute("${mountedAttribute}","true");cr(t).render(ce(c,p))};document.addEventListener("eco:after-swap",m);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 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()`;
 }
 export {
   createHydrationScript,

package/src/utils/hydration-scripts.ts

@@ -72,10 +72,77 @@ function getComponentType(isMdx: boolean): string {
 	return isMdx ? 'MDX' : 'React';
 }
 
+/**
+ * Generates the development cleanup hook for the page-level React root.
+ *
+ * Why this exists:
+ * browser-router and React-router hand document ownership back and forth. The
+ * client runtime therefore needs a single cleanup entry point that can unmount
+ * the active React root, clear ownership flags, and discard serialized page data
+ * before a non-React renderer or a fresh React bootstrap takes over.
+ *
+ * Why it is emitted as a string:
+ * this module generates browser bootstraps, so the cleanup behavior must be
+ * embedded directly into the emitted module source.
+ */
+function getDevPageRootCleanupScript(): string {
+	return `window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+window.__ECO_PAGES__.react = window.__ECO_PAGES__.react || {};
+window.__ECO_PAGES__.react.cleanupPageRoot = () => {
+  const activeRoot = window.__ECO_PAGES__.react?.pageRoot || root;
+  if (!activeRoot) {
+    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;
+  activeRoot.unmount();
+};`;
+}
+
+/**
+ * Minified production variant of the page-root cleanup hook.
+ *
+ * It mirrors the development behavior exactly so navigation ownership semantics
+ * remain identical across environments while keeping the emitted payload small.
+ */
+function getProdPageRootCleanupScript(): string {
+	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(): string {
+	return `window.__ECO_PAGES__?.navigation?.register({
+  owner: "react-router",
+  cleanupBeforeHandoff: async () => {
+    window.__ECO_PAGES__?.react?.cleanupPageRoot?.();
+  }
+});
+window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");`;
+}
+
+function getProdRouterBootstrapRegistrationScript(): string {
+	return 'window.__ECO_PAGES__?.navigation?.register({owner:"react-router",cleanupBeforeHandoff:async()=>{window.__ECO_PAGES__?.react?.cleanupPageRoot?.()}});window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");';
+}
+
 /**
  * Creates development hydration script with router support.
- * Includes HMR handlers for hot module replacement.
- * Layout is NOT applied here since PageContent handles it.
+ *
+ * Why this branch exists:
+ * router-managed React pages keep a long-lived root across client-side
+ * navigations. The bootstrap therefore hydrates once, reuses that root for
+ * future renders, exposes cleanup for ownership handoff, and lets the router
+ * adapter reconstruct page content instead of rebuilding layout trees here.
+ *
+ * How it works:
+ * - imports the page module and router runtime pieces
+ * - reads serialized page props from the server payload
+ * - hydrates or re-renders the shared page root
+ * - installs HMR handlers that either ask the router to reload the active page
+ *   or patch the current root directly when the router is inactive
  */
 function createDevScriptWithRouter(options: HydrationScriptOptions): string {
 	const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath } = options;
@@ -90,10 +157,13 @@ import { createElement } from "${reactImportPath}";
 import { ${components.router}, ${components.pageContent} } from "${routerImportPath}";
 ${getImportStatement(importPath, isMdx)}
 
-window.__ecopages_hmr_handlers__ = window.__ecopages_hmr_handlers__ || {};
-window.__ecopages_router_active__ = false;
-window.__ecopages_reload_current_page__ = null;
-let root = null;
+window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+window.__ECO_PAGES__.hmrHandlers = window.__ECO_PAGES__.hmrHandlers || {};
+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;
+${getDevPageRootCleanupScript()}
+${getDevRouterBootstrapRegistrationScript()}
 
 const getPageData = () => {
   const el = document.getElementById("__ECO_PAGE_DATA__");
@@ -105,7 +175,7 @@ const getPageData = () => {
 
 const props = getPageData();
 
-window.__ECO_PAGE__ = {
+window.__ECO_PAGES__.page = {
   module: "${importPath}",
   props
 };
@@ -116,13 +186,18 @@ const createTree = (Component, props) => {
 };
 
 const mount = () => {
-  root = hydrateRoot(document, createTree(Page, props), {
-    onRecoverableError: (err) => console.warn("[ecopages] Hydration error:", err)
-  });
-  window.__ecopages_router_active__ = true;
-  window.__ecopages_hmr_handlers__["${importPath}"] = async (newUrl) => {
-    if (window.__ecopages_router_active__ && window.__ecopages_reload_current_page__) {
-      await window.__ecopages_reload_current_page__();
+  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;
+  }
+  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;
     }
@@ -147,7 +222,17 @@ if (document.readyState === "loading") {
 
 /**
  * Creates development hydration script without router.
- * Includes HMR handlers for hot module replacement.
+ *
+ * Why this branch exists:
+ * non-router React pages rebuild their layout tree directly from the page
+ * module on the client. That means the bootstrap must recreate the page and its
+ * optional layout so hydration matches the server HTML exactly.
+ *
+ * How it works:
+ * - imports the page module directly
+ * - reconstructs the layout wrapper from `Page.config?.layout`
+ * - hydrates a single document root
+ * - patches that root during HMR without involving a router adapter
  */
 function createDevScriptWithoutRouter(options: HydrationScriptOptions): string {
 	const { importPath, isMdx, reactImportPath, reactDomClientImportPath } = options;
@@ -157,8 +242,12 @@ import { hydrateRoot } from "${reactDomClientImportPath}";
 import { createElement } from "${reactImportPath}";
 ${getImportStatement(importPath, isMdx)}
 
-window.__ecopages_hmr_handlers__ = window.__ecopages_hmr_handlers__ || {};
-let root = null;
+window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+window.__ECO_PAGES__.hmrHandlers = window.__ECO_PAGES__.hmrHandlers || {};
+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;
+${getDevPageRootCleanupScript()}
 
 const getPageData = () => {
   const el = document.getElementById("__ECO_PAGE_DATA__");
@@ -170,7 +259,7 @@ const getPageData = () => {
 
 const props = getPageData();
 
-window.__ECO_PAGE__ = {
+window.__ECO_PAGES__.page = {
   module: "${importPath}",
   props
 };
@@ -178,14 +267,21 @@ window.__ECO_PAGE__ = {
 const createTree = (Component, props) => {
   const Layout = Component.config?.layout;
   const pageElement = createElement(Component, props);
-  return Layout ? createElement(Layout, null, pageElement) : pageElement;
+  const layoutProps = props?.locals ? { locals: props.locals } : null;
+  return Layout ? createElement(Layout, layoutProps, pageElement) : pageElement;
 };
 
 const mount = () => {
-  root = hydrateRoot(document, createTree(Page, props), {
-    onRecoverableError: (err) => console.warn("[ecopages] Hydration error:", err)
-  });
-  window.__ecopages_hmr_handlers__["${importPath}"] = async (newUrl) => {
+  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;
+  }
+  window.__ECO_PAGES__.hmrHandlers["${importPath}"] = async (newUrl) => {
     try {
       const newModule = await import(newUrl);
       ${getHmrImportStatement(isMdx)}
@@ -207,7 +303,10 @@ if (document.readyState === "loading") {
 
 /**
  * Creates minified production hydration script with router support.
- * Layout is NOT applied here since PageContent handles it.
+ *
+ * This is the production counterpart to `createDevScriptWithRouter()`. The
+ * ownership and hydration behavior is the same; only the emitted source is
+ * compressed for delivery.
  */
 function createProdScriptWithRouter(options: HydrationScriptOptions): string {
 	const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath } = options;
@@ -217,28 +316,45 @@ function createProdScriptWithRouter(options: HydrationScriptOptions): string {
 	}
 
 	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;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_PAGE__={module:"${importPath}",props:pr};const ct=(C,p)=>ce(R,${getRouterProps('C', 'p')},ce(PC));const m=()=>hr(document,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});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;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 gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGE__={module:"${importPath}",props:pr};const ct=(C,p)=>ce(R,${getRouterProps('C', 'p')},ce(PC));const m=()=>hr(document,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});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()`;
 }
 
 /**
- * Creates minified production hydration script without router.
+ * Creates the minified production hydration script for non-router pages.
+ *
+ * In this mode the page module is responsible for reconstructing its own layout
+ * tree. If the server serialized request `locals`, the script forwards those
+ * values to the layout as well as the page so hydration matches the server HTML.
+ * The runtime semantics mirror the development path; only the emitted source is
+ * condensed.
  */
 function createProdScriptWithoutRouter(options: HydrationScriptOptions): string {
 	const { importPath, isMdx, reactImportPath, reactDomClientImportPath } = 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;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_PAGE__={module:"${importPath}",props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);return L?ce(L,null,pe):pe};const m=()=>hr(document,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});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;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 gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGE__={module:"${importPath}",props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);return L?ce(L,null,pe):pe};const m=()=>hr(document,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});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()`;
 }
 
 /**
  * Creates a hydration script for client-side React hydration.
- * Generates appropriate script based on environment and router configuration.
+ *
+ * Why this dispatcher exists:
+ * the runtime matrix is small but behaviorally different across development vs
+ * production and router vs non-router pages. Keeping that branch here preserves
+ * a compact public API while allowing each emitted script to stay focused.
+ *
+ * Selection rules:
+ * - development uses readable scripts with HMR hooks
+ * - production uses minified equivalents
+ * - router presence decides whether page updates flow through the router runtime
+ *   or rebuild directly from the page module
+ *
  * @param options - Configuration options for script generation
  * @returns The generated hydration script as a string
  */
@@ -267,17 +383,21 @@ export function createHydrationScript(options: HydrationScriptOptions): string {
  * - resolves the component export by metadata (`componentRef`, `componentFile`)
  *   before falling back to default/first function export
  * - selects island root using `targetSelector`
+ * - replaces the SSR host with a dedicated client-owned container
  * - creates a fresh React root and renders with serialized `props`
  *
+ * Why it remounts instead of hydrating:
+ * island SSR intentionally avoids synthetic wrapper elements. The runtime swaps
+ * the authored SSR node for a dedicated client-owned container before mounting
+ * so the server markup stays clean while the client still gets a stable root.
+ *
  * @param options Island script generation options.
  * @returns Browser-executable JavaScript module source.
  */
 export function createIslandHydrationScript(options: IslandHydrationScriptOptions): string {
 	const targetSelector = JSON.stringify(options.targetSelector);
-	const serializedProps = JSON.stringify(options.props ?? {});
 	const componentRef = JSON.stringify(options.componentRef ?? '');
 	const componentFile = JSON.stringify(options.componentFile ?? '');
-	const mountedAttribute = 'data-eco-react-mounted';
 
 	if (options.isDevelopment) {
 		return `
@@ -316,16 +436,17 @@ const resolveComponent = () => {
 const mount = () => {
   const target = document.querySelector(${targetSelector});
   const Component = resolveComponent();
-  if (!target || !Component || target.hasAttribute("${mountedAttribute}")) {
+  if (!target || !Component) {
     return;
   }
-  const props = ${serializedProps};
-  target.setAttribute("${mountedAttribute}", "true");
-  const root = createRoot(target);
+  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));
 };
 
-document.addEventListener("eco:after-swap", mount);
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", mount, { once: true });
 } else {
@@ -334,5 +455,5 @@ 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||t.hasAttribute("${mountedAttribute}"))return;const p=${serializedProps};t.setAttribute("${mountedAttribute}","true");cr(t).render(ce(c,p))};document.addEventListener("eco:after-swap",m);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 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()`;
 }

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

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

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

@@ -0,0 +1,29 @@
+import fs from "node:fs";
+import path from "node:path";
+function createReactDomRuntimeInteropPlugin(options) {
+  const reactDomFileFilter = /[\\/]react-dom[\\/].*\.js$/;
+  const reactRequirePattern = /\brequire\((['"])react\1\)/g;
+  const reactSpecifier = options?.reactSpecifier ?? "react";
+  return {
+    name: options?.name ?? "react-dom-runtime-interop",
+    setup(build) {
+      build.onLoad({ filter: reactDomFileFilter }, (args) => {
+        const content = fs.readFileSync(args.path, "utf-8");
+        if (!reactRequirePattern.test(content)) {
+          return void 0;
+        }
+        reactRequirePattern.lastIndex = 0;
+        const rewritten = content.replace(reactRequirePattern, "__ecopages_react_runtime");
+        return {
+          contents: `import * as __ecopages_react_runtime from '${reactSpecifier}';
+${rewritten}`,
+          loader: "js",
+          resolveDir: path.dirname(args.path)
+        };
+      });
+    }
+  };
+}
+export {
+  createReactDomRuntimeInteropPlugin
+};

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

@@ -0,0 +1,33 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+
+export function createReactDomRuntimeInteropPlugin(options?: {
+	name?: string;
+	reactSpecifier?: string;
+}): EcoBuildPlugin {
+	const reactDomFileFilter = /[\\/]react-dom[\\/].*\.js$/;
+	const reactRequirePattern = /\brequire\((['"])react\1\)/g;
+	const reactSpecifier = options?.reactSpecifier ?? 'react';
+
+	return {
+		name: options?.name ?? 'react-dom-runtime-interop',
+		setup(build) {
+			build.onLoad({ filter: reactDomFileFilter }, (args) => {
+				const content = fs.readFileSync(args.path, 'utf-8');
+				if (!reactRequirePattern.test(content)) {
+					return undefined;
+				}
+
+				reactRequirePattern.lastIndex = 0;
+				const rewritten = content.replace(reactRequirePattern, '__ecopages_react_runtime');
+
+				return {
+					contents: `import * as __ecopages_react_runtime from '${reactSpecifier}';\n${rewritten}`,
+					loader: 'js',
+					resolveDir: path.dirname(args.path),
+				};
+			});
+		},
+	};
+}