@tanstack/react-router 1.22.4 → 1.22.6

package/src/Matches.tsx

@@ -4,14 +4,17 @@ import warning from 'tiny-warning'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
-import { ResolveRelativePath, ToOptions } from './link'
-import {
+import { isServer, pick } from './utils'
+import { CatchNotFound, DefaultGlobalNotFound, isNotFound } from './not-found'
+import { isRedirect } from './redirects'
+import type { ResolveRelativePath, ToOptions } from './link'
+import type {
   AnyRoute,
   ReactNode,
   RootSearchSchema,
   StaticDataRouteOption,
 } from './route'
-import {
+import type {
   AllParams,
   FullSearchSchema,
   ParseRoute,
@@ -20,17 +23,8 @@ import {
   RouteIds,
   RoutePaths,
 } from './routeInfo'
-import { AnyRouter, RegisteredRouter, RouterState } from './router'
-import {
-  DeepPartial,
-  Expand,
-  NoInfer,
-  StrictOrFrom,
-  isServer,
-  pick,
-} from './utils'
-import { CatchNotFound, DefaultGlobalNotFound, isNotFound } from './not-found'
-import { isRedirect } from './redirects'
+import type { AnyRouter, RegisteredRouter, RouterState } from './router'
+import type { DeepPartial, Expand, NoInfer, StrictOrFrom } from './utils'
 
 export const matchContext = React.createContext<string | undefined>(undefined)
 
@@ -71,9 +65,9 @@ export interface RouteMatch<
   preload: boolean
   invalid: boolean
   pendingPromise?: Promise<void>
-  meta?: JSX.IntrinsicElements['meta'][]
-  links?: JSX.IntrinsicElements['link'][]
-  scripts?: JSX.IntrinsicElements['script'][]
+  meta?: Array<JSX.IntrinsicElements['meta']>
+  links?: Array<JSX.IntrinsicElements['link']>
+  scripts?: Array<JSX.IntrinsicElements['script']>
   headers?: Record<string, string>
   globalNotFound?: boolean
   staticData: StaticDataRouteOption
@@ -89,10 +83,14 @@ export function Matches() {
     },
   })
 
+  const resetKey = useRouterState({
+    select: (s) => s.resolvedLocation.state.key!,
+  })
+
   return (
     <matchContext.Provider value={matchId}>
       <CatchBoundary
-        getResetKey={() => router.state.resolvedLocation.state?.key!}
+        getResetKey={() => router.state.resolvedLocation.state.key!}
         errorComponent={ErrorComponent}
         onCatch={(error) => {
           warning(
@@ -126,8 +124,8 @@ export function Match({ matchId }: { matchId: string }) {
 
   const route = router.routesById[routeId]!
 
-  const PendingComponent = (route.options.pendingComponent ??
-    router.options.defaultPendingComponent) as any
+  const PendingComponent =
+    route.options.pendingComponent ?? router.options.defaultPendingComponent
 
   const pendingElement = PendingComponent ? <PendingComponent /> : null
 
@@ -145,7 +143,7 @@ export function Match({ matchId }: { matchId: string }) {
     PendingComponent ??
     route.options.component?.preload ??
     route.options.pendingComponent?.preload ??
-    (route.options.errorComponent as any)?.preload
+    route.options.errorComponent?.preload
       ? React.Suspense
       : SafeFragment
 
@@ -157,11 +155,15 @@ export function Match({ matchId }: { matchId: string }) {
     ? CatchNotFound
     : SafeFragment
 
+  const resetKey = useRouterState({
+    select: (s) => s.resolvedLocation.state.key!,
+  })
+
   return (
     <matchContext.Provider value={matchId}>
       <ResolvedSuspenseBoundary fallback={pendingElement}>
         <ResolvedCatchBoundary
-          getResetKey={() => router.state.resolvedLocation.state?.key!}
+          getResetKey={() => resetKey}
           errorComponent={routeErrorComponent ?? ErrorComponent}
           onCatch={(error) => {
             // Forward not found errors (we don't want to show the error component for these)
@@ -184,7 +186,7 @@ export function Match({ matchId }: { matchId: string }) {
               return React.createElement(routeNotFoundComponent, error as any)
             }}
           >
-            <MatchInner matchId={matchId!} pendingElement={pendingElement} />
+            <MatchInner matchId={matchId} pendingElement={pendingElement} />
           </ResolvedNotFoundBoundary>
         </ResolvedCatchBoundary>
       </ResolvedSuspenseBoundary>
@@ -283,8 +285,9 @@ function MatchInner({
     throw match.loadPromise
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (match.status === 'success') {
-    let Comp = route.options.component ?? router.options.defaultComponent
+    const Comp = route.options.component ?? router.options.defaultComponent
 
     if (Comp) {
       return <Comp />
@@ -374,16 +377,16 @@ export type UseMatchRouteOptions<
   TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
   TMaskTo extends string = '',
-  Options extends ToOptions<
+  TOptions extends ToOptions<
     TRouteTree,
     TFrom,
     TTo,
     TMaskFrom,
     TMaskTo
   > = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
-  RelaxedOptions = Omit<Options, 'search' | 'params'> &
-    DeepPartial<Pick<Options, 'search' | 'params'>>,
-> = RelaxedOptions & MatchRouteOptions
+  TRelaxedOptions = Omit<TOptions, 'search' | 'params'> &
+    DeepPartial<Pick<TOptions, 'search' | 'params'>>,
+> = TRelaxedOptions & MatchRouteOptions
 
 export function useMatchRoute<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
@@ -447,7 +450,7 @@ export function MatchRoute<
     return (props.children as any)(params)
   }
 
-  return !!params ? props.children : null
+  return params ? props.children : null
 }
 
 export function getRenderedMatches<
@@ -474,19 +477,17 @@ export function useMatch<
   const matchSelection = useRouterState({
     select: (state) => {
       const match = getRenderedMatches(state).find((d) =>
-        opts?.from ? opts?.from === d.routeId : d.id === nearestMatchId,
+        opts.from ? opts.from === d.routeId : d.id === nearestMatchId,
       )
 
       invariant(
         match,
         `Could not find ${
-          opts?.from
-            ? `an active match from "${opts.from}"`
-            : 'a nearest match!'
+          opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'
         }`,
       )
 
-      return opts?.select ? opts.select(match as any) : match
+      return opts.select ? opts.select(match as any) : match
     },
   })
 
@@ -498,16 +499,16 @@ export function useMatches<
   TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
   TReturnIntersection extends boolean = false,
   TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
-  T = TRouteMatch[],
+  T = Array<TRouteMatch>,
 >(opts?: {
-  select?: (matches: TRouteMatch[]) => T
+  select?: (matches: Array<TRouteMatch>) => T
   experimental_returnIntersection?: TReturnIntersection
 }): T {
   return useRouterState({
     select: (state) => {
       const matches = getRenderedMatches(state)
       return opts?.select
-        ? opts.select(matches as TRouteMatch[])
+        ? opts.select(matches as Array<TRouteMatch>)
         : (matches as T)
     },
   })
@@ -518,9 +519,9 @@ export function useParentMatches<
   TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
   TReturnIntersection extends boolean = false,
   TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
-  T = TRouteMatch[],
+  T = Array<TRouteMatch>,
 >(opts?: {
-  select?: (matches: TRouteMatch[]) => T
+  select?: (matches: Array<TRouteMatch>) => T
   experimental_returnIntersection?: TReturnIntersection
 }): T {
   const contextMatchId = React.useContext(matchContext)
@@ -532,7 +533,7 @@ export function useParentMatches<
         matches.findIndex((d) => d.id === contextMatchId),
       )
       return opts?.select
-        ? opts.select(matches as TRouteMatch[])
+        ? opts.select(matches as Array<TRouteMatch>)
         : (matches as T)
     },
   })
@@ -543,9 +544,9 @@ export function useChildMatches<
   TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
   TReturnIntersection extends boolean = false,
   TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
-  T = TRouteMatch[],
+  T = Array<TRouteMatch>,
 >(opts?: {
-  select?: (matches: TRouteMatch[]) => T
+  select?: (matches: Array<TRouteMatch>) => T
   experimental_returnIntersection?: TReturnIntersection
 }): T {
   const contextMatchId = React.useContext(matchContext)
@@ -556,7 +557,7 @@ export function useChildMatches<
         matches.findIndex((d) => d.id === contextMatchId) + 1,
       )
       return opts?.select
-        ? opts.select(matches as TRouteMatch[])
+        ? opts.select(matches as Array<TRouteMatch>)
         : (matches as T)
     },
   })
@@ -579,8 +580,8 @@ export function useLoaderDeps<
     ...opts,
     select: (s) => {
       return typeof opts.select === 'function'
-        ? opts.select(s?.loaderDeps)
-        : s?.loaderDeps
+        ? opts.select(s.loaderDeps)
+        : s.loaderDeps
     },
   })
 }
@@ -602,8 +603,8 @@ export function useLoaderData<
     ...opts,
     select: (s) => {
       return typeof opts.select === 'function'
-        ? opts.select(s?.loaderData)
-        : s?.loaderData
+        ? opts.select(s.loaderData)
+        : s.loaderData
     },
   })
 }

package/src/RouterProvider.tsx

@@ -1,18 +1,24 @@
 import * as React from 'react'
 import { Matches } from './Matches'
-import { NavigateOptions, ToOptions } from './link'
-import { ParsedLocation } from './location'
-import { AnyRoute } from './route'
-import { RoutePaths } from './routeInfo'
-import { RegisteredRouter, Router, RouterOptions, RouterState } from './router'
 import { pick, useLayoutEffect } from './utils'
-
-import { RouteMatch } from './Matches'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
 import { getRouterContext } from './routerContext'
+import type { NavigateOptions, ToOptions } from './link'
+import type { ParsedLocation } from './location'
+import type { AnyRoute } from './route'
+import type { RoutePaths } from './routeInfo'
+import type {
+  RegisteredRouter,
+  Router,
+  RouterOptions,
+  RouterState,
+} from './router'
+
+import type { RouteMatch } from './Matches'
 
 const useTransition =
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   React.useTransition ||
   (() => [
     false,
@@ -67,7 +73,7 @@ export function RouterProvider<
     ...rest,
     context: {
       ...router.options.context,
-      ...rest?.context,
+      ...rest.context,
     },
   } as any)
 
@@ -114,7 +120,7 @@ function Transitioner() {
         isTransitioning,
       }))
     }
