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

package/src/utils/component-config-traversal.js

@@ -0,0 +1,54 @@
+function walkConfigTree(config, visitor, visited = /* @__PURE__ */ new Set()) {
+  if (!config || visited.has(config)) {
+    return;
+  }
+  visited.add(config);
+  visitor(config);
+  if (config.layout?.config) {
+    walkConfigTree(config.layout.config, visitor, visited);
+  }
+  for (const component of config.dependencies?.components ?? []) {
+    walkConfigTree(component.config, visitor, visited);
+  }
+}
+function walkConfigForest(configs, visitor) {
+  const visited = /* @__PURE__ */ new Set();
+  for (const config of configs) {
+    walkConfigTree(config, visitor, visited);
+  }
+}
+function collectFromConfigTree(config, collector) {
+  const values = [];
+  walkConfigTree(config, (node) => {
+    values.push(...collector(node));
+  });
+  return values;
+}
+function collectFromConfigForest(configs, collector) {
+  const values = [];
+  walkConfigForest(configs, (node) => {
+    values.push(...collector(node));
+  });
+  return values;
+}
+function someInConfigTree(config, predicate) {
+  let matched = false;
+  walkConfigTree(config, (node) => {
+    if (matched) {
+      return;
+    }
+    matched = predicate(node);
+  });
+  return matched;
+}
+function getComponentConfigs(components) {
+  return components.map((component) => component.config);
+}
+export {
+  collectFromConfigForest,
+  collectFromConfigTree,
+  getComponentConfigs,
+  someInConfigTree,
+  walkConfigForest,
+  walkConfigTree
+};

package/src/utils/declared-modules.d.ts

@@ -29,7 +29,7 @@ export declare function normalizeDeclaredModuleSources(modules?: string[]): stri
  * Recursively walks a component config tree (including layouts and nested
  * `dependencies.components`) to collect all declared module sources.
  */
-export declare function collectDeclaredModulesInConfig(config: EcoComponentConfig | undefined, visited?: Set<EcoComponentConfig>): string[];
+export declare function collectDeclaredModulesInConfig(config: EcoComponentConfig | undefined): string[];
 /**
  * Collects declared module sources from an already imported page module.
  */

package/src/utils/declared-modules.js

@@ -1,3 +1,4 @@
+import { collectFromConfigTree } from "./component-config-traversal.js";
 function parseDeclaredModuleSource(value) {
   const source = value.trim();
   if (source.length === 0) return void 0;
@@ -16,21 +17,8 @@ function normalizeDeclaredModuleSources(modules) {
   }
   return Array.from(seen);
 }
