@rangojs/router 0.0.0-experimental.9 → 0.0.0-experimental.98d9a51b

package/src/cache/types.ts

@@ -75,14 +75,14 @@ export interface SegmentCacheStore<TEnv = unknown> {
    * @example Using cookies for locale
    * ```typescript
    * keyGenerator: (ctx, defaultKey) => {
-   *   const locale = ctx.cookie('locale') || 'en';
+   *   const locale = cookies().get('locale')?.value || 'en';
    *   return `${locale}:${defaultKey}`;
    * }
    * ```
    */
   readonly keyGenerator?: (
     ctx: RequestContext<TEnv>,
-    defaultKey: string
+    defaultKey: string,
   ) => string | Promise<string>;
 
   /**
@@ -98,7 +98,12 @@ export interface SegmentCacheStore<TEnv = unknown> {
    * @param ttl - Time-to-live in seconds
    * @param swr - Optional stale-while-revalidate window in seconds
    */
-  set(key: string, data: CachedEntryData, ttl: number, swr?: number): Promise<void>;
+  set(
+    key: string,
+    data: CachedEntryData,
+    ttl: number,
+    swr?: number,
+  ): Promise<void>;
 
   /**
    * Delete a cached entry
@@ -121,7 +126,9 @@ export interface SegmentCacheStore<TEnv = unknown> {
    * Get a cached Response by key.
    * Returns the response and whether it should be revalidated (SWR).
    */
-  getResponse?(key: string): Promise<{ response: Response; shouldRevalidate: boolean } | null>;
+  getResponse?(
+    key: string,
+  ): Promise<{ response: Response; shouldRevalidate: boolean } | null>;
 
   /**
    * Store a Response with TTL and optional SWR window.
@@ -130,7 +137,62 @@ export interface SegmentCacheStore<TEnv = unknown> {
    * @param ttl - Time-to-live in seconds
    * @param swr - Optional stale-while-revalidate window in seconds
    */
-  putResponse?(key: string, response: Response, ttl: number, swr?: number): Promise<void>;
+  putResponse?(
+    key: string,
+    response: Response,
+    ttl: number,
+    swr?: number,
+  ): Promise<void>;
+
+  // ============================================================================
+  // Function Cache Methods (optional, for "use cache" directive)
+  // ============================================================================
+  // These methods cache individual function/component return values.
+  // Stores that support "use cache" should implement these methods.
+
+  /**
+   * Get a cached function result by key.
+   * Returns the serialized value, optional handle data, and staleness flag.
+   */
+  getItem?(key: string): Promise<CacheItemResult | null>;
+
+  /**
+   * Store a function result with TTL and optional SWR window.
+   * @param key - Cache key (format: use-cache:{functionId}:{serializedArgs})
+   * @param value - RSC-serialized return value
+   * @param options - TTL, SWR, handle data, and tags
+   */
+  setItem?(
+    key: string,
+    value: string,
+    options?: CacheItemOptions,
+  ): Promise<void>;
+}
+
+/**
+ * Result from getItem() for function-level caching ("use cache").
+ */
+export interface CacheItemResult {
+  /** RSC-serialized return value */
+  value: string;
+  /** Handle data captured during execution (breadcrumbs, metadata, etc.) */
+  handles?: Record<string, SegmentHandleData>;
+  /** Whether the entry is stale and should be revalidated */
+  shouldRevalidate: boolean;
+}
+
+/**
+ * Options for setItem() for function-level caching ("use cache").
+ */
+export interface CacheItemOptions {
+  /** Handle data to store alongside the value */
+  handles?: Record<string, SegmentHandleData>;
+  /** Time-to-live in seconds */
+  ttl?: number;
+  /** Stale-while-revalidate window in seconds */
+  swr?: number;
+  /** Cache tags for invalidation */
+  tags?: string[];
 }
 
 /**
@@ -151,7 +213,10 @@ export interface SerializedSegmentData {
   /** RSC-encoded loaderDataPromise (if present) */
   encodedLoaderDataPromise?: string;
   /** Segment metadata (everything except component, layout, loading, and loader data) */
