@rangojs/router 0.0.0-experimental.2 → 0.0.0-experimental.21

package/src/browser/react/Link.tsx

@@ -1,69 +1,71 @@
 "use client";
 
-import React, { forwardRef, useCallback, useContext, useRef, type ForwardRefExoticComponent, type RefAttributes } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from "react";
 import { NavigationStoreContext } from "./context.js";
 import { LinkContext } from "./use-link-status.js";
 import type { NavigateOptions } from "../types.js";
+import { isHashOnlyNavigation } from "../link-interceptor.js";
 import {
-  type LocationStateEntry,
   isLocationStateEntry,
+  type LocationStateEntry,
   resolveLocationStateEntries,
 } from "./location-state.js";
 
 /**
- * State value or getter function for just-in-time state resolution (legacy)
+ * State prop type for Link component.
+ * - LocationStateEntry[]: Type-safe state entries via createLocationState()
+ * - StateOrGetter: Plain state object or click-time getter function
+ * - Record<string, unknown>: Plain state object passed to history.pushState
  */
 export type StateOrGetter<T = unknown> = T | (() => T);
 
-/**
- * State prop type for Link component
- * - LocationStateEntry[]: Type-safe state entries (always lazy)
- * - StateOrGetter: Legacy format for backwards compatibility
- */
-export type LinkState = LocationStateEntry[] | StateOrGetter;
-
-// Track prefetched URLs to avoid duplicate <link> elements
-const prefetchedUrls = new Set<string>();
+export type LinkState =
+  | LocationStateEntry[]
+  | StateOrGetter<Record<string, unknown>>;
 
-/**
- * Inject a <link rel="prefetch"> element into the document head
- * for the given URL with RSC partial request parameters.
- */
-function prefetchUrl(url: string, segmentIds: string[]): void {
-  if (prefetchedUrls.has(url)) return;
-  prefetchedUrls.add(url);
-
-  // Build RSC partial URL with segment IDs
-  const targetUrl = new URL(url, window.location.origin);
-  targetUrl.searchParams.set("_rsc_partial", "true");
-  if (segmentIds.length > 0) {
-    targetUrl.searchParams.set("_rsc_segments", segmentIds.join(","));
-  }
+import { prefetchDirect, prefetchQueued } from "../prefetch/fetch.js";
+import {
+  observeForPrefetch,
+  unobserveForPrefetch,
+} from "../prefetch/observer.js";
 
-  // Inject <link rel="prefetch"> into head
-  const link = document.createElement("link");
-  link.rel = "prefetch";
-  link.href = targetUrl.toString();
-  link.as = "fetch";
-  document.head.appendChild(link);
-}
+// Touch device detection for hybrid strategy.
+// Checked once at module load (Link.tsx is "use client", runs only in browser).
+const isTouchDevice =
+  typeof window !== "undefined" && window.matchMedia("(hover: none)").matches;
 
 /**
  * Prefetch strategy for the Link component
- * - "hover": Prefetch on mouse enter (uses native <link rel="prefetch">)
- * - "viewport": Prefetch when link enters viewport (not yet implemented)
- * - "hybrid": Hover on desktop, viewport on mobile (not yet implemented)
+ * - "hover": Prefetch on mouse enter (direct, no queue)
+ * - "viewport": Prefetch when link enters viewport (queued, waits for idle)
+ * - "render": Prefetch on component mount regardless of visibility (queued, waits for idle)
+ * - "hybrid": Hover on pointer devices, viewport on touch devices
  * - "none": No prefetching (default)
  */
-export type PrefetchStrategy = "hover" | "viewport" | "hybrid" | "none";
+export type PrefetchStrategy =
+  | "hover"
+  | "viewport"
+  | "render"
+  | "hybrid"
+  | "none";
 
 /**
  * Link component props
  */
