@ecopages/react-router 0.2.0-alpha.1 → 0.2.0-alpha.11

package/src/router.js

@@ -11,11 +11,21 @@ import {
 } from "react";
 import { DEFAULT_OPTIONS } from "./types.js";
 import { RouterContext } from "./context.js";
-import { getInterceptDecision, loadPageModule, shouldInterceptClick } from "./navigation.js";
+import {
+  fetchPageDocument,
+  getInterceptDecision,
+  loadPageModuleFromDocument,
+  shouldInterceptClick
+} from "./navigation.js";
 import { morphHead } from "./head-morpher.js";
 import { applyViewTransitionNames } from "./view-transition-utils.js";
 import { manageScroll } from "./manage-scroll.js";
 import { saveScrollPositions, restoreScrollPositions } from "./scroll-persist.js";
+import { getEcoNavigationRuntime } from "@ecopages/core/router/navigation-coordinator";
+import {
+  getAnchorFromNavigationEvent,
+  recoverPendingNavigationHref
+} from "@ecopages/core/router/link-intent";
 const PageContext = createContext(null);
 const PersistLayoutsContext = createContext(false);
 function getLayoutFromPage(Page) {
@@ -57,6 +67,7 @@ const PageContent = () => {
   const { Component: Page, props } = pageContext;
   const Layout = getLayoutFromPage(Page);
   const pageElement = createElement(Page, props);
+  const layoutProps = props?.locals ? { locals: props.locals } : null;
   if (!Layout) {
     return pageElement;
   }
@@ -69,9 +80,9 @@ const PageContent = () => {
       layoutCache.set(layoutKey, Layout);
     }
     const CachedLayout = layoutCache.get(layoutKey);
-    return createElement(CachedLayout, { key: layoutKey }, pageElement);
+    return createElement(CachedLayout, { key: layoutKey, ...layoutProps ?? {} }, pageElement);
   }
-  return createElement(Layout, null, pageElement);
+  return createElement(Layout, layoutProps, pageElement);
 };
 function createDeferred() {
   let resolve;
@@ -80,31 +91,65 @@ function createDeferred() {
   });
   return { promise, resolve };
 }
-function useHmrReload(navigate) {
+function useNavigationCoordinator(navigate, activeNavigationRef, isNavigatingRef, runtimeActiveRef) {
   useEffect(() => {
     if (typeof window === "undefined") return;
-    if (import.meta.env?.MODE === "production" || import.meta.env?.PROD) return;
-    const windowWithHmr = window;
-    windowWithHmr.__ecopages_reload_current_page__ = async (options) => {
-      if (options?.clearCache) {
-        clearLayoutCache();
+    const navigationRuntime = getEcoNavigationRuntime(window);
+    let unregisterRuntime = null;
+    const unregister = navigationRuntime.register({
+      owner: "react-router",
+      navigate: async (request) => {
+        await navigate(request.href, {
+          isPopState: request.direction === "back",
+          pushHistory: request.direction === "forward",
+          skipViewTransition: request.source === "browser-router"
+        });
+        return true;
+      },
+      reloadCurrentPage: async (request) => {
+        if (activeNavigationRef.current || isNavigatingRef.current) {
+          return;
+        }
+        if (request?.clearCache) {
+          clearLayoutCache();
+        }
+        const currentUrl = window.location.pathname + window.location.search;
+        await navigate(currentUrl);
+      },
+      cleanupBeforeHandoff: async () => {
+        runtimeActiveRef.current = false;
+        unregisterRuntime?.();
+        unregisterRuntime = null;
+        window.__ECO_PAGES__?.react?.cleanupPageRoot?.();
       }
-      const currentUrl = window.location.pathname + window.location.search;
-      await navigate(currentUrl);
-    };
+    });
+    unregisterRuntime = unregister;
+    navigationRuntime.claimOwnership("react-router");
+    runtimeActiveRef.current = true;
     return () => {
-      windowWithHmr.__ecopages_reload_current_page__ = void 0;
+      runtimeActiveRef.current = false;
+      navigationRuntime.releaseOwnership("react-router");
+      unregisterRuntime?.();
+      unregisterRuntime = null;
     };
-  }, [navigate]);
+  }, [activeNavigationRef, isNavigatingRef, navigate, runtimeActiveRef]);
 }
 const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
   const options = useMemo(() => ({ ...DEFAULT_OPTIONS, ...userOptions }), [userOptions]);
   const [currentPage, setCurrentPage] = useState({ Component: page, props: pageProps });
   const [isNavigating, setIsNavigating] = useState(false);
