@tanstack/react-router 0.0.1-beta.226 → 0.0.1-beta.228

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.226",
+  "version": "0.0.1-beta.228",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.16.7",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.226"
+    "@tanstack/history": "0.0.1-beta.228"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -14,7 +14,7 @@ import {
   RoutePaths,
 } from './routeInfo'
 import { RegisteredRouter } from './router'
-import { NoInfer, StrictOrFrom } from './utils'
+import { NoInfer, StrictOrFrom, pick } from './utils'
 
 export interface RouteMatch<
   TRouteTree extends AnyRoute = AnyRoute,
@@ -35,7 +35,6 @@ export interface RouteMatch<
   loaderData?: RouteById<TRouteTree, TRouteId>['types']['loaderData']
   __resolveLoadPromise?: () => void
   context: RouteById<TRouteTree, TRouteId>['types']['allContext']
-  routeSearch: RouteById<TRouteTree, TRouteId>['types']['searchSchema']
   search: FullSearchSchema<TRouteTree> &
     RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema']
   fetchedAt: number
@@ -85,7 +84,6 @@ export function Matches() {
   )
 }
 
-const defaultPending = () => null
 function SafeFragment(props: any) {
   return <>{props.children}</>
 }
@@ -98,17 +96,17 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
   const locationKey = useRouterState().location.state?.key
 
   const PendingComponent = (route.options.pendingComponent ??
-    options.defaultPendingComponent ??
-    defaultPending) as any
+    options.defaultPendingComponent) as any
 
   const routeErrorComponent =
     route.options.errorComponent ??
     options.defaultErrorComponent ??
     ErrorComponent
 
-  const ResolvedSuspenseBoundary = route.options.wrapInSuspense
-    ? React.Suspense
-    : SafeFragment
+  const ResolvedSuspenseBoundary =
+    route.options.wrapInSuspense ?? PendingComponent
+      ? React.Suspense
+      : SafeFragment
 
   const errorComponent = routeErrorComponent
     ? React.useCallback(
@@ -125,6 +123,8 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
       )
     : undefined
 
+  const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment
+
   return (
     <matchesContext.Provider value={matches}>
       <ResolvedSuspenseBoundary
@@ -135,21 +135,15 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
           useParams: route.useParams,
         })}
       >
-        {errorComponent ? (
-          <CatchBoundary
-            resetKey={locationKey}
-            errorComponent={errorComponent}
-            onCatch={() => {
-              warning(false, `Error in route match: ${match.id}`)
-            }}
-          >
-            <MatchInner match={match} />
-          </CatchBoundary>
-        ) : (
-          <SafeFragment>
-            <MatchInner match={match} />
-          </SafeFragment>
-        )}
+        <ResolvedCatchBoundary
+          resetKey={locationKey}
+          errorComponent={errorComponent}
+          onCatch={() => {
+            warning(false, `Error in route match: ${match.id}`)
+          }}
+        >
+          <MatchInner match={match} />
+        </ResolvedCatchBoundary>
       </ResolvedSuspenseBoundary>
     </matchesContext.Provider>
   )

package/src/RouterProvider.tsx

@@ -1,11 +1,4 @@
-import {
-  HistoryLocation,
-  HistoryState,
-  RouterHistory,
-  createBrowserHistory,
-} from '@tanstack/history'
 import * as React from 'react'
