@tanstack/react-router 1.40.0 → 1.42.0

package/src/Matches.tsx

@@ -1,12 +1,8 @@
 import * as React from 'react'
-import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
-import { createControlledPromise, pick } from './utils'
-import { CatchNotFound, DefaultGlobalNotFound, isNotFound } from './not-found'
-import { isRedirect } from './redirects'
 import { type AnyRouter, type RegisteredRouter } from './router'
 import { Transitioner } from './Transitioner'
 import {
@@ -14,7 +10,9 @@ import {
   type ReactNode,
   type StaticDataRouteOption,
 } from './route'
-import { rootRouteId } from './root'
+import { matchContext } from './matchContext'
+import { Match } from './Match'
+import { SafeFragment } from './SafeFragment'
 import type { ResolveRelativePath, ToOptions } from './link'
 import type {
   AllContext,
@@ -29,8 +27,6 @@ import type {
 } from './routeInfo'
 import type { ControlledPromise, DeepPartial, NoInfer } from './utils'
 
-export const matchContext = React.createContext<string | undefined>(undefined)
-
 export interface RouteMatch<
   TRouteId,
   TAllParams,
@@ -42,6 +38,7 @@ export interface RouteMatch<
 > {
   id: string
   routeId: TRouteId
+  index: number
   pathname: string
   params: TAllParams
   status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'
@@ -157,308 +154,6 @@ function MatchesInner() {
   )
 }
 
-function SafeFragment(props: any) {
-  return <>{props.children}</>
-}
-
-export function Match({ matchId }: { matchId: string }) {
-  const router = useRouter()
-  const routeId = useRouterState({
-    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,
-  })
-
-  invariant(
-    routeId,
-    `Could not find routeId for matchId "${matchId}". Please file an issue!`,
-  )
-
-  const route: AnyRoute = router.routesById[routeId]
-
-  const PendingComponent =
-    route.options.pendingComponent ?? router.options.defaultPendingComponent
-
-  const pendingElement = PendingComponent ? <PendingComponent /> : null
-
-  const routeErrorComponent =
-    route.options.errorComponent ?? router.options.defaultErrorComponent
-
-  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch
-
-  const routeNotFoundComponent = route.isRoot
-    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
-      route.options.notFoundComponent ??
-      router.options.notFoundRoute?.options.component
-    : route.options.notFoundComponent
-
-  const ResolvedSuspenseBoundary =
-    // If we're on the root route, allow forcefully wrapping in suspense
-    (!route.isRoot || route.options.wrapInSuspense) &&
-    (route.options.wrapInSuspense ??
-      PendingComponent ??
-      (route.options.errorComponent as any)?.preload)
-      ? React.Suspense
-      : SafeFragment
-
-  const ResolvedCatchBoundary = routeErrorComponent
-    ? CatchBoundary
-    : SafeFragment
-
-  const ResolvedNotFoundBoundary = routeNotFoundComponent
-    ? CatchNotFound
-    : SafeFragment
-
-  const resetKey = useRouterState({
-    select: (s) => s.resolvedLocation.state.key!,
-  })
-
-  return (
-    <matchContext.Provider value={matchId}>
-      <ResolvedSuspenseBoundary fallback={pendingElement}>
-        <ResolvedCatchBoundary
-          getResetKey={() => resetKey}
-          errorComponent={routeErrorComponent || ErrorComponent}
-          onCatch={(error, errorInfo) => {
-            // Forward not found errors (we don't want to show the error component for these)
-            if (isNotFound(error)) throw error
-            warning(false, `Error in route match: ${matchId}`)
-            routeOnCatch?.(error, errorInfo)
-          }}
-        >
-          <ResolvedNotFoundBoundary
-            fallback={(error) => {
-              // If the current not found handler doesn't exist or it has a
-              // route ID which doesn't match the current route, rethrow the error
-              if (
-                !routeNotFoundComponent ||
-                (error.routeId && error.routeId !== routeId) ||
-                (!error.routeId && !route.isRoot)
-              )
-                throw error
-
-              return React.createElement(routeNotFoundComponent, error as any)
-            }}
-          >
-            <MatchInner matchId={matchId} />
-          </ResolvedNotFoundBoundary>
-        </ResolvedCatchBoundary>
-      </ResolvedSuspenseBoundary>
-    </matchContext.Provider>
-  )
-}
-
-function MatchInner({ matchId }: { matchId: string }): any {
-  const router = useRouter()
-  const routeId = useRouterState({
-    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,
-  })
-
-  const route = router.routesById[routeId]!
-
-  const match = useRouterState({
-    select: (s) =>
-      pick(s.matches.find((d) => d.id === matchId)!, [
-        'id',
-        'status',
-        'error',
-        'loadPromise',
-        'minPendingPromise',
-      ]),
-  })
-
-  const RouteErrorComponent =
-    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||
-    ErrorComponent
-
-  if (match.status === 'notFound') {
-    let error: unknown
-    if (isServerSideError(match.error)) {
-      const deserializeError =
-        router.options.errorSerializer?.deserialize ?? defaultDeserializeError
-
-      error = deserializeError(match.error.data)
-    } else {
-      error = match.error
-    }
-
-    invariant(isNotFound(error), 'Expected a notFound error')
-
-    return renderRouteNotFound(router, route, error)
-  }
-
-  if (match.status === 'redirected') {
-    // Redirects should be handled by the router transition. If we happen to
-    // encounter a redirect here, it's a bug. Let's warn, but render nothing.
-    invariant(isRedirect(match.error), 'Expected a redirect error')
-
-    // warning(
-    //   false,
-    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',
-    // )
-
-    throw match.loadPromise
-  }
-
-  if (match.status === 'error') {
-    // If we're on the server, we need to use React's new and super
-    // wonky api for throwing errors from a server side render inside
-    // of a suspense boundary. This is the only way to get
-    // renderToPipeableStream to not hang indefinitely.
-    // We'll serialize the error and rethrow it on the client.
-    if (router.isServer) {
-      return (
-        <RouteErrorComponent
-          error={match.error}
-          info={{
-            componentStack: '',
-          }}
-        />
-      )
-    }
-
-    if (isServerSideError(match.error)) {
-      const deserializeError =
-        router.options.errorSerializer?.deserialize ?? defaultDeserializeError
-      throw deserializeError(match.error.data)
-    } else {
-      throw match.error
-    }
-  }
-
-  if (match.status === 'pending') {
-    // We're pending, and if we have a minPendingMs, we need to wait for it
-    const pendingMinMs =
-      route.options.pendingMinMs ?? router.options.defaultPendingMinMs
-
-    if (pendingMinMs && !match.minPendingPromise) {
-      // Create a promise that will resolve after the minPendingMs
-
-      match.minPendingPromise = createControlledPromise()
-
-      if (!router.isServer) {
-        Promise.resolve().then(() => {
-          router.__store.setState((s) => ({
-            ...s,
-            matches: s.matches.map((d) =>
-              d.id === match.id
-                ? { ...d, minPendingPromise: createControlledPromise() }
-                : d,
-            ),
-          }))
-        })
-
-        setTimeout(() => {
-          // We've handled the minPendingPromise, so we can delete it
-          router.__store.setState((s) => {
-            return {
-              ...s,
-              matches: s.matches.map((d) =>
-                d.id === match.id
-                  ? {
-                      ...d,
-                      minPendingPromise:
-                        (d.minPendingPromise?.resolve(), undefined),
-                    }
-                  : d,
-              ),
-            }
-          })
-        }, pendingMinMs)
-      }
-    }
-
-    throw match.loadPromise
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (match.status === 'success') {
-    const Comp = route.options.component ?? router.options.defaultComponent
-
-    if (Comp) {
-      return <Comp />
-    }
-
-    return <Outlet />
-  }
-
-  invariant(
-    false,
-    'Idle routeMatch status encountered during rendering! You should never see this. File an issue!',
-  )
-}
-
-export const Outlet = React.memo(function Outlet() {
-  const router = useRouter()
-  const matchId = React.useContext(matchContext)
-  const routeId = useRouterState({
-    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,
-  })
-
-  const route = router.routesById[routeId]!
-
-  const { parentGlobalNotFound } = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const parentMatch = matches.find((d) => d.id === matchId)
-      invariant(
-        parentMatch,
-        `Could not find parent match for matchId "${matchId}"`,
-      )
-      return {
-        parentGlobalNotFound: parentMatch.globalNotFound,
-      }
-    },
-  })
-
-  const childMatchId = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const index = matches.findIndex((d) => d.id === matchId)
-      return matches[index + 1]?.id
-    },
-  })
-
-  if (parentGlobalNotFound) {
-    return renderRouteNotFound(router, route, undefined)
-  }
-
-  if (!childMatchId) {
-    return null
-  }
-
-  const nextMatch = <Match matchId={childMatchId} />
-
-  const pendingElement = router.options.defaultPendingComponent ? (
-    <router.options.defaultPendingComponent />
-  ) : null
-
-  if (matchId === rootRouteId) {
-    return (
-      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>
-    )
-  }
-
-  return nextMatch
-})
-
-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} />
-}
-
 export interface MatchRouteOptions {
   pending?: boolean
   caseSensitive?: boolean
@@ -608,27 +303,3 @@ export function useChildMatches<
     },
   })
 }