-  }, [isTransitioning])
+  }, [isTransitioning, router])
 
   const tryLoad = () => {
     const apply = (cb: () => void) => {
@@ -157,14 +163,14 @@ function Transitioner() {
     return () => {
       unsub()
     }
-  }, [router.history])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router, router.history])
 
   useLayoutEffect(() => {
     if (
       (React.useTransition as any)
         ? routerState.isTransitioning && !isTransitioning
-        : true &&
-          !routerState.isLoading &&
+        : !routerState.isLoading &&
           routerState.resolvedLocation !== routerState.location
     ) {
       router.emit({
@@ -172,14 +178,12 @@ function Transitioner() {
         fromLocation: routerState.resolvedLocation,
         toLocation: routerState.location,
         pathChanged:
-          routerState.location!.href !== routerState.resolvedLocation?.href,
+          routerState.location.href !== routerState.resolvedLocation.href,
       })
 
       if ((document as any).querySelector) {
         if (routerState.location.hash !== '') {
-          const el = document.getElementById(
-            routerState.location.hash,
-          ) as HTMLElement | null
+          const el = document.getElementById(routerState.location.hash)
           if (el) {
             el.scrollIntoView()
           }
@@ -198,6 +202,7 @@ function Transitioner() {
     routerState.isLoading,
     routerState.resolvedLocation,
     routerState.location,
+    router,
   ])
 
   useLayoutEffect(() => {
@@ -210,6 +215,7 @@ function Transitioner() {
     }
     mountLoadForRouter.current = { router, mounted: true }
     tryLoad()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router])
 
   return null

package/src/awaited.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
+import warning from 'tiny-warning'
 import { useRouter } from './useRouter'
 import { defaultSerializeError } from './router'
-import { DeferredPromise, isDehydratedDeferred } from './defer'
+import { isDehydratedDeferred } from './defer'
 import { defaultDeserializeError, isServerSideError } from './Matches'
-
-import warning from 'tiny-warning'
+import type { DeferredPromise } from './defer'
 
 export type AwaitOptions<T> = {
   promise: DeferredPromise<T>

package/src/defer.ts

@@ -34,6 +34,7 @@ export function defer<T>(
 ) {
   const promise = _promise as DeferredPromise<T>
 
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!promise.__deferredState) {
     promise.__deferredState = {
       uid: Math.random().toString(36).slice(2),

package/src/fileRoute.ts

@@ -1,33 +1,33 @@
-import { NoInfer } from '@tanstack/react-store'
-import { ParsePathParams } from './link'
-import {
+import warning from 'tiny-warning'
+import { RouteOptions, createRoute } from './route'
+import { useLoaderData, useLoaderDeps, useMatch } from './Matches'
+import { useSearch } from './useSearch'
+import { useParams } from './useParams'
+import type { ParsePathParams } from './link'
+import type {
+  AnyContext,
+  AnyPathParams,
   AnyRoute,
+  AnySearchSchema,
+  FileBaseRouteOptions,
+  MergeFromFromParent,
   ResolveFullPath,
   ResolveFullSearchSchema,
-  MergeFromFromParent,
-  RouteContext,
-  AnyContext,
-  RouteOptions,
-  UpdatableRouteOptions,
-  Route,
-  createRoute,
+  ResolveFullSearchSchemaInput,
   RootRouteId,
-  TrimPathLeft,
+  Route,
   RouteConstraints,
-  ResolveFullSearchSchemaInput,
-  SearchSchemaInput,
+  RouteContext,
   RouteLoaderFn,
-  AnyPathParams,
-  AnySearchSchema,
-  FileBaseRouteOptions,
+  SearchSchemaInput,
+  TrimPathLeft,
+  UpdatableRouteOptions,
 } from './route'
-import { Assign, Expand, IsAny } from './utils'
-import { useMatch, useLoaderDeps, useLoaderData, RouteMatch } from './Matches'
-import { useSearch } from './useSearch'
-import { useParams } from './useParams'
-import warning from 'tiny-warning'
-import { RegisteredRouter } from './router'
-import { RouteById, RouteIds } from './routeInfo'
+import type { Assign, Expand, IsAny } from './utils'
+import type { RouteMatch } from './Matches'
+import type { NoInfer } from '@tanstack/react-store'
+import type { RegisteredRouter } from './router'
+import type { RouteById, RouteIds } from './routeInfo'
 
 export interface FileRoutesByPath {
   // '/': {
@@ -36,26 +36,26 @@ export interface FileRoutesByPath {
 }
 
 type Replace<
-  S extends string,
-  From extends string,
-  To extends string,
-> = S extends `${infer Start}${From}${infer Rest}`
-  ? `${Start}${To}${Replace<Rest, From, To>}`
-  : S
+  TValue extends string,
+  TFrom extends string,
+  TTo extends string,
+> = TValue extends `${infer Start}${TFrom}${infer Rest}`
+  ? `${Start}${TTo}${Replace<Rest, TFrom, TTo>}`
+  : TValue
 
 export type TrimLeft<
-  T extends string,
-  S extends string,
-> = T extends `${S}${infer U}` ? U : T
+  TValue extends string,
+  TStartsWith extends string,
+> = TValue extends `${TStartsWith}${infer U}` ? U : TValue
 
 export type TrimRight<
-  T extends string,
-  S extends string,
-> = T extends `${infer U}${S}` ? U : T
+  TValue extends string,
+  TEndsWith extends string,
+> = TValue extends `${infer U}${TEndsWith}` ? U : TValue
 
-export type Trim<T extends string, S extends string> = TrimLeft<
-  TrimRight<T, S>,
-  S
+export type Trim<TValue extends string, TFind extends string> = TrimLeft<
+  TrimRight<TValue, TFind>,
+  TFind
 >
 
 export type RemoveUnderScores<T extends string> = Replace<
@@ -64,23 +64,23 @@ export type RemoveUnderScores<T extends string> = Replace<
   '/'
 >
 
-type RemoveRouteGroups<S extends string> =
-  S extends `${infer Before}(${infer RouteGroup})${infer After}`
+type RemoveRouteGroups<T extends string> =
+  T extends `${infer Before}(${infer RouteGroup})${infer After}`
     ? RemoveRouteGroups<`${Before}${After}`>
-    : S
+    : T
 
-type NormalizeSlashes<S extends string> =
-  S extends `${infer Before}//${infer After}`
+type NormalizeSlashes<T extends string> =
+  T extends `${infer Before}//${infer After}`
     ? NormalizeSlashes<`${Before}/${After}`>
-    : S
+    : T
 
 type ReplaceFirstOccurrence<
-  T extends string,
-  Search extends string,
-  Replacement extends string,
-> = T extends `${infer Prefix}${Search}${infer Suffix}`
-  ? `${Prefix}${Replacement}${Suffix}`
-  : T
+  TValue extends string,
+  TSearch extends string,
+  TReplacement extends string,
+> = TValue extends `${infer Prefix}${TSearch}${infer Suffix}`
+  ? `${Prefix}${TReplacement}${Suffix}`
+  : TValue
 
 export type ResolveFilePath<
   TParentRoute extends AnyRoute,
@@ -189,8 +189,8 @@ export class FileRoute<
     >,
     TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
     TLoaderDeps extends Record<string, any> = {},
-    TLoaderDataReturn extends any = unknown,
-    TLoaderData extends any = [TLoaderDataReturn] extends [never]
+    TLoaderDataReturn = unknown,
+    TLoaderData = [TLoaderDataReturn] extends [never]
       ? undefined
       : TLoaderDataReturn,
     TChildren extends RouteConstraints['TChildren'] = unknown,
@@ -255,7 +255,7 @@ export function FileRouteLoader<
   TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
 >(
   _path: TFilePath,
-): <TLoaderData extends any>(
+): <TLoaderData>(
   loaderFn: RouteLoaderFn<
     TRoute['types']['allParams'],
     TRoute['types']['loaderDeps'],

package/src/history.ts

@@ -1,4 +1,4 @@
-import { HistoryLocation } from '@tanstack/history'
+import type { HistoryLocation } from '@tanstack/history'
 
 declare module '@tanstack/history' {
   interface HistoryState {

package/src/lazyRouteComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { AsyncRouteComponent } from './route'
+import type { AsyncRouteComponent } from './route'
 
 // If the load fails due to module not found, it may mean a new version of
 // the build was deployed and the user's browser is still using an old version.
@@ -27,6 +27,7 @@ export function lazyRouteComponent<
   }
 
   const load = () => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!loadPromise) {
       loadPromise = importer().catch((error) => {
         if (isModuleNotFoundError(error)) {