@tanstack/react-router 1.31.0 → 1.31.2

package/src/router.ts

@@ -25,7 +25,7 @@ import {
   trimPathLeft,
   trimPathRight,
 } from './path'
-import { isRedirect } from './redirects'
+import { isRedirect, isResolvedRedirect } from './redirects'
 import { isNotFound } from './not-found'
 import type * as React from 'react'
 import type {
@@ -205,7 +205,7 @@ export interface BuildNextOptions {
     unmaskOnReload?: boolean
   }
   from?: string
-  _fromLocation?: ParsedLocation
+  fromSearch?: unknown
 }
 
 export interface DehydratedRouterState {
@@ -305,7 +305,6 @@ export class Router<
   )}`
   resetNextScroll = true
   shouldViewTransition?: true = undefined
-  navigateTimeout: Timeout | null = null
   latestLoadPromise: Promise<void> = Promise.resolve()
   subscribers = new Set<RouterListener<RouterEvent>>()
   injectedHtml: Array<InjectedHtmlEntry> = []
@@ -584,10 +583,10 @@ export class Router<
     })
   }
 
-  checkLatest = (promise: Promise<void>): undefined | Promise<void> => {
-    return this.latestLoadPromise !== promise
-      ? this.latestLoadPromise
-      : undefined
+  checkLatest = (promise: Promise<void>): void => {
+    if (this.latestLoadPromise !== promise) {
+      throw this.latestLoadPromise
+    }
   }
 
   parseLocation = (
@@ -920,25 +919,25 @@ export class Router<
       } = {},
       matches?: Array<MakeRouteMatch<TRouteTree>>,
     ): ParsedLocation => {
-      const fromPath = dest.from || this.latestLocation.pathname
-      let fromSearch = dest._fromLocation?.search || this.latestLocation.search
+      let fromPath = this.latestLocation.pathname
+      let fromSearch = dest.fromSearch || this.latestLocation.search
 
-      const fromMatches = this.matchRoutes(fromPath, fromSearch)
+      const fromMatches = this.matchRoutes(
+        this.latestLocation.pathname,
+        fromSearch,
+      )
 
+      fromPath =
+        fromMatches.find((d) => d.id === dest.from)?.pathname || fromPath
       fromSearch = last(fromMatches)?.search || this.latestLocation.search
 
       const stayingMatches = matches?.filter((d) =>
         fromMatches.find((e) => e.routeId === d.routeId),
       )
 
-      const fromRoute = this.looseRoutesById[last(fromMatches)?.routeId]
-
       let pathname = dest.to
-        ? this.resolvePathWithBase(
-            dest.from ?? this.latestLocation.pathname,
-            `${dest.to}`,
-          )
-        : this.resolvePathWithBase(fromRoute?.fullPath, fromRoute?.fullPath)
+        ? this.resolvePathWithBase(fromPath, `${dest.to}`)
+        : this.resolvePathWithBase(fromPath, fromPath)
 
       const prevParams = { ...last(fromMatches)?.params }
 
@@ -1113,8 +1112,6 @@ export class Router<
     viewTransition,
     ...next
   }: ParsedLocation & CommitLocationOptions) => {
-    if (this.navigateTimeout) clearTimeout(this.navigateTimeout)
-
     const isSameUrl = this.latestLocation.href === next.href
 
     // If the next urls are the same and we're not replacing,
@@ -1209,19 +1206,180 @@ export class Router<
     })
   }
 
+  load = async (): Promise<void> => {
+    const promise = createControlledPromise<void>()
+    this.latestLoadPromise = promise
+    let redirect: ResolvedRedirect | undefined
+    let notFound: NotFoundError | undefined
+
+    this.startReactTransition(async () => {
+      try {
+        const next = this.latestLocation
+        const prevLocation = this.state.resolvedLocation
+        const pathDidChange = prevLocation.href !== next.href
+
+        // Cancel any pending matches
+        this.cancelMatches()
+
+        this.emit({
+          type: 'onBeforeLoad',
+          fromLocation: prevLocation,
+          toLocation: next,
+          pathChanged: pathDidChange,
+        })
+
+        let pendingMatches!: Array<AnyRouteMatch>
+
+        this.__store.batch(() => {
+          this.cleanCache()
+
+          // Match the routes
+          pendingMatches = this.matchRoutes(next.pathname, next.search)
+
+          // Ingest the new matches
+          this.__store.setState((s) => ({
+            ...s,
+            status: 'pending',
+            isLoading: true,
+            location: next,
+            pendingMatches,
+            // If a cached moved to pendingMatches, remove it from cachedMatches
+            cachedMatches: s.cachedMatches.filter((d) => {
+              return !pendingMatches.find((e) => e.id === d.id)
+            }),
+          }))
+        })
+
+        await this.loadMatches({
+          matches: pendingMatches,
+          location: next,
+          checkLatest: () => this.checkLatest(promise),
+          onReady: async () => {
+            await this.startViewTransition(async () => {
+              // this.viewTransitionPromise = createControlledPromise<true>()
+
+              // Commit the pending matches. If a previous match was
+              // removed, place it in the cachedMatches
+              let exitingMatches!: Array<AnyRouteMatch>
+              let enteringMatches!: Array<AnyRouteMatch>
+              let stayingMatches!: Array<AnyRouteMatch>
+
+              this.__store.batch(() => {
+                this.__store.setState((s) => {
+                  const previousMatches = s.matches
+                  const newMatches = s.pendingMatches || s.matches
+
+                  exitingMatches = previousMatches.filter(
+                    (match) => !newMatches.find((d) => d.id === match.id),
+                  )
+                  enteringMatches = newMatches.filter(
+                    (match) => !previousMatches.find((d) => d.id === match.id),
+                  )
+                  stayingMatches = previousMatches.filter((match) =>
+                    newMatches.find((d) => d.id === match.id),
+                  )
+
+                  return {
+                    ...s,
+                    isLoading: false,
+                    matches: newMatches,
+                    pendingMatches: undefined,
+                    cachedMatches: [
+                      ...s.cachedMatches,
+                      ...exitingMatches.filter((d) => d.status !== 'error'),
+                    ],
+                  }
+                })
+                this.cleanCache()
+              })
+
+              //
+              ;(
+                [
+                  [exitingMatches, 'onLeave'],
+                  [enteringMatches, 'onEnter'],
+                  [stayingMatches, 'onStay'],
+                ] as const
+              ).forEach(([matches, hook]) => {
+                matches.forEach((match) => {
+                  this.looseRoutesById[match.routeId]!.options[hook]?.(match)
+                })
+              })
+            })
+          },
+        })
+      } catch (err) {
+        if (isResolvedRedirect(err)) {
+          redirect = err
+          if (!this.isServer) {
+            this.navigate({ ...err, replace: true })
+            this.load()
+          }
+        } else if (isNotFound(err)) {
+          notFound = err
+        }
+
+        this.__store.setState((s) => ({
+          ...s,
+          statusCode:
+            redirect?.statusCode || notFound
+              ? 404
+              : s.matches.some((d) => d.status === 'error')
+                ? 500
+                : 200,
+          redirect,
+        }))
+      }
+
+      promise.resolve()
+    })
+
+    return this.latestLoadPromise
+  }
+
+  startViewTransition = async (fn: () => Promise<void>) => {
+    // Determine if we should start a view transition from the navigation
+    // or from the router default
+    const shouldViewTransition =
+      this.shouldViewTransition ?? this.options.defaultViewTransition
+
+    // Reset the view transition flag
+    delete this.shouldViewTransition
+    // Attempt to start a view transition (or just apply the changes if we can't)
+    ;(shouldViewTransition && typeof document !== 'undefined'
+      ? document
+      : undefined
+    )
+      // @ts-expect-error
+      ?.startViewTransition?.(fn) || fn()
+  }
+
   loadMatches = async ({
     checkLatest,
     location,
     matches,
     preload,
+    onReady,
   }: {
-    checkLatest: () => Promise<void> | undefined
+    checkLatest: () => void
     location: ParsedLocation
     matches: Array<AnyRouteMatch>
     preload?: boolean
+    onReady?: () => Promise<void>
   }): Promise<Array<MakeRouteMatch>> => {
-    let latestPromise
     let firstBadMatchIndex: number | undefined
+    let rendered = false
+
+    const triggerOnReady = async () => {
+      if (!rendered) {
+        rendered = true
+        await onReady?.()
+      }
+    }
+
+    if (!this.isServer && !this.state.matches.length) {
+      triggerOnReady()
+    }
 
     const updateMatch = (
       id: string,
@@ -1250,51 +1408,95 @@ export class Router<
       return updated
     }
 
-    try {
-      await new Promise<void>((resolveAll, rejectAll) => {
-        ;(async () => {
-          try {
-            const handleRedirectAndNotFound = (
-              match: AnyRouteMatch,
-              err: any,
-            ) => {
-              if (isRedirect(err) || isNotFound(err)) {
-                updateMatch(match.id, (prev) => ({
-                  ...prev,
-                  status: isRedirect(err)
-                    ? 'redirected'
-                    : isNotFound(err)
-                      ? 'notFound'
-                      : 'error',
-                  isFetching: false,
-                  error: err,
-                }))
+    const handleRedirectAndNotFound = (match: AnyRouteMatch, err: any) => {
+      if (isResolvedRedirect(err)) throw err
 
-                if (!(err as any).routeId) {
-                  ;(err as any).routeId = match.routeId
-                }
+      if (isRedirect(err) || isNotFound(err)) {
+        // if (!rendered) {
+        updateMatch(match.id, (prev) => ({
+          ...prev,
+          status: isRedirect(err)
+            ? 'redirected'
+            : isNotFound(err)
+              ? 'notFound'
+              : 'error',
+          isFetching: false,
+          error: err,
+        }))
+        // }
 
-                if (isRedirect(err)) {
-                  const redirect = this.resolveRedirect(err)
+        rendered = true
 
-                  if (!preload && !this.isServer) {
-                    this.navigate({ ...(redirect as any), replace: true })
-                  }
+        if (!(err as any).routeId) {
+          ;(err as any).routeId = match.routeId
+        }
 
-                  throw redirect
-                } else if (isNotFound(err)) {
-                  if (!preload) this.handleNotFound(matches, err)
-                  throw err
-                }
-              }
-            }
+        if (isRedirect(err)) {
+          err = this.resolveRedirect(err)
+          throw err
+        } else if (isNotFound(err)) {
+          this.handleNotFound(matches, err)
+          throw err
+        }
+      }
+    }
 
+    try {
+      await new Promise<void>((resolveAll, rejectAll) => {
+        ;(async () => {
+          try {
             // Check each match middleware to see if the route can be accessed
             // eslint-disable-next-line prefer-const
             for (let [index, match] of matches.entries()) {
               const parentMatch = matches[index - 1]
               const route = this.looseRoutesById[match.routeId]!
               const abortController = new AbortController()
+              let loadPromise = match.loadPromise
+
+              const pendingMs =
+                route.options.pendingMs ?? this.options.defaultPendingMs
+
+              const shouldPending = !!(
+                onReady &&
+                !this.isServer &&
+                !preload &&
+                (route.options.loader || route.options.beforeLoad) &&
+                typeof pendingMs === 'number' &&
+                pendingMs !== Infinity &&
+                (route.options.pendingComponent ??
+                  this.options.defaultPendingComponent)
+              )
+
+              if (shouldPending) {
+                // If we might show a pending component, we need to wait for the
+                // pending promise to resolve before we start showing that state
+                setTimeout(() => {
+                  try {
+                    checkLatest()
+                    // Update the match and prematurely resolve the loadMatches promise so that
+                    // the pending component can start rendering
+                    triggerOnReady()
+                  } catch {}
+                }, pendingMs)
+              }
+
+              if (match.isFetching) {
+                continue
+              }
+
+              const previousResolve = loadPromise.resolve
+              // Create a new one
+              loadPromise = createControlledPromise<void>(
+                // Resolve the old when we we resolve the new one
+                previousResolve,
+              )
+
+              // Otherwise, load the route
+              matches[index] = match = updateMatch(match.id, (prev) => ({
+                ...prev,
+                isFetching: 'beforeLoad',
+                loadPromise,
+              }))
 
               const handleSerialError = (err: any, routerCode: string) => {
                 err.routerCode = routerCode
@@ -1325,42 +1527,10 @@ export class Router<
                 handleSerialError(match.searchError, 'VALIDATE_SEARCH')
               }
 
-              // if (match.globalNotFound && !preload) {
-              //   handleSerialError(notFound({ _global: true }), 'NOT_FOUND')
-              // }
-
               try {
                 const parentContext =
                   parentMatch?.context ?? this.options.context ?? {}
 
-                const pendingMs =
-                  route.options.pendingMs ?? this.options.defaultPendingMs
-                const pendingPromise =
-                  typeof pendingMs !== 'number' || pendingMs <= 0
-                    ? Promise.resolve()
-                    : new Promise<void>((r) => {
-                        if (pendingMs !== Infinity) setTimeout(r, pendingMs)
-                      })
-
-                const shouldPending =
-                  !this.isServer &&
-                  !preload &&
-                  (route.options.loader || route.options.beforeLoad) &&
-                  typeof pendingMs === 'number' &&
-                  (route.options.pendingComponent ??
-                    this.options.defaultPendingComponent)
-
-                if (shouldPending) {
-                  // If we might show a pending component, we need to wait for the
-                  // pending promise to resolve before we start showing that state
-                  pendingPromise.then(async () => {
-                    if ((latestPromise = checkLatest())) return latestPromise
-                    // Update the match and prematurely resolve the loadMatches promise so that
-                    // the pending component can start rendering
-                    resolveAll()
-                  })
-                }
-
                 const beforeLoadContext =
                   (await route.options.beforeLoad?.({
                     search: match.search,
@@ -1375,6 +1545,8 @@ export class Router<
                     cause: preload ? 'preload' : match.cause,
                   })) ?? ({} as any)
 
+                checkLatest()
+
                 if (
                   isRedirect(beforeLoadContext) ||
                   isNotFound(beforeLoadContext)
@@ -1404,6 +1576,8 @@ export class Router<
               }
             }
 
+            checkLatest()
+
             const validResolvedMatches = matches.slice(0, firstBadMatchIndex)
             const matchPromises: Array<Promise<any>> = []
 
@@ -1431,7 +1605,6 @@ export class Router<
                   let lazyPromise = Promise.resolve()
                   let componentsPromise = Promise.resolve() as Promise<any>
                   let loaderPromise = existing.loaderPromise
-                  let loadPromise = existing.loadPromise
 
                   // If the Matches component rendered
                   // the pending component and needs to show it for
@@ -1444,8 +1617,7 @@ export class Router<
                     if (latestMatch?.minPendingPromise) {
                       await latestMatch.minPendingPromise
 
-                      if ((latestPromise = checkLatest()))
-                        return await latestPromise
+                      checkLatest()
 
                       updateMatch(latestMatch.id, (prev) => ({
                         ...prev,
@@ -1455,7 +1627,7 @@ export class Router<
                   }
 
                   try {
-                    if (!match.isFetching) {
+                    if (match.isFetching === 'beforeLoad') {
                       // If the user doesn't want the route to reload, just
                       // resolve with the existing loader data
 
@@ -1464,11 +1636,14 @@ export class Router<
                       // }
 
                       // Otherwise, load the route
-                      matches[index] = match = {
-                        ...match,
-                        isFetching: true,
-                        fetchCount: match.fetchCount + 1,
-                      }
+                      matches[index] = match = updateMatch(
+                        match.id,
+                        (prev) => ({
+                          ...prev,
+                          isFetching: 'loader',
+                          fetchCount: match.fetchCount + 1,
+                        }),
+                      )
 
                       lazyPromise =
                         route.lazyFn?.().then((lazyRoute) => {
@@ -1495,38 +1670,27 @@ export class Router<
                       // we can use the options
                       await lazyPromise
 
-                      if ((latestPromise = checkLatest()))
-                        return await latestPromise
+                      checkLatest()
 
                       // Kick off the loader!
                       loaderPromise = route.options.loader?.(loaderContext)
 
-                      const previousResolve = loadPromise.resolve
-                      // Create a new one
-                      loadPromise = createControlledPromise<void>(
-                        // Resolve the old when we we resolve the new one
-                        previousResolve,
+                      matches[index] = match = updateMatch(
+                        match.id,
+                        (prev) => ({
+                          ...prev,
+                          loaderPromise,
+                        }),
                       )
                     }
 
-                    matches[index] = match = updateMatch(match.id, (prev) => ({
-                      ...prev,
-                      loaderPromise,
-                      loadPromise,
-                    }))
-
                     const loaderData = await loaderPromise
-                    if ((latestPromise = checkLatest()))
-                      return await latestPromise
+                    checkLatest()
 
                     handleRedirectAndNotFound(match, loaderData)
 
-                    if ((latestPromise = checkLatest()))
-                      return await latestPromise
-
                     await potentialPendingMinPromise()
-                    if ((latestPromise = checkLatest()))
-                      return await latestPromise
+                    checkLatest()
 
                     const meta = route.options.meta?.({
                       params: match.params,
@@ -1548,13 +1712,11 @@ export class Router<
                       headers,
                     }))
                   } catch (e) {
+                    checkLatest()
                     let error = e
-                    if ((latestPromise = checkLatest()))
-                      return await latestPromise
 
                     await potentialPendingMinPromise()
-                    if ((latestPromise = checkLatest()))
-                      return await latestPromise
+                    checkLatest()
 
                     handleRedirectAndNotFound(match, e)
 
@@ -1577,10 +1739,9 @@ export class Router<
                   // to be preloaded before we resolve the match
                   await componentsPromise
 
-                  if ((latestPromise = checkLatest()))
-                    return await latestPromise
+                  checkLatest()
 
-                  loadPromise.resolve()
+                  match.loadPromise.resolve()
                 }
 
                 // This is where all of the stale-while-revalidate magic happens
@@ -1615,8 +1776,7 @@ export class Router<
                   try {
                     await fetch()
                   } catch (err) {
-                    if ((latestPromise = checkLatest()))
-                      return await latestPromise
+                    checkLatest()
                     handleRedirectAndNotFound(match, err)
                   }
                 }
@@ -1636,7 +1796,7 @@ export class Router<
               }),
             )
 
-            if ((latestPromise = checkLatest())) return await latestPromise
+            checkLatest()
 
             resolveAll()
           } catch (err) {
@@ -1644,6 +1804,7 @@ export class Router<
           }
         })()
       })
+      await triggerOnReady()
     } catch (err) {
       if (isRedirect(err) || isNotFound(err)) {
         throw err
@@ -1670,173 +1831,6 @@ export class Router<
     return this.load()
   }
 
-  load = async (): Promise<void> => {
-    let resolveLoad!: (value: void) => void
-    let rejectLoad!: (reason: any) => void
-
-    const promise = new Promise<void>((resolve, reject) => {
-      resolveLoad = resolve
-      rejectLoad = reject
-    })
-
-    this.latestLoadPromise = promise
-
-    let latestPromise: Promise<void> | undefined | null
-
-    this.startReactTransition(async () => {
-      try {
-        const next = this.latestLocation
-        const prevLocation = this.state.resolvedLocation
-        const pathDidChange = prevLocation.href !== next.href
-
-        // Cancel any pending matches
-        this.cancelMatches()
-
-        this.emit({
-          type: 'onBeforeLoad',
-          fromLocation: prevLocation,
-          toLocation: next,
-          pathChanged: pathDidChange,
-        })
-
-        let pendingMatches!: Array<AnyRouteMatch>
-        const previousMatches = this.state.matches
-
-        this.__store.batch(() => {
-          this.cleanCache()
-
-          // Match the routes
-          pendingMatches = this.matchRoutes(next.pathname, next.search)
-
-          // Ingest the new matches
-          // If a cached moved to pendingMatches, remove it from cachedMatches
-          this.__store.setState((s) => ({
-            ...s,
-            status: 'pending',
-            isLoading: true,
-            location: next,
-            pendingMatches,
-            cachedMatches: s.cachedMatches.filter((d) => {
-              return !pendingMatches.find((e) => e.id === d.id)
-            }),
-          }))
-        })
-
-        let redirect: ResolvedRedirect | undefined
-        let notFound: NotFoundError | undefined
-
-        try {
-          // Load the matches
-          const loadMatchesPromise = this.loadMatches({
-            matches: pendingMatches,
-            location: next,
-            checkLatest: () => this.checkLatest(promise),
-          })
-
-          if (previousMatches.length || this.isServer) {
-            await loadMatchesPromise
-          }
-        } catch (err) {
-          if (isRedirect(err)) {
-            redirect = err as ResolvedRedirect
-          } else if (isNotFound(err)) {
-            notFound = err
-          }
-
-          // Swallow all other errors that happen inside
-          // of loadMatches. These errors will be handled
-          // as state on each match.
-        }
-
-        // Only apply the latest transition
-        if ((latestPromise = this.checkLatest(promise))) {
-          return latestPromise
-        }
-
-        const exitingMatches = previousMatches.filter(
-          (match) => !pendingMatches.find((d) => d.id === match.id),
-        )
-        const enteringMatches = pendingMatches.filter(
-          (match) => !previousMatches.find((d) => d.id === match.id),
-        )
-        const stayingMatches = previousMatches.filter((match) =>
-          pendingMatches.find((d) => d.id === match.id),
-        )
-
-        // Determine if we should start a view transition from the navigation
-        // or from the router default
-        const shouldViewTransition =
-          this.shouldViewTransition ?? this.options.defaultViewTransition
-
-        // Reset the view transition flag
-        delete this.shouldViewTransition
-
-        const apply = () => {
-          // this.viewTransitionPromise = createControlledPromise<true>()
-
-          // Commit the pending matches. If a previous match was
-          // removed, place it in the cachedMatches
-          this.__store.batch(() => {
-            this.__store.setState((s) => ({
-              ...s,
-              isLoading: false,
-              matches: s.pendingMatches!,
-              pendingMatches: undefined,
-              cachedMatches: [
-                ...s.cachedMatches,
-                ...exitingMatches.filter((d) => d.status !== 'error'),
-              ],
-              statusCode:
-                redirect?.statusCode || notFound
-                  ? 404
-                  : s.matches.some((d) => d.status === 'error')
-                    ? 500
-                    : 200,
-              redirect,
-            }))
-            this.cleanCache()
-          })
-
-          //
-          ;(
-            [
-              [exitingMatches, 'onLeave'],
-              [enteringMatches, 'onEnter'],
-              [stayingMatches, 'onStay'],
-            ] as const
-          ).forEach(([matches, hook]) => {
-            matches.forEach((match) => {
-              this.looseRoutesById[match.routeId]!.options[hook]?.(match)
-            })
-          })
-
-          resolveLoad()
-
-          // return this.viewTransitionPromise
-        }
-
-        // Attempt to start a view transition (or just apply the changes if we can't)
-        ;(shouldViewTransition && typeof document !== 'undefined'
-          ? document
-          : undefined
-        )
-          // @ts-expect-error
-          ?.startViewTransition?.(apply) || apply()
-      } catch (err) {
-        // Only apply the latest transition
-        if ((latestPromise = this.checkLatest(promise))) {
-          return latestPromise
-        }
-
-        console.error('Load Error', err)
-
-        rejectLoad(err)
-      }
-    })
-
-    return this.latestLoadPromise
-  }
-
   resolveRedirect = (err: AnyRedirect): ResolvedRedirect => {
     const redirect = err as ResolvedRedirect
 
@@ -1942,7 +1936,7 @@ export class Router<
     } catch (err) {
       if (isRedirect(err)) {
         return await this.preloadRoute({
-          _fromDest: next,
+          fromSearch: next.search,
           from: next.pathname,
           ...(err as any),
         })