-export interface LinkProps
-  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+export interface LinkProps extends Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "href"
+> {
   /**
-   * The URL to navigate to (typically from router.href())
+   * The URL to navigate to (typically from router.reverse())
    */
   to: string;
   /**
@@ -90,16 +92,29 @@ export interface LinkProps
    * @example
    * ```tsx
    * // Type-safe state with createLocationState (recommended)
-   * const ProductState = createLocationState((p: Product) => ({ name: p.name }));
-   * <Link to="/product" state={[ProductState(product)]}>View</Link>
+   * const ProductState = createLocationState<{ name: string; price: number }>();
+   * <Link to="/product" state={[ProductState({ name: product.name, price: product.price })]}>
+   *   View
+   * </Link>
+   *
+   * // Type-safe just-in-time state (getter called at click time, not render time).
+   * // Must be in a client component -- getter can't cross the RSC boundary.
+   * <Link
+   *   to="/product"
+   *   state={[ProductState(() => ({ name: product.name, price: product.price }))]}
+   * >
+   *   View
+   * </Link>
    *
    * // Multiple typed states
-   * <Link to="/checkout" state={[ProductState(p), CartState(c)]}>Checkout</Link>
+   * <Link to="/checkout" state={[ProductState({ name: p.name, price: p.price }), CartState(c)]}>
+   *   Checkout
+   * </Link>
    *
-   * // Legacy: static state
+   * // Plain static state
    * <Link to="/product" state={{ from: "list" }}>View</Link>
    *
-   * // Legacy: dynamic state (called at click time)
+   * // Plain just-in-time state (called at click time, requires client component)
    * <Link to="/product" state={() => ({ scrollY: window.scrollY })}>View</Link>
    * ```
    */
@@ -134,9 +149,9 @@ function isExternalUrl(href: string): boolean {
 /**
  * Type-safe Link component for SPA navigation
  *
- * Works with router.href() for type-safe URLs:
+ * Works with router.reverse() for type-safe URLs:
  * ```tsx
- * <Link to={router.href("shop.products.detail", { slug: "my-product" })}>
+ * <Link to={router.reverse("shop.products.detail", { slug: "my-product" })}>
  *   View Product
  * </Link>
  * ```
@@ -147,7 +162,9 @@ function isExternalUrl(href: string): boolean {
  * <Link to="https://example.com">External</Link>
  * ```
  */
-export const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>> = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+export const Link: ForwardRefExoticComponent<
+  LinkProps & RefAttributes<HTMLAnchorElement>
+> = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   {
     to,
     replace = false,
@@ -159,11 +176,30 @@ export const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAncho
     onClick,
     ...props
   },
-  ref
+  ref,
 ) {
   const ctx = useContext(NavigationStoreContext);
   const isExternal = isExternalUrl(to);
 
+  // Resolve hybrid: viewport on touch devices, hover on pointer devices
+  const resolvedStrategy =
+    prefetch === "hybrid" ? (isTouchDevice ? "viewport" : "hover") : prefetch;
+
+  // Internal ref for viewport observation; merge with forwarded ref
+  const internalRef = useRef<HTMLAnchorElement | null>(null);
+  const setRef = useCallback(
+    (node: HTMLAnchorElement | null) => {
+      internalRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLAnchorElement | null>).current =
+          node;
+      }
+    },
+    [ref],
+  );
+
   // Use ref to always get the latest state/getter without adding to useCallback deps
   // This enables just-in-time state resolution without causing re-renders
   const stateRef = useRef(state);
@@ -194,43 +230,109 @@ export const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAncho
       const target = (e.currentTarget as HTMLAnchorElement).target;
       if (target && target !== "_self") return;
 
+      // Hash-only navigation: let the browser handle anchor scrolling natively.
+      if (isHashOnlyNavigation(e.currentTarget as HTMLAnchorElement)) {
+        return;
+      }
+
+      // No navigation context (outside provider): fall back to native navigation.
+      if (!ctx?.navigate) {
+        return;
+      }
+
       // Prevent default and use SPA navigation
       e.preventDefault();
       // Stop propagation to prevent link-interceptor from also handling this
       e.stopPropagation();
 
