@tanstack/react-router 1.4.7 → 1.4.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -44,7 +44,7 @@
     "@tanstack/store": "^0.1.3",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.4.7"
+    "@tanstack/history": "1.4.9"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -4,9 +4,8 @@ import warning from 'tiny-warning'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
 import { useRouter, useRouterState } from './RouterProvider'
 import { ResolveRelativePath, ToOptions } from './link'
-import { AnyRoute, ReactNode, rootRouteId } from './route'
+import { AnyRoute, ReactNode } from './route'
 import {
-  FullSearchSchema,
   ParseRoute,
   RouteById,
   RouteByPath,
@@ -14,7 +13,7 @@ import {
   RoutePaths,
 } from './routeInfo'
 import { RegisteredRouter, RouterState } from './router'
-import { NoInfer, StrictOrFrom, pick } from './utils'
+import { GetTFrom, NoInfer, StrictOrFrom, pick } from './utils'
 
 export const matchContext = React.createContext<string | undefined>(undefined)
 
@@ -37,8 +36,7 @@ export interface RouteMatch<
   loaderData?: RouteById<TRouteTree, TRouteId>['types']['loaderData']
   routeContext: RouteById<TRouteTree, TRouteId>['types']['routeContext']
   context: RouteById<TRouteTree, TRouteId>['types']['allContext']
-  search: FullSearchSchema<TRouteTree> &
-    RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema']
+  search: RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema']
   fetchCount: number
   abortController: AbortController
   cause: 'preload' | 'enter' | 'stay'
@@ -293,16 +291,17 @@ export function getRenderedMatches(state: RouterState) {
 }
 
 export function useMatch<
+  TOpts extends StrictOrFrom<TFrom>,
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TStrict extends boolean = true,
-  TRouteMatchState = RouteMatch<TRouteTree, TFrom>,
+  TFromInferred extends RouteIds<TRouteTree> = GetTFrom<TOpts, TRouteTree>,
+  TRouteMatchState = RouteMatch<TRouteTree, TFromInferred>,
   TSelected = TRouteMatchState,
 >(
-  opts: StrictOrFrom<TFrom> & {
+  opts: TOpts & {
     select?: (match: TRouteMatchState) => TSelected
   },
-): TStrict extends true ? TSelected : TSelected | undefined {
+): TSelected {
   const router = useRouter()
   const nearestMatchId = React.useContext(matchContext)
 
@@ -378,19 +377,20 @@ export function useParentMatches<T = RouteMatch[]>(opts?: {
 }
 
 export function useLoaderDeps<
+  TOpts extends StrictOrFrom<TFrom>,
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TStrict extends boolean = true,
-  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
+  TFromInferred extends RouteIds<TRouteTree> = GetTFrom<TOpts, TRouteTree>,
+  TRouteMatch extends RouteMatch<TRouteTree, TFromInferred> = RouteMatch<
     TRouteTree,
-    TFrom
+    TFromInferred
   >,
   TSelected = Required<TRouteMatch>['loaderDeps'],
 >(
-  opts: StrictOrFrom<TFrom> & {
+  opts: TOpts & {
     select?: (match: TRouteMatch) => TSelected
   },
-): TStrict extends true ? TSelected : TSelected | undefined {
+): TSelected {
   return useMatch({
     ...opts,
     select: (s) => {
@@ -398,23 +398,24 @@ export function useLoaderDeps<
         ? opts.select(s?.loaderDeps)
         : s?.loaderDeps
     },
-  })!
+  })
 }
 
 export function useLoaderData<
+  TOpts extends StrictOrFrom<TFrom>,
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TStrict extends boolean = true,
-  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
+  TFromInferred extends RouteIds<TRouteTree> = GetTFrom<TOpts, TRouteTree>,
+  TRouteMatch extends RouteMatch<TRouteTree, TFromInferred> = RouteMatch<
     TRouteTree,
-    TFrom
+    TFromInferred
   >,
   TSelected = Required<TRouteMatch>['loaderData'],
 >(
-  opts: StrictOrFrom<TFrom> & {
+  opts: TOpts & {
     select?: (match: TRouteMatch) => TSelected
   },
-): TStrict extends true ? TSelected : TSelected | undefined {
+): TSelected {
   return useMatch({
     ...opts,
     select: (s) => {
@@ -422,5 +423,5 @@ export function useLoaderData<
         ? opts.select(s?.loaderData)
         : s?.loaderData
     },
-  })!
+  })
 }

package/src/link.tsx

@@ -15,6 +15,7 @@ import {
   NoInfer,
   NonNullableUpdater,
   PickRequired,
+  StringLiteral,
   Updater,
   WithoutEmpty,
   deepEqual,
@@ -114,7 +115,7 @@ export type RelativeToPathAutoComplete<
 
 export type NavigateOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
+  TFrom extends RoutePaths<TRouteTree> | string = RoutePaths<TRouteTree>,
   TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
   TMaskTo extends string = '',
@@ -128,7 +129,7 @@ export type NavigateOptions<
 
 export type ToOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
+  TFrom extends RoutePaths<TRouteTree> | string = RoutePaths<TRouteTree>,
   TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
   TMaskTo extends string = '',
@@ -138,7 +139,7 @@ export type ToOptions<
 
 export type ToMaskOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TMaskFrom extends RoutePaths<TRouteTree> | string = string,
+  TMaskFrom extends RoutePaths<TRouteTree> | string = RoutePaths<TRouteTree>,
   TMaskTo extends string = '',
 > = ToSubOptions<TRouteTree, TMaskFrom, TMaskTo> & {
   unmaskOnReload?: boolean
@@ -146,7 +147,7 @@ export type ToMaskOptions<
 
 export type ToSubOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
+  TFrom extends RoutePaths<TRouteTree> | string = RoutePaths<TRouteTree>,
   TTo extends string = '',
   TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>,
 > = {
@@ -156,7 +157,7 @@ export type ToSubOptions<
   // State to pass to the history stack
   state?: true | NonNullableUpdater<HistoryState>
   // The source route path. This is automatically set when using route-level APIs, but for type-safe relative routing on the router itself, this is required
-  from?: TFrom
+  from?: StringLiteral<TFrom>
   // // When using relative route paths, this option forces resolution from the current path, instead of the route API's path or `from` path
 } & CheckPath<TRouteTree, NoInfer<TResolved>, {}> &
   SearchParamOptions<TRouteTree, TFrom, TTo, TResolved> &

package/src/route.ts

@@ -485,41 +485,40 @@ export class RouteApi<
   useMatch = <TSelected = TAllContext>(opts?: {
     select?: (s: TAllContext) => TSelected
   }): TSelected => {
-    return useMatch({ ...opts, from: this.id }) as any
+    return useMatch({ select: opts?.select, from: this.id })
   }
 
   useRouteContext = <TSelected = TAllContext>(opts?: {
     select?: (s: TAllContext) => TSelected
   }): TSelected => {
     return useMatch({
-      ...opts,
       from: this.id,
       select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
-    } as any)
+    })
   }
 
   useSearch = <TSelected = TFullSearchSchema>(opts?: {
     select?: (s: TFullSearchSchema) => TSelected
   }): TSelected => {
-    return useSearch({ ...opts, from: this.id } as any)
+    return useSearch({ ...opts, from: this.id })
   }
 
   useParams = <TSelected = TAllParams>(opts?: {
     select?: (s: TAllParams) => TSelected
   }): TSelected => {
-    return useParams({ ...opts, from: this.id } as any)
+    return useParams({ ...opts, from: this.id })
   }
 
   useLoaderDeps = <TSelected = TLoaderDeps>(opts?: {
     select?: (s: TLoaderDeps) => TSelected
   }): TSelected => {
-    return useLoaderDeps({ ...opts, from: this.id } as any) as any
+    return useLoaderDeps({ ...opts, from: this.id } as any)
   }
 
   useLoaderData = <TSelected = TLoaderData>(opts?: {
     select?: (s: TLoaderData) => TSelected
   }): TSelected => {
-    return useLoaderData({ ...opts, from: this.id } as any) as any
+    return useLoaderData({ ...opts, from: this.id } as any)
   }
 }
 
@@ -810,7 +809,7 @@ export class Route<
   useMatch = <TSelected = TAllContext>(opts?: {
     select?: (search: TAllContext) => TSelected
   }): TSelected => {
-    return useMatch({ ...opts, from: this.id }) as any
+    return useMatch({ ...opts, from: this.id })
   }
 
   useRouteContext = <TSelected = TAllContext>(opts?: {
@@ -820,31 +819,31 @@ export class Route<
       ...opts,
       from: this.id,
       select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
-    } as any)
+    })
   }
 
   useSearch = <TSelected = TFullSearchSchema>(opts?: {
     select?: (search: TFullSearchSchema) => TSelected
   }): TSelected => {
-    return useSearch({ ...opts, from: this.id } as any)
+    return useSearch({ ...opts, from: this.id })
   }
 
   useParams = <TSelected = TAllParams>(opts?: {
     select?: (search: TAllParams) => TSelected
   }): TSelected => {
-    return useParams({ ...opts, from: this.id } as any)
+    return useParams({ ...opts, from: this.id })
   }
 
   useLoaderDeps = <TSelected = TLoaderDeps>(opts?: {
     select?: (s: TLoaderDeps) => TSelected
   }): TSelected => {
-    return useLoaderDeps({ ...opts, from: this.id } as any) as any
+    return useLoaderDeps({ ...opts, from: this.id } as any)
   }
 
   useLoaderData = <TSelected = TLoaderData>(opts?: {
     select?: (search: TLoaderData) => TSelected
   }): TSelected => {
-    return useLoaderData({ ...opts, from: this.id } as any) as any
+    return useLoaderData({ ...opts, from: this.id } as any)
   }
 }
 