-  const [pendingPage, setPendingPage] = useState(null);
-  const renderDfd = useRef(null);
+  const pendingRenderRef = useRef(null);
+  const activeNavigationRef = useRef(null);
+  const isNavigatingRef = useRef(false);
+  const runtimeActiveRef = useRef(true);
+  const pendingPointerNavigationRef = useRef(null);
+  const pendingHoverNavigationRef = useRef(null);
+  const queuedNavigationHrefRef = useRef(null);
   const pendingScrollRestoreRef = useRef(null);
   const previousUrlRef = useRef(typeof window !== "undefined" ? window.location.href : "");
+  useEffect(() => {
+    isNavigatingRef.current = isNavigating;
+  }, [isNavigating]);
   useEffect(() => {
     setCurrentPage({ Component: page, props: pageProps });
   }, [page, pageProps]);
@@ -112,12 +157,20 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
     applyViewTransitionNames();
   }, [currentPage]);
   useEffect(() => {
-    if (pendingPage && currentPage.Component === pendingPage.Component && renderDfd.current) {
-      renderDfd.current.resolve();
-      renderDfd.current = null;
-      setPendingPage(null);
+    const pendingRender = pendingRenderRef.current;
+    if (pendingRender && currentPage.Component === pendingRender.page.Component && currentPage.props === pendingRender.page.props) {
+      pendingRender.resolve();
+      pendingRenderRef.current = null;
     }
-  }, [currentPage, pendingPage]);
+  }, [currentPage]);
+  useEffect(() => {
+    return () => {
+      activeNavigationRef.current?.cancel();
+      pendingRenderRef.current?.resolve();
+      pendingRenderRef.current = null;
+      queuedNavigationHrefRef.current = null;
+    };
+  }, []);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const url = new URL(window.location.href);
@@ -136,49 +189,229 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
     }
   }, [currentPage, options.scrollBehavior, options.smoothScroll]);
   const navigate = useCallback(
-    async (url, isPopState = false) => {
-      setIsNavigating(true);
-      const result = await loadPageModule(url);
-      if (result) {
-        const { Component, props, doc, finalPath } = result;
-        const nextPage = { Component, props };
-        const cleanupHead = await morphHead(doc);
-        applyViewTransitionNames();
-        if (finalPath !== url) {
-          window.history.replaceState(null, "", finalPath);
+    async (url, navigationOptions = {}) => {
+      const { isPopState = false, pushHistory = false, skipViewTransition = false } = navigationOptions;
+      const navigationRuntime = getEcoNavigationRuntime(window);
+      const navigation = navigationRuntime.beginNavigationTransaction();
+      activeNavigationRef.current = navigation;
+      const navigationId = navigation.id;
+      const isStale = () => !navigation.isCurrent();
+      const commitPageData = (moduleUrl, props) => {
+        window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+        window.__ECO_PAGES__.page = {
+          module: moduleUrl,
+          props
+        };
+      };
+      let navigationCommitPromise = null;
+      try {
+        setIsNavigating(true);
+        const fetchedPage = await fetchPageDocument(url, { signal: navigation.signal });
+        if (isStale()) return;
+        if (!fetchedPage) {
+          window.location.href = url;
+          return;
         }
-        saveScrollPositions();
-        pendingScrollRestoreRef.current = { url, isPopState };
-        if (options.viewTransitions && document.startViewTransition) {
-          renderDfd.current = createDeferred();
-          setPendingPage(nextPage);
-          document.startViewTransition(async () => {
-            startTransition(() => {
-              setCurrentPage(nextPage);
+        const result = await loadPageModuleFromDocument(fetchedPage.doc, fetchedPage.finalPath);
+        if (isStale()) return;
+        if (result) {
+          const { Component, props, doc, finalPath, moduleUrl } = result;
+          const nextPage = { Component, props };
+          const { cleanup: cleanupHead, flushRerunScripts } = await morphHead(doc);
+          if (isStale()) {
+            cleanupHead();
+            return;
+          }
+          applyViewTransitionNames();
+          if (pushHistory) {
+            window.history.pushState(null, "", finalPath);
+          } else if (finalPath !== url) {
+            window.history.replaceState(null, "", finalPath);
+          }
+          saveScrollPositions();
+          pendingScrollRestoreRef.current = { url, isPopState };
+          if (!skipViewTransition && options.viewTransitions && document.startViewTransition) {
+            pendingRenderRef.current?.resolve();
+            const renderDfd = createDeferred();
+            pendingRenderRef.current = {
+              navigationId,
+              page: nextPage,
+              resolve: renderDfd.resolve
+            };
+            navigationCommitPromise = new Promise((resolve) => {
+              document.startViewTransition(async () => {
+                try {
+                  if (isStale()) {
+                    if (pendingRenderRef.current?.navigationId === navigationId) {
+                      pendingRenderRef.current.resolve();
+                      pendingRenderRef.current = null;
+                    }
+                    cleanupHead();
+                    return;
+                  }
+                  startTransition(() => {
+                    commitPageData(moduleUrl, props);
+                    setCurrentPage(nextPage);
+                  });
+                  await renderDfd.promise;
+                  if (isStale()) {
+                    return;
+                  }
+                  flushRerunScripts();
+                  cleanupHead();
+                  applyViewTransitionNames();
+                } finally {
+                  resolve();
+                }
+              });
             });
-            await renderDfd.current?.promise;
+            await navigationCommitPromise;
+          } else {
+            pendingRenderRef.current?.resolve();
+            const renderDfd = createDeferred();
+            pendingRenderRef.current = {
+              navigationId,
+              page: nextPage,
+              resolve: renderDfd.resolve
+            };
+            commitPageData(moduleUrl, props);
+            setCurrentPage(nextPage);
+            await renderDfd.promise;
+            if (isStale()) {
+              cleanupHead();
+              return;
+            }
+            flushRerunScripts();
             cleanupHead();
             applyViewTransitionNames();
-          });
+          }
         } else {
-          setCurrentPage(nextPage);
-          cleanupHead();
-          applyViewTransitionNames();
+          if (isStale()) return;
+          const handled = await navigationRuntime.requestHandoff({
+            href: url,
+            finalHref: fetchedPage.finalPath,
+            direction: isPopState ? "back" : pushHistory ? "forward" : "replace",
+            source: "react-router",
+            targetOwner: "browser-router",
+            document: fetchedPage.doc,
+            html: fetchedPage.html,
+            isStaleSourceNavigation: isStale
+          });
+          if (!handled) {
+            window.location.assign(fetchedPage.finalPath);
+          }
         }
-      } else {
-        if (options.debug) {
-          console.error("[EcoRouter] Falling back to full page navigation:", url);
+        if (!isStale()) {
+          setIsNavigating(false);
+        }
+      } finally {
+        const shouldReplayQueuedNavigation = activeNavigationRef.current?.id === navigationId;
+        const queuedNavigationHref = shouldReplayQueuedNavigation ? queuedNavigationHrefRef.current : null;
+        navigation.complete();
+        if (activeNavigationRef.current?.id === navigationId) {
+          activeNavigationRef.current = null;
+        }
+        if (queuedNavigationHref && queuedNavigationHref !== window.location.pathname + window.location.search) {
+          queuedNavigationHrefRef.current = null;
+          if (runtimeActiveRef.current) {
+            void navigate(queuedNavigationHref, { pushHistory: true });
+          } else {
+            void navigationRuntime.requestNavigation({
+              href: queuedNavigationHref,
+              direction: "forward",
+              source: "react-router"
+            }).then((handled) => {
+              if (!handled) {
+                window.location.assign(queuedNavigationHref);
+              }
+            });
+          }
         }
-        window.location.href = url;
       }
-      setIsNavigating(false);
     },
-    [options.viewTransitions, options.debug]
+    [options.viewTransitions]
   );
   useEffect(() => {
+    const getLinkFromEvent = (event) => getAnchorFromNavigationEvent(event, options.linkSelector);
+    const getRecoveredPointerHref = () => {
+      const href = recoverPendingNavigationHref(
+        pendingPointerNavigationRef.current,
+        !!activeNavigationRef.current || isNavigatingRef.current,
+        performance.now()
+      );
+      if (!href) {
+        pendingPointerNavigationRef.current = null;
+      }
+      return href;
+    };
+    const getRecoveredHoverHref = () => {
+      const href = recoverPendingNavigationHref(
+        pendingHoverNavigationRef.current,
+        !!activeNavigationRef.current || isNavigatingRef.current,
+        performance.now()
+      );
+      if (!href) {
+        pendingHoverNavigationRef.current = null;
+      }
+      return href;
+    };
+    const handleHoverIntent = (event) => {
+      if (!runtimeActiveRef.current) {
+        return;
+      }
+      const link = getLinkFromEvent(event);
+      if (!link) {
+        return;
+      }
+      const decision = getInterceptDecision(event, link, options);
+      if (!decision.shouldIntercept) {
+        return;
+      }
+      pendingHoverNavigationRef.current = {
+        href: link.getAttribute("href"),
+        timestamp: performance.now()
+      };
+      queuedNavigationHrefRef.current = link.getAttribute("href");
+    };
+    const handlePointerDown = (event) => {
+      if (!runtimeActiveRef.current) {
+        pendingPointerNavigationRef.current = null;
+        return;
+      }
+      const link = getLinkFromEvent(event);
+      if (!link) {
+        pendingPointerNavigationRef.current = null;
+        return;
+      }
+      const decision = getInterceptDecision(event, link, options);
+      pendingPointerNavigationRef.current = decision.shouldIntercept ? {
+        href: link.getAttribute("href"),
+        timestamp: performance.now()
+      } : null;
+      if (decision.shouldIntercept && (activeNavigationRef.current || isNavigatingRef.current)) {
+        queuedNavigationHrefRef.current = link.getAttribute("href");
+      }
+    };
     const handleClick = (event) => {
-      const link = event.target.closest(options.linkSelector);
-      if (!link) return;
+      if (!runtimeActiveRef.current) {
+        pendingPointerNavigationRef.current = null;
+        pendingHoverNavigationRef.current = null;
+        return;
+      }
+      const link = getLinkFromEvent(event);
+      if (!link) {
+        const recoveredHref = getRecoveredPointerHref() ?? getRecoveredHoverHref();
+        pendingPointerNavigationRef.current = null;
+        pendingHoverNavigationRef.current = null;
+        if (!recoveredHref) {
+          return;
+        }
+        event.preventDefault();
+        queuedNavigationHrefRef.current = null;
+        const recoveredUrl = new URL(recoveredHref, window.location.origin);
+        navigate(recoveredUrl.pathname + recoveredUrl.search, { pushHistory: true });
+        return;
+      }
       if (!shouldInterceptClick(event, link, options)) {
         if (options.debug) {
           const decision = getInterceptDecision(event, link, options);
@@ -186,28 +419,45 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
             console.debug("[EcoRouter] Not intercepting link click:", decision.reason, link.href);
           }
         }
+        pendingPointerNavigationRef.current = null;
+        pendingHoverNavigationRef.current = null;
         return;
       }
+      pendingPointerNavigationRef.current = null;
+      pendingHoverNavigationRef.current = null;
       event.preventDefault();
+      queuedNavigationHrefRef.current = null;
       const href = link.getAttribute("href");
       const url = new URL(href, window.location.origin);
       if (options.debug) {
         console.debug("[EcoRouter] Intercepting navigation:", url.pathname + url.search);
       }
-      window.history.pushState(null, "", url.href);
-      navigate(url.pathname + url.search);
+      navigate(url.pathname + url.search, { pushHistory: true });
     };
     const handlePopState = () => {
-      navigate(window.location.pathname + window.location.search, true);
+      if (!runtimeActiveRef.current) {
+        return;
+      }
+      navigate(window.location.pathname + window.location.search, { isPopState: true });
     };
-    document.addEventListener("click", handleClick);
+    document.addEventListener("mouseover", handleHoverIntent, true);
+    document.addEventListener("pointerover", handleHoverIntent, true);
+    document.addEventListener("mousemove", handleHoverIntent, true);
+    document.addEventListener("pointermove", handleHoverIntent, true);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("click", handleClick, true);
     window.addEventListener("popstate", handlePopState);
     return () => {
-      document.removeEventListener("click", handleClick);
+      document.removeEventListener("mouseover", handleHoverIntent, true);
+      document.removeEventListener("pointerover", handleHoverIntent, true);
+      document.removeEventListener("mousemove", handleHoverIntent, true);
+      document.removeEventListener("pointermove", handleHoverIntent, true);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("click", handleClick, true);
       window.removeEventListener("popstate", handlePopState);
     };
-  }, [navigate, options]);
-  useHmrReload(navigate);
+  }, [navigate, options, runtimeActiveRef]);
+  useNavigationCoordinator(navigate, activeNavigationRef, isNavigatingRef, runtimeActiveRef);
   return createElement(
     RouterContext.Provider,
     { value: { navigate, isNavigating } },

package/browser.ts

@@ -1,17 +0,0 @@
-/**
- * Browser entry point for @ecopages/react-router.
- * This file exports only the client-side components needed for hydration.
- * @module
- */
-
-export { EcoRouter, PageContent } from './src/router.ts';
-export type { EcoRouterProps } from './src/router.ts';
-
-export { useRouter } from './src/context.ts';
-export type { RouterContextValue } from './src/context.ts';
-export { EcoPropsScript } from './src/props-script.ts';
-export type { EcoPropsScriptProps } from './src/props-script.ts';
-
-export { morphHead } from './src/head-morpher.ts';
-
-export type { PageState } from './src/navigation.ts';

package/src/adapter.ts

@@ -1,48 +0,0 @@
-/**
- * Router adapter for React integration.
- * @module
- */
-
-import type { ReactRouterAdapter } from '@ecopages/react/router-adapter';
-import type { EcoRouterOptions } from './types.ts';
-
-/**
- * Creates a ReactRouterAdapter for EcoPages React Router.
- * Use this with the React plugin to enable SPA navigation.
- *
- * @param options - Router configuration options
- * @example
- * ```ts
- * import { reactPlugin } from '@ecopages/react';
- * import { ecoRouter } from '@ecopages/react-router';
- *
- * export default {
- *   integrations: [reactPlugin({ router: ecoRouter() })],
- * };
- * ```
- *
- * @example
- * ```ts
- * // Disable view transitions
- * reactPlugin({ router: ecoRouter({ viewTransitions: false }) })
- * ```
- */
-export function ecoRouter(options?: EcoRouterOptions): ReactRouterAdapter {
-	return {
-		name: 'eco-router',
-		bundle: {
-			importPath: '@ecopages/react-router/browser.ts',
-			outputName: 'react-router-esm',
-			externals: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
-		},
-		importMapKey: '@ecopages/react-router',
-		components: {
-			router: 'EcoRouter',
-			pageContent: 'PageContent',
-		},
-		getRouterProps(page: string, props: string): string {
-			const optionsStr = options ? `, options: ${JSON.stringify(options)}` : '';
-			return `{ page: ${page}, pageProps: ${props}${optionsStr} }`;
-		},
-	};
-}

package/src/context.ts

@@ -1,25 +0,0 @@
-/**
- * Router context and hook for accessing navigation state.
- * @module
- */
-
-import { createContext, useContext } from 'react';
-
-export type RouterContextValue = {
-	navigate: (url: string) => void;
-	isNavigating: boolean;
-};
-
-export const RouterContext = createContext<RouterContextValue | null>(null);
-
-/**
- * Hook to access the router's navigate function and navigation state.
- * Must be used within an EcoRouter.
- *
- * @throws Error if used outside of EcoRouter
- */
-export const useRouter = (): RouterContextValue => {
-	const context = useContext(RouterContext);
-	if (!context) throw new Error('useRouter must be used within EcoRouter');
-	return context;
-};