-      if (ctx?.navigate) {
-        // Resolve state just-in-time based on format
-        let resolvedState: unknown;
-        const currentState = stateRef.current;
-
-        if (Array.isArray(currentState) && currentState.length > 0 && isLocationStateEntry(currentState[0])) {
-          // Type-safe LocationStateEntry[] - resolve each entry into keyed object
-          resolvedState = resolveLocationStateEntries(currentState as LocationStateEntry[]);
-        } else if (typeof currentState === "function") {
-          // Legacy getter function
-          resolvedState = currentState();
-        } else {
-          // Legacy static value
-          resolvedState = currentState;
-        }
+      const currentState = stateRef.current;
+      let resolvedState: unknown;
 
-        ctx.navigate(to, { replace, scroll, state: resolvedState });
+      if (
+        Array.isArray(currentState) &&
+        currentState.length > 0 &&
+        isLocationStateEntry(currentState[0])
+      ) {
+        resolvedState = resolveLocationStateEntries(
+          currentState as LocationStateEntry[],
+        );
+      } else if (typeof currentState === "function") {
+        resolvedState = currentState();
+      } else if (currentState != null) {
+        resolvedState = currentState;
       }
+
+      ctx.navigate(to, { replace, scroll, state: resolvedState });
     },
-    [to, isExternal, reloadDocument, replace, scroll, ctx, onClick]
+    [to, isExternal, reloadDocument, replace, scroll, ctx, onClick],
   );
 
   const handleMouseEnter = useCallback(() => {
-    if (prefetch === "hover" && !isExternal && ctx?.store) {
+    if (resolvedStrategy === "hover" && !isExternal && ctx?.store) {
+      const segmentState = ctx.store.getSegmentState();
+      prefetchDirect(to, segmentState.currentSegmentIds, ctx.version);
+    }
+  }, [resolvedStrategy, to, isExternal, ctx]);
+
+  // Viewport/render prefetch: waits for idle before starting,
+  // uses concurrency-limited queue to avoid flooding.
+  useEffect(() => {
+    if (isExternal || !ctx?.store) return;
+    const isViewport = resolvedStrategy === "viewport";
+    const isRender = resolvedStrategy === "render";
+    if (!isViewport && !isRender) return;
+
+    let cancelled = false;
+    let unsubIdle: (() => void) | undefined;
+    let observedElement: Element | null = null;
+
+    const triggerPrefetch = () => {
+      if (cancelled) return;
       const segmentState = ctx.store.getSegmentState();
-      prefetchUrl(to, segmentState.currentSegmentIds);
+      prefetchQueued(to, segmentState.currentSegmentIds, ctx.version);
+    };
+
+    // Schedule prefetch only when the app is idle (no navigation/streaming).
+    // This avoids competing with hydration and active navigation fetches.
+    const scheduleWhenIdle = (callback: () => void) => {
+      const state = ctx.eventController.getState();
+      if (state.state === "idle" && !state.isStreaming) {
+        callback();
+        return;
+      }
+      const unsub = ctx.eventController.subscribe(() => {
+        const s = ctx.eventController.getState();
+        if (s.state === "idle" && !s.isStreaming) {
+          unsub();
+          callback();
+        }
+      });
+      unsubIdle = unsub;
+    };
+
+    if (isRender) {
+      scheduleWhenIdle(triggerPrefetch);
+    } else if (isViewport) {
+      const element = internalRef.current;
+      if (!element) return;
+      observedElement = element;
+      observeForPrefetch(element, () => {
+        scheduleWhenIdle(triggerPrefetch);
+      });
     }
-  }, [prefetch, to, isExternal, ctx]);
+
+    return () => {
+      cancelled = true;
+      unsubIdle?.();
+      if (isViewport && observedElement) {
+        unobserveForPrefetch(observedElement);
+      }
+    };
+  }, [resolvedStrategy, to, isExternal, ctx]);
 
   return (
     <a
-      ref={ref}
+      ref={setRef}
       href={to}
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}
@@ -240,9 +342,7 @@ export const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAncho
       data-replace={replace ? "true" : undefined}
       {...props}
     >
