@tanstack/react-router 1.40.0 → 1.41.0

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

@@ -706,7 +706,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) {

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: () => {
@@ -1042,6 +1055,7 @@ export class Router<
 
         match = {
           id: matchId,
+          index,
           routeId: route.id,
           params: routeParams,
           pathname: joinPaths([this.basepath, interpolatedPath]),
@@ -1958,7 +1972,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 +2308,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 +2340,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'

package/src/utils.ts

@@ -40,7 +40,7 @@ export type MakeDifferenceOptional<TLeft, TRight> = Omit<
 }
 
 // from https://stackoverflow.com/a/53955431
-// eslint-disable-next-line @typescript-eslint/naming-convention
+// eslint-disable-next-line ts/naming-convention
 export type IsUnion<T, U extends T = T> = (
   T extends any ? (U extends T ? false : true) : never
 ) extends false
@@ -152,7 +152,7 @@ export function replaceEqualDeep<T>(prev: any, _next: T): T {
     let equalItems = 0
 
     for (let i = 0; i < nextSize; i++) {
-      const key = array ? i : nextItems[i]
+      const key = array ? i : (nextItems[i] as any)
       if (
         ((!array && prevItems.includes(key)) || array) &&
         prev[key] === undefined &&
@@ -205,7 +205,7 @@ function hasObjectPrototype(o: any) {
   return Object.prototype.toString.call(o) === '[object Object]'
 }
 
-export function isPlainArray(value: unknown) {
+export function isPlainArray(value: unknown): value is Array<unknown> {
   return Array.isArray(value) && value.length === Object.keys(value).length
 }
 
@@ -315,23 +315,25 @@ export type ControlledPromise<T> = Promise<T> & {
   resolve: (value: T) => void
   reject: (value: any) => void
   status: 'pending' | 'resolved' | 'rejected'
+  value?: T
 }
 
-export function createControlledPromise<T>(onResolve?: () => void) {
-  let resolveLoadPromise!: () => void
+export function createControlledPromise<T>(onResolve?: (value: T) => void) {
+  let resolveLoadPromise!: (value: T) => void
   let rejectLoadPromise!: (value: any) => void
 
-  const controlledPromise = new Promise<void>((resolve, reject) => {
+  const controlledPromise = new Promise<T>((resolve, reject) => {
     resolveLoadPromise = resolve
     rejectLoadPromise = reject
   }) as ControlledPromise<T>
 
   controlledPromise.status = 'pending'
 
-  controlledPromise.resolve = () => {
+  controlledPromise.resolve = (value: T) => {
     controlledPromise.status = 'resolved'
-    resolveLoadPromise()
-    onResolve?.()
+    controlledPromise.value = value
+    resolveLoadPromise(value)
+    onResolve?.(value)
   }
 
   controlledPromise.reject = (e) => {