@tanstack/react-router 1.12.16 → 1.14.0

package/src/route.ts

@@ -19,6 +19,8 @@ import {
 } from './utils'
 import { BuildLocationFn, NavigateFn } from './RouterProvider'
 import { LazyRoute } from '.'
+import warning from 'tiny-warning'
+import { NotFoundError, notFound } from '.'
 
 export const rootRouteId = '__root__' as const
 export type RootRouteId = typeof rootRouteId
@@ -191,6 +193,7 @@ export type UpdatableRouteOptions<
   // The content to be rendered when the route is matched. If no component is provided, defaults to `<Outlet />`
   component?: RouteComponent
   errorComponent?: false | null | ErrorRouteComponent
+  notFoundComponent?: NotFoundRouteComponent
   pendingComponent?: RouteComponent
   pendingMs?: number
   pendingMinMs?: number
@@ -368,12 +371,11 @@ export type MergeFromFromParent<T, U> = IsAny<T, U, T & U>
 export type ResolveAllParams<
   TParentRoute extends AnyRoute,
   TParams extends AnyPathParams,
-> =
-  Record<never, string> extends TParentRoute['types']['allParams']
-    ? TParams
-    : Expand<
-        UnionToIntersection<TParentRoute['types']['allParams'] & TParams> & {}
-      >
+> = Record<never, string> extends TParentRoute['types']['allParams']
+  ? TParams
+  : Expand<
+      UnionToIntersection<TParentRoute['types']['allParams'] & TParams> & {}
+    >
 
 export type RouteConstraints = {
   TParentRoute: AnyRoute
@@ -573,6 +575,10 @@ export class RouteApi<
   }): TSelected => {
     return useLoaderData({ ...opts, from: this.id } as any)
   }
+
+  notFound = (opts?: NotFoundError) => {
+    return notFound({ route: this.id as string, ...opts })
+  }
 }
 
 /**
@@ -1249,6 +1255,10 @@ export type ErrorComponentProps = {
   error: unknown
   info: { componentStack: string }
 }
+export type NotFoundRouteProps = {
+  // TODO: Make sure this is `| null | undefined` (this is for global not-founds)
+  data: unknown
+}
 //
 
 export type ReactNode = any
@@ -1266,6 +1276,8 @@ export type RouteComponent<TProps = any> = SyncRouteComponent<TProps> &
 
 export type ErrorRouteComponent = RouteComponent<ErrorComponentProps>
 
+export type NotFoundRouteComponent = SyncRouteComponent<NotFoundRouteProps>
+
 export class NotFoundRoute<
   TParentRoute extends AnyRootRoute,
   TSearchSchemaInput extends Record<string, any> = {},

package/src/router.ts

@@ -17,6 +17,7 @@ import {
   RouteMask,
   Route,
   LoaderFnContext,
+  rootRouteId,
 } from './route'
 import {
   FullSearchSchema,
@@ -63,6 +64,7 @@ import {
 } from './path'
 import invariant from 'tiny-invariant'
 import { isRedirect } from './redirects'
+import { NotFoundError, isNotFound } from './not-found'
 import { ResolveRelativePath, ToOptions } from './link'
 import { NoInfer } from '@tanstack/react-store'
 // import warning from 'tiny-warning'
@@ -71,7 +73,7 @@ import { NoInfer } from '@tanstack/react-store'
 
 declare global {
   interface Window {
-    __TSR_DEHYDRATED__?: HydrationCtx
+    __TSR_DEHYDRATED__?: { data: string }
     __TSR_ROUTER_CONTEXT__?: React.Context<Router<any>>
   }
 }
@@ -131,8 +133,20 @@ export interface RouterOptions<
   unmaskOnReload?: boolean
   Wrap?: (props: { children: any }) => JSX.Element
   InnerWrap?: (props: { children: any }) => JSX.Element
+  /**
+   * @deprecated
+   * Use `notFoundComponent` instead.
+   * See https://tanstack.com/router/v1/docs/guide/not-found-errors#migrating-from-notfoundroute for more info.
+   */
   notFoundRoute?: AnyRoute
+  transformer?: RouterTransformer
   errorSerializer?: RouterErrorSerializer<TSerializedError>