-      <LinkContext.Provider value={to}>
-        {children}
-      </LinkContext.Provider>
+      <LinkContext.Provider value={to}>{children}</LinkContext.Provider>
     </a>
   );
 });

package/src/browser/react/NavigationProvider.tsx

@@ -14,7 +14,7 @@ import {
 } from "./context.js";
 import type {
   NavigationStore,
-  RscPayload,
+  NavigationUpdate,
   NavigateOptions,
   NavigationBridge,
 } from "../types.js";
@@ -22,8 +22,9 @@ import type { EventController } from "../event-controller.js";
 import { RootErrorBoundary } from "../../root-error-boundary.js";
 import type { HandleData } from "../types.js";
 import { ThemeProvider } from "../../theme/ThemeProvider.js";
+import { NonceContext } from "./nonce-context.js";
 import type { ResolvedThemeConfig, Theme } from "../../theme/types.js";
-import { HrefContext, type HrefContextValue } from "./use-href.js";
+import { cancelAllPrefetches } from "../prefetch/queue.js";
 
 /**
  * Process handles from an async generator, updating the event controller
@@ -43,7 +44,7 @@ async function processHandles(
     matched?: string[];
     isPartial?: boolean;
     historyKey: string;
-  }
+  },
 ): Promise<void> {
   const { eventController, store, matched, isPartial, historyKey } = opts;
 
@@ -54,7 +55,7 @@ async function processHandles(
     // the current route's breadcrumbs (e.g., quick popstate after clicking a link).
     if (historyKey !== store.getHistoryKey()) {
       console.log(
-        "[NavigationProvider] Stopping handle processing - user navigated away"
+        "[NavigationProvider] Stopping handle processing - user navigated away",
       );
       return;
     }
@@ -101,9 +102,9 @@ export interface NavigationProviderProps {
   eventController: EventController;
 
   /**
-   * Initial RSC payload from server
+   * Initial rendered tree + metadata from server payload
    */
-  initialPayload: RscPayload;
+  initialPayload: NavigationUpdate;
 
   /**
    * Navigation bridge for handling navigation
@@ -121,6 +122,18 @@ export interface NavigationProviderProps {
    * Only used when themeConfig is provided
    */
   initialTheme?: Theme;
