@tanstack/react-router 1.28.8 → 1.29.0

package/src/Matches.tsx

@@ -1,25 +1,15 @@
 import * as React from 'react'
 import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
-import { set } from 'zod'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import { createControlledPromise, pick } from './utils'
 import { CatchNotFound, DefaultGlobalNotFound, isNotFound } from './not-found'
 import { isRedirect } from './redirects'
-import {
-  type AnyRouter,
-  type RegisteredRouter,
-  type RouterState,
-} from './router'
+import { type AnyRouter, type RegisteredRouter } from './router'
 import type { ResolveRelativePath, ToOptions } from './link'
-import type {
-  AnyRoute,
-  ReactNode,
-  RootSearchSchema,
-  StaticDataRouteOption,
-} from './route'
+import type { AnyRoute, ReactNode, StaticDataRouteOption } from './route'
 import type {
   AllParams,
   FullSearchSchema,
@@ -40,16 +30,18 @@ import type {
 export const matchContext = React.createContext<string | undefined>(undefined)
 
 export interface RouteMatch<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
-  TReturnIntersection extends boolean = false,
+  TRouteId,
+  TAllParams,
+  TFullSearchSchema,
+  TLoaderData,
+  TAllContext,
+  TRouteContext,
+  TLoaderDeps,
 > {
   id: string
   routeId: TRouteId
   pathname: string
-  params: TReturnIntersection extends false
-    ? RouteById<TRouteTree, TRouteId>['types']['allParams']
-    : Expand<Partial<AllParams<TRouteTree>>>
+  params: TAllParams
   status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'
   isFetching: boolean
   error: unknown
@@ -57,22 +49,15 @@ export interface RouteMatch<
   searchError: unknown
   updatedAt: number
   loadPromise: ControlledPromise<void>
-  loaderPromise: Promise<RouteById<TRouteTree, TRouteId>['types']['loaderData']>
-  loaderData?: RouteById<TRouteTree, TRouteId>['types']['loaderData']
-  routeContext: RouteById<TRouteTree, TRouteId>['types']['routeContext']
-  context: RouteById<TRouteTree, TRouteId>['types']['allContext']
-  search: TReturnIntersection extends false
-    ? Exclude<
-        RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'],
-        RootSearchSchema
-      >
-    : Expand<
-        Partial<Omit<FullSearchSchema<TRouteTree>, keyof RootSearchSchema>>
-      >
+  loaderPromise: Promise<TLoaderData>
+  loaderData?: TLoaderData
+  routeContext: TRouteContext
+  context: TAllContext
+  search: TFullSearchSchema
   fetchCount: number
   abortController: AbortController
   cause: 'preload' | 'enter' | 'stay'
-  loaderDeps: RouteById<TRouteTree, TRouteId>['types']['loaderDeps']
+  loaderDeps: TLoaderDeps
   preload: boolean
   invalid: boolean
   meta?: Array<JSX.IntrinsicElements['meta']>
@@ -84,7 +69,32 @@ export interface RouteMatch<
   minPendingPromise?: ControlledPromise<void>
 }
 
-export type AnyRouteMatch = RouteMatch<any, any>
+export type MakeRouteMatch<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TRouteId = ParseRoute<TRouteTree>['id'],
+  TReturnIntersection extends boolean = false,
+  TTypes extends AnyRoute['types'] = RouteById<TRouteTree, TRouteId>['types'],
+  TAllParams = TReturnIntersection extends false
+    ? TTypes['allParams']
+    : Partial<AllParams<TRouteTree>>,
+  TFullSearchSchema = TReturnIntersection extends false
+    ? TTypes['fullSearchSchema']
+    : Partial<FullSearchSchema<TRouteTree>>,
+  TLoaderData = TTypes['loaderData'],
+  TAllContext = TTypes['allContext'],
+  TRouteContext = TTypes['routeContext'],
+  TLoaderDeps = TTypes['loaderDeps'],
+> = RouteMatch<
+  TRouteId,
+  TAllParams,
+  TFullSearchSchema,
+  TLoaderData,
+  TAllContext,
+  TRouteContext,
+  TLoaderDeps
+>
+
+export type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>
 
 export function Matches() {
   const matchId = useRouterState({
@@ -503,11 +513,11 @@ export function useMatch<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TReturnIntersection extends boolean = false,
-  TRouteMatchState = RouteMatch<TRouteTree, TFrom, TReturnIntersection>,
-  TSelected = TRouteMatchState,
+  TRouteMatch = MakeRouteMatch<TRouteTree, TFrom, TReturnIntersection>,
+  TSelected = TRouteMatch,
 >(
   opts: StrictOrFrom<TFrom, TReturnIntersection> & {
-    select?: (match: TRouteMatchState) => TSelected
+    select?: (match: TRouteMatch) => TSelected
   },
 ): TSelected {
   const nearestMatchId = React.useContext(matchContext)
@@ -536,7 +546,7 @@ export function useMatches<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
   TReturnIntersection extends boolean = false,
-  TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
+  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
   T = Array<TRouteMatch>,
 >(opts?: {
   select?: (matches: Array<TRouteMatch>) => T
@@ -556,7 +566,7 @@ export function useParentMatches<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
   TReturnIntersection extends boolean = false,
-  TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
+  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
   T = Array<TRouteMatch>,
 >(opts?: {
   select?: (matches: Array<TRouteMatch>) => T
@@ -581,7 +591,7 @@ export function useChildMatches<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
   TReturnIntersection extends boolean = false,
-  TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
+  TRouteMatch = MakeRouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
   T = Array<TRouteMatch>,
 >(opts?: {
   select?: (matches: Array<TRouteMatch>) => T
@@ -604,7 +614,7 @@ export function useChildMatches<
 export function useLoaderDeps<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
+  TRouteMatch extends MakeRouteMatch<TRouteTree, TFrom> = MakeRouteMatch<
     TRouteTree,
     TFrom
   >,
@@ -627,7 +637,7 @@ export function useLoaderDeps<
 export function useLoaderData<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
+  TRouteMatch extends MakeRouteMatch<TRouteTree, TFrom> = MakeRouteMatch<
     TRouteTree,
     TFrom
   >,

package/src/RouterProvider.tsx

@@ -16,7 +16,7 @@ import type {
   RouterState,
 } from './router'
 
-import type { RouteMatch } from './Matches'
+import type { MakeRouteMatch } from './Matches'
 
 export interface CommitLocationOptions {
   replace?: boolean
@@ -229,7 +229,7 @@ function Transitioner() {
 export function getRouteMatch<TRouteTree extends AnyRoute>(
   state: RouterState<TRouteTree>,
   id: string,
-): undefined | RouteMatch<TRouteTree> {
+): undefined | MakeRouteMatch<TRouteTree> {
   return [
     ...state.cachedMatches,
     ...(state.pendingMatches ?? []),

package/src/fileRoute.ts

@@ -25,7 +25,7 @@ import type {
   UpdatableRouteOptions,
 } from './route'
 import type { Assign, IsAny } from './utils'
-import type { RouteMatch } from './Matches'
+import type { MakeRouteMatch } from './Matches'
 import type { NoInfer } from '@tanstack/react-store'
 import type { RegisteredRouter } from './router'
 import type { RouteById, RouteIds } from './routeInfo'
@@ -189,7 +189,15 @@ export class FileRoute<
       TLoaderDeps,
       TLoaderDataReturn
     > &
-      UpdatableRouteOptions<TAllParams, TFullSearchSchema, TLoaderData>,
+      UpdatableRouteOptions<
+        TId,
+        TAllParams,
+        TFullSearchSchema,
+        TLoaderData,
+        TAllContext,
+        TRouteContext,
+        TLoaderDeps
+      >,
   ): Route<
     TParentRoute,
     TPath,
@@ -255,7 +263,15 @@ export function FileRouteLoader<
 }
 
 export type LazyRouteOptions = Pick<
-  UpdatableRouteOptions<AnyPathParams, AnySearchSchema, any>,
+  UpdatableRouteOptions<
+    string,
+    AnyPathParams,
+    AnySearchSchema,
+    {},
+    AnyContext,
+    AnyContext,
+    {}
+  >,
   'component' | 'errorComponent' | 'pendingComponent' | 'notFoundComponent'
 >
 
@@ -274,13 +290,13 @@ export class LazyRoute<TRoute extends AnyRoute> {
   }
 
   useMatch = <
-    TRouteMatchState = RouteMatch<
+    TRouteMatch = MakeRouteMatch<
       RegisteredRouter['routeTree'],
       TRoute['types']['id']
     >,
-    TSelected = TRouteMatchState,
+    TSelected = TRouteMatch,
   >(opts?: {
-    select?: (match: TRouteMatchState) => TSelected
+    select?: (match: TRouteMatch) => TSelected
   }): TSelected => {
     return useMatch({ select: opts?.select, from: this.options.id })
   }

package/src/route.ts

@@ -7,8 +7,7 @@ import { notFound } from './not-found'
 import { useNavigate } from './useNavigate'
 import type { UseNavigateResult } from './useNavigate'
 import type * as React from 'react'
-import type { RouteMatch } from './Matches'
-import type { AnyRouteMatch } from './Matches'
+import type { MakeRouteMatch, RouteMatch } from './Matches'
 import type { NavigateOptions, ParsePathParams, ToSubOptions } from './link'
 import type { ParsedLocation } from './location'
 import type { RouteById, RouteIds, RoutePaths } from './routeInfo'
@@ -93,9 +92,13 @@ export type RouteOptions<
   TLoaderDataReturn
 > &
   UpdatableRouteOptions<
+    NoInfer<TCustomId>,
     NoInfer<TAllParams>,
     NoInfer<TFullSearchSchema>,
-    NoInfer<TLoaderData>
+    NoInfer<TLoaderData>,
+    NoInfer<TAllContext>,
+    NoInfer<TRouteContext>,
+    NoInfer<TLoaderDeps>
   >
 
 export type ParamsFallback<
@@ -221,44 +224,60 @@ type BeforeLoadFn<
   cause: 'preload' | 'enter' | 'stay'
 }) => Promise<TRouteContextReturn> | TRouteContextReturn | void
 
-export type UpdatableRouteOptions<TAllParams, TFullSearchSchema, TLoaderData> =
-  {
-    // test?: (args: TAllContext) => void
-    // If true, this route will be matched as case-sensitive
-    caseSensitive?: boolean
-    // If true, this route will be forcefully wrapped in a suspense boundary
-    wrapInSuspense?: boolean
-    // The content to be rendered when the route is matched. If no component is provided, defaults to `<Outlet />`
-    component?: RouteComponent
-    errorComponent?: false | null | ErrorRouteComponent
-    notFoundComponent?: NotFoundRouteComponent
-    pendingComponent?: RouteComponent
-    pendingMs?: number
-    pendingMinMs?: number
-    staleTime?: number
-    gcTime?: number
-    preloadStaleTime?: number
-    preloadGcTime?: number
-    // Filter functions that can manipulate search params *before* they are passed to links and navigate
-    // calls that match this route.
-    preSearchFilters?: Array<SearchFilter<TFullSearchSchema>>
-    // Filter functions that can manipulate search params *after* they are passed to links and navigate
-    // calls that match this route.
-    postSearchFilters?: Array<SearchFilter<TFullSearchSchema>>
-    onError?: (err: any) => void
-    // These functions are called as route matches are loaded, stick around and leave the active
-    // matches
-    onEnter?: (match: AnyRouteMatch) => void
-    onStay?: (match: AnyRouteMatch) => void
-    onLeave?: (match: AnyRouteMatch) => void
-    meta?: (ctx: {
-      params: TAllParams
-      loaderData: TLoaderData
-    }) => Array<JSX.IntrinsicElements['meta']>
-    links?: () => Array<JSX.IntrinsicElements['link']>
-    scripts?: () => Array<JSX.IntrinsicElements['script']>
-    headers?: (ctx: { loaderData: TLoaderData }) => Record<string, string>
-  } & UpdatableStaticRouteOption
+export type UpdatableRouteOptions<
+  TRouteId,
+  TAllParams,
+  TFullSearchSchema,
+  TLoaderData,
+  TAllContext,
+  TRouteContext,
+  TLoaderDeps,
+  TRouteMatch = RouteMatch<
+    TRouteId,
+    TAllParams,
+    TFullSearchSchema,
+    TLoaderData,
+    TAllContext,
+    TRouteContext,
+    TLoaderDeps
+  >,
+> = {
+  // test?: (args: TAllContext) => void
+  // If true, this route will be matched as case-sensitive
+  caseSensitive?: boolean
+  // If true, this route will be forcefully wrapped in a suspense boundary
+  wrapInSuspense?: boolean
+  // The content to be rendered when the route is matched. If no component is provided, defaults to `<Outlet />`
+  component?: RouteComponent
+  errorComponent?: false | null | ErrorRouteComponent
+  notFoundComponent?: NotFoundRouteComponent
+  pendingComponent?: RouteComponent
+  pendingMs?: number
+  pendingMinMs?: number
+  staleTime?: number
+  gcTime?: number
+  preloadStaleTime?: number
+  preloadGcTime?: number
+  // Filter functions that can manipulate search params *before* they are passed to links and navigate
+  // calls that match this route.
+  preSearchFilters?: Array<SearchFilter<TFullSearchSchema>>
+  // Filter functions that can manipulate search params *after* they are passed to links and navigate
+  // calls that match this route.
+  postSearchFilters?: Array<SearchFilter<TFullSearchSchema>>
+  onError?: (err: any) => void
+  // These functions are called as route matches are loaded, stick around and leave the active
+  // matches
+  onEnter?: (match: TRouteMatch) => void
+  onStay?: (match: TRouteMatch) => void
+  onLeave?: (match: TRouteMatch) => void
+  meta?: (ctx: {
+    params: TAllParams
+    loaderData: TLoaderData
+  }) => Array<JSX.IntrinsicElements['meta']>
+  links?: () => Array<JSX.IntrinsicElements['link']>
+  scripts?: () => Array<JSX.IntrinsicElements['script']>
+  headers?: (ctx: { loaderData: TLoaderData }) => Record<string, string>
+} & UpdatableStaticRouteOption
 
 export type UpdatableStaticRouteOption =
   {} extends PickRequired<StaticDataRouteOption>
@@ -483,10 +502,10 @@ export class RouteApi<
 
   useMatch = <
     TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-    TRouteMatchState = RouteMatch<TRouteTree, TId>,
-    TSelected = TRouteMatchState,
+    TRouteMatch = MakeRouteMatch<TRouteTree, TId>,
+    TSelected = TRouteMatch,
   >(opts?: {
-    select?: (match: TRouteMatchState) => TSelected
+    select?: (match: TRouteMatch) => TSelected
   }): TSelected => {
     return useMatch({ select: opts?.select, from: this.id })
   }
@@ -806,7 +825,15 @@ export class Route<
   }
 
   update = (
-    options: UpdatableRouteOptions<TAllParams, TFullSearchSchema, TLoaderData>,
+    options: UpdatableRouteOptions<
+      TCustomId,
+      TAllParams,
+      TFullSearchSchema,
+      TLoaderData,
+      TAllContext,
+      TRouteContext,
+      TLoaderDeps
+    >,
   ): this => {
     Object.assign(this.options, options)
     return this
@@ -819,10 +846,10 @@ export class Route<
 
   useMatch = <
     TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-    TRouteMatchState = RouteMatch<TRouteTree, TId>,
-    TSelected = TRouteMatchState,
+    TRouteMatch = MakeRouteMatch<TRouteTree, TId>,
+    TSelected = TRouteMatch,
   >(opts?: {
-    select?: (match: TRouteMatchState) => TSelected
+    select?: (match: TRouteMatch) => TSelected
   }): TSelected => {
     return useMatch({ ...opts, from: this.id })
   }

package/src/router.ts

@@ -60,7 +60,12 @@ import type {
   Updater,
 } from './utils'
 import type { RouteComponent } from './route'
-import type { AnyRouteMatch, MatchRouteOptions, RouteMatch } from './Matches'
+import type {
+  AnyRouteMatch,
+  MakeRouteMatch,
+  MatchRouteOptions,
+  RouteMatch,
+} from './Matches'
 import type { ParsedLocation } from './location'
 import type { SearchParser, SearchSerializer } from './searchParams'
 import type {
@@ -164,13 +169,16 @@ export interface RouterErrorSerializer<TSerializedError> {
   deserialize: (err: TSerializedError) => unknown
 }
 
-export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
+export interface RouterState<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TRouteMatch = MakeRouteMatch<TRouteTree>,
+> {
   status: 'pending' | 'idle'
   isLoading: boolean
   isTransitioning: boolean
-  matches: Array<RouteMatch<TRouteTree>>
-  pendingMatches?: Array<RouteMatch<TRouteTree>>
-  cachedMatches: Array<RouteMatch<TRouteTree>>
+  matches: Array<TRouteMatch>
+  pendingMatches?: Array<TRouteMatch>
+  cachedMatches: Array<TRouteMatch>
   location: ParsedLocation<FullSearchSchema<TRouteTree>>
   resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
   statusCode: number
@@ -202,7 +210,7 @@ export interface DehydratedRouterState {
 }
 
 export type DehydratedRouteMatch = Pick<
-  RouteMatch,
+  MakeRouteMatch,
   'id' | 'status' | 'updatedAt' | 'loaderData'
 >
 
@@ -607,12 +615,11 @@ export class Router<
     return this.routesById as Record<string, AnyRoute>
   }
 
-  // eslint-disable-next-line no-shadow
-  matchRoutes = <TRouteTree extends AnyRoute>(
+  matchRoutes = (
     pathname: string,
     locationSearch: AnySearchSchema,
     opts?: { preload?: boolean; throwOnError?: boolean },
-  ): Array<RouteMatch<TRouteTree>> => {
+  ): Array<AnyRouteMatch> => {
     let routeParams: Record<string, string> = {}
 
     const foundRoute = this.flatRoutes.find((route) => {
@@ -719,7 +726,6 @@ export class Router<
       // which is used to uniquely identify the route match in state
 
       const parentMatch = matches[index - 1]
-      const isLast = index === matchedRoutes.length - 1
 
       const [preMatchSearch, searchError]: [Record<string, any>, any] = (() => {
         // Validate the search params and stabilize them
@@ -881,7 +887,7 @@ export class Router<
       dest: BuildNextOptions & {
         unmaskOnReload?: boolean
       } = {},
-      matches?: Array<AnyRouteMatch>,
+      matches?: Array<MakeRouteMatch<TRouteTree>>,
     ): ParsedLocation => {
       const fromPath = dest.from || this.latestLocation.pathname
       let fromSearch = dest._fromLocation?.search || this.latestLocation.search
@@ -1172,7 +1178,7 @@ export class Router<
     location: ParsedLocation
     matches: Array<AnyRouteMatch>
     preload?: boolean
-  }): Promise<Array<RouteMatch>> => {
+  }): Promise<Array<MakeRouteMatch>> => {
     let latestPromise
     let firstBadMatchIndex: number | undefined
 
@@ -1607,7 +1613,7 @@ export class Router<
   }
 
   invalidate = () => {
-    const invalidate = (d: RouteMatch<TRouteTree>) => ({
+    const invalidate = (d: MakeRouteMatch<TRouteTree>) => ({
       ...d,
       invalid: true,
       ...(d.status === 'error' ? ({ status: 'pending' } as const) : {}),
@@ -1652,7 +1658,7 @@ export class Router<
           pathChanged: pathDidChange,
         })
 
-        let pendingMatches!: Array<RouteMatch<any, any>>
+        let pendingMatches!: Array<AnyRouteMatch>
         const previousMatches = this.state.matches
 
         this.__store.batch(() => {

package/src/useRouteContext.ts

@@ -1,5 +1,5 @@
 import { useMatch } from './Matches'
-import type { RouteMatch } from './Matches'
+import type { MakeRouteMatch } from './Matches'
 import type { AnyRoute } from './route'
 import type { RouteById, RouteIds } from './routeInfo'
 import type { RegisteredRouter } from './router'
@@ -17,7 +17,7 @@ export function useRouteContext<
 ): TSelected {
   return useMatch({
     ...(opts as any),
-    select: (match: RouteMatch) =>
-      opts.select ? opts.select(match.context as TRouteContext) : match.context,
+    select: (match: MakeRouteMatch<TRouteTree, TFrom>) =>
+      opts.select ? opts.select(match.context) : match.context,
   })
 }

package/src/useSearch.tsx

@@ -1,9 +1,8 @@
 import { useMatch } from './Matches'
-import { Expand } from './utils'
 import type { AnyRoute, RootSearchSchema } from './route'
 import type { FullSearchSchema, RouteById, RouteIds } from './routeInfo'
 import type { RegisteredRouter } from './router'
-import type { RouteMatch } from './Matches'
+import type { MakeRouteMatch } from './Matches'
 import type { StrictOrFrom } from './utils'
 
 export function useSearch<
@@ -24,8 +23,8 @@ export function useSearch<
 ): TSelected {
   return useMatch({
     ...opts,
-    select: (match: RouteMatch) => {
-      return opts.select ? opts.select(match.search as TSearch) : match.search
+    select: (match: MakeRouteMatch<TRouteTree, TFrom>) => {
+      return opts.select ? opts.select(match.search) : match.search
     },
   })
 }