-function collectDeclaredModulesInConfig(config, visited = /* @__PURE__ */ new Set()) {
-  if (!config || visited.has(config)) {
-    return [];
-  }
-  visited.add(config);
-  const declarations = normalizeDeclaredModuleSources(config.dependencies?.modules);
-  if (config.layout?.config) {
-    declarations.push(...collectDeclaredModulesInConfig(config.layout.config, visited));
-  }
-  for (const component of config.dependencies?.components ?? []) {
-    if (component.config) {
-      declarations.push(...collectDeclaredModulesInConfig(component.config, visited));
-    }
-  }
-  return declarations;
+function collectDeclaredModulesInConfig(config) {
+  return collectFromConfigTree(config, (node) => normalizeDeclaredModuleSources(node.dependencies?.modules));
 }
 function collectPageDeclaredModulesFromModule(pageModule) {
   const declarations = [
@@ -41,7 +29,10 @@ function collectPageDeclaredModulesFromModule(pageModule) {
 }
 async function collectPageDeclaredModules(pagePath) {
   try {
-    const pageModule = await import(pagePath);
+    const pageModule = await import(
+      /* @vite-ignore */
+      pagePath
+    );
     return collectPageDeclaredModulesFromModule(pageModule);
   } catch {
     return [];

package/src/utils/dynamic.test.browser.d.ts

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

package/src/utils/dynamic.test.browser.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { dynamic } from "./dynamic.js";
+function createDeferredImport() {
+  let resolve;
+  const promise = new Promise((innerResolve) => {
+    resolve = innerResolve;
+  });
+  return {
+    promise,
+    resolve
+  };
+}
+describe("dynamic", () => {
+  afterEach(() => {
+    cleanup();
+  });
+  it("returns a browser lazy component that resolves through Suspense", async () => {
+    const deferredImport = createDeferredImport();
+    const DynamicComponent = dynamic(() => deferredImport.promise);
+    render(
+      /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("span", { children: "Loading dynamic component" }), children: /* @__PURE__ */ jsx(DynamicComponent, {}) })
+    );
+    expect(screen.getByText("Loading dynamic component")).toBeTruthy();
+    deferredImport.resolve({
+      default: () => /* @__PURE__ */ jsx("span", { children: "Dynamic content" })
+    });
+    expect(await screen.findByText("Dynamic content")).toBeTruthy();
+    expect(screen.queryByText("Loading dynamic component")).toBeNull();
+  });
+});

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,12 @@ 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;
+    /** Browser expression that resolves to the page module URL the router should import. */
+    pageModuleUrlExpression?: 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 */
@@ -26,14 +30,14 @@ export type HydrationScriptOptions = {
 export type IslandHydrationScriptOptions = {
     /** Bundled browser module path for the island component. */
     importPath: string;
+    /** Stable id of the island bootstrap script tag in the document. */
+    scriptId: string;
     /** Browser import path for React runtime. */
     reactImportPath: string;
     /** Browser import path for react-dom/client runtime. */
     reactDomClientImportPath: string;
-    /** Selector that resolves to the SSR root element for this island instance. */
+    /** Selector that resolves to all SSR root elements for this island component. */
     targetSelector: string;
-    /** Serialized component props emitted at render time. */
-    props: Record<string, unknown>;
     /** Optional stable component id used to resolve named exports reliably. */
     componentRef?: string;
     /** Optional source file hint used as fallback for component resolution. */
@@ -43,7 +47,18 @@ export type IslandHydrationScriptOptions = {
 };
 /**
  * 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
  */
@@ -63,8 +78,14 @@ export declare function createHydrationScript(options: HydrationScriptOptions):
  * - 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.
  */

package/src/utils/hydration-scripts.js

@@ -9,8 +9,66 @@ 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 `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");
+}`;
+}
+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 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");
@@ -20,11 +78,21 @@ 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}"]'));
 
-window.__ecopages_hmr_handlers__ = window.__ecopages_hmr_handlers__ || {};
-window.__ecopages_router_active__ = false;
-window.__ecopages_reload_current_page__ = null;
-let root = null;
+if (isActivePageEntry) {
+
+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()}
+${getDevReuseExistingRouterRootScript()}
 
 const getPageData = () => {
   const el = document.getElementById("__ECO_PAGE_DATA__");
@@ -36,8 +104,8 @@ const getPageData = () => {
 
 const props = getPageData();
 
-window.__ECO_PAGE__ = {
-  module: "${importPath}",
+window.__ECO_PAGES__.page = {
+  module: pageModuleUrl,
   props
 };
 
@@ -47,20 +115,46 @@ 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__();
-      console.log("[ecopages] ${getComponentType(isMdx)} component updated via router");
-      return;
-    }
+  const props = getPageData();
+  window.__ECO_PAGES__.page = {
+    module: pageModuleUrl,
+    props
+  };
+
+  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 {
+    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);
+      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);
@@ -68,22 +162,36 @@ 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.__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,22 +203,35 @@ const getPageData = () => {
 
 const props = getPageData();
 
-window.__ECO_PAGE__ = {
-  module: "${importPath}",
+window.__ECO_PAGES__.page = {
+  module: pageModuleUrl,
   props
 };
 
 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) => {
+  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));
+  } 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)}
@@ -122,30 +243,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;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;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;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{${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}";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;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 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;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;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}";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}";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;
@@ -156,10 +282,9 @@ 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";
+  const scriptId = options.scriptId;
   if (options.isDevelopment) {
     return `
 import { createRoot } from "${options.reactDomClientImportPath}";
@@ -195,18 +320,26 @@ const resolveComponent = () => {
 };
 
 const mount = () => {
-  const target = document.querySelector(${targetSelector});
+  const targets = document.querySelectorAll(${targetSelector});
   const Component = resolveComponent();
-  if (!target || !Component || target.hasAttribute("${mountedAttribute}")) {
+  if (!Component || targets.length === 0) {
     return;
   }
-  const props = ${serializedProps};
-  target.setAttribute("${mountedAttribute}", "true");
-  const root = createRoot(target);
-  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));
+  });
 };
 
-document.addEventListener("eco:after-swap", mount);
+${getDevRerunRegistrationScript(scriptId)}
+
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", mount, { once: true });
 } else {
@@ -214,7 +347,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 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 {};