+
+  /**
+   * Whether connection warmup is enabled.
+   * When true, keeps TLS alive by sending HEAD requests after idle periods.
+   */
+  warmupEnabled?: boolean;
+
+  /**
+   * App version from server payload (stable, immutable).
+   * Forwarded to prefetch requests for version mismatch detection.
+   */
+  version?: string;
 }
 
 /**
@@ -151,6 +164,8 @@ export function NavigationProvider({
   bridge,
   themeConfig,
   initialTheme,
+  warmupEnabled,
+  version,
 }: NavigationProviderProps): ReactNode {
   // Track current payload for rendering (this triggers re-renders)
   const [payload, setPayload] = useState(initialPayload);
@@ -162,7 +177,7 @@ export function NavigationProvider({
     async (url: string, options?: NavigateOptions): Promise<void> => {
       await bridge.navigate(url, options);
     },
-    []
+    [],
   );
 
   /**
@@ -179,10 +194,113 @@ export function NavigationProvider({
       eventController,
       navigate,
       refresh,
+      version,
     }),
-    []
+    [],
   );
 
+  // Connection warmup: keep TLS alive after idle periods.
+  // After 60s of no user interaction, marks connection as "cold".
+  // On next interaction or visibility change, sends a HEAD request to warm TLS
+  // before the user actually clicks a link.
+  useEffect(() => {
+    if (!warmupEnabled) return;
+
+    const IDLE_TIMEOUT = 60_000;
+    const DEBOUNCE_DELAY = 150;
+
+    let idleTimer: ReturnType<typeof setTimeout> | undefined;
+    let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+    let isCold = false;
+    let warmupListenersAttached = false;
+
+    function sendWarmup() {
+      isCold = false;
+      fetch("/?_rsc_warmup", { method: "HEAD" }).catch(() => {});
+    }
+
+    function triggerWarmup() {
+      if (!isCold) return;
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        sendWarmup();
+        detachWarmupListeners();
+        resetIdleTimer();
+      }, DEBOUNCE_DELAY);
+    }
+
+    function onVisibilityChange() {
+      if (document.visibilityState === "visible" && isCold) {
+        triggerWarmup();
+      }
+    }
+
+    function attachWarmupListeners() {
+      if (warmupListenersAttached) return;
+      warmupListenersAttached = true;
+      document.addEventListener("visibilitychange", onVisibilityChange);
+      document.addEventListener("mousemove", triggerWarmup, { once: true });
+      document.addEventListener("touchstart", triggerWarmup, { once: true });
+    }
+
+    function detachWarmupListeners() {
+      warmupListenersAttached = false;
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      document.removeEventListener("mousemove", triggerWarmup);
+      document.removeEventListener("touchstart", triggerWarmup);
+    }
+
+    function markCold() {
+      isCold = true;
+      attachWarmupListeners();
+    }
+
+    function resetIdleTimer() {
+      clearTimeout(idleTimer);
+      isCold = false;
+      idleTimer = setTimeout(markCold, IDLE_TIMEOUT);
+    }
+
+    // Activity events that reset the idle timer
+    const activityEvents = [
+      "mousemove",
+      "keydown",
+      "touchstart",
+      "scroll",
+    ] as const;
+    const activityOptions: AddEventListenerOptions = { passive: true };
+
+    for (const event of activityEvents) {
+      document.addEventListener(event, resetIdleTimer, activityOptions);
+    }
+
+    resetIdleTimer();
+
+    return () => {
+      clearTimeout(idleTimer);
+      clearTimeout(debounceTimer);
+      detachWarmupListeners();
+      for (const event of activityEvents) {
+        document.removeEventListener(event, resetIdleTimer);
+      }
+    };
+  }, [warmupEnabled]);
+
+  // Cancel speculative prefetches when navigation starts.
+  // Viewport/render prefetches should not compete with navigation fetches.
+  useEffect(() => {
+    let wasIdle = true;
+    const unsub = eventController.subscribe(() => {
+      const state = eventController.getState();
+      const isIdle = state.state === "idle" && !state.isStreaming;
+      if (wasIdle && !isIdle) {
+        cancelAllPrefetches();
+      }
+      wasIdle = isIdle;
+    });
+    return unsub;
+  }, [eventController]);
+
   // Subscribe to UI updates (for re-rendering the tree)
   useEffect(() => {
     const unsubscribe = store.onUpdate((update) => {
@@ -191,6 +309,9 @@ export function NavigationProvider({
         metadata: update.metadata,
       });
 
+      // Update route params
+      eventController.setParams(update.metadata.params ?? {});
+
       // Update handle data progressively as it streams in
       if (update.metadata.handles) {
         // Capture historyKey now - by the time async processing completes,
@@ -204,7 +325,7 @@ export function NavigationProvider({
           isPartial: update.metadata.isPartial,
           historyKey,
         }).catch((err) =>
-          console.error("[NavigationProvider] Error consuming handles:", err)
+          console.error("[NavigationProvider] Error consuming handles:", err),
         );
       } else if (update.metadata.cachedHandleData) {
         // For back/forward navigation from cache, restore the cached handleData
@@ -212,14 +333,14 @@ export function NavigationProvider({
         eventController.setHandleData(
           update.metadata.cachedHandleData,
           update.metadata.matched,
-          false // full replace - restore entire cached state
+          false, // full replace - restore entire cached state
         );
       } else if (update.metadata.matched) {
         // For cached navigations without handleData, update segmentOrder to clean up stale data
         eventController.setHandleData(
           {}, // Empty data - all existing data not in matched will be cleaned up
           update.metadata.matched,
-          true // partial update - will clean up segments not in matched
+          true, // partial update - will clean up segments not in matched
         );
       }
     });
@@ -250,22 +371,12 @@ export function NavigationProvider({
     );
   }
 
-  // Build href context value from metadata (routeMap and routeName)
-  // This enables useHref() to resolve local route names with the current prefix
-  const hrefContextValue = useMemo<HrefContextValue | null>(() => {
-    const { routeMap, routeName } = payload.metadata || {};
-    if (!routeMap) return null;
-    return { routeMap, routeName };
-  }, [payload.metadata?.routeMap, payload.metadata?.routeName]);
-
-  // Wrap with HrefContext when routeMap is available
-  if (hrefContextValue) {
-    content = (
-      <HrefContext.Provider value={hrefContextValue}>
-        {content}
-      </HrefContext.Provider>
-    );
-  }
+  // Match SSR tree shape: NonceContext.Provider is always present so
+  // hydration sees the same component tree. Value is undefined on the
+  // client — CSP nonces are a server-side HTML concern.
+  content = (
+    <NonceContext.Provider value={undefined}>{content}</NonceContext.Provider>
+  );
 
   return (
     <NavigationStoreContext.Provider value={contextValue}>

package/src/browser/react/context.ts

@@ -41,6 +41,12 @@ export interface NavigationStoreContextValue {
    * @returns Promise that resolves when refresh is complete
    */
   refresh: () => Promise<void>;