-  metadata: Omit<ResolvedSegment, "component" | "layout" | "loading" | "loaderData" | "loaderDataPromise">;
+  metadata: Omit<
+    ResolvedSegment,
+    "component" | "layout" | "loading" | "loaderData" | "loaderDataPromise"
+  >;
 }
 
 /**
@@ -234,7 +299,6 @@ export interface CachedEntryResult {
   handles: Record<string, SegmentHandleData>;
 }
 
-
 /**
  * Segment cache provider interface
  *
@@ -262,7 +326,7 @@ export interface SegmentCacheProvider {
   restore(
     cacheKey: string,
     params: Record<string, string>,
-    loaderPromises: Map<string, Promise<any>>
+    loaderPromises: Map<string, Promise<any>>,
   ): Promise<[ResolvedSegment[], string[]] | null>;
 
   /**
@@ -276,117 +340,3 @@ export interface SegmentCacheProvider {
    */
   cacheEntry(cacheKey: string, segments: ResolvedSegment[]): void;
 }
-
-// ============================================================================
-// Generic Cache Store (for future extensibility)
-// ============================================================================
-// These types support a general-purpose cache interface that can be used
-// for caching arbitrary values (responses, streams, objects). Currently,
-// the segment caching system uses SegmentCacheStore directly, but these
-// types enable future use cases like response caching or data caching.
-
-/**
- * Supported cache value types for the generic CacheStore interface.
- * @internal Reserved for future extensibility
- */
-export type CacheValue =
-  | ReadableStream<Uint8Array>
-  | Response
-  | ArrayBuffer
-  | string
-  | unknown[] // JSON-serializable array
-  | Record<string, unknown>; // JSON-serializable object
-
-/**
- * Cache entry returned by match().
- * @internal Reserved for future extensibility
- */
-export interface CacheEntry<T = CacheValue> {
-  /** The cached value */
-  value: T;
-  /** Optional metadata stored with the entry */
-  metadata?: CacheMetadata;
-}
-
-/**
- * Original value type for reconstruction.
- * @internal Reserved for future extensibility
- */
-export type CacheValueType =
-  | "stream"
-  | "response"
-  | "arraybuffer"
-  | "string"
-  | "object";
-
-/**
- * Metadata associated with a cache entry.
- * @internal Reserved for future extensibility
- */
-export interface CacheMetadata {
-  /** Timestamp when entry expires (ms since epoch) */
-  expiresAt?: number;
-  /** Tags for bulk invalidation */
-  tags?: string[];
-  /** Original value type for reconstruction on read */
-  valueType?: CacheValueType;
-  /** Response headers (preserved when caching Response) */
-  responseHeaders?: Record<string, string>;
-  /** Response status (preserved when caching Response) */
-  responseStatus?: number;
-  /** Custom metadata */
-  [key: string]: unknown;
-}
-
-/**
- * Options for put().
- * @internal Reserved for future extensibility
- */
-export interface CachePutOptions {
-  /** Time-to-live in seconds */
-  ttl?: number;
-  /** Metadata to store with entry */
-  metadata?: Omit<CacheMetadata, "expiresAt">;
-}
-
-/**
- * Generic cache store interface for arbitrary value types.
- *
- * This interface is designed for future extensibility to support caching
- * responses, streams, and other values. Currently, segment caching uses
- * the SegmentCacheStore interface directly.
- *
- * Implementations must handle:
- * - Stream values (clone before storing, streams can only be read once)
- * - Promise values (await before storing)
- * - Expiration/TTL
- *
- * @internal Reserved for future extensibility
- */
-export interface CacheStore {
-  /**
-   * Retrieve a cached entry by key.
-   * @param key - Cache key
-   * @returns The cached entry or undefined if not found/expired
-   */
-  match<T = CacheValue>(key: string): Promise<CacheEntry<T> | undefined>;
-
-  /**
-   * Store a value in the cache.
-   * @param key - Cache key
-   * @param value - Value to cache (stream, response, string, object, etc.)
-   * @param options - TTL, metadata, etc.
-   */
-  put<T extends CacheValue>(
-    key: string,
-    value: T,
-    options?: CachePutOptions
-  ): Promise<void>;
-
-  /**
-   * Delete a cached entry.
-   * @param key - Cache key
-   * @returns true if entry was deleted, false if not found
-   */
-  delete(key: string): Promise<boolean>;
-}

package/src/client.rsc.tsx

@@ -17,7 +17,6 @@ export {
   OutletProvider,
   useOutlet,
   useLoader,
-  useLoaderData,
   ErrorBoundary,
   type ErrorBoundaryProps,
 } from "./client.js";
@@ -64,6 +63,8 @@ export { Meta } from "./handles/meta.js";
 // MetaTags is a "use client" component that can be imported from RSC
 export { MetaTags } from "./handles/MetaTags.js";
 export type { MetaDescriptor, MetaDescriptorBase } from "./router/types.js";
