@ecopages/react-router 0.2.0-alpha.5 → 0.2.0-alpha.8

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,215 @@ 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 cleanupHead = 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;
+                  }
+                  cleanupHead();
+                  applyViewTransitionNames();
+                } finally {
+                  resolve();
+                }
+              });
             });
-            await renderDfd.current?.promise;
+            await navigationCommitPromise;
+          } else {
+            commitPageData(moduleUrl, props);
+            setCurrentPage(nextPage);
             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 +405,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 } },