+
+  /**
+   * App version from server payload (stable, immutable).
+   * Used in prefetch requests for version mismatch detection.
+   */
+  version: string | undefined;
 }
 
 /**

package/src/browser/react/filter-segment-order.ts

@@ -0,0 +1,11 @@
+/**
+ * Filter segment IDs to only include routes and layouts.
+ * Excludes parallels (contain .@) and loaders (contain D followed by digit).
+ */
+export function filterSegmentOrder(matched: string[]): string[] {
+  return matched.filter((id) => {
+    if (id.includes(".@")) return false;
+    if (/D\d+\./.test(id)) return false;
+    return true;
+  });
+}

package/src/browser/react/index.ts

@@ -1,20 +1,24 @@
 // React exports for browser navigation
 
 // Hook with Zustand-style selectors
-export {
-  useNavigation,
-  type NavigationMethods,
-  type NavigationValue,
-} from "./use-navigation.js";
+export { useNavigation } from "./use-navigation.js";
+
+// Router actions hook (stable reference, no re-renders)
+export { useRouter } from "./use-router.js";
+
+// URL hooks
+export { usePathname } from "./use-pathname.js";
+export { useSearchParams } from "./use-search-params.js";
+export { useParams } from "./use-params.js";
 
 // Action state tracking hook
 export { useAction, type TrackedActionState } from "./use-action.js";
 
 // Segments state hook
-export { useSegments, initSegmentsSync, type SegmentsState } from "./use-segments.js";
+export { useSegments, type SegmentsState } from "./use-segments.js";
 
 // Handle data hook
-export { useHandle, initHandleDataSync } from "./use-handle.js";
+export { useHandle } from "./use-handle.js";
 
 // Client cache controls hook
 export {
@@ -35,11 +39,7 @@ export {
 } from "./context.js";
 
 // Link component
-export {
-  Link,
-  type LinkProps,
-  type PrefetchStrategy,
-} from "./Link.js";
+export { Link, type LinkProps, type PrefetchStrategy } from "./Link.js";
 
 // Link status hook
 export { useLinkStatus, type LinkStatus } from "./use-link-status.js";