-import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
 import { Matches } from './Matches'
 import {
@@ -16,53 +9,18 @@ import {
   ToOptions,
 } from './link'
 import { ParsedLocation } from './location'
-import {
-  cleanPath,
-  interpolatePath,
-  joinPaths,
-  matchPathname,
-  parsePathname,
-  resolvePath,
-  trimPath,
-  trimPathRight,
-} from './path'
-import { isRedirect } from './redirects'
-import {
-  AnyPathParams,
-  AnyRoute,
-  AnySearchSchema,
-  LoaderFnContext,
-  Route,
-} from './route'
-import {
-  FullSearchSchema,
-  RouteById,
-  RoutePaths,
-  RoutesById,
-  RoutesByPath,
-} from './routeInfo'
+import { AnyRoute } from './route'
+import { RouteById, RoutePaths } from './routeInfo'
 import {
   BuildNextOptions,
-  DehydratedRouteMatch,
   RegisteredRouter,
   Router,
   RouterOptions,
   RouterState,
-  componentTypes,
 } from './router'
-import {
-  NoInfer,
-  PickAsRequired,
-  functionalUpdate,
-  last,
-  deepEqual,
-  pick,
-  replaceEqualDeep,
-  useStableCallback,
-  escapeJSON,
-} from './utils'
+import { NoInfer, PickAsRequired } from './utils'
 import { MatchRouteOptions } from './Matches'
-import { AnyRouteMatch, RouteMatch } from './Matches'
+import { RouteMatch } from './Matches'
 
 export interface CommitLocationOptions {
   replace?: boolean
@@ -108,31 +66,6 @@ export type BuildLocationFn<TRouteTree extends AnyRoute> = (
 
 export type InjectedHtmlEntry = string | (() => Promise<string> | string)
 
-// export type RouterContext<
-//   TRouteTree extends AnyRoute,
-//   // TDehydrated extends Record<string, any>,
-// > = {
-//   buildLink: BuildLinkFn<TRouteTree>
-//   state: RouterState<TRouteTree>
-//   navigate: NavigateFn<TRouteTree>
-//   matchRoute: MatchRouteFn<TRouteTree>
-//   routeTree: TRouteTree
-//   routesById: RoutesById<TRouteTree>
-//   options: RouterOptions<TRouteTree>
-//   history: RouterHistory
-//   load: LoadFn
-//   buildLocation: BuildLocationFn<TRouteTree>
-//   subscribe: Router<TRouteTree>['subscribe']
-//   resetNextScrollRef: React.MutableRefObject<boolean>
-//   injectedHtmlRef: React.MutableRefObject<InjectedHtmlEntry[]>
-//   injectHtml: (entry: InjectedHtmlEntry) => void
-//   dehydrateData: <T>(
-//     key: any,
-//     getData: T | (() => Promise<T> | T),
-//   ) => () => void
-//   hydrateData: <T>(key: any) => T | undefined
-// }
-
 export const routerContext = React.createContext<Router<any>>(null!)
 
 if (typeof document !== 'undefined') {

package/src/fileRoute.ts

@@ -14,7 +14,7 @@ import {
   TrimPathLeft,
   RouteConstraints,
 } from './route'
-import { Assign, AssignAll, Expand, IsAny } from './utils'
+import { Assign, Expand, IsAny } from './utils'
 
 export interface FileRoutesByPath {
   // '/': {
@@ -86,13 +86,14 @@ export class FileRoute<
 
   createRoute = <
     TSearchSchema extends RouteConstraints['TSearchSchema'] = {},
-    TFullSearchSchema extends RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<
+    TFullSearchSchema extends
+      RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<
       TParentRoute,
       TSearchSchema
     >,
-    TParams extends RouteConstraints['TParams'] = ParsePathParams<TPath> extends never
-      ? AnyPathParams
-      : Record<ParsePathParams<TPath>, RouteConstraints['TPath']>,
+    TParams extends RouteConstraints['TParams'] = Expand<
+      Record<ParsePathParams<TPath>, string>
+    >,
     TAllParams extends RouteConstraints['TAllParams'] = MergeFromFromParent<
       TParentRoute['types']['allParams'],
       TParams
@@ -112,7 +113,7 @@ export class FileRoute<
       RouteOptions<
         TParentRoute,
         string,
-        string,
+        TPath,
         TSearchSchema,
         TFullSearchSchema,
         TParams,

package/src/route.ts

@@ -137,7 +137,8 @@ export type BaseRouteOptions<
           TRouteContext
         >
       }) & {
-    loader?: RouteLoadFn<
+    key?: (opts: { search: TFullSearchSchema; location: ParsedLocation }) => any
+    loader?: RouteLoaderFn<
       TAllParams,
       TFullSearchSchema,
       NoInfer<TAllContext>,
@@ -265,7 +266,7 @@ export type ParentParams<TParentParams> = AnyPathParams extends TParentParams
       [Key in keyof TParentParams]?: DefinedPathParamWarning
     }
 
-export type RouteLoadFn<
+export type RouteLoaderFn<
   TAllParams = {},
   TFullSearchSchema extends Record<string, any> = {},
   TAllContext extends Record<string, any> = AnyContext,

package/src/router.ts

@@ -553,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)
+    const matches: AnyRouteMatch[] = []
 
-      // 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)
+    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
 
-      const cause = this.state.matches.find((d) => d.id === matchId)
-        ? 'stay'
-        : 'enter'
-
-      if (existingMatch) {
-        return { ...existingMatch, cause }
-      }
+      const parentMatch = matches[index - 1]
 
-      // Create a fresh route match
-      const hasLoaders = !!(
-        route.options.loader ||
-        componentTypes.some((d) => (route.options[d] as any)?.preload)
-      )
-
-      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,
-      }
-
-      return routeMatch
-    })
-
-    // 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 =
@@ -621,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