+// Breadcrumbs handle works in RSC context
+export { Breadcrumbs, type BreadcrumbItem } from "./handles/breadcrumbs.js";
 
 // Location state - createLocationState works in RSC (just creates definition)
 // useLocationState is NOT exported here as it uses client hooks
@@ -71,6 +72,7 @@ export {
   createLocationState,
   type LocationStateDefinition,
   type LocationStateEntry,
+  type LocationStateOptions,
 } from "./browser/react/location-state-shared.js";
 
 // Re-export useHref - it's a "use client" hook

package/src/client.tsx

@@ -20,6 +20,8 @@ import {
   RouteContentWrapper,
   LoaderBoundary,
 } from "./route-content-wrapper.js";
+import { OutletProvider } from "./outlet-provider.js";
+import { MountContextProvider } from "./browser/react/mount-context.js";
 
 /**
  * Outlet component - renders child content in layouts
@@ -86,6 +88,8 @@ export function Outlet({ name }: { name?: `@${string}` } = {}): ReactNode {
       content = segment.component ?? null;
     }
 
+    let result: ReactNode;
+
     // If segment has a layout, wrap appropriately
     if (segment.layout) {
       // Check if this segment has loaders that need streaming
@@ -105,25 +109,23 @@ export function Outlet({ name }: { name?: `@${string}` } = {}): ReactNode {
           </LoaderBoundary>
         );
 
-        return (
+        result = (
           <OutletProvider content={loaderAwareContent} segment={segment}>
             {segment.layout}
           </OutletProvider>
         );
+      } else {
+        // No loaders - wrap in OutletProvider so layout can use <Outlet />
+        result = (
+          <OutletProvider content={content} segment={segment}>
+            {segment.layout}
+          </OutletProvider>
+        );
       }
-
-      // No loaders - wrap in OutletProvider so layout can use <Outlet />
-      return (
-        <OutletProvider content={content} segment={segment}>
-          {segment.layout}
-        </OutletProvider>
-      );
-    }
-
-    // No layout but has loaders - wrap content with LoaderBoundary for useLoader context
-    // This is common for intercept routes that use useLoader without a custom layout
-    if (segment.loaderDataPromise && segment.loaderIds) {
-      return (
+    } else if (segment.loaderDataPromise && segment.loaderIds) {
+      // No layout but has loaders - wrap content with LoaderBoundary for useLoader context
+      // This is common for intercept routes that use useLoader without a custom layout
+      result = (
         <LoaderBoundary
           loaderDataPromise={segment.loaderDataPromise}
           loaderIds={segment.loaderIds}
@@ -135,9 +137,20 @@ export function Outlet({ name }: { name?: `@${string}` } = {}): ReactNode {
           {content}
         </LoaderBoundary>
       );
+    } else {
+      result = content;
+    }
+
+    // Wrap with MountContextProvider for include() scoped parallel/intercept slots
+    if (segment.mountPath) {
+      return (
+        <MountContextProvider value={segment.mountPath}>
+          {result}
+        </MountContextProvider>
+      );
     }
 
-    return content;
+    return result;
   }
 
   // Default: render child content
@@ -201,6 +214,8 @@ export function ParallelOutlet({ name }: { name: `@${string}` }): ReactNode {
     content = segment.component ?? null;
   }
 
+  let result: ReactNode;
+
   // If segment has a layout, wrap appropriately
   if (segment.layout) {
     // Check if this segment has loaders that need streaming
@@ -219,25 +234,23 @@ export function ParallelOutlet({ name }: { name: `@${string}` }): ReactNode {
         </LoaderBoundary>
       );
 
-      return (
+      result = (
         <OutletProvider content={loaderAwareContent} segment={segment}>
           {segment.layout}
         </OutletProvider>
       );
+    } else {
+      // No loaders - wrap in OutletProvider so layout can use <Outlet />
+      result = (
+        <OutletProvider content={content} segment={segment}>
+          {segment.layout}
+        </OutletProvider>
+      );
     }
-
-    // No loaders - wrap in OutletProvider so layout can use <Outlet />
-    return (
-      <OutletProvider content={content} segment={segment}>
-        {segment.layout}
-      </OutletProvider>
-    );
-  }
-
-  // No layout but has loaders - wrap content with LoaderBoundary for useLoader context
-  // This is common for intercept routes that use useLoader without a custom layout
-  if (segment.loaderDataPromise && segment.loaderIds) {
-    return (
+  } else if (segment.loaderDataPromise && segment.loaderIds) {
+    // No layout but has loaders - wrap content with LoaderBoundary for useLoader context
+    // This is common for intercept routes that use useLoader without a custom layout
+    result = (
       <LoaderBoundary
         loaderDataPromise={segment.loaderDataPromise}
         loaderIds={segment.loaderIds}
@@ -249,51 +262,28 @@ export function ParallelOutlet({ name }: { name: `@${string}` }): ReactNode {
         {content}
       </LoaderBoundary>
     );
+  } else {
+    result = content;
   }
 
-  return content;
-}
+  // Wrap with MountContextProvider for include() scoped parallel/intercept slots
+  if (segment.mountPath) {
+    return (
+      <MountContextProvider value={segment.mountPath}>
+        {result}
+      </MountContextProvider>
+    );
+  }
 
-/**
- * Provider for outlet content - used internally by renderSegments
- *
- * Stores a reference to parent context so useLoader can walk up the chain
- * to find loader data from parent layouts. If this segment defines a loading
- * component, Outlet will wrap content with Suspense using that as fallback.
- */
-export function OutletProvider({
-  content,
-  parallel,
-  segment,
-  loaderData,
-  children,
-}: {
-  content: ReactNode;
-  parallel?: ResolvedSegment[];
-  segment?: ResolvedSegment;
-  loaderData?: Record<string, any>;
-  children: ReactNode;
-}): ReactNode {
-  // Get parent context to enable walking up the chain for loader lookups
-  const parentContext = useContext(OutletContext);
-
-  const value = useMemo(
-    () => ({
-      content,
-      parallel,
-      segment,
-      loaderData,
-      parent: parentContext,
-      loading: segment?.loading,
-    }),
-    [content, parallel, segment, loaderData, parentContext]
-  );
-
-  return (
-    <OutletContext.Provider value={value}>{children}</OutletContext.Provider>
-  );
+  return result;
 }
 