-
-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/RouterProvider.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 { Matches } from './Matches'
 import { getRouterContext } from './routerContext'

package/src/SafeFragment.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function SafeFragment(props: any) {
+  return <>{props.children}</>
+}

package/src/ScriptOnce.tsx

@@ -0,0 +1,27 @@
+export function ScriptOnce({
+  className,
+  children,
+  log,
+  ...rest
+}: { children: string; log?: boolean } & React.HTMLProps<HTMLScriptElement>) {
+  if (typeof document !== 'undefined') {
+    return null
+  }
+
+  return (
+    <script
+      {...rest}
+      className={`tsr-once ${className || ''}`}
+      dangerouslySetInnerHTML={{
+        __html: [
+          children,
+          (log ?? true) && process.env.NODE_ENV === 'development'
+            ? `console.info('ScriptOnce', ${JSON.stringify(children)})`
+            : '',
+        ]
+          .filter(Boolean)
+          .join('\n'),
+      }}
+    />
+  )
+}

package/src/Transitioner.tsx

@@ -52,7 +52,7 @@ export function Transitioner() {
   // Try to load the initial location
   useLayoutEffect(() => {
     if (
-      window.__TSR_DEHYDRATED__ ||
+      window.__TSR__?.dehydrated ||
       (mountLoadForRouter.current.router === router &&
         mountLoadForRouter.current.mounted)
     ) {

package/src/awaited.tsx

@@ -2,86 +2,50 @@ import * as React from 'react'
 import warning from 'tiny-warning'
 import { useRouter } from './useRouter'
 import { defaultSerializeError } from './router'
-import { isDehydratedDeferred } from './defer'
-import { defaultDeserializeError, isServerSideError } from './Matches'
+import { defer } from './defer'
+import { defaultDeserializeError, isServerSideError } from './isServerSideError'
 import type { DeferredPromise } from './defer'
 
 export type AwaitOptions<T> = {
-  promise: DeferredPromise<T>
+  promise: Promise<T>
 }
 
 export function useAwaited<T>({
-  promise,
+  promise: _promise,
 }: AwaitOptions<T>): [T, DeferredPromise<T>] {
   const router = useRouter()
-  // const rerender = React.useReducer((x) => x + 1, 0)[1]
+  const promise = _promise as DeferredPromise<T>
 
-  const state = promise.__deferredState
+  defer(promise)
 
-  // Dehydrated promises only
-  // Successful or errored deferred promises mean they
-  // were resolved on the server and no further action is needed
-  if (isDehydratedDeferred(promise) && state.status === 'pending') {
-    const streamedData = (window as any)[`__TSR__DEFERRED__${state.uid}`]
-
-    if (streamedData) {
-      Object.assign(state, router.options.transformer.parse(streamedData))
-    } else {
-      let token = router.registeredDeferredsIds.get(state.uid)
-
-      // If we haven't yet, create a promise and resolver that our streamed HTML can use
-      // when the client-side data is streamed in and ready.
-      if (!token) {
-        token = {}
-        router.registeredDeferredsIds.set(state.uid, token)
-        router.registeredDeferreds.set(token, state)
-
-        Object.assign(state, {
-          resolve: () => {
-            state.__resolvePromise?.()
-            // rerender()
-          },
-          promise: new Promise((r) => {
-            state.__resolvePromise = r as any
-          }),
-          __resolvePromise: () => {},
-        })
-      }
-    }
+  if (promise.status === 'pending') {
+    throw promise
   }
 
-  // If the promise is pending, always throw the state.promise
-  // For originating promises, this will be the original promise
-  // For dehydrated promises, this will be the placeholder promise
-  // that will be resolved when the server sends the real data
-  if (state.status === 'pending') {
-    throw isDehydratedDeferred(promise) ? state.promise : promise
-  }
-
-  if (state.status === 'error') {
+  if (promise.status === 'error') {
     if (typeof document !== 'undefined') {
-      if (isServerSideError(state.error)) {
+      if (isServerSideError(promise.error)) {
         throw (
           router.options.errorSerializer?.deserialize ?? defaultDeserializeError
-        )(state.error.data as any)
+        )(promise.error.data as any)
       } else {
         warning(
           false,
           "Encountered a server-side error that doesn't fit the expected shape",
         )
-        throw state.error
+        throw promise.error
       }
     } else {
       throw {
         data: (
           router.options.errorSerializer?.serialize ?? defaultSerializeError
-        )(state.error),
+        )(promise.error),
         __isServerError: true,
       }
     }
   }
 
-  return [promise.__deferredState.data as any, promise]
+  return [promise.data as any, promise]
 }
 
 export function Await<T>(
@@ -102,43 +66,7 @@ function AwaitInner<T>(
     fallback?: React.ReactNode
     children: (result: T) => React.ReactNode
   },
-) {
-  const router = useRouter()
-  const [data, promise] = useAwaited(props)
-  const state = promise.__deferredState
-  // If we are the originator of the promise,
-  // inject the state into the HTML stream
-  return (
-    <>
-      {!isDehydratedDeferred(promise) ? (
-        <ScriptOnce
-          children={`window.__TSR__DEFERRED__${state.uid} = ${JSON.stringify(router.options.transformer.stringify(state))}
-  if (window.__TSR__ROUTER__) {
-    let deferred = window.__TSR__ROUTER__.getDeferred('${state.uid}');
-    if (deferred) deferred.resolve(window.__TSR__DEFERRED__${state.uid});
-  }`}
-        />
-      ) : null}
-      {props.children(data)}
-    </>
-  )
-}
-
-export function ScriptOnce({
-  className,
-  children,
-  ...rest
-}: { children: string } & React.HTMLProps<HTMLScriptElement>) {
-  return (
-    <script
-      {...rest}
-      className={`tsr-script-once ${className || ''}`}
-      dangerouslySetInnerHTML={{
-        __html: [
-          children,
-          `document.querySelectorAll('.tsr-script-once').forEach((el) => el.parentElement.removeChild(el));`,
-        ].join('\n'),
-      }}
-    />
-  )
+): React.JSX.Element {
+  const [data] = useAwaited(props)
+  return props.children(data) as React.JSX.Element
 }

package/src/defer.ts

@@ -3,8 +3,7 @@ import { defaultSerializeError } from './router'
 export type DeferredPromiseState<T> = {
   uid: string
   resolve?: () => void
-  promise?: Promise<void>
-  __resolvePromise?: () => void
+  reject?: () => void
 } & (
   | {
       status: 'pending'
@@ -22,9 +21,7 @@ export type DeferredPromiseState<T> = {
     }
 )
 
-export type DeferredPromise<T> = Promise<T> & {
-  __deferredState: DeferredPromiseState<T>
-}
+export type DeferredPromise<T> = Promise<T> & DeferredPromiseState<T>
 
 export function defer<T>(
   _promise: Promise<T>,
@@ -34,23 +31,19 @@ export function defer<T>(
 ) {
   const promise = _promise as DeferredPromise<T>
 
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (!promise.__deferredState) {
-    promise.__deferredState = {
-      uid: Math.random().toString(36).slice(2),
+  if (!(promise as any).status) {
+    Object.assign(promise, {
       status: 'pending',
-    }
-
-    const state = promise.__deferredState
+    })
 
     promise
       .then((data) => {
-        state.status = 'success' as any
-        state.data = data
+        promise.status = 'success' as any
+        promise.data = data
       })
       .catch((error) => {
-        state.status = 'error' as any
-        state.error = {
+        promise.status = 'error' as any
+        ;(promise as any).error = {
           data: (options?.serializeError ?? defaultSerializeError)(error),
           __isServerError: true,
         }
@@ -59,13 +52,3 @@ export function defer<T>(
 
   return promise
 }
-
-export function isDehydratedDeferred(obj: any): boolean {
-  return (
-    typeof obj === 'object' &&
-    obj !== null &&
-    !(obj instanceof Promise) &&
-    !obj.then &&
-    '__deferredState' in obj
-  )
-}