@tanstack/react-router 1.40.0 → 1.42.0

package/src/index.tsx

@@ -1,4 +1,3 @@
-//
 export {
   createHistory,
   createBrowserHistory,
@@ -12,13 +11,9 @@ export {
 } from '@tanstack/history'
 export { default as invariant } from 'tiny-invariant'
 export { default as warning } from 'tiny-warning'
-export { useAwaited, Await, type AwaitOptions, ScriptOnce } from './awaited'
-export {
-  defer,
-  isDehydratedDeferred,
-  type DeferredPromiseState,
-  type DeferredPromise,
-} from './defer'
+export { useAwaited, Await, type AwaitOptions } from './awaited'
+export { ScriptOnce } from './ScriptOnce'
+export { defer, type DeferredPromiseState, type DeferredPromise } from './defer'
 export { CatchBoundary, ErrorComponent } from './CatchBoundary'
 export {
   FileRoute,
@@ -68,23 +63,21 @@ export {
 } from './link'
 export { type ParsedLocation } from './location'
 export {
-  matchContext,
   Matches,
-  Match,
-  Outlet,
   useMatchRoute,
   MatchRoute,
   useMatches,
   useParentMatches,
   useChildMatches,
-  isServerSideError,
-  defaultDeserializeError,
   type RouteMatch,
   type AnyRouteMatch,
   type MatchRouteOptions,
   type UseMatchRouteOptions,
   type MakeMatchRouteOptions,
 } from './Matches'
+export { matchContext } from './matchContext'
+export { Match, Outlet } from './Match'
+export { isServerSideError, defaultDeserializeError } from './isServerSideError'
 export { useMatch } from './useMatch'
 export { useLoaderDeps } from './useLoaderDeps'
 export { useLoaderData } from './useLoaderData'
@@ -132,16 +125,13 @@ export {
   type StaticDataRouteOption,
   type RoutePathOptionsIntersection,
   type RouteOptions,
-  type ParamsFallback,
   type FileBaseRouteOptions,
   type BaseRouteOptions,
   type UpdatableRouteOptions,
   type UpdatableStaticRouteOption,
   type MetaDescriptor,
   type RouteLinkEntry,
-  type ParseParamsOption,
   type ParseParamsFn,
-  type ParseParamsObj,
   type SearchSchemaValidator,
   type SearchSchemaValidatorObj,
   type SearchSchemaValidatorFn,
@@ -268,3 +258,4 @@ export {
   type NotFoundError,
 } from './not-found'
 export { type Manifest, type RouterManagedTag } from './manifest'
+export { createControlledPromise, type ControlledPromise } from './utils'

package/src/isServerSideError.tsx

@@ -0,0 +1,23 @@
+export function isServerSideError(error: unknown): error is {
+  __isServerError: true
+  data: Record<string, any>
+} {
+  if (!(typeof error === 'object' && error && 'data' in error)) return false
+  if (!('__isServerError' in error && error.__isServerError)) return false
+  if (!(typeof error.data === 'object' && error.data)) return false
+
+  return error.__isServerError === true
+}
+
+export function defaultDeserializeError(serializedData: Record<string, any>) {
+  if ('name' in serializedData && 'message' in serializedData) {
+    const error = new Error(serializedData.message)
+    error.name = serializedData.name
+    if (process.env.NODE_ENV === 'development') {
+      error.stack = serializedData.stack
+    }
+    return error
+  }
+
+  return serializedData.data
+}

package/src/link.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { flushSync } from 'react-dom'
 import { useMatch } from './useMatch'

package/src/matchContext.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react'
+
+export const matchContext = React.createContext<string | undefined>(undefined)

package/src/not-found.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+// eslint-disable-next-line ts/consistent-type-imports
 import * as React from 'react'
 import { CatchBoundary } from './CatchBoundary'
 import { useRouterState } from './useRouterState'

package/src/qss.ts

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
 
 /**
@@ -13,7 +11,7 @@
  * // Expected output: "token=foo&key=value"
  * ```
  */
-export function encode(obj, pfx?: string) {
+export function encode(obj: any, pfx?: string) {
   let k,
     i,
     tmp,
@@ -44,7 +42,7 @@ export function encode(obj, pfx?: string) {
  * // Example input: toValue("123")
  * // Expected output: 123
  */
-function toValue(mix) {
+function toValue(mix: any) {
   if (!mix) return ''
   const str = decodeURIComponent(mix)
   if (str === 'false') return false
@@ -61,9 +59,9 @@ function toValue(mix) {
  * // Example input: decode("token=foo&key=value")
  * // Expected output: { "token": "foo", "key": "value" }
  */
-export function decode(str, pfx?: string) {
+export function decode(str: any, pfx?: string) {
   let tmp, k
-  const out = {},
+  const out: any = {},
     arr = (pfx ? str.substr(pfx.length) : str).split('&')
 
   while ((tmp = arr.shift())) {
@@ -72,6 +70,7 @@ export function decode(str, pfx?: string) {
       k = tmp.slice(0, equalIndex)
       const value = tmp.slice(equalIndex + 1)
       if (out[k] !== void 0) {
+        // @ts-expect-error
         out[k] = [].concat(out[k], toValue(value))
       } else {
         out[k] = toValue(value)

package/src/redirects.ts

@@ -1,5 +1,4 @@
 import type { NavigateOptions } from './link'
-import type { AnyRoute } from './route'
 import type { RoutePaths } from './routeInfo'
 import type { AnyRouter, RegisteredRouter } from './router'
 import type { PickAsRequired } from './utils'

package/src/renderRouteNotFound.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import warning from 'tiny-warning'
+import { DefaultGlobalNotFound } from './not-found'
+import { type AnyRouter } from './router'
+import { type AnyRoute } from './route'
+
+export function renderRouteNotFound(
+  router: AnyRouter,
+  route: AnyRoute,
+  data: any,
+) {
+  if (!route.options.notFoundComponent) {
+    if (router.options.defaultNotFoundComponent) {
+      return <router.options.defaultNotFoundComponent data={data} />
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      warning(
+        route.options.notFoundComponent,
+        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<div>Not Found<div>)`,
+      )
+    }
+
+    return <DefaultGlobalNotFound />
+  }
+
+  return <route.options.notFoundComponent data={data} />
+}

package/src/route.ts

@@ -91,10 +91,36 @@ export type RouteOptions<
     NoInfer<TLoaderDeps>
   >
 
-export type ParamsFallback<
-  TPath extends string,
-  TParams,
-> = unknown extends TParams ? Record<ParsePathParams<TPath>, string> : TParams
+export type ParseParamsFn<TPath extends string, TParams> = (
+  rawParams: Record<ParsePathParams<TPath>, string>,
+) => TParams extends Record<ParsePathParams<TPath>, any>
+  ? TParams
+  : Record<ParsePathParams<TPath>, any>
+
+export type StringifyParamsFn<TPath extends string, TParams> = (
+  params: TParams,
+) => Record<ParsePathParams<TPath>, string>
+
+export type ParamsOptions<TPath extends string, TParams> = {
+  params?: {
+    parse: ParseParamsFn<TPath, TParams>
+    stringify: StringifyParamsFn<TPath, TParams>
+  }
+
+  /** 
+  @deprecated Use params.parse instead
+  */
+  parseParams?: ParseParamsFn<TPath, TParams>
+
+  /** 
+  @deprecated Use params.stringify instead
+  */
+  stringifyParams?: StringifyParamsFn<TPath, TParams>
+}
+
+export interface FullSearchSchemaOption<TFullSearchSchema> {
+  search: TFullSearchSchema
+}
 
 export type FileBaseRouteOptions<
   TPath extends string = string,
@@ -102,14 +128,16 @@ export type FileBaseRouteOptions<
   TSearchSchema = {},
   TFullSearchSchema = TSearchSchema,
   TParams = {},
-  TAllParams = ParamsFallback<TPath, TParams>,
+  TAllParams = {},
   TRouteContextReturn = RouteContext,
   TParentAllContext = AnyContext,
   TAllContext = AnyContext,
   TLoaderDeps extends Record<string, any> = {},
   TLoaderDataReturn = {},
 > = {
-  validateSearch?: SearchSchemaValidator<TSearchSchemaInput, TSearchSchema>
+  validateSearch?:
+    | ((input: TSearchSchemaInput) => TSearchSchema)
+    | { parse: (input: TSearchSchemaInput) => TSearchSchema }
   shouldReload?:
     | boolean
     | ((
@@ -119,36 +147,14 @@ export type FileBaseRouteOptions<
   // If an error is thrown here, the route's loader will not be called.
   // If thrown during a navigation, the navigation will be cancelled and the error will be passed to the `onError` function.
   // If thrown during a preload event, the error will be logged to the console.
-  beforeLoad?: BeforeLoadFn<
-    TFullSearchSchema,
-    TAllParams,
-    TRouteContextReturn,
-    TParentAllContext
-  >
-  loaderDeps?: (opts: { search: TFullSearchSchema }) => TLoaderDeps
-  loader?: RouteLoaderFn<
-    TAllParams,
-    NoInfer<TLoaderDeps>,
-    NoInfer<TAllContext>,
-    TLoaderDataReturn
-  >
-} & (
-  | {
-      // Both or none
-      parseParams?: (
-        rawParams: IsAny<TPath, any, Record<ParsePathParams<TPath>, string>>,
-      ) => TParams extends Record<ParsePathParams<TPath>, any>
-        ? TParams
-        : 'parseParams must return an object'
-      stringifyParams?: (
-        params: NoInfer<ParamsFallback<TPath, TParams>>,
-      ) => Record<ParsePathParams<TPath>, string>
-    }
-  | {
-      stringifyParams?: never
-      parseParams?: never
-    }
-)
+  beforeLoad?: (
+    ctx: BeforeLoadContext<TFullSearchSchema, TAllParams, TParentAllContext>,
+  ) => Promise<TRouteContextReturn> | TRouteContextReturn | void
+  loaderDeps?: (opts: FullSearchSchemaOption<TFullSearchSchema>) => TLoaderDeps
+  loader?: (
+    ctx: LoaderFnContext<TAllParams, TLoaderDeps, TAllContext>,
+  ) => TLoaderDataReturn | Promise<TLoaderDataReturn>
+} & ParamsOptions<TPath, TParams>
 
 export type BaseRouteOptions<
   TParentRoute extends AnyRoute = AnyRoute,
@@ -158,7 +164,7 @@ export type BaseRouteOptions<
   TSearchSchema = {},
   TFullSearchSchema = TSearchSchema,
   TParams = {},
-  TAllParams = ParamsFallback<TPath, TParams>,
+  TAllParams = {},
   TRouteContextReturn = RouteContext,
   TParentAllContext = AnyContext,
   TAllContext = AnyContext,
@@ -181,16 +187,14 @@ export type BaseRouteOptions<
     getParentRoute: () => TParentRoute
   }
 
-type BeforeLoadFn<
-  in out TFullSearchSchema,
-  in out TAllParams,
-  TRouteContextReturn,
-  in out TParentAllContext,
-> = (opts: {
-  search: TFullSearchSchema
+export interface BeforeLoadContext<
+  TFullSearchSchema,
+  TAllParams,
+  TParentAllContext,
+> extends FullSearchSchemaOption<TFullSearchSchema> {
   abortController: AbortController
   preload: boolean
-  params: TAllParams
+  params: Expand<TAllParams>
   context: TParentAllContext
   location: ParsedLocation
   /**
@@ -199,7 +203,7 @@ type BeforeLoadFn<
   navigate: NavigateFn
   buildLocation: BuildLocationFn
   cause: 'preload' | 'enter' | 'stay'
-}) => Promise<TRouteContextReturn> | TRouteContextReturn | void
+}
 
 export type UpdatableRouteOptions<
   TRouteId,
@@ -286,21 +290,6 @@ type LdJsonValue = LdJsonPrimitive | LdJsonObject | LdJsonArray
 
 export type RouteLinkEntry = {}
 
-export type ParseParamsOption<TPath extends string, TParams> = ParseParamsFn<
-  TPath,
-  TParams
->
-
-export type ParseParamsFn<TPath extends string, TParams> = (
-  rawParams: IsAny<TPath, any, Record<ParsePathParams<TPath>, string>>,
-) => TParams extends Record<ParsePathParams<TPath>, any>
-  ? TParams
-  : 'parseParams must return an object'
-
-export type ParseParamsObj<TPath extends string, TParams> = {
-  parse?: ParseParamsFn<TPath, TParams>
-}
-
 // The parse type here allows a zod schema to be passed directly to the validator
 export type SearchSchemaValidator<TInput, TReturn> =
   | SearchSchemaValidatorObj<TInput, TReturn>
@@ -321,7 +310,7 @@ export type RouteLoaderFn<
   TLoaderData = undefined,
 > = (
   match: LoaderFnContext<TAllParams, TLoaderDeps, TAllContext>,
-) => Promise<TLoaderData> | TLoaderData
+) => TLoaderData | Promise<TLoaderData>
 
 export interface LoaderFnContext<
   in out TAllParams = {},
@@ -330,7 +319,7 @@ export interface LoaderFnContext<
 > {
   abortController: AbortController
   preload: boolean
-  params: TAllParams
+  params: Expand<TAllParams>
   deps: TLoaderDeps
   context: TAllContext
   location: ParsedLocation // Do not supply search schema here so as to demotivate people from trying to shortcut loaderDeps
@@ -706,7 +695,7 @@ export class Route<
 
     const isRoot = !options?.path && !options?.id
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    // eslint-disable-next-line ts/no-unnecessary-condition
     this.parentRoute = this.options?.getParentRoute?.()
 
     if (isRoot) {
@@ -992,6 +981,7 @@ export type RootRouteOptions<
   | 'caseSensitive'
   | 'parseParams'
   | 'stringifyParams'
+  | 'params'
 >
 
 export function createRootRouteWithContext<TRouterContext extends {}>() {
@@ -1126,6 +1116,7 @@ export function createRootRoute<
     | 'caseSensitive'
     | 'parseParams'
     | 'stringifyParams'
+    | 'params'
   >,
 ) {
   return new RootRoute<
@@ -1294,7 +1285,12 @@ export class NotFoundRoute<
         TLoaderDataReturn,
         TLoaderData
       >,
-      'caseSensitive' | 'parseParams' | 'stringifyParams' | 'path' | 'id'
+      | 'caseSensitive'
+      | 'parseParams'
+      | 'stringifyParams'
+      | 'path'
+      | 'id'
+      | 'params'
     >,
   ) {
     super({

package/src/router.ts

@@ -1,7 +1,6 @@
 import { createBrowserHistory, createMemoryHistory } from '@tanstack/history'
 import { Store } from '@tanstack/react-store'
 import invariant from 'tiny-invariant'
-import warning from 'tiny-warning'
 import { rootRouteId } from './root'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
@@ -44,6 +43,7 @@ import type {
   LoaderFnContext,
   NotFoundRouteComponent,
   RootRoute,
+  RouteComponent,
   RouteMask,
 } from './route'
 import type {
@@ -57,22 +57,18 @@ import type {
   ControlledPromise,
   NonNullableUpdater,
   PickAsRequired,
-  Timeout,
   Updater,
 } from './utils'
-import type { RouteComponent } from './route'
 import type {
   AnyRouteMatch,
   MakeRouteMatch,
   MatchRouteOptions,
-  RouteMatch,
 } from './Matches'
 import type { ParsedLocation } from './location'
 import type { SearchParser, SearchSerializer } from './searchParams'
 import type {
   BuildLocationFn,
   CommitLocationOptions,
-  InjectedHtmlEntry,
   NavigateFn,
 } from './RouterProvider'
 
@@ -82,13 +78,16 @@ import type { NotFoundError } from './not-found'
 import type { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
 import type { NoInfer } from '@tanstack/react-store'
 import type { DeferredPromiseState } from './defer'
-import type { ErrorInfo } from 'react'
 
 //
 
 declare global {
   interface Window {
-    __TSR_DEHYDRATED__?: { data: string }
+    __TSR__?: {
+      matches: Array<any>
+      cleanScripts: () => void
+      dehydrated?: any
+    }
     __TSR_ROUTER_CONTEXT__?: React.Context<Router<any, any>>
   }
 }
@@ -237,7 +236,7 @@ export interface RouterOptions<
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaultoncatch-property)
    * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#handling-errors-with-routeoptionsoncatch)
    */
-  defaultOnCatch?: (error: Error, errorInfo: ErrorInfo) => void
+  defaultOnCatch?: (error: Error, errorInfo: React.ErrorInfo) => void
   defaultViewTransition?: boolean
   /**
    * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/not-found-errors#the-notfoundmode-option)
@@ -508,6 +507,20 @@ export class Router<
   dehydratedData?: TDehydrated
   viewTransitionPromise?: ControlledPromise<true>
   manifest?: Manifest
+  AfterEachMatch?: (props: {
+    match: Pick<
+      AnyRouteMatch,
+      'id' | 'status' | 'error' | 'loadPromise' | 'minPendingPromise'
+    >
+    matchIndex: number
+  }) => any
+  serializeLoaderData?: (
+    data: any,
+    ctx: {
+      router: AnyRouter
+      match: AnyRouteMatch
+    },
+  ) => any
 
   // Must build in constructor
   __store!: Store<RouterState<TRouteTree>>
@@ -603,7 +616,7 @@ export class Router<
     }
 
     if (
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      // eslint-disable-next-line ts/no-unnecessary-condition
       !this.history ||
       (this.options.history && this.options.history !== this.history)
     ) {
@@ -622,7 +635,7 @@ export class Router<
       this.buildRouteTree()
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    // eslint-disable-next-line ts/no-unnecessary-condition
     if (!this.__store) {
       this.__store = new Store(getInitialRouterState(this.latestLocation), {
         onUpdate: () => {
@@ -921,9 +934,12 @@ export class Router<
     const parseErrors = matchedRoutes.map((route) => {
       let parsedParamsError
 
-      if (route.options.parseParams) {
+      const parseParams =
+        route.options.params?.parse ?? route.options.parseParams
+
+      if (parseParams) {
         try {
-          const parsedParams = route.options.parseParams(routeParams)
+          const parsedParams = parseParams(routeParams)
           // Add the parsed params to the accumulated params bag
           Object.assign(routeParams, parsedParams)
         } catch (err: any) {
@@ -1042,6 +1058,7 @@ export class Router<
 
         match = {
           id: matchId,
+          index,
           routeId: route.id,
           params: routeParams,
           pathname: joinPaths([this.basepath, interpolatedPath]),
@@ -1179,7 +1196,12 @@ export class Router<
 
       if (Object.keys(nextParams).length > 0) {
         matches
-          ?.map((d) => this.looseRoutesById[d.routeId]!.options.stringifyParams)
+          ?.map((d) => {
+            const route = this.looseRoutesById[d.routeId]
+            return (
+              route?.options.params?.stringify ?? route!.options.stringifyParams
+            )
+          })
           .filter(Boolean)
           .forEach((fn) => {
             nextParams = { ...nextParams!, ...fn!(nextParams) }
@@ -1958,7 +1980,13 @@ export class Router<
                       )
                     }
 
-                    const loaderData = await loaderPromise
+                    let loaderData = await loaderPromise
+                    if (this.serializeLoaderData) {
+                      loaderData = this.serializeLoaderData(loaderData, {
+                        router: this,
+                        match,
+                      })
+                    }
                     checkLatest()
 
                     handleRedirectAndNotFound(match, loaderData)
@@ -2288,38 +2316,29 @@ export class Router<
     return match
   }
 
-  // We use a token -> weak map to keep track of deferred promises
-  // that are registered on the server and need to be resolved
-  registeredDeferredsIds = new Map<string, {}>()
-  registeredDeferreds = new WeakMap<{}, DeferredPromiseState<any>>()
-
-  getDeferred = (uid: string) => {
-    const token = this.registeredDeferredsIds.get(uid)
-
-    if (!token) {
-      return undefined
-    }
-
-    return this.registeredDeferreds.get(token)
-  }
-
   dehydrate = (): DehydratedRouter => {
     const pickError =
       this.options.errorSerializer?.serialize ?? defaultSerializeError
 
     return {
       state: {
-        dehydratedMatches: this.state.matches.map((d) => ({
-          ...pick(d, ['id', 'status', 'updatedAt', 'loaderData']),
-          // If an error occurs server-side during SSRing,
-          // send a small subset of the error to the client
-          error: d.error
-            ? {
-                data: pickError(d.error),
-                __isServerError: true,
-              }
-            : undefined,
-        })),
+        dehydratedMatches: this.state.matches.map((d) => {
+          return {
+            ...pick(d, ['id', 'status', 'updatedAt']),
+            // If an error occurs server-side during SSRing,
+            // send a small subset of the error to the client
+            error: d.error
+              ? {
+                  data: pickError(d.error),
+                  __isServerError: true,
+                }
+              : undefined,
+            // NOTE: We don't send the loader data here, because
+            // there is a potential that it needs to be streamed.
+            // Instead, we render it next to the route match in the HTML
+            // which gives us the potential to stream it via suspense.
+          }
+        }),
       },
       manifest: this.manifest,
     }
@@ -2329,12 +2348,12 @@ export class Router<
     let _ctx = __do_not_use_server_ctx
     // Client hydrates from window
     if (typeof document !== 'undefined') {
-      _ctx = window.__TSR_DEHYDRATED__?.data
+      _ctx = window.__TSR__?.dehydrated
     }
 
     invariant(
       _ctx,
-      'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Please file an issue!',
+      'Expected to find a dehydrated data on window.__TSR__.dehydrated... but we did not. Please file an issue!',
     )
 
     const ctx = this.options.transformer.parse(_ctx) as HydrationCtx

package/src/useMatch.tsx

@@ -3,7 +3,7 @@ import invariant from 'tiny-invariant'
 import { useRouterState } from './useRouterState'
 import { type RegisteredRouter } from './router'
 import { type AnyRoute } from './route'
-import { matchContext } from './Matches'
+import { matchContext } from './matchContext'
 import type { MakeRouteMatch } from './Matches'
 import type { RouteIds } from './routeInfo'
 import type { StrictOrFrom } from './utils'