@tanstack/router-core 1.131.7 → 1.132.0-alpha.1

package/src/router.ts

@@ -614,8 +614,8 @@ export type InvalidateFn<TRouter extends AnyRouter> = (opts?: {
 }) => Promise<void>
 
 export type ParseLocationFn<TRouteTree extends AnyRoute> = (
-  locationToParse: HistoryLocation,
   previousLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>,
+  locationToParse?: HistoryLocation,
 ) => ParsedLocation<FullSearchSchema<TRouteTree>>
 
 export type GetMatchRoutesFn = (
@@ -901,7 +901,7 @@ export class RouterCore<
               initialEntries: [this.basepath || '/'],
             })
           : createBrowserHistory()) as TRouterHistory)
-      this.updateLatestLocation()
+      this.latestLocation = this.parseLocation()
     }
 
     if (this.options.routeTree !== this.routeTree) {
@@ -939,13 +939,6 @@ export class RouterCore<
     return this.__store.state
   }
 
-  updateLatestLocation = () => {
-    this.latestLocation = this.parseLocation(
-      this.history.location,
-      this.latestLocation,
-    )
-  }
-
   buildRouteTree = () => {
     const { routesById, routesByPath, flatRoutes } = processRouteTree({
       routeTree: this.routeTree,
@@ -992,8 +985,8 @@ export class RouterCore<
   }
 
   parseLocation: ParseLocationFn<TRouteTree> = (
-    locationToParse,
     previousLocation,
+    locationToParse,
   ) => {
     const parse = ({
       pathname,
@@ -1014,7 +1007,7 @@ export class RouterCore<
       }
     }
 
-    const location = parse(locationToParse)
+    const location = parse(locationToParse ?? this.history.location)
 
     const { __tempLocation, __tempKey } = location.state
 
@@ -1146,8 +1139,8 @@ export class RouterCore<
       const parentMatchId = parentMatch?.id
 
       const parentContext = !parentMatchId
-        ? ((this.options.context as any) ?? undefined)
-        : (parentMatch.context ?? this.options.context ?? undefined)
+        ? ((this.options.context as any) ?? {})
+        : (parentMatch.context ?? this.options.context ?? {})
 
       return parentContext
     }
@@ -1169,12 +1162,12 @@ export class RouterCore<
       ] = (() => {
         // Validate the search params and stabilize them
         const parentSearch = parentMatch?.search ?? next.search
-        const parentStrictSearch = parentMatch?._strictSearch ?? undefined
+        const parentStrictSearch = parentMatch?._strictSearch ?? {}
 
         try {
           const strictSearch =
             validateSearch(route.options.validateSearch, { ...parentSearch }) ??
-            undefined
+            {}
 
           return [
             {
@@ -1284,10 +1277,7 @@ export class RouterCore<
           isFetching: false,
           error: undefined,
           paramsError: parseErrors[index],
-          __routeContext: undefined,
-          _nonReactive: {
-            loadPromise: createControlledPromise(),
-          },
+          __routeContext: {},
           __beforeLoadContext: undefined,
           context: {},
           abortController: new AbortController(),
@@ -1303,6 +1293,7 @@ export class RouterCore<
           headScripts: undefined,
           meta: undefined,
           staticData: route.options.staticData || {},
+          loadPromise: createControlledPromise(),
           fullPath: route.fullPath,
         }
       }
@@ -1337,26 +1328,23 @@ export class RouterCore<
         const parentContext = getParentContext(parentMatch)
 
         // Update the match's context
-
-        if (route.options.context) {
-          const contextFnContext: RouteContextOptions<any, any, any, any> = {
-            deps: match.loaderDeps,
-            params: match.params,
-            context: parentContext ?? {},
-            location: next,
-            navigate: (opts: any) =>
-              this.navigate({ ...opts, _fromLocation: next }),
-            buildLocation: this.buildLocation,
-            cause: match.cause,
-            abortController: match.abortController,
-            preload: !!match.preload,
-            matches,
-          }
-          // Get the route context
-          match.__routeContext =
-            route.options.context(contextFnContext) ?? undefined
+        const contextFnContext: RouteContextOptions<any, any, any, any> = {
+          deps: match.loaderDeps,
+          params: match.params,
+          context: parentContext,
+          location: next,
+          navigate: (opts: any) =>
+            this.navigate({ ...opts, _fromLocation: next }),
+          buildLocation: this.buildLocation,
+          cause: match.cause,
+          abortController: match.abortController,
+          preload: !!match.preload,
+          matches,
         }
 
+        // Get the route context
+        match.__routeContext = route.options.context?.(contextFnContext) ?? {}
+
         match.context = {
           ...parentContext,
           ...match.__routeContext,
@@ -1393,8 +1381,13 @@ export class RouterCore<
     if (!match) return
 
     match.abortController.abort()
-    match._nonReactive.pendingTimeout = undefined
-    clearTimeout(match._nonReactive.pendingTimeout)
+    this.updateMatch(id, (prev) => {
+      clearTimeout(prev.pendingTimeout)
+      return {
+        ...prev,
+        pendingTimeout: undefined,
+      }
+    })
   }
 
   cancelMatches = () => {
@@ -1420,7 +1413,7 @@ export class RouterCore<
 
       // First let's find the starting pathname
       // By default, start with the current location
-      let fromPath = this.resolvePathWithBase(lastMatch.fullPath, '.')
+      let fromPath = lastMatch.fullPath
       const toPath = dest.to
         ? this.resolvePathWithBase(fromPath, `${dest.to}`)
         : this.resolvePathWithBase(fromPath, '.')
@@ -1461,8 +1454,6 @@ export class RouterCore<
         }
       }
 
-      fromPath = this.resolvePathWithBase(fromPath, '.')
-
       // From search should always use the current location
       const fromSearch = lastMatch.search
       // Same with params. It can't hurt to provide as many as possible
@@ -1491,9 +1482,13 @@ export class RouterCore<
         parseCache: this.parsePathnameCache,
       }).interpolatedPath
 
-      const destRoutes = this.matchRoutes(interpolatedNextTo, undefined, {
-        _buildLocation: true,
-      }).map((d) => this.looseRoutesById[d.routeId]!)
+      const destRoutes = this.matchRoutes(
+        interpolatedNextTo,
+        {},
+        {
+          _buildLocation: true,
+        },
+      ).map((d) => this.looseRoutesById[d.routeId]!)
 
       // If there are any params, we need to stringify them
       if (Object.keys(nextParams).length > 0) {
@@ -1810,7 +1805,7 @@ export class RouterCore<
   beforeLoad = () => {
     // Cancel any pending matches
     this.cancelMatches()
-    this.updateLatestLocation()
+    this.latestLocation = this.parseLocation(this.latestLocation)
 
     if (this.isServer) {
       // for SPAs on the initial load, this is handled by the Transitioner
@@ -2131,10 +2126,8 @@ export class RouterCore<
           }
         }
 
-        match._nonReactive.beforeLoadPromise?.resolve()
-        match._nonReactive.loaderPromise?.resolve()
-        match._nonReactive.beforeLoadPromise = undefined
-        match._nonReactive.loaderPromise = undefined
+        match.beforeLoadPromise?.resolve()
+        match.loaderPromise?.resolve()
 
         updateMatch(match.id, (prev) => ({
           ...prev,
@@ -2145,13 +2138,15 @@ export class RouterCore<
               : 'error',
           isFetching: false,
           error: err,
+          beforeLoadPromise: undefined,
+          loaderPromise: undefined,
         }))
 
         if (!(err as any).routeId) {
           ;(err as any).routeId = match.routeId
         }
 
-        match._nonReactive.loadPromise?.resolve()
+        match.loadPromise?.resolve()
 
         if (isRedirect(err)) {
           rendered = true
@@ -2171,7 +2166,7 @@ export class RouterCore<
     const shouldSkipLoader = (matchId: string) => {
       const match = this.getMatch(matchId)!
       // upon hydration, we skip the loader if the match has been dehydrated on the server
-      if (!this.isServer && match._nonReactive.dehydrated) {
+      if (!this.isServer && match._dehydrated) {
         return true
       }
 
@@ -2214,9 +2209,8 @@ export class RouterCore<
               }
 
               updateMatch(matchId, (prev) => {
-                prev._nonReactive.beforeLoadPromise?.resolve()
-                prev._nonReactive.beforeLoadPromise = undefined
-                prev._nonReactive.loadPromise?.resolve()
+                prev.beforeLoadPromise?.resolve()
+                prev.loadPromise?.resolve()
 
                 return {
                   ...prev,
@@ -2225,6 +2219,7 @@ export class RouterCore<
                   isFetching: false,
                   updatedAt: Date.now(),
                   abortController: new AbortController(),
+                  beforeLoadPromise: undefined,
                 }
               })
             }
@@ -2294,7 +2289,10 @@ export class RouterCore<
                     }
                   }
                 }
-                existingMatch.ssr = ssr
+                updateMatch(matchId, (prev) => ({
+                  ...prev,
+                  ssr,
+                }))
               }
 
               if (shouldSkipLoader(matchId)) {
@@ -2316,10 +2314,9 @@ export class RouterCore<
 
               let executeBeforeLoad = true
               const setupPendingTimeout = () => {
-                const match = this.getMatch(matchId)!
                 if (
                   shouldPending &&
-                  match._nonReactive.pendingTimeout === undefined
+                  this.getMatch(matchId)!.pendingTimeout === undefined
                 ) {
                   const pendingTimeout = setTimeout(() => {
                     try {
@@ -2328,19 +2325,22 @@ export class RouterCore<
                       triggerOnReady()
                     } catch {}
                   }, pendingMs)
-                  match._nonReactive.pendingTimeout = pendingTimeout
+                  updateMatch(matchId, (prev) => ({
+                    ...prev,
+                    pendingTimeout,
+                  }))
                 }
               }
               if (
                 // If we are in the middle of a load, either of these will be present
                 // (not to be confused with `loadPromise`, which is always defined)
-                existingMatch._nonReactive.beforeLoadPromise ||
-                existingMatch._nonReactive.loaderPromise
+                existingMatch.beforeLoadPromise ||
+                existingMatch.loaderPromise
               ) {
                 setupPendingTimeout()
 
                 // Wait for the beforeLoad to resolve before we continue
-                await existingMatch._nonReactive.beforeLoadPromise
+                await existingMatch.beforeLoadPromise
                 const match = this.getMatch(matchId)!
                 if (match.status === 'error') {
                   executeBeforeLoad = true
@@ -2354,15 +2354,17 @@ export class RouterCore<
               if (executeBeforeLoad) {
                 // If we are not in the middle of a load OR the previous load failed, start it
                 try {
-                  const match = this.getMatch(matchId)!
-                  match._nonReactive.beforeLoadPromise =
-                    createControlledPromise<void>()
-                  // explicitly capture the previous loadPromise
-                  const prevLoadPromise = match._nonReactive.loadPromise
-                  match._nonReactive.loadPromise =
-                    createControlledPromise<void>(() => {
-                      prevLoadPromise?.resolve()
-                    })
+                  updateMatch(matchId, (prev) => {
+                    // explicitly capture the previous loadPromise
+                    const prevLoadPromise = prev.loadPromise
+                    return {
+                      ...prev,
+                      loadPromise: createControlledPromise<void>(() => {
+                        prevLoadPromise?.resolve()
+                      }),
+                      beforeLoadPromise: createControlledPromise<void>(),
+                    }
+                  })
 
                   const { paramsError, searchError } = this.getMatch(matchId)!
 
@@ -2379,7 +2381,7 @@ export class RouterCore<
                   const abortController = new AbortController()
 
                   const parentMatchContext =
-                    parentMatch?.context ?? this.options.context ?? undefined
+                    parentMatch?.context ?? this.options.context ?? {}
 
                   updateMatch(matchId, (prev) => ({
                     ...prev,
@@ -2444,11 +2446,11 @@ export class RouterCore<
                 }
 
                 updateMatch(matchId, (prev) => {
-                  prev._nonReactive.beforeLoadPromise?.resolve()
-                  prev._nonReactive.beforeLoadPromise = undefined
+                  prev.beforeLoadPromise?.resolve()
 
                   return {
                     ...prev,
+                    beforeLoadPromise: undefined,
                     isFetching: false,
                   }
                 })
@@ -2498,8 +2500,8 @@ export class RouterCore<
 
                   const potentialPendingMinPromise = async () => {
                     const latestMatch = this.getMatch(matchId)!
-                    if (latestMatch._nonReactive.minPendingPromise) {
-                      await latestMatch._nonReactive.minPendingPromise
+                    if (latestMatch.minPendingPromise) {
+                      await latestMatch.minPendingPromise
                     }
                   }
 
@@ -2515,7 +2517,7 @@ export class RouterCore<
                     }
                   }
                   // there is a loaderPromise, so we are in the middle of a load
-                  else if (prevMatch._nonReactive.loaderPromise) {
+                  else if (prevMatch.loaderPromise) {
                     // do not block if we already have stale data we can show
                     // but only if the ongoing load is not a preload since error handling is different for preloads
                     // and we don't want to swallow errors
@@ -2526,7 +2528,7 @@ export class RouterCore<
                     ) {
                       return this.getMatch(matchId)!
                     }
-                    await prevMatch._nonReactive.loaderPromise
+                    await prevMatch.loaderPromise
                     const match = this.getMatch(matchId)!
                     if (match.error) {
                       handleRedirectAndNotFound(match, match.error)
@@ -2583,16 +2585,13 @@ export class RouterCore<
                         ? shouldReloadOption(getLoaderContext())
                         : shouldReloadOption
 
-                    updateMatch(matchId, (prev) => {
-                      prev._nonReactive.loaderPromise =
-                        createControlledPromise<void>()
-                      return {
-                        ...prev,
-                        preload:
-                          !!preload &&
-                          !this.state.matches.some((d) => d.id === matchId),
-                      }
-                    })
+                    updateMatch(matchId, (prev) => ({
+                      ...prev,
+                      loaderPromise: createControlledPromise<void>(),
+                      preload:
+                        !!preload &&
+                        !this.state.matches.some((d) => d.id === matchId),
+                    }))
 
                     const runLoader = async () => {
                       try {
@@ -2676,13 +2675,11 @@ export class RouterCore<
                       } catch (err) {
                         const head = await executeHead()
 
-                        updateMatch(matchId, (prev) => {
-                          prev._nonReactive.loaderPromise = undefined
-                          return {
-                            ...prev,
-                            ...head,
-                          }
-                        })
+                        updateMatch(matchId, (prev) => ({
+                          ...prev,
+                          loaderPromise: undefined,
+                          ...head,
+                        }))
                         handleRedirectAndNotFound(this.getMatch(matchId)!, err)
                       }
                     }
@@ -2699,10 +2696,14 @@ export class RouterCore<
                       ;(async () => {
                         try {
                           await runLoader()
-                          const match = this.getMatch(matchId)!
-                          match._nonReactive.loaderPromise?.resolve()
-                          match._nonReactive.loadPromise?.resolve()
-                          match._nonReactive.loaderPromise = undefined
+                          const { loaderPromise, loadPromise } =
+                            this.getMatch(matchId)!
+                          loaderPromise?.resolve()
+                          loadPromise?.resolve()
+                          updateMatch(matchId, (prev) => ({
+                            ...prev,
+                            loaderPromise: undefined,
+                          }))
                         } catch (err) {
                           if (isRedirect(err)) {
                             await this.navigate(err.options)
@@ -2726,23 +2727,25 @@ export class RouterCore<
                     }
                   }
                   if (!loaderIsRunningAsync) {
-                    const match = this.getMatch(matchId)!
-                    match._nonReactive.loaderPromise?.resolve()
-                    match._nonReactive.loadPromise?.resolve()
+                    const { loaderPromise, loadPromise } =
+                      this.getMatch(matchId)!
+                    loaderPromise?.resolve()
+                    loadPromise?.resolve()
                   }
 
                   updateMatch(matchId, (prev) => {
-                    clearTimeout(prev._nonReactive.pendingTimeout)
-                    prev._nonReactive.pendingTimeout = undefined
-                    if (!loaderIsRunningAsync)
-                      prev._nonReactive.loaderPromise = undefined
-                    prev._nonReactive.dehydrated = undefined
+                    clearTimeout(prev.pendingTimeout)
                     return {
                       ...prev,
                       isFetching: loaderIsRunningAsync
                         ? prev.isFetching
                         : false,
+                      loaderPromise: loaderIsRunningAsync
+                        ? prev.loaderPromise
+                        : undefined,
                       invalid: false,
+                      pendingTimeout: undefined,
+                      _dehydrated: undefined,
                     }
                   })
                   return this.getMatch(matchId)!
@@ -2788,7 +2791,7 @@ export class RouterCore<
           invalid: true,
           ...(opts?.forcePending || d.status === 'error'
             ? ({ status: 'pending', error: undefined } as const)
-            : undefined),
+            : {}),
         }
       }
       return d
@@ -3559,8 +3562,7 @@ function applySearchMiddleware({
             try {
               const validatedSearch = {
                 ...result,
-                ...(validateSearch(route.options.validateSearch, result) ??
-                  undefined),
+                ...(validateSearch(route.options.validateSearch, result) ?? {}),
               }
               return validatedSearch
             } catch {

package/src/ssr/ssr-client.ts

@@ -20,16 +20,17 @@ export interface TsrSsrGlobal {
 }
 
 function hydrateMatch(
-  match: AnyRouteMatch,
   deyhydratedMatch: DehydratedMatch,
-): void {
-  match.id = deyhydratedMatch.i
-  match.__beforeLoadContext = deyhydratedMatch.b
-  match.loaderData = deyhydratedMatch.l
-  match.status = deyhydratedMatch.s
-  match.ssr = deyhydratedMatch.ssr
-  match.updatedAt = deyhydratedMatch.u
-  match.error = deyhydratedMatch.e
+): Partial<MakeRouteMatch> {
+  return {
+    id: deyhydratedMatch.i,
+    __beforeLoadContext: deyhydratedMatch.b,
+    loaderData: deyhydratedMatch.l,
+    status: deyhydratedMatch.s,
+    ssr: deyhydratedMatch.ssr,
+    updatedAt: deyhydratedMatch.u,
+    error: deyhydratedMatch.e,
+  }
 }
 export interface DehydratedMatch {
   i: MakeRouteMatch['id']
@@ -79,19 +80,17 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       route.options.pendingMinMs ?? router.options.defaultPendingMinMs
     if (pendingMinMs) {
       const minPendingPromise = createControlledPromise<void>()
-      match._nonReactive.minPendingPromise = minPendingPromise
+      match.minPendingPromise = minPendingPromise
       match._forcePending = true
 
       setTimeout(() => {
         minPendingPromise.resolve()
         // We've handled the minPendingPromise, so we can delete it
-        router.updateMatch(match.id, (prev) => {
-          prev._nonReactive.minPendingPromise = undefined
-          return {
-            ...prev,
-            _forcePending: undefined,
-          }
-        })
+        router.updateMatch(match.id, (prev) => ({
+          ...prev,
+          minPendingPromise: undefined,
+          _forcePending: undefined,
+        }))
       }, pendingMinMs)
     }
   }
@@ -104,14 +103,17 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       (d) => d.i === match.id,
     )
     if (!dehydratedMatch) {
-      match._nonReactive.dehydrated = false
-      match.ssr = false
+      Object.assign(match, { dehydrated: false, ssr: false })
       return
     }
 
-    hydrateMatch(match, dehydratedMatch)
+    Object.assign(match, hydrateMatch(dehydratedMatch))
 
-    match._nonReactive.dehydrated = match.ssr !== false
+    if (match.ssr === false) {
+      match._dehydrated = false
+    } else {
+      match._dehydrated = true
+    }
 
     if (match.ssr === 'data-only' || match.ssr === false) {
       if (firstNonSsrMatchIndex === undefined) {
@@ -139,27 +141,24 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       const route = router.looseRoutesById[match.routeId]!
 
       const parentMatch = router.state.matches[match.index - 1]
-      const parentContext = parentMatch?.context ?? router.options.context
+      const parentContext = parentMatch?.context ?? router.options.context ?? {}
 
       // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed
       // so run it again and merge route context
-      if (route.options.context) {
-        const contextFnContext: RouteContextOptions<any, any, any, any> = {
-          deps: match.loaderDeps,
-          params: match.params,
-          context: parentContext ?? {},
-          location: router.state.location,
-          navigate: (opts: any) =>
-            router.navigate({ ...opts, _fromLocation: router.state.location }),
-          buildLocation: router.buildLocation,
-          cause: match.cause,
-          abortController: match.abortController,
-          preload: false,
-          matches,
-        }
-        match.__routeContext =
-          route.options.context(contextFnContext) ?? undefined
+      const contextFnContext: RouteContextOptions<any, any, any, any> = {
+        deps: match.loaderDeps,
+        params: match.params,
+        context: parentContext,
+        location: router.state.location,
+        navigate: (opts: any) =>
+          router.navigate({ ...opts, _fromLocation: router.state.location }),
+        buildLocation: router.buildLocation,
+        cause: match.cause,
+        abortController: match.abortController,
+        preload: false,
+        matches,
       }
+      match.__routeContext = route.options.context?.(contextFnContext) ?? {}
 
       match.context = {
         ...parentContext,
@@ -187,11 +186,11 @@ export async function hydrate(router: AnyRouter): Promise<any> {
 
   const isSpaMode = matches[matches.length - 1]!.id !== lastMatchId
   const hasSsrFalseMatches = matches.some((m) => m.ssr === false)
-  // all matches have data from the server and we are not in SPA mode so we don't need to kick of router.load()
+  // all matches have data from the server   and we are not in SPA mode so we don't need to kick of router.load()
   if (!hasSsrFalseMatches && !isSpaMode) {
     matches.forEach((match) => {
-      // remove the dehydrated flag since we won't run router.load() which would remove it
-      match._nonReactive.dehydrated = undefined
+      // remove the _dehydrate flag since we won't run router.load() which would remove it
+      match._dehydrated = undefined
     })
     return routeChunkPromise
   }
@@ -214,7 +213,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     setMatchForcePending(match)
 
     match._displayPending = true
-    match._nonReactive.displayPendingPromise = loadPromise
+    match.displayPendingPromise = loadPromise
 
     loadPromise.then(() => {
       batch(() => {