+// OutletProvider is defined in outlet-provider.tsx to break a circular
+// dependency between client.tsx and route-content-wrapper.tsx.
+// Imported at the top of this file for local use in Outlet/ParallelOutlet,
+// and re-exported here for backwards compatibility.
+export { OutletProvider };
+
 /**
  * Hook to access outlet content programmatically
  *
@@ -323,52 +313,6 @@ export {
   type UseLoaderOptions,
 } from "./use-loader.js";
 
-/**
- * Hook to access all loader data in the current context
- *
- * Returns a record of all loader data available in the current outlet context
- * and all parent contexts. Useful for debugging or when you need access to
- * multiple loaders.
- *
- * @returns Record of loader name to data, or empty object if no loaders
- *
- * @example
- * ```tsx
- * "use client";
- * import { useLoaderData } from "rsc-router/client";
- *
- * export function DebugPanel() {
- *   const loaderData = useLoaderData();
- *   return <pre>{JSON.stringify(loaderData, null, 2)}</pre>;
- * }
- * ```
- */
-export function useLoaderData(): Record<string, any> {
-  const context = useContext(OutletContext);
-
-  // Collect all loader data from the context chain
-  // Child loaders override parent loaders with the same name
-  const result: Record<string, any> = {};
-  const stack: OutletContextValue[] = [];
-
-  // Build stack from current to root
-  let current: OutletContextValue | null | undefined = context;
-  while (current) {
-    stack.push(current);
-    current = current.parent;
-  }
-
-  // Apply from root to current (so children override parents)
-  for (let i = stack.length - 1; i >= 0; i--) {
-    const ctx = stack[i];
-    if (ctx.loaderData) {
-      Object.assign(result, ctx.loaderData);
-    }
-  }
-
-  return result;
-}
-
 /**
  * Client-safe createLoader factory
  *
@@ -398,13 +342,13 @@ export function useLoaderData(): Record<string, any> {
  */
 // Overload 1: With function only (not fetchable)
 export function createLoader<T>(
-  fn: LoaderFn<T, Record<string, string | undefined>, any>
+  fn: LoaderFn<T, Record<string, string | undefined>, any>,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
 
 // Overload 2: With function and fetchable flag
 export function createLoader<T>(
   fn: LoaderFn<T, Record<string, string | undefined>, any>,
-  fetchable: true
+  fetchable: true,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
 
 // Implementation - function is ignored at runtime on client
@@ -412,7 +356,7 @@ export function createLoader<T>(
 export function createLoader(
   _fn: LoaderFn<any, Record<string, string | undefined>, any>,
   _fetchable?: true,
-  __injectedId?: string
+  __injectedId?: string,
 ): LoaderDefinition<any, Record<string, string | undefined>> {
   return {
     __brand: "loader",
@@ -534,11 +478,16 @@ export class ErrorBoundary extends Component<
 // ============================================================================
 
 // Navigation hooks
-export {
-  useNavigation,
-  type NavigationMethods,
-  type NavigationValue,
-} from "./browser/react/use-navigation.js";
+export { useNavigation } from "./browser/react/use-navigation.js";
+export { useRouter } from "./browser/react/use-router.js";
+export { usePathname } from "./browser/react/use-pathname.js";
+export { useSearchParams } from "./browser/react/use-search-params.js";
+export { useParams } from "./browser/react/use-params.js";
+export type {
+  RouterInstance,
+  RouterNavigateOptions,
+  ReadonlyURLSearchParams,
+} from "./browser/types.js";
 
 // Action state tracking hook
 export {
@@ -595,6 +544,7 @@ export { useHandle } from "./browser/react/use-handle.js";
 export { Meta } from "./handles/meta.js";
 export { MetaTags } from "./handles/MetaTags.js";
 export type { MetaDescriptor, MetaDescriptorBase } from "./router/types.js";
+export { Breadcrumbs, type BreadcrumbItem } from "./handles/breadcrumbs.js";
 
 // Location state - type-safe navigation state
 export {
@@ -602,10 +552,16 @@ export {
   useLocationState,
   type LocationStateDefinition,
   type LocationStateEntry,
+  type LocationStateOptions,
 } from "./browser/react/location-state.js";
 
 // Type-safe href for client-side path validation
-export { href, type ValidPaths, type PatternToPath, type PathResponse } from "./href-client.js";
+export {
+  href,
+  type ValidPaths,
+  type PatternToPath,
+  type PathResponse,
+} from "./href-client.js";
 
 // Response envelope types for consuming JSON response routes
 export type { ResponseEnvelope, ResponseError } from "./urls.js";
@@ -624,8 +580,10 @@ export type { ResponseEnvelope, ResponseError } from "./urls.js";
  * ```
  */
 export function isResponseError<T>(
-  result: import("./urls.js").ResponseEnvelope<T>
-): result is import("./urls.js").ResponseEnvelope<T> & { error: import("./urls.js").ResponseError } {
+  result: import("./urls.js").ResponseEnvelope<T>,
+): result is import("./urls.js").ResponseEnvelope<T> & {
+  error: import("./urls.js").ResponseError;
+} {
   return result.error !== undefined;
 }
 

package/src/component-utils.ts

@@ -33,7 +33,7 @@ const CLIENT_REFERENCE = Symbol.for("react.client.reference");
  * ```
  */
 export function isClientComponent(
-  component: ComponentType<unknown> | unknown
+  component: ComponentType<unknown> | unknown,
 ): boolean {
   if (typeof component !== "function") {
     return false;
@@ -52,13 +52,13 @@ export function isClientComponent(
  */
 export function assertClientComponent(
   component: ComponentType<unknown> | unknown,
-  name: string
+  name: string,
 ): asserts component is ComponentType<unknown> {
   if (typeof component !== "function") {
     throw new Error(
       `${name} must be a client component function with "use client" directive. ` +
         `Make sure to pass the component itself, not a JSX element: ` +
-        `${name}: My${capitalize(name)} (correct) vs ${name}: <My${capitalize(name)} /> (incorrect)`
+        `${name}: My${capitalize(name)} (correct) vs ${name}: <My${capitalize(name)} /> (incorrect)`,
     );
   }
 
@@ -66,7 +66,7 @@ export function assertClientComponent(
     throw new Error(
       `${name} must be a client component with "use client" directive at the top of the file. ` +
         `Server components cannot be used as the ${name} because their function reference ` +
-        `cannot be serialized in the RSC payload. Add "use client" to your ${name} file.`
+        `cannot be serialized in the RSC payload. Add "use client" to your ${name} file.`,
     );
   }
 }

package/src/components/DefaultDocument.tsx

@@ -11,7 +11,11 @@ import { MetaTags } from "../handles/MetaTags.js";
  * Uses suppressHydrationWarning on <html> because the theme script
  * may modify class/style attributes before React hydrates.
  */
-export function DefaultDocument({ children }: { children: ReactNode }): ReactElement {
+export function DefaultDocument({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement {
   return (
     <html lang="en" suppressHydrationWarning>
       <head>