package/src/router.ts

@@ -1060,9 +1060,9 @@ export class Router<
 
           const pendingMs =
             route.options.pendingMs ?? this.options.defaultPendingMs
-          const pendingPromise = new Promise<void>((r) =>
-            setTimeout(r, pendingMs),
-          )
+          const pendingPromise = typeof pendingMs === 'number' && pendingMs <= 0
+            ? Promise.resolve()
+            : new Promise<void>((r) => setTimeout(r, pendingMs))
 
           const beforeLoadContext =
             (await route.options.beforeLoad?.({
@@ -1145,7 +1145,7 @@ export class Router<
             route.options.pendingMinMs ?? this.options.defaultPendingMinMs
           const shouldPending =
             !preload &&
-            pendingMs &&
+            typeof pendingMs === 'number' &&
             (route.options.pendingComponent ??
               this.options.defaultPendingComponent)
 

package/src/useNavigate.tsx

@@ -5,12 +5,13 @@ import { LinkOptions, NavigateOptions } from './link'
 import { AnyRoute } from './route'
 import { RoutePaths } from './routeInfo'
 import { RegisteredRouter } from './router'
+import { StringLiteral } from './utils'
 
 export function useNavigate<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TDefaultFrom extends RoutePaths<TRouteTree> | string = string,
->(_defaultOpts?: { from?: TDefaultFrom }) {
-  const { navigate, buildLocation } = useRouter()
+  TDefaultFrom extends RoutePaths<TRouteTree> | string = RoutePaths<TRouteTree>,
+>(_defaultOpts?: { from?: StringLiteral<TDefaultFrom> }) {
+  const { navigate } = useRouter()
 
   const matchPathname = useMatch({
     strict: false,

package/src/useParams.tsx

@@ -3,18 +3,19 @@ import { RouteIds, RouteById, AllParams } from './routeInfo'
 import { RegisteredRouter } from './router'
 import { last } from './utils'
 import { useRouterState } from './RouterProvider'
-import { StrictOrFrom } from './utils'
+import { StrictOrFrom, GetTFrom } from './utils'
 import { getRenderedMatches } from './Matches'
 
 export function useParams<
+  TOpts extends StrictOrFrom<TFrom>,
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TDefaultSelected = AllParams<TRouteTree> &
-    RouteById<TRouteTree, TFrom>['types']['allParams'],
-  TSelected = TDefaultSelected,
+  TFromInferred = GetTFrom<TOpts, TRouteTree>,
+  TParams = RouteById<TRouteTree, TFromInferred>['types']['allParams'],
+  TSelected = TParams,
 >(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (search: TDefaultSelected) => TSelected
+  opts: TOpts & {
+    select?: (params: TParams) => TSelected
   },
 ): TSelected {
   return useRouterState({

package/src/useSearch.tsx

@@ -3,21 +3,22 @@ import { RouteIds, RouteById } from './routeInfo'
 import { RegisteredRouter } from './router'
 import { RouteMatch } from './Matches'
 import { useMatch } from './Matches'
-import { StrictOrFrom } from './utils'
+import { StrictOrFrom, GetTFrom } from './utils'
 
 export function useSearch<
+  TOpts extends StrictOrFrom<TFrom>,
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TStrict extends boolean = true,
-  TSearch = RouteById<TRouteTree, TFrom>['types']['fullSearchSchema'],
+  TFromInferred = GetTFrom<TOpts, TRouteTree>,
+  TSearch = RouteById<TRouteTree, TFromInferred>['types']['fullSearchSchema'],
   TSelected = TSearch,
 >(
-  opts: StrictOrFrom<TFrom> & {
+  opts: TOpts & {
     select?: (search: TSearch) => TSelected
   },
-): TStrict extends true ? TSelected : TSelected | undefined {
+) : TSelected {
   return useMatch({
-    ...(opts as any),
+    ...opts,
     select: (match: RouteMatch) => {
       return opts?.select ? opts.select(match.search as TSearch) : match.search
     },

package/src/utils.ts

@@ -156,7 +156,8 @@ export function replaceEqualDeep<T>(prev: any, _next: T): T {
   const array = isPlainArray(prev) && isPlainArray(next)
 
   if (array || (isPlainObject(prev) && isPlainObject(next))) {
-    const prevSize = array ? prev.length : Object.keys(prev).length
+    const prevItems = array ? prev : Object.keys(prev)
+    const prevSize = prevItems.length
     const nextItems = array ? next : Object.keys(next)
     const nextSize = nextItems.length
     const copy: any = array ? [] : {}
@@ -165,9 +166,19 @@ export function replaceEqualDeep<T>(prev: any, _next: T): T {
 
     for (let i = 0; i < nextSize; i++) {
       const key = array ? i : nextItems[i]
-      copy[key] = replaceEqualDeep(prev[key], next[key])
-      if (copy[key] === prev[key] && prev[key] !== undefined) {
+      if (
+        !array &&
+        prev[key] === undefined &&
+        next[key] === undefined &&
+        prevItems.includes(key)
+      ) {
+        copy[key] = undefined
         equalItems++
+      } else {
+        copy[key] = replaceEqualDeep(prev[key], next[key])
+        if (copy[key] === prev[key] && prev[key] !== undefined) {
+          equalItems++
+        }
       }
     }
 
@@ -279,9 +290,15 @@ export function shallow<T>(objA: T, objB: T) {
   return true
 }
 
+export type StringLiteral<T> = T extends string
+  ? string extends T
+    ? string
+    : T
+  : never
+
 export type StrictOrFrom<TFrom> =
   | {
-      from: TFrom
+      from: StringLiteral<TFrom> | TFrom
       strict?: true
     }
   | {
@@ -289,17 +306,22 @@ export type StrictOrFrom<TFrom> =
       strict: false
     }
 
+export type GetTFrom<T, TRouteTree extends AnyRoute> = T extends StrictOrFrom<
+  infer TFrom extends RouteIds<TRouteTree>
+>
+  ? TFrom
+  : never
+
 export function useRouteContext<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TStrict extends boolean = true,
   TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],
   TSelected = TRouteContext,
 >(
   opts: StrictOrFrom<TFrom> & {
     select?: (search: TRouteContext) => TSelected
   },
-): TStrict extends true ? TSelected : TSelected | undefined {
+): TSelected {
   return useMatch({
     ...(opts as any),
     select: (match: RouteMatch) =>