@tanstack/react-router 1.30.1 → 1.31.1

package/src/routeInfo.ts

@@ -1,4 +1,5 @@
 import type { AnyRoute } from './route'
+import type { AnyRouter, Router, TrailingSlashOption } from './router'
 import type { UnionToIntersection, UnionToTuple } from './utils'
 
 export type ParseRoute<TRouteTree, TAcc = TRouteTree> = TRouteTree extends {
@@ -9,12 +10,14 @@ export type ParseRoute<TRouteTree, TAcc = TRouteTree> = TRouteTree extends {
     : TAcc
   : TAcc
 
-export type RouteLeaves<TRouteTree> =
+export type ParseRouteWithoutBranches<TRouteTree> =
   ParseRoute<TRouteTree> extends infer TRoute extends AnyRoute
     ? TRoute extends any
       ? TRoute['types']['children'] extends ReadonlyArray<any>
-        ? never
-        : TRoute['fullPath']
+        ? '/' extends TRoute['types']['children'][number]['path']
+          ? never
+          : TRoute
+        : TRoute
       : never
     : never
 
@@ -29,9 +32,14 @@ export type RouteById<TRouteTree extends AnyRoute, TId> = Extract<
 
 export type RouteIds<TRouteTree extends AnyRoute> = ParseRoute<TRouteTree>['id']
 
+export type CatchAllPaths<TRouteTree extends AnyRoute> = Record<
+  '.' | '..' | '',
+  ParseRoute<TRouteTree>
+>
+
 export type RoutesByPath<TRouteTree extends AnyRoute> = {
   [K in ParseRoute<TRouteTree> as K['fullPath']]: K
-} & Record<'.' | '..', ParseRoute<TRouteTree>>
+} & CatchAllPaths<TRouteTree>
 
 export type RouteByPath<TRouteTree extends AnyRoute, TPath> = Extract<
   string extends TPath
@@ -44,6 +52,66 @@ export type RoutePaths<TRouteTree extends AnyRoute> =
   | ParseRoute<TRouteTree>['fullPath']
   | '/'
 
+export type RouteToPathAlwaysTrailingSlash<TRoute extends AnyRoute> =
+  TRoute['path'] extends '/'
+    ? TRoute['fullPath']
+    : TRoute['fullPath'] extends '/'
+      ? TRoute['fullPath']
+      : `${TRoute['fullPath']}/`
+
+export type RouteToPathNeverTrailingSlash<TRoute extends AnyRoute> =
+  TRoute['path'] extends '/'
+    ? TRoute['fullPath'] extends '/'
+      ? TRoute['fullPath']
+      : TRoute['fullPath'] extends `${infer TRest}/`
+        ? TRest
+        : TRoute['fullPath']
+    : TRoute['fullPath']
+
+export type RouteToPathPreserveTrailingSlash<TRoute extends AnyRoute> =
+  | RouteToPathNeverTrailingSlash<TRoute>
+  | RouteToPathAlwaysTrailingSlash<TRoute>
+
+export type RouteToPathByTrailingSlashOption<TRoute extends AnyRoute> = {
+  always: RouteToPathAlwaysTrailingSlash<TRoute>
+  preserve: RouteToPathPreserveTrailingSlash<TRoute>
+  never: RouteToPathNeverTrailingSlash<TRoute>
+}
+
+export type TrailingSlashOptionByRouter<TRouter extends AnyRouter> =
+  TrailingSlashOption extends TRouter['options']['trailingSlash']
+    ? 'never'
+    : NonNullable<TRouter['options']['trailingSlash']>
+
+export type RouteToByRouter<
+  TRouter extends AnyRouter,
+  TRoute extends AnyRoute,
+> = RouteToPathByTrailingSlashOption<TRoute>[TrailingSlashOptionByRouter<TRouter>]
+
+export type RouteToPath<
+  TRouter extends AnyRouter,
+  TRouteTree extends AnyRoute,
+> =
+  ParseRouteWithoutBranches<TRouteTree> extends infer TRoute extends AnyRoute
+    ? TRoute extends any
+      ? RouteToByRouter<TRouter, TRoute>
+      : never
+    : never
+
+export type RoutesByToPath<TRouter extends AnyRouter> = {
+  [TRoute in ParseRouteWithoutBranches<TRouter['routeTree']> as RouteToByRouter<
+    TRouter,
+    TRoute
+  >]: TRoute
+} & CatchAllPaths<TRouter['routeTree']>
+
+export type RouteByToPath<TRouter extends AnyRouter, TTo> = Extract<
+  string extends TTo
+    ? ParseRouteWithoutBranches<TRouter['routeTree']>
+    : RoutesByToPath<TRouter>[TTo],
+  AnyRoute
+>
+
 export type RoutePathsAutoComplete<TRouteTree extends AnyRoute, T> =
   | (string extends T ? T & {} : T)
   | RoutePaths<TRouteTree>

package/src/router.ts

@@ -87,7 +87,7 @@ import type { DeferredPromiseState } from './defer'
 declare global {
   interface Window {
     __TSR_DEHYDRATED__?: { data: string }
-    __TSR_ROUTER_CONTEXT__?: React.Context<Router<any>>
+    __TSR_ROUTER_CONTEXT__?: React.Context<Router<any, any>>
   }
 }
 
@@ -95,7 +95,7 @@ export interface Register {
   // router: Router
 }
 
-export type AnyRouter = Router<AnyRoute, any, any>
+export type AnyRouter = Router<any, any, any, any>
 
 export type RegisteredRouter = Register extends {
   router: infer TRouter extends AnyRouter
@@ -117,8 +117,11 @@ export type RouterContextOptions<TRouteTree extends AnyRoute> =
         context: TRouteTree['types']['routerContext']
       }
 
+export type TrailingSlashOption = 'always' | 'never' | 'preserve'
+
 export interface RouterOptions<
   TRouteTree extends AnyRoute,
+  TTrailingSlashOption extends TrailingSlashOption,
   TDehydrated extends Record<string, any> = Record<string, any>,
   TSerializedError extends Record<string, any> = Record<string, any>,
 > {
@@ -157,7 +160,7 @@ export interface RouterOptions<
   defaultNotFoundComponent?: NotFoundRouteComponent
   transformer?: RouterTransformer
   errorSerializer?: RouterErrorSerializer<TSerializedError>
-  trailingSlash?: 'always' | 'never' | 'preserve'
+  trailingSlash?: TTrailingSlashOption
 }
 
 export interface RouterTransformer {
@@ -202,7 +205,7 @@ export interface BuildNextOptions {
     unmaskOnReload?: boolean
   }
   from?: string
-  _fromLocation?: ParsedLocation
+  fromSearch?: unknown
 }
 
 export interface DehydratedRouterState {
@@ -220,9 +223,18 @@ export interface DehydratedRouter {
 
 export type RouterConstructorOptions<
   TRouteTree extends AnyRoute,
+  TTrailingSlashOption extends TrailingSlashOption,
   TDehydrated extends Record<string, any>,
   TSerializedError extends Record<string, any>,
-> = Omit<RouterOptions<TRouteTree, TDehydrated, TSerializedError>, 'context'> &
+> = Omit<
+  RouterOptions<
+    TRouteTree,
+    TTrailingSlashOption,
+    TDehydrated,
+    TSerializedError
+  >,
+  'context'
+> &
   RouterContextOptions<TRouteTree>
 
 export const componentTypes = [
@@ -261,17 +273,29 @@ export type RouterListener<TRouterEvent extends RouterEvent> = {
 }
 
 export function createRouter<
-  TRouteTree extends AnyRoute = AnyRoute,
+  TRouteTree extends AnyRoute,
+  TTrailingSlashOption extends TrailingSlashOption,
   TDehydrated extends Record<string, any> = Record<string, any>,
   TSerializedError extends Record<string, any> = Record<string, any>,
 >(
-  options: RouterConstructorOptions<TRouteTree, TDehydrated, TSerializedError>,
+  options: RouterConstructorOptions<
+    TRouteTree,
+    TTrailingSlashOption,
+    TDehydrated,
+    TSerializedError
+  >,
 ) {
-  return new Router<TRouteTree, TDehydrated, TSerializedError>(options)
+  return new Router<
+    TRouteTree,
+    TTrailingSlashOption,
+    TDehydrated,
+    TSerializedError
+  >(options)
 }
 
 export class Router<
-  in out TRouteTree extends AnyRoute = AnyRoute,
+  in out TRouteTree extends AnyRoute,
+  in out TTrailingSlashOption extends TrailingSlashOption,
   in out TDehydrated extends Record<string, any> = Record<string, any>,
   in out TSerializedError extends Record<string, any> = Record<string, any>,
 > {
@@ -281,7 +305,6 @@ export class Router<
   )}`
   resetNextScroll = true
   shouldViewTransition?: true = undefined
-  navigateTimeout: Timeout | null = null
   latestLoadPromise: Promise<void> = Promise.resolve()
   subscribers = new Set<RouterListener<RouterEvent>>()
   injectedHtml: Array<InjectedHtmlEntry> = []
@@ -292,7 +315,12 @@ export class Router<
   __store!: Store<RouterState<TRouteTree>>
   options!: PickAsRequired<
     Omit<
-      RouterOptions<TRouteTree, TDehydrated, TSerializedError>,
+      RouterOptions<
+        TRouteTree,
+        TTrailingSlashOption,
+        TDehydrated,
+        TSerializedError
+      >,
       'transformer'
     > & {
       transformer: RouterTransformer
@@ -313,6 +341,7 @@ export class Router<
   constructor(
     options: RouterConstructorOptions<
       TRouteTree,
+      TTrailingSlashOption,
       TDehydrated,
       TSerializedError
     >,
@@ -343,6 +372,7 @@ export class Router<
   update = (
     newOptions: RouterConstructorOptions<
       TRouteTree,
+      TTrailingSlashOption,
       TDehydrated,
       TSerializedError
     >,
@@ -889,25 +919,25 @@ export class Router<
       } = {},
       matches?: Array<MakeRouteMatch<TRouteTree>>,
     ): ParsedLocation => {
-      const fromPath = dest.from || this.latestLocation.pathname
-      let fromSearch = dest._fromLocation?.search || this.latestLocation.search
+      let fromPath = this.latestLocation.pathname
+      let fromSearch = dest.fromSearch || this.latestLocation.search
 
-      const fromMatches = this.matchRoutes(fromPath, fromSearch)
+      const fromMatches = this.matchRoutes(
+        this.latestLocation.pathname,
+        fromSearch,
+      )
 
+      fromPath =
+        fromMatches.find((d) => d.id === dest.from)?.pathname || fromPath
       fromSearch = last(fromMatches)?.search || this.latestLocation.search
 
       const stayingMatches = matches?.filter((d) =>
         fromMatches.find((e) => e.routeId === d.routeId),
       )
 
-      const fromRoute = this.looseRoutesById[last(fromMatches)?.routeId]
-
       let pathname = dest.to
-        ? this.resolvePathWithBase(
-            dest.from ?? this.latestLocation.pathname,
-            `${dest.to}`,
-          )
-        : this.resolvePathWithBase(fromRoute?.fullPath, fromRoute?.fullPath)
+        ? this.resolvePathWithBase(fromPath, `${dest.to}`)
+        : this.resolvePathWithBase(fromPath, fromPath)
 
       const prevParams = { ...last(fromMatches)?.params }
 
@@ -1082,8 +1112,6 @@ export class Router<
     viewTransition,
     ...next
   }: ParsedLocation & CommitLocationOptions) => {
-    if (this.navigateTimeout) clearTimeout(this.navigateTimeout)
-
     const isSameUrl = this.latestLocation.href === next.href
 
     // If the next urls are the same and we're not replacing,
@@ -1244,15 +1272,10 @@ export class Router<
                 }
 
                 if (isRedirect(err)) {
-                  const redirect = this.resolveRedirect(err)
-
-                  if (!preload && !this.isServer) {
-                    this.navigate({ ...(redirect as any), replace: true })
-                  }
-
-                  throw redirect
+                  err = this.resolveRedirect(err)
+                  throw err
                 } else if (isNotFound(err)) {
-                  if (!preload) this.handleNotFound(matches, err)
+                  this.handleNotFound(matches, err)
                   throw err
                 }
               }
@@ -1264,6 +1287,25 @@ export class Router<
               const parentMatch = matches[index - 1]
               const route = this.looseRoutesById[match.routeId]!
               const abortController = new AbortController()
+              let loadPromise = match.loadPromise
+
+              if (match.isFetching) {
+                continue
+              }
+
+              const previousResolve = loadPromise.resolve
+              // Create a new one
+              loadPromise = createControlledPromise<void>(
+                // Resolve the old when we we resolve the new one
+                previousResolve,
+              )
+
+              // Otherwise, load the route
+              matches[index] = match = updateMatch(match.id, (prev) => ({
+                ...prev,
+                isFetching: 'beforeLoad',
+                loadPromise,
+              }))
 
               const handleSerialError = (err: any, routerCode: string) => {
                 err.routerCode = routerCode
@@ -1344,6 +1386,8 @@ export class Router<
                     cause: preload ? 'preload' : match.cause,
                   })) ?? ({} as any)
 
+                if ((latestPromise = checkLatest())) return latestPromise
+
                 if (
                   isRedirect(beforeLoadContext) ||
                   isNotFound(beforeLoadContext)
@@ -1373,6 +1417,8 @@ export class Router<
               }
             }
 
+            if ((latestPromise = checkLatest())) return latestPromise
+
             const validResolvedMatches = matches.slice(0, firstBadMatchIndex)
             const matchPromises: Array<Promise<any>> = []
 
@@ -1400,7 +1446,6 @@ export class Router<
                   let lazyPromise = Promise.resolve()
                   let componentsPromise = Promise.resolve() as Promise<any>
                   let loaderPromise = existing.loaderPromise
-                  let loadPromise = existing.loadPromise
 
                   // If the Matches component rendered
                   // the pending component and needs to show it for
@@ -1424,7 +1469,7 @@ export class Router<
                   }
 
                   try {
-                    if (!match.isFetching) {
+                    if (match.isFetching === 'beforeLoad') {
                       // If the user doesn't want the route to reload, just
                       // resolve with the existing loader data
 
@@ -1433,11 +1478,14 @@ export class Router<
                       // }
 
                       // Otherwise, load the route
-                      matches[index] = match = {
-                        ...match,
-                        isFetching: true,
-                        fetchCount: match.fetchCount + 1,
-                      }
+                      matches[index] = match = updateMatch(
+                        match.id,
+                        (prev) => ({
+                          ...prev,
+                          isFetching: 'loader',
+                          fetchCount: match.fetchCount + 1,
+                        }),
+                      )
 
                       lazyPromise =
                         route.lazyFn?.().then((lazyRoute) => {
@@ -1470,20 +1518,15 @@ export class Router<
                       // Kick off the loader!
                       loaderPromise = route.options.loader?.(loaderContext)
 
-                      const previousResolve = loadPromise.resolve
-                      // Create a new one
-                      loadPromise = createControlledPromise<void>(
-                        // Resolve the old when we we resolve the new one
-                        previousResolve,
+                      matches[index] = match = updateMatch(
+                        match.id,
+                        (prev) => ({
+                          ...prev,
+                          loaderPromise,
+                        }),
                       )
                     }
 
-                    matches[index] = match = updateMatch(match.id, (prev) => ({
-                      ...prev,
-                      loaderPromise,
-                      loadPromise,
-                    }))
-
                     const loaderData = await loaderPromise
                     if ((latestPromise = checkLatest()))
                       return await latestPromise
@@ -1549,7 +1592,7 @@ export class Router<
                   if ((latestPromise = checkLatest()))
                     return await latestPromise
 
-                  loadPromise.resolve()
+                  match.loadPromise.resolve()
                 }
 
                 // This is where all of the stale-while-revalidate magic happens
@@ -1694,27 +1737,38 @@ export class Router<
         let redirect: ResolvedRedirect | undefined
         let notFound: NotFoundError | undefined
 
-        try {
-          // Load the matches
-          const loadMatchesPromise = this.loadMatches({
+        const loadMatches = () =>
+          this.loadMatches({
             matches: pendingMatches,
             location: next,
             checkLatest: () => this.checkLatest(promise),
           })
 
-          if (previousMatches.length || this.isServer) {
-            await loadMatchesPromise
-          }
-        } catch (err) {
-          if (isRedirect(err)) {
-            redirect = err as ResolvedRedirect
-          } else if (isNotFound(err)) {
-            notFound = err
+        // If we are on the server or non-first load on the client, await
+        // the loadMatches before transitioning
+        if (previousMatches.length || this.isServer) {
+          try {
+            await loadMatches()
+          } catch (err) {
+            if (isRedirect(err)) {
+              redirect = err as ResolvedRedirect
+            } else if (isNotFound(err)) {
+              notFound = err
+            }
           }
-
-          // Swallow all other errors that happen inside
-          // of loadMatches. These errors will be handled
-          // as state on each match.
+        } else {
+          // For client-only first loads, we need to start the transition
+          // immediately and load the matches in the background
+          loadMatches().catch((err) => {
+            // This also means that we need to handle any redirects
+            // that might happen during the load/transition
+            if (isRedirect(err)) {
+              this.navigate({ ...err, replace: true })
+            }
+            // Because our history listener isn't guaranteed to be mounted
+            // on the first load, we need to manually call load again
+            this.load()
+          })
         }
 
         // Only apply the latest transition
@@ -1848,7 +1902,13 @@ export class Router<
     TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
     TMaskTo extends string = '',
   >(
-    opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+    opts: NavigateOptions<
+      Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>,
+      TFrom,
+      TTo,
+      TMaskFrom,
+      TMaskTo
+    >,
   ): Promise<Array<AnyRouteMatch> | undefined> => {
     const next = this.buildLocation(opts as any)
 
@@ -1905,7 +1965,7 @@ export class Router<
     } catch (err) {
       if (isRedirect(err)) {
         return await this.preloadRoute({
-          _fromDest: next,
+          fromSearch: next.search,
           from: next.pathname,
           ...(err as any),
         })
@@ -1921,7 +1981,11 @@ export class Router<
     TTo extends string = '',
     TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>,
   >(
-    location: ToOptions<TRouteTree, TFrom, TTo>,
+    location: ToOptions<
+      Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>,
+      TFrom,
+      TTo
+    >,
     opts?: MatchRouteOptions,
   ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {
     const matchLocation = {

package/src/routerContext.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { Router } from './router'
 
-const routerContext = React.createContext<Router<any>>(null!)
+const routerContext = React.createContext<Router<any, any>>(null!)
 
 export function getRouterContext() {
   if (typeof document === 'undefined') {

package/src/useNavigate.tsx

@@ -3,20 +3,19 @@ import { useMatch } from './Matches'
 import { useRouter } from './useRouter'
 
 import type { NavigateOptions } from './link'
-import type { AnyRoute } from './route'
 import type { RoutePaths, RoutePathsAutoComplete } from './routeInfo'
-import type { RegisteredRouter } from './router'
+import type { AnyRouter, RegisteredRouter } from './router'
 
 export type UseNavigateResult<TDefaultFrom extends string> = <
   TTo extends string,
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = TDefaultFrom,
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> | string = TDefaultFrom,
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
   TMaskTo extends string = '',
 >({
   from,
   ...rest
-}: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>
+}: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>
 
 export function useNavigate<
   TDefaultFrom extends string = string,
@@ -52,12 +51,12 @@ export function useNavigate<
 // } //
 
 export function Navigate<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
   TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
   TMaskTo extends string = '',
->(props: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>): null {
+>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
   const { navigate } = useRouter()
   const match = useMatch({ strict: false })
 

package/src/useRouter.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react'
 import warning from 'tiny-warning'
 import { getRouterContext } from './routerContext'
-import type { AnyRoute } from './route'
-import type { RegisteredRouter, Router } from './router'
+import type { AnyRouter, RegisteredRouter, Router } from './router'
 
-export function useRouter<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
->(opts?: { warn?: boolean }): Router<TRouteTree> {
+export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
+  warn?: boolean
+}): TRouter {
   const value = React.useContext(getRouterContext())
   warning(
     !((opts?.warn ?? true) && !value),

package/src/useRouterState.tsx

@@ -1,16 +1,15 @@
 import { useStore } from '@tanstack/react-store'
 import { useRouter } from './useRouter'
-import type { AnyRoute } from './route'
-import type { RegisteredRouter, Router, RouterState } from './router'
+import type { AnyRouter, RegisteredRouter, Router, RouterState } from './router'
 
 export function useRouterState<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TSelected = RouterState<TRouteTree>,
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = RouterState<TRouter['routeTree']>,
 >(opts?: {
-  router?: Router<TRouteTree>
+  router?: TRouter
   select: (state: RouterState<RegisteredRouter['routeTree']>) => TSelected
 }): TSelected {
-  const contextRouter = useRouter<TRouteTree>({
+  const contextRouter = useRouter<TRouter>({
     warn: opts?.router === undefined,
   })
   return useStore((opts?.router || contextRouter).__store, opts?.select as any)