+  globalNotFound?: RouteComponent
+}
+
+export interface RouterTransformer {
+  stringify: (obj: unknown) => string
+  parse: (str: string) => unknown
 }
 export interface RouterErrorSerializer<TSerializedError> {
   serialize: (err: unknown) => TSerializedError
@@ -176,7 +190,7 @@ export interface DehydratedRouterState {
 
 export type DehydratedRouteMatch = Pick<
   RouteMatch,
-  'id' | 'status' | 'updatedAt' | 'loaderData'
+  'id' | 'status' | 'updatedAt' | 'notFoundError' | 'loaderData'
 >
 
 export interface DehydratedRouter {
@@ -194,6 +208,7 @@ export const componentTypes = [
   'component',
   'errorComponent',
   'pendingComponent',
+  'notFoundComponent',
 ] as const
 
 export type RouterEvents = {
@@ -256,7 +271,12 @@ export class Router<
   // Must build in constructor
   __store!: Store<RouterState<TRouteTree>>
   options!: PickAsRequired<
-    RouterOptions<TRouteTree, TDehydrated, TSerializedError>,
+    Omit<
+      RouterOptions<TRouteTree, TDehydrated, TSerializedError>,
+      'transformer'
+    > & {
+      transformer: RouterTransformer
+    },
     'stringifySearch' | 'parseSearch' | 'context'
   >
   history!: RouterHistory
@@ -282,6 +302,7 @@ export class Router<
       ...options,
       stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
       parseSearch: options?.parseSearch ?? defaultParseSearch,
+      transformer: options?.transformer ?? JSON,
     })
   }
 
@@ -297,6 +318,12 @@ export class Router<
       TSerializedError
     >,
   ) => {
+    if (newOptions.notFoundRoute) {
+      console.warn(
+        'The notFoundRoute API is deprecated and will be removed in the next major version. See https://tanstack.com/router/v1/docs/guide/not-found-errors#migrating-from-notfoundroute for more info.',
+      )
+    }
+
     const previousOptions = this.options
     this.options = {
       ...this.options,
@@ -581,17 +608,23 @@ export class Router<
 
     let matchedRoutes: AnyRoute[] = [routeCursor]
 
+    let isGlobalNotFound = false
+
     // Check to see if the route needs a 404 entry
     if (
       // If we found a route, and it's not an index route and we have left over path
-      (foundRoute
+      foundRoute
         ? foundRoute.path !== '/' && routeParams['**']
         : // Or if we didn't find a route and we have left over path
-          trimPathRight(pathname)) &&
-      // And we have a 404 route configured
-      this.options.notFoundRoute
+          trimPathRight(pathname)
     ) {
-      matchedRoutes.push(this.options.notFoundRoute)
+      // If the user has defined an (old) 404 route, use it
+      if (this.options.notFoundRoute) {
+        matchedRoutes.push(this.options.notFoundRoute)
+      } else {
+        // If there is no routes found during path matching
+        isGlobalNotFound = true
+      }
     }
 
     while (routeCursor?.parentRoute) {
@@ -710,7 +743,14 @@ export class Router<
       )
 
       const match: AnyRouteMatch = existingMatch
-        ? { ...existingMatch, cause }
+        ? {
+            ...existingMatch,
+            cause,
+            notFoundError:
+              isGlobalNotFound && route.id === rootRouteId
+                ? { global: true }
+                : undefined,
+          }
         : {
             id: matchId,
             routeId: route.id,
@@ -733,6 +773,10 @@ export class Router<
             loaderDeps,
             invalid: false,
             preload: false,
+            notFoundError:
+              isGlobalNotFound && route.id === rootRouteId
+                ? { global: true }
+                : undefined,
             links: route.options.links?.(),
             scripts: route.options.scripts?.(),
             staticData: route.options.staticData || {},
@@ -781,8 +825,8 @@ export class Router<
         this.latestLocation.pathname,
         fromSearch,
       )
-      const stayingMatches = matches?.filter((d) =>
-        fromMatches?.find((e) => e.routeId === d.routeId),
+      const stayingMatches = matches?.filter(
+        (d) => fromMatches?.find((e) => e.routeId === d.routeId),
       )
 
       const prevParams = { ...last(fromMatches)?.params }
@@ -1098,6 +1142,10 @@ export class Router<
             throw err
           }
 
+          if (isNotFound(err)) {
+            this.updateMatchesWithNotFound(matches, match, err)
+          }
+
           try {
             route.options.onError?.(err)
           } catch (errorHandlerErr) {
@@ -1200,6 +1248,11 @@ export class Router<
               }
               return true
             }
+
+            if (isNotFound(err)) {
+              this.updateMatchesWithNotFound(matches, match, err)
+            }
+
             return false
           }
 
