@tanstack/react-router 0.0.1-beta.225 → 0.0.1-beta.227

package/src/router.ts

@@ -43,7 +43,6 @@ import {
   BuildLocationFn,
   CommitLocationOptions,
   InjectedHtmlEntry,
-  LoadFn,
   MatchRouteFn,
   NavigateFn,
   PathParamError,
@@ -554,67 +553,21 @@ export class Router<
       return
     })
 
-    const matches = matchedRoutes.map((route, index) => {
-      const interpolatedPath = interpolatePath(route.path, routeParams)
-      const matchId = interpolatePath(route.id, routeParams, true)
-
-      // Waste not, want not. If we already have a match for this route,
-      // reuse it. This is important for layout routes, which might stick
-      // around between navigation actions that only change leaf routes.
-      const existingMatch = getRouteMatch(this.state, matchId)
-
-      const cause = this.state.matches.find((d) => d.id === matchId)
-        ? 'stay'
-        : 'enter'
-
-      if (existingMatch) {
-        return { ...existingMatch, cause }
-      }
-
-      // Create a fresh route match
-      const hasLoaders = !!(
-        route.options.loader ||
-        componentTypes.some((d) => (route.options[d] as any)?.preload)
-      )
+    const matches: AnyRouteMatch[] = []
 
-      const routeMatch: AnyRouteMatch = {
-        id: matchId,
-        routeId: route.id,
-        params: routeParams,
-        pathname: joinPaths([this.basepath, interpolatedPath]),
-        updatedAt: Date.now(),
-        routeSearch: {},
-        search: {} as any,
-        status: hasLoaders ? 'pending' : 'success',
-        isFetching: false,
-        invalid: false,
-        error: undefined,
-        paramsError: parseErrors[index],
-        searchError: undefined,
-        loadPromise: Promise.resolve(),
-        context: undefined!,
-        abortController: new AbortController(),
-        shouldReloadDeps: undefined,
-        fetchedAt: 0,
-        cause,
-      }
+    matchedRoutes.forEach((route, index) => {
+      // Take each matched route and resolve + validate its search params
+      // This has to happen serially because each route's search params
+      // can depend on the parent route's search params
+      // It must also happen before we create the match so that we can
+      // pass the search params to the route's potential key function
+      // which is used to uniquely identify the route match in state
 
-      return routeMatch
-    })
+      const parentMatch = matches[index - 1]
 
-    // Take each match and resolve its search params and context
-    // This has to happen after the matches are created or found
-    // so that we can use the parent match's search params and context
-    matches.forEach((match, i): any => {
-      const parentMatch = matches[i - 1]
-      const route = this.looseRoutesById[match.routeId]!
-
-      const searchInfo = (() => {
+      const [preMatchSearch, searchError]: [Record<string, any>, any] = (() => {
         // Validate the search params and stabilize them
-        const parentSearchInfo = {
-          search: parentMatch?.search ?? locationSearch,
-          routeSearch: parentMatch?.routeSearch ?? locationSearch,
-        }
+        const parentSearch = parentMatch?.search ?? locationSearch
 
         try {
           const validator =
@@ -622,35 +575,81 @@ export class Router<
               ? route.options.validateSearch.parse
               : route.options.validateSearch
 
-          let routeSearch = validator?.(parentSearchInfo.search) ?? {}
-
-          let search = {
-            ...parentSearchInfo.search,
-            ...routeSearch,
-          }
-
-          routeSearch = replaceEqualDeep(match.routeSearch, routeSearch)
-          search = replaceEqualDeep(match.search, search)
+          let search = validator?.(parentSearch) ?? {}
 
-          return {
-            routeSearch,
-            search,
-            searchDidChange: match.routeSearch !== routeSearch,
-          }
+          return [
+            {
+              ...parentSearch,
+              ...search,
+            },
+            undefined,
+          ]
         } catch (err: any) {
-          match.searchError = new SearchParamError(err.message, {
+          const searchError = new SearchParamError(err.message, {
             cause: err,
           })
 
           if (opts?.throwOnError) {
-            throw match.searchError
+            throw searchError
           }
 
-          return parentSearchInfo
+          return [parentSearch, searchError]
         }
       })()
 
-      Object.assign(match, searchInfo)
+      const interpolatedPath = interpolatePath(route.path, routeParams)
+      const matchId =
+        interpolatePath(route.id, routeParams, true) +
+        (route.options.key?.({
+          search: preMatchSearch,
+          location: this.state.location,
+        }) ?? '')
+
+      // Waste not, want not. If we already have a match for this route,
+      // reuse it. This is important for layout routes, which might stick
+      // around between navigation actions that only change leaf routes.
+      const existingMatch = getRouteMatch(this.state, matchId)
+
+      const cause = this.state.matches.find((d) => d.id === matchId)
+        ? 'stay'
+        : 'enter'
+
+      // Create a fresh route match
+      const hasLoaders = !!(
+        route.options.loader ||
+        componentTypes.some((d) => (route.options[d] as any)?.preload)
+      )
+
+      const match: AnyRouteMatch = existingMatch
+        ? { ...existingMatch, cause }
+        : {
+            id: matchId,
+            routeId: route.id,
+            params: routeParams,
+            pathname: joinPaths([this.basepath, interpolatedPath]),
+            updatedAt: Date.now(),
+            search: {} as any,
+            searchError: undefined,
+            status: hasLoaders ? 'pending' : 'success',
+            isFetching: false,
+            invalid: false,
+            error: undefined,
+            paramsError: parseErrors[index],
+            loadPromise: Promise.resolve(),
+            context: undefined!,
+            abortController: new AbortController(),
+            shouldReloadDeps: undefined,
+            fetchedAt: 0,
+            cause,
+          }
+
+      // Regardless of whether we're reusing an existing match or creating
+      // a new one, we need to update the match's search params
+      match.search = replaceEqualDeep(match.search, preMatchSearch)
+      // And also update the searchError if there is one
+      match.searchError = searchError
+
+      matches.push(match)
     })
 
     return matches as any
@@ -679,8 +678,8 @@ export class Router<
       let pathname = this.resolvePathWithBase(fromPathname, `${dest.to ?? ''}`)
 
       const fromMatches = this.matchRoutes(fromPathname, from.search)
-      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 }
@@ -734,10 +733,10 @@ export class Router<
         dest.search === true
           ? preFilteredSearch // Preserve resolvedFrom true
           : dest.search
-          ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-          : preSearchFilters?.length
-          ? preFilteredSearch // Preserve resolvedFrom filters
-          : {}
+            ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+            : preSearchFilters?.length
+              ? preFilteredSearch // Preserve resolvedFrom filters
+              : {}
 
       // Then post filters
       const postFilteredSearch = postSearchFilters?.length
@@ -752,8 +751,8 @@ export class Router<
         dest.hash === true
           ? from.hash
           : dest.hash
-          ? functionalUpdate(dest.hash!, from.hash)
-          : from.hash
+            ? functionalUpdate(dest.hash!, from.hash)
+            : from.hash
 
       const hashStr = hash ? `#${hash}` : ''
 
@@ -761,8 +760,8 @@ export class Router<
         dest.state === true
           ? from.state
           : dest.state
-          ? functionalUpdate(dest.state, from.state)
-          : from.state
+            ? functionalUpdate(dest.state, from.state)
+            : from.state
 
       nextState = replaceEqualDeep(from.state, nextState)
 
@@ -945,10 +944,12 @@ export class Router<
     checkLatest,
     matches,
     preload,
+    invalidate,
   }: {
     checkLatest: () => Promise<void> | undefined
     matches: AnyRouteMatch[]
     preload?: boolean
+    invalidate?: boolean
   }): Promise<RouteMatch[]> => {
     let latestPromise
     let firstBadMatchIndex: number | undefined
@@ -1086,7 +1087,7 @@ export class Router<
                 ? route.options.shouldReload?.(loaderContext)
                 : !!(route.options.shouldReload ?? true)
 
-            if (match.cause === 'enter') {
+            if (match.cause === 'enter' || invalidate) {
               match.shouldReloadDeps = shouldReloadDeps
             } else if (match.cause === 'stay') {
               if (typeof shouldReloadDeps === 'object') {
@@ -1192,7 +1193,12 @@ export class Router<
     return matches
   }
 
-  load: LoadFn = async () => {
+  invalidate = () =>
+    this.load({
+      invalidate: true,
+    })
+
+  load = async (opts?: { invalidate?: boolean }): Promise<void> => {
     const promise = new Promise<void>(async (resolve, reject) => {
       const next = this.latestLocation
       const prevLocation = this.state.resolvedLocation
@@ -1236,6 +1242,7 @@ export class Router<
           await this.loadMatches({
             matches,
             checkLatest: () => this.checkLatest(promise),
+            invalidate: opts?.invalidate,
           })
         } catch (err) {
           // swallow this error, since we'll display the