@ecopages/react-router 0.2.0-alpha.4 → 0.2.0-alpha.7

package/src/navigation.ts

@@ -5,14 +5,39 @@
 
 /// <reference types="@ecopages/core/declarations" />
 
+import { getEcoDocumentOwner } from '@ecopages/core/router/navigation-coordinator';
 import { type ComponentType } from 'react';
 import type { EcoRouterOptions } from './types.ts';
 
+const ROUTER_PROPS_SCRIPT_ID = '__ECO_PAGE_DATA__';
+
+function isReactPageHydrationAsset(src: string): boolean {
+	return src.includes('ecopages-react-') && src.includes('hydration.js') && !src.includes('ecopages-react-island-');
+}
+
 export type PageState = {
 	Component: ComponentType<any>;
 	props: Record<string, any>;
 };
 
+export type LoadedPageModule = {
+	Component: ComponentType<any>;
+	props: Record<string, any>;
+	doc: Document;
+	finalPath: string;
+	moduleUrl: string;
+};
+
+export type FetchedPageDocument = {
+	doc: Document;
+	finalPath: string;
+	html: string;
+};
+
+type LoadPageModuleOptions = {
+	signal?: AbortSignal;
+};
+
 export type InterceptDecision =
 	| { shouldIntercept: true }
 	| {
@@ -65,13 +90,13 @@ export function getInterceptDecision(
 }
 
 /**
- * Extracts component module URL from window.__ECO_PAGE__.
+ * Extracts component module URL from window.__ECO_PAGES__.page.
  * For current document, returns the module path set by hydration script.
  * For fetched documents, parses the hydration script to extract the module path.
  */
 function extractComponentUrlFromMarker(doc: Document): string | null {
-	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;
 }
@@ -99,16 +124,16 @@ function extractModulePathFromCode(code: string): string | null {
 }
 
 /**
- * Extracts serialized page props from window.__ECO_PAGE__ or fetched document.
+ * Extracts serialized page props from window.__ECO_PAGES__.page or fetched document.
  * For current document, returns props set by hydration script.
  * For fetched documents, parses the JSON script tag directly.
  */
 export function extractProps(doc: Document): Record<string, any> {
-	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);
@@ -121,6 +146,10 @@ export function extractProps(doc: Document): Record<string, any> {
 	return {};
 }
 
+function isReactRouteDocument(doc: Document): boolean {
+	return getEcoDocumentOwner(doc) === 'react-router';
+}
+
 /**
  * Adds cache-busting timestamp for HMR in development.
  *
@@ -138,7 +167,7 @@ function addCacheBuster(url: string): string {
 /**
  * Extracts component module URL using multi-tier strategy.
  *
- * 1. Read from window.__ECO_PAGE__.module (for current document)
+ * 1. Read from window.__ECO_PAGES__.page.module (for current document)
  * 2. Parse inline hydration script with regex (for fetched documents)
  * 3. Fetch and parse external hydration script (final fallback)
  *
@@ -154,7 +183,7 @@ export async function extractComponentUrl(doc: Document): Promise<string | null>
 		(s) =>
 			!s.src &&
 			!!s.textContent &&
-			s.textContent.includes('__ECO_PAGE__') &&
+			s.textContent.includes('__ECO_PAGES__') &&
 			s.textContent.includes('hydrateRoot') &&
 			s.textContent.includes('import'),
 	);
@@ -163,7 +192,7 @@ export async function extractComponentUrl(doc: Document): Promise<string | null>
 		return extractModulePathFromCode(inlineHydrationScript.textContent);
 	}
 
-	const hydrationScript = scripts.find((s) => s.src?.includes('hydration.js') && s.src?.includes('ecopages-react'));
+	const hydrationScript = scripts.find((s) => isReactPageHydrationAsset(s.src ?? ''));
 	if (!hydrationScript?.src) return null;
 
 	try {
@@ -189,9 +218,27 @@ export async function extractComponentUrl(doc: Document): Promise<string | null>
  */
 export async function loadPageModule(
 	url: string,
-): Promise<{ Component: ComponentType<any>; props: Record<string, any>; doc: Document; finalPath: string } | null> {
+	options: LoadPageModuleOptions = {},
+): Promise<LoadedPageModule | null> {
+	const fetchedPage = await fetchPageDocument(url, options);
+	if (!fetchedPage) {
+		return null;
+	}
+
+	return loadPageModuleFromDocument(fetchedPage.doc, fetchedPage.finalPath);
+}
+
+export async function fetchPageDocument(
+	url: string,
+	options: LoadPageModuleOptions = {},
+): Promise<FetchedPageDocument | null> {
 	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);
@@ -199,39 +246,42 @@ export async function loadPageModule(
 
 		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 { doc, finalPath, html };
+	} catch (e) {
+		if (e instanceof DOMException && e.name === 'AbortError') {
 			return null;
 		}
+		console.error('[EcoRouter] Navigation failed:', e);
+		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;
+export async function loadPageModuleFromDocument(doc: Document, finalPath: string): Promise<LoadedPageModule | null> {
+	const props = extractProps(doc);
+	const componentUrl = await extractComponentUrl(doc);
 
-		if (!rawComponent) {
-			console.error('[EcoRouter] No component found in module');
-			return null;
-		}
-
-		if (config && !rawComponent.config) {
-			rawComponent.config = config;
+	if (!componentUrl) {
+		if (isReactRouteDocument(doc)) {
+			console.error('[EcoRouter] Could not find component URL');
 		}
+		return null;
+	}
 
-		window.__ECO_PAGE__ = {
-			module: componentUrl,
-			props,
-		};
+	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;
 
-		return { Component: rawComponent, props, doc, finalPath };
-	} catch (e) {
-		console.error('[EcoRouter] Navigation failed:', e);
+	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 };
 }
 
 /**

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/props-script.ts

@@ -7,7 +7,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 const EcoPropsScript: FC<EcoPropsScriptProps> = ({ data }) => {

package/src/router.d.ts

@@ -29,7 +29,9 @@ 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.
  *
  * @example
  * ```tsx