@tanstack/react-router 1.29.2 → 1.31.0

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 {
@@ -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>,
 > {
@@ -292,7 +316,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 +342,7 @@ export class Router<
   constructor(
     options: RouterConstructorOptions<
       TRouteTree,
+      TTrailingSlashOption,
       TDehydrated,
       TSerializedError
     >,
@@ -343,6 +373,7 @@ export class Router<
   update = (
     newOptions: RouterConstructorOptions<
       TRouteTree,
+      TTrailingSlashOption,
       TDehydrated,
       TSerializedError
     >,
@@ -925,9 +956,14 @@ export class Router<
           })
       }
 
-      // encodeURI all params so the generated href is valid and stable
+      // encode all path params so the generated href is valid and stable
       Object.keys(nextParams).forEach((key) => {
-        nextParams[key] = encodeURI(nextParams[key])
+        if (['*', '_splat'].includes(key)) {
+          // the splat/catch-all routes shouldn't have the '/' encoded out
+          nextParams[key] = encodeURI(nextParams[key])
+        } else {
+          nextParams[key] = encodeURIComponent(nextParams[key])
+        }
       })
 
       pathname = interpolatePath({
@@ -1843,7 +1879,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)
 
@@ -1916,7 +1958,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)