@ecopages/react-router 0.2.0-alpha.3 → 0.2.0-alpha.31

package/src/navigation.js

@@ -1,3 +1,14 @@
+import { getEcoDocumentOwner } from "@ecopages/core/router/navigation-coordinator";
+import { isReactPageHydrationAssetSrc } from "./hydration-assets.js";
+const ROUTER_PROPS_SCRIPT_ID = "__ECO_PAGE_DATA__";
+function isSamePageHashNavigationHref(href) {
+  if (!href) {
+    return false;
+  }
+  const currentUrl = new URL(window.location.href);
+  const targetUrl = new URL(href, currentUrl);
+  return targetUrl.origin === currentUrl.origin && targetUrl.hash.length > 0 && targetUrl.pathname === currentUrl.pathname && targetUrl.search === currentUrl.search;
+}
 function getInterceptDecision(event, link, options) {
   if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
     return { shouldIntercept: false, reason: "modified-click" };
@@ -13,26 +24,51 @@ function getInterceptDecision(event, link, options) {
   }
   const url = new URL(href, window.location.origin);
   if (url.origin !== window.location.origin) return { shouldIntercept: false, reason: "cross-origin" };
+  if (isSamePageHashNavigationHref(href)) {
+    return { shouldIntercept: false, reason: "same-page-hash" };
+  }
   return { shouldIntercept: true };
 }
 function extractComponentUrlFromMarker(doc) {
-  if (doc === document && window.__ECO_PAGE__?.module) {
-    return window.__ECO_PAGE__.module;
+  if (doc === document && window.__ECO_PAGES__?.page?.module) {
+    return window.__ECO_PAGES__.page.module;
   }
   return null;
 }
 const DEFAULT_IMPORT_REGEX = /import\s+(\w+)\s+from\s*['"]([^'"]+)['"]/;
 const NAMESPACE_IMPORT_REGEX = /import\s*\*\s*as\s*(\w+)\s*from\s*['"]([^'"]+)['"]/;
-function extractModulePathFromCode(code) {
+const PAGE_MODULE_MARKER_REGEX = /__ECO_PAGES__\.page\s*=\s*\{\s*module\s*:\s*['"]([^'"]+)['"]/;
+const PAGE_MODULE_IDENTIFIER_REGEX = /__ECO_PAGES__\.page\s*=\s*\{\s*module\s*:\s*([A-Za-z_$][\w$]*)\s*,/;
+function extractModulePathFromCode(code, fallbackUrl) {
+  const markerMatch = code.match(PAGE_MODULE_MARKER_REGEX);
+  if (markerMatch) {
+    return markerMatch[1] ?? null;
+  }
+  const moduleIdentifier = code.match(PAGE_MODULE_IDENTIFIER_REGEX)?.[1];
+  if (moduleIdentifier) {
+    const assignmentRegex = new RegExp(
+      `(?:const|let|var)[^;]*\\b${moduleIdentifier}\\s*=\\s*(?:['"]([^'"]+)['"]|(import\\.meta\\.url))`
+    );
+    const assignmentMatch = code.match(assignmentRegex);
+    if (assignmentMatch?.[1]) {
+      return assignmentMatch[1];
+    }
+    if (fallbackUrl && assignmentMatch?.[2]) {
+      return fallbackUrl;
+    }
+  }
+  if (fallbackUrl && code.includes("module:import.meta.url")) {
+    return fallbackUrl;
+  }
   const defaultMatch = code.match(DEFAULT_IMPORT_REGEX);
   const namespaceMatch = code.match(NAMESPACE_IMPORT_REGEX);
   return (defaultMatch || namespaceMatch)?.[2] ?? null;
 }
 function extractProps(doc) {
-  if (doc === document && window.__ECO_PAGE__?.props) {
-    return window.__ECO_PAGE__.props;
+  if (doc === document && window.__ECO_PAGES__?.page?.props) {
+    return window.__ECO_PAGES__.page.props;
   }
-  const propsScript = doc.getElementById("__ECO_PAGE_DATA__");
+  const propsScript = doc.getElementById(ROUTER_PROPS_SCRIPT_ID);
   if (propsScript?.textContent) {
     try {
       return JSON.parse(propsScript.textContent);
@@ -43,6 +79,9 @@ function extractProps(doc) {
   }
   return {};
 }
+function isReactRouteDocument(doc) {
+  return getEcoDocumentOwner(doc) === "react-router";
+}
 function addCacheBuster(url) {
   if (import.meta.env?.MODE === "production" || import.meta.env?.PROD) {
     return url;
@@ -55,66 +94,85 @@ async function extractComponentUrl(doc) {
   if (markerUrl) return markerUrl;
   const scripts = Array.from(doc.querySelectorAll("script"));
   const inlineHydrationScript = scripts.find(
-    (s) => !s.src && !!s.textContent && s.textContent.includes("__ECO_PAGE__") && s.textContent.includes("hydrateRoot") && s.textContent.includes("import")
+    (s) => !s.src && !!s.textContent && s.textContent.includes("__ECO_PAGES__") && s.textContent.includes("hydrateRoot") && s.textContent.includes("import")
   );
   if (inlineHydrationScript?.textContent) {
     return extractModulePathFromCode(inlineHydrationScript.textContent);
   }
-  const hydrationScript = scripts.find((s) => s.src?.includes("hydration.js") && s.src?.includes("ecopages-react"));
+  const hydrationScript = scripts.find((s) => isReactPageHydrationAssetSrc(s.src ?? ""));
   if (!hydrationScript?.src) return null;
   try {
     const scriptUrl = addCacheBuster(hydrationScript.src);
     const res = await fetch(scriptUrl);
     const code = await res.text();
-    return extractModulePathFromCode(code);
+    return extractModulePathFromCode(code, hydrationScript.src);
   } catch {
     return null;
   }
 }
-async function loadPageModule(url) {
+async function loadPageModule(url, options = {}) {
+  const fetchedPage = await fetchPageDocument(url, options);
+  if (!fetchedPage) {
+    return null;
+  }
+  return loadPageModuleFromDocument(fetchedPage.doc, fetchedPage.finalPath);
+}
+async function fetchPageDocument(url, options = {}) {
   try {
-    const res = await fetch(url);
+    const res = await fetch(url, {
+      signal: options.signal,
+      headers: {
+        Accept: "text/html"
+      }
+    });
     const html = await res.text();
     const finalUrl = new URL(res.url || url, window.location.origin);
     const finalPath = finalUrl.pathname + finalUrl.search;
     const doc = new DOMParser().parseFromString(html, "text/html");
-    const props = extractProps(doc);
-    const componentUrl = await extractComponentUrl(doc);
-    if (!componentUrl) {
-      console.error("[EcoRouter] Could not find component URL");
-      return null;
-    }
-    const moduleUrl = addCacheBuster(componentUrl);
-    const module = await import(
-      /* @vite-ignore */
-      moduleUrl
-    );
-    const rawComponent = module.Content || module.default?.Content || module.default;
-    const config = module.config || rawComponent?.config;
-    if (!rawComponent) {
-      console.error("[EcoRouter] No component found in module");
+    return { doc, finalPath, html };
+  } catch (e) {
+    if (e instanceof DOMException && e.name === "AbortError") {
       return null;
     }
-    if (config && !rawComponent.config) {
-      rawComponent.config = config;
-    }
-    window.__ECO_PAGE__ = {
-      module: componentUrl,
-      props
-    };
-    return { Component: rawComponent, props, doc, finalPath };
-  } catch (e) {
     console.error("[EcoRouter] Navigation failed:", e);
     return null;
   }
 }
+async function loadPageModuleFromDocument(doc, finalPath, options = {}) {
+  const props = extractProps(doc);
+  const componentUrl = options.moduleUrlOverride ?? await extractComponentUrl(doc);
+  if (!componentUrl) {
+    if (isReactRouteDocument(doc)) {
+      console.error("[EcoRouter] Could not find component URL");
+    }
+    return null;
+  }
+  const moduleUrl = addCacheBuster(componentUrl);
+  const module = await import(
+    /* @vite-ignore */
+    moduleUrl
+  );
+  const rawComponent = module.Content || module.default?.Content || module.default;
+  const config = module.config || rawComponent?.config;
+  if (!rawComponent) {
+    console.error("[EcoRouter] No component found in module");
+    return null;
+  }
+  if (config && !rawComponent.config) {
+    rawComponent.config = config;
+  }
+  return { Component: rawComponent, props, doc, finalPath, moduleUrl: componentUrl };
+}
 function shouldInterceptClick(event, link, options) {
   return getInterceptDecision(event, link, options).shouldIntercept;
 }
 export {
   extractComponentUrl,
   extractProps,
+  fetchPageDocument,
   getInterceptDecision,
+  isSamePageHashNavigationHref,
   loadPageModule,
+  loadPageModuleFromDocument,
   shouldInterceptClick
 };

package/src/props-script.d.ts

@@ -5,7 +5,7 @@ export interface EcoPropsScriptProps {
 }
 /**
  * Serializes page props as JSON for SPA navigation.
- * The hydration script reads this and sets window.__ECO_PAGE__.
+ * The hydration script reads this and sets window.__ECO_PAGES__.page.
  * Using application/json allows direct parsing without regex.
  */
 export declare const EcoPropsScript: FC<EcoPropsScriptProps>;

package/src/router.d.ts

@@ -29,7 +29,11 @@ export declare function clearLayoutCache(): void;
  * Renders the current page with its layout.
  *
  * Must be a child of {@link EcoRouter}. When `persistLayouts` is enabled,
- * shared layouts remain mounted across navigations.
+ * shared layouts remain mounted across navigations. When the server serialized
+ * request `locals` for hydration, the same `locals` object is passed to the
+ * layout on the client so the hydrated tree matches SSR. Refresh-style updates
+ * may still replace the cached layout implementation when the router marks the
+ * page state with `refreshPersistedLayout`.
  *
  * @example
  * ```tsx