@ecopages/react-router 0.2.0-alpha.26 → 0.2.0-alpha.28

package/CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to `@ecopages/react-router` are documented here.
 
 ### Bug Fixes
 
+- Fixed same-page hash links and Shadow DOM TOC clicks to bypass React Router interception so anchor navigation preserves the URL fragment without a document fetch.
 - Extended page-module extraction to honor explicit hydration markers and self-owned React page entry bundles during navigation.
 - Fixed current-page reloads to accept HMR module overrides so persisted-layout refreshes import the rebuilt active page entry.
 - Fixed React-to-browser-router handoffs, queued-click replay, and stale-navigation races during mixed-router navigations.
@@ -16,4 +17,5 @@ All notable changes to `@ecopages/react-router` are documented here.
 ### Refactoring
 
 - Routed browser handoff and current-page reloads through the shared navigation coordinator.
+- Removed the React router adapter `importMapKey` field so the adapter now exposes only the browser bundle import path used by both development and production hydration.
 - Updated package metadata for the current core, esbuild adapter, and React peer dependency surface.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react-router",
-  "version": "0.2.0-alpha.26",
+  "version": "0.2.0-alpha.28",
   "description": "Client-side SPA router for EcoPages React applications",
   "keywords": [
     "ecopages",
@@ -32,8 +32,8 @@
     "directory": "packages/react-router"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.26",
-    "@ecopages/react": "0.2.0-alpha.26"
+    "@ecopages/core": "0.2.0-alpha.28",
+    "@ecopages/react": "0.2.0-alpha.28"
   },
   "dependencies": {
     "react": "^19",

package/src/adapter.js

@@ -2,11 +2,10 @@ function ecoRouter(options) {
   return {
     name: "eco-router",
     bundle: {
-      importPath: "@ecopages/react-router/browser.ts",
+      importPath: "@ecopages/react-router/browser",
       outputName: "react-router-esm",
       externals: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime"]
     },
-    importMapKey: "@ecopages/react-router",
     components: {
       router: "EcoRouter",
       pageContent: "PageContent"

package/src/head-morpher.js

@@ -1,5 +1,5 @@
 import { isReactRouterPageBootstrapAssetSrc } from "./hydration-assets.js";
-const PRESERVE_SELECTORS = ['script[type="importmap"]', "meta[charset]", "[data-eco-persist]"];
+const PRESERVE_SELECTORS = ["meta[charset]", "[data-eco-persist]"];
 const RERUN_SRC_ATTR = "data-eco-rerun-src";
 let rerunNonce = 0;
 function isNonExecutableHeadScript(el) {
@@ -37,9 +37,13 @@ function shouldPersistExecutableInlineHeadScript(el) {
 function isRerunScript(el) {
   return el.tagName === "SCRIPT" && el.hasAttribute("data-eco-rerun");
 }
+function isReactRouterPageBootstrapScriptId(scriptId) {
+  return !!scriptId && scriptId.startsWith("ecopages-react-") && !scriptId.startsWith("ecopages-react-island-");
+}
 function isHydrationScript(el) {
   const src = el.getAttribute("src");
-  return !!src && isReactRouterPageBootstrapAssetSrc(src);
+  const scriptId = el.getAttribute("data-eco-script-id");
+  return isReactRouterPageBootstrapScriptId(scriptId) || !!src && isReactRouterPageBootstrapAssetSrc(src);
 }
 function getHeadElementKey(el) {
   const tag = el.tagName.toLowerCase();
@@ -59,7 +63,6 @@ function getHeadElementKey(el) {
       return href ? `link:${href}` : null;
     }
     case "script": {
-      if (el.getAttribute("type") === "importmap") return "importmap";
       const scriptId = el.getAttribute("data-eco-script-id") || el.getAttribute("id");
       if (scriptId) return `script-id:${scriptId}`;
       const src = el.getAttribute(RERUN_SRC_ATTR) || el.src;

package/src/navigation.d.ts

@@ -37,8 +37,9 @@ export type InterceptDecision = {
     shouldIntercept: true;
 } | {
     shouldIntercept: false;
-    reason: 'modified-click' | 'non-left-click' | 'external-target' | 'explicit-reload' | 'download' | 'invalid-href' | 'cross-origin';
+    reason: 'modified-click' | 'non-left-click' | 'external-target' | 'explicit-reload' | 'download' | 'invalid-href' | 'cross-origin' | 'same-page-hash';
 };
+export declare function isSamePageHashNavigationHref(href: string): boolean;
 /**
  * Determines whether a link click should be intercepted for client-side navigation.
  *

package/src/navigation.js

@@ -1,6 +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" };
@@ -16,6 +24,9 @@ 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) {
@@ -26,8 +37,8 @@ function extractComponentUrlFromMarker(doc) {
 }
 const DEFAULT_IMPORT_REGEX = /import\s+(\w+)\s+from\s*['"]([^'"]+)['"]/;
 const NAMESPACE_IMPORT_REGEX = /import\s*\*\s*as\s*(\w+)\s*from\s*['"]([^'"]+)['"]/;
-const PAGE_MODULE_MARKER_REGEX = /module\s*:\s*['"]([^'"]+)['"]/;
-const PAGE_MODULE_IDENTIFIER_REGEX = /module\s*:\s*([A-Za-z_$][\w$]*)\s*,/;
+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) {
@@ -160,6 +171,7 @@ export {
   extractProps,
   fetchPageDocument,
   getInterceptDecision,
+  isSamePageHashNavigationHref,
   loadPageModule,
   loadPageModuleFromDocument,
   shouldInterceptClick

package/src/router.js

@@ -1,5 +1,6 @@
 import {
   useEffect,
+  useEffectEvent,
   useState,
   useCallback,
   useMemo,
@@ -14,6 +15,7 @@ import { RouterContext } from "./context.js";
 import {
   fetchPageDocument,
   getInterceptDecision,
+  isSamePageHashNavigationHref,
   loadPageModuleFromDocument,
   shouldInterceptClick
 } from "./navigation.js";
@@ -21,7 +23,9 @@ 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 {
+  getEcoNavigationRuntime
+} from "@ecopages/core/router/navigation-coordinator";
 import {
   getAnchorFromNavigationEvent,
   recoverPendingNavigationHref
@@ -92,35 +96,39 @@ function createDeferred() {
   return { promise, resolve };
 }
 function useNavigationCoordinator(navigate, activeNavigationRef, isNavigatingRef, runtimeActiveRef) {
+  const handleCoordinatorNavigate = useEffectEvent(async (request) => {
+    await navigate(request.href, {
+      isPopState: request.direction === "back",
+      pushHistory: request.direction === "forward",
+      skipViewTransition: request.source === "browser-router"
+    });
+    return true;
+  });
+  const handleCoordinatorReload = useEffectEvent(async (request) => {
+    if (activeNavigationRef.current || isNavigatingRef.current) {
+      return;
+    }
+    if (request?.clearCache) {
+      clearLayoutCache();
+    }
+    const currentUrl = window.location.pathname + window.location.search;
+    await navigate(currentUrl, { moduleUrlOverride: request?.moduleUrl });
+  });
+  const handleCleanupBeforeHandoff = useEffectEvent(async () => {
+    runtimeActiveRef.current = false;
+    window.__ECO_PAGES__?.react?.cleanupPageRoot?.();
+  });
   useEffect(() => {
-    if (typeof window === "undefined") return;
     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, { moduleUrlOverride: request?.moduleUrl });
-      },
+      navigate: handleCoordinatorNavigate,
+      reloadCurrentPage: handleCoordinatorReload,
       cleanupBeforeHandoff: async () => {
-        runtimeActiveRef.current = false;
         unregisterRuntime?.();
         unregisterRuntime = null;
-        window.__ECO_PAGES__?.react?.cleanupPageRoot?.();
+        await handleCleanupBeforeHandoff();
       }
     });
     unregisterRuntime = unregister;
@@ -132,7 +140,7 @@ function useNavigationCoordinator(navigate, activeNavigationRef, isNavigatingRef
       unregisterRuntime?.();
       unregisterRuntime = null;
     };
-  }, [activeNavigationRef, isNavigatingRef, navigate, runtimeActiveRef]);
+  }, [runtimeActiveRef]);
 }
 const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
   const options = useMemo(() => ({ ...DEFAULT_OPTIONS, ...userOptions }), [userOptions]);
@@ -149,6 +157,9 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
   const pendingPointerNavigationRef = useRef(null);
   const pendingHoverNavigationRef = useRef(null);
   const queuedNavigationHrefRef = useRef(null);
+  const committedPathRef = useRef(
+    typeof window !== "undefined" ? window.location.pathname + window.location.search : ""
+  );
   const previousUrlRef = useRef(typeof window !== "undefined" ? window.location.href : "");
   useEffect(() => {
     isNavigatingRef.current = isNavigating;
@@ -157,25 +168,13 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
     setCurrentPage({ Component: page, props: pageProps, refreshPersistedLayout: true });
   }, [page, pageProps]);
   useEffect(() => {
+    committedPathRef.current = window.location.pathname + window.location.search;
     applyViewTransitionNames();
-  }, [currentPage]);
-  useEffect(() => {
     const pendingRender = pendingRenderRef.current;
     if (pendingRender && currentPage.Component === pendingRender.page.Component && currentPage.props === pendingRender.page.props) {
       pendingRender.resolve();
       pendingRenderRef.current = null;
     }
-  }, [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);
     const previousUrl = new URL(previousUrlRef.current);
     if (url.href !== previousUrl.href) {
@@ -186,6 +185,14 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
       previousUrlRef.current = url.href;
     }
   }, [currentPage, options.scrollBehavior, options.smoothScroll]);
+  useEffect(() => {
+    return () => {
+      activeNavigationRef.current?.cancel();
+      pendingRenderRef.current?.resolve();
+      pendingRenderRef.current = null;
+      queuedNavigationHrefRef.current = null;
+    };
+  }, []);
   const navigate = useCallback(
     async (url, navigationOptions = {}) => {
       const {
@@ -206,6 +213,16 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
           props
         };
       };
+      const preparePendingRender = (nextPage) => {
+        pendingRenderRef.current?.resolve();
+        const renderDfd = createDeferred();
+        pendingRenderRef.current = {
+          navigationId,
+          page: nextPage,
+          resolve: renderDfd.resolve
+        };
+        return renderDfd.promise;
+      };
       let navigationCommitPromise = null;
       try {
         setIsNavigating(true);
@@ -223,6 +240,17 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
           const { Component, props, doc, finalPath, moduleUrl } = result;
           const nextPage = { Component, props, refreshPersistedLayout: Boolean(moduleUrlOverride) };
           const { cleanup: cleanupHead, flushRerunScripts } = await morphHead(doc);
+          const finalizeCommittedNavigation = () => {
+            committedPathRef.current = finalPath;
+            flushRerunScripts();
+            cleanupHead();
+            applyViewTransitionNames();
+            restoreScrollPositions(finalPath, isPopState);
+          };
+          const commitNextPage = () => {
+            commitPageData(moduleUrl, props);
+            setCurrentPage(nextPage);
+          };
           if (isStale()) {
             cleanupHead();
             return;
@@ -235,13 +263,7 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
             window.history.replaceState(null, "", finalPath);
           }
           if (!skipViewTransition && options.viewTransitions && document.startViewTransition) {
-            pendingRenderRef.current?.resolve();
-            const renderDfd = createDeferred();
-            pendingRenderRef.current = {
-              navigationId,
-              page: nextPage,
-              resolve: renderDfd.resolve
-            };
+            const renderPromise = preparePendingRender(nextPage);
             navigationCommitPromise = new Promise((resolve) => {
               document.startViewTransition(async () => {
                 try {
@@ -254,17 +276,13 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
                     return;
                   }
                   startTransition(() => {
-                    commitPageData(moduleUrl, props);
-                    setCurrentPage(nextPage);
+                    commitNextPage();
                   });
-                  await renderDfd.promise;
+                  await renderPromise;
                   if (isStale()) {
                     return;
                   }
-                  flushRerunScripts();
-                  cleanupHead();
-                  applyViewTransitionNames();
-                  restoreScrollPositions(finalPath, isPopState);
+                  finalizeCommittedNavigation();
                 } finally {
                   resolve();
                 }
@@ -272,24 +290,14 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
             });
             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;
+            const renderPromise = preparePendingRender(nextPage);
+            commitNextPage();
+            await renderPromise;
             if (isStale()) {
               cleanupHead();
               return;
             }
-            flushRerunScripts();
-            cleanupHead();
-            applyViewTransitionNames();
-            restoreScrollPositions(finalPath, isPopState);
+            finalizeCommittedNavigation();
           }
         } else {
           if (isStale()) return;
@@ -313,11 +321,12 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
       } finally {
         const shouldReplayQueuedNavigation = activeNavigationRef.current?.id === navigationId;
         const queuedNavigationHref = shouldReplayQueuedNavigation ? queuedNavigationHrefRef.current : null;
+        const queuedNavigationPath = queuedNavigationHref ? new URL(queuedNavigationHref, window.location.origin).pathname + new URL(queuedNavigationHref, window.location.origin).search : null;
         navigation.complete();
         if (activeNavigationRef.current?.id === navigationId) {
           activeNavigationRef.current = null;
         }
-        if (queuedNavigationHref && queuedNavigationHref !== window.location.pathname + window.location.search) {
+        if (queuedNavigationHref && queuedNavigationPath !== committedPathRef.current) {
           queuedNavigationHrefRef.current = null;
           if (runtimeActiveRef.current) {
             void navigate(queuedNavigationHref, { pushHistory: true });
@@ -337,132 +346,150 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
     },
     [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 getLinkFromEvent = useEffectEvent(
+    (event) => getAnchorFromNavigationEvent(event, options.linkSelector)
+  );
+  const getRecoveredPointerHref = useEffectEvent(() => {
+    const href = recoverPendingNavigationHref(
+      pendingPointerNavigationRef.current,
+      !!activeNavigationRef.current || isNavigatingRef.current,
+      performance.now()
+    );
+    if (!href) {
+      pendingPointerNavigationRef.current = null;
+    }
+    return href;
+  });
+  const getRecoveredHoverHref = useEffectEvent(() => {
+    const href = recoverPendingNavigationHref(
+      pendingHoverNavigationRef.current,
+      !!activeNavigationRef.current || isNavigatingRef.current,
+      performance.now()
+    );
+    if (!href) {
+      pendingHoverNavigationRef.current = null;
+    }
+    return href;
+  });
+  const handleHoverIntent = useEffectEvent((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()
     };
-    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 = useEffectEvent((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 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) => {
-      if (!runtimeActiveRef.current) {
-        pendingPointerNavigationRef.current = null;
-        pendingHoverNavigationRef.current = null;
+    }
+  });
+  const handleClick = useEffectEvent((event) => {
+    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;
       }
-      const link = getLinkFromEvent(event);
-      if (!link) {
-        const recoveredHref = getRecoveredPointerHref() ?? getRecoveredHoverHref();
-        pendingPointerNavigationRef.current = null;
-        pendingHoverNavigationRef.current = null;
-        if (!recoveredHref) {
-          return;
-        }
-        event.preventDefault();
+      if (isSamePageHashNavigationHref(recoveredHref)) {
         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);
-          if (!decision.shouldIntercept) {
-            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);
+      const recoveredUrl = new URL(recoveredHref, window.location.href);
+      navigate(recoveredUrl.pathname + recoveredUrl.search, { pushHistory: true });
+      return;
+    }
+    if (!shouldInterceptClick(event, link, options)) {
       if (options.debug) {
-        console.debug("[EcoRouter] Intercepting navigation:", url.pathname + url.search);
+        const decision = getInterceptDecision(event, link, options);
+        if (!decision.shouldIntercept) {
+          console.debug("[EcoRouter] Not intercepting link click:", decision.reason, link.href);
+        }
       }
-      navigate(url.pathname + url.search, { pushHistory: true });
+      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);
+    }
+    navigate(url.pathname + url.search, { pushHistory: true });
+  });
+  const handlePopState = useEffectEvent(() => {
+    if (!runtimeActiveRef.current) {
+      return;
+    }
+    navigate(window.location.pathname + window.location.search, { isPopState: true });
+  });
+  useEffect(() => {
+    const onHoverIntent = (event) => {
+      handleHoverIntent(event);
     };
-    const handlePopState = () => {
-      if (!runtimeActiveRef.current) {
-        return;
-      }
-      navigate(window.location.pathname + window.location.search, { isPopState: true });
+    const onPointerDown = (event) => {
+      handlePointerDown(event);
     };
-    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);
+    const onClick = (event) => {
+      handleClick(event);
+    };
+    const onPopState = () => {
+      handlePopState();
+    };
+    document.addEventListener("mouseover", onHoverIntent, true);
+    document.addEventListener("pointerover", onHoverIntent, true);
+    document.addEventListener("mousemove", onHoverIntent, true);
+    document.addEventListener("pointermove", onHoverIntent, true);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("click", onClick, true);
+    window.addEventListener("popstate", onPopState);
     return () => {
-      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);
+      document.removeEventListener("mouseover", onHoverIntent, true);
+      document.removeEventListener("pointerover", onHoverIntent, true);
+      document.removeEventListener("mousemove", onHoverIntent, true);
+      document.removeEventListener("pointermove", onHoverIntent, true);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("click", onClick, true);
+      window.removeEventListener("popstate", onPopState);
     };
-  }, [navigate, options, runtimeActiveRef]);
+  }, []);
   useNavigationCoordinator(navigate, activeNavigationRef, isNavigatingRef, runtimeActiveRef);
   return createElement(
     RouterContext.Provider,