@@ -1663,7 +1716,7 @@ export class Router<
           typeof getData === 'function' ? await (getData as any)() : getData
         return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
           strKey,
-        )}"] = ${JSON.stringify(data)}
+        )}"] = ${JSON.stringify(this.options.transformer.stringify(data))}
           ;(() => {
             var el = document.getElementById('${id}')
             el.parentElement.removeChild(el)
@@ -1681,7 +1734,9 @@ export class Router<
     if (typeof document !== 'undefined') {
       const strKey = typeof key === 'string' ? key : JSON.stringify(key)
 
-      return window[`__TSR_DEHYDRATED__${strKey}` as any] as T
+      return this.options.transformer.parse(
+        window[`__TSR_DEHYDRATED__${strKey}` as any] as unknown as string,
+      ) as T
     }
 
     return undefined
@@ -1694,7 +1749,15 @@ export class Router<
     return {
       state: {
         dehydratedMatches: this.state.matches.map((d) => ({
-          ...pick(d, ['id', 'status', 'updatedAt', 'loaderData']),
+          ...pick(d, [
+            'id',
+            'status',
+            'updatedAt',
+            'loaderData',
+            // Not-founds that occur during SSR don't require the client to load data before
+            // triggering in order to prevent the flicker of the loading component
+            'notFoundError',
+          ]),
           // If an error occurs server-side during SSRing,
           // send a small subset of the error to the client
           error: d.error
@@ -1708,11 +1771,11 @@ export class Router<
     }
   }
 
-  hydrate = async (__do_not_use_server_ctx?: HydrationCtx) => {
+  hydrate = async (__do_not_use_server_ctx?: string) => {
     let _ctx = __do_not_use_server_ctx
     // Client hydrates from window
     if (typeof document !== 'undefined') {
-      _ctx = window.__TSR_DEHYDRATED__
+      _ctx = window.__TSR_DEHYDRATED__?.data
     }
 
     invariant(
@@ -1720,7 +1783,7 @@ export class Router<
       'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?',
     )
 
-    const ctx = _ctx
+    const ctx = this.options.transformer.parse(_ctx) as HydrationCtx
     this.dehydratedData = ctx.payload as any
     this.options.hydrate?.(ctx.payload as any)
     const dehydratedState = ctx.router.state
@@ -1763,6 +1826,46 @@ export class Router<
     })
   }
 
+  // Finds a match that has a notFoundComponent
+  updateMatchesWithNotFound = (
+    matches: AnyRouteMatch[],
+    currentMatch: AnyRouteMatch,
+    err: NotFoundError,
+  ) => {
+    const matchesByRouteId = Object.fromEntries(
+      matches.map((match) => [match.routeId, match]),
+    ) as Record<string, AnyRouteMatch>
+
+    if (err.global) {
+      matchesByRouteId[rootRouteId]!.notFoundError = err
+    } else {
+      // If the err contains a routeId, start searching up from that route
+      let currentRoute = (this.routesById as any)[
+        err.route ?? currentMatch.routeId
+      ] as AnyRoute
+
+      // Go up the tree until we find a route with a notFoundComponent
+      while (!currentRoute.options.notFoundComponent) {
+        currentRoute = currentRoute?.parentRoute
+
+        invariant(
+          currentRoute,
+          'Found invalid route tree while trying to find not-found handler.',
+        )
+
+        if (currentRoute.id === rootRouteId) break
+      }
+
+      const match = matchesByRouteId[currentRoute.id]
+      invariant(match, 'Could not find match for route: ' + currentRoute.id)
+      match.notFoundError = err
+    }
+  }
+
+  hasNotFoundMatch = () => {
+    return this.__store.state.matches.some((d) => d.notFoundError)
+  }
+
   // resolveMatchPromise = (matchId: string, key: string, value: any) => {
   //   state.matches
   //     .find((d) => d.id === matchId)