@tanstack/react-router 0.0.1-beta.274 → 0.0.1-beta.275

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.274",
+  "version": "0.0.1-beta.275",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -44,7 +44,7 @@
     "@tanstack/store": "^0.1.3",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.274"
+    "@tanstack/history": "0.0.1-beta.275"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -43,9 +43,10 @@ export interface RouteMatch<
   shouldReloadDeps: any
   abortController: AbortController
   cause: 'preload' | 'enter' | 'stay'
+  loaderDeps: RouteById<TRouteTree, TRouteId>['types']['loaderDeps']
 }
 
-export type AnyRouteMatch = RouteMatch<any>
+export type AnyRouteMatch = RouteMatch<any, any>
 
 export function Matches() {
   const router = useRouter()

package/src/fileRoute.ts

@@ -105,6 +105,7 @@ export class FileRoute<
       Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
     >,
     TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+    TLoaderDeps extends Record<string, any> = {},
     TLoaderData extends any = unknown,
     TChildren extends RouteConstraints['TChildren'] = unknown,
     TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
@@ -120,6 +121,7 @@ export class FileRoute<
         TAllParams,
         TRouteContext,
         TContext,
+        TLoaderDeps,
         TLoaderData
       >,
       'getParentRoute' | 'path' | 'id'
@@ -138,6 +140,7 @@ export class FileRoute<
     TRouteContext,
     TContext,
     TRouterContext,
+    TLoaderDeps,
     TLoaderData,
     TChildren,
     TRouteTree

package/src/redirects.ts

@@ -5,7 +5,7 @@ import { RegisteredRouter } from './router'
 
 // Detect if we're in the DOM
 
-export type AnyRedirect = Redirect<any, any, any>
+export type AnyRedirect = Redirect<any, any, any, any, any>
 
 export type Redirect<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],

package/src/route.ts

@@ -62,6 +62,7 @@ export type RouteOptions<
   TAllParams extends AnyPathParams = TParams,
   TRouteContext extends RouteContext = RouteContext,
   TAllContext extends Record<string, any> = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
   TLoaderData extends any = unknown,
 > = BaseRouteOptions<
   TParentRoute,
@@ -73,6 +74,7 @@ export type RouteOptions<
   TAllParams,
   TRouteContext,
   TAllContext,
+  TLoaderDeps,
   TLoaderData
 > &
   UpdatableRouteOptions<NoInfer<TFullSearchSchema>>
@@ -82,10 +84,6 @@ export type ParamsFallback<
   TParams,
 > = unknown extends TParams ? Record<ParsePathParams<TPath>, string> : TParams
 
-type Prefix<T extends string, U extends string> = U extends `${T}${infer _}`
-  ? U
-  : never
-
 export type BaseRouteOptions<
   TParentRoute extends AnyRoute = AnyRoute,
   TCustomId extends string = string,
@@ -96,6 +94,7 @@ export type BaseRouteOptions<
   TAllParams = ParamsFallback<TPath, TParams>,
   TRouteContext extends RouteContext = RouteContext,
   TAllContext extends Record<string, any> = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
   TLoaderData extends any = unknown,
 > = RoutePathOptions<TCustomId, TPath> & {
   getParentRoute: () => TParentRoute
@@ -131,10 +130,10 @@ export type BaseRouteOptions<
           TRouteContext
         >
       }) & {
-    key?: (opts: { search: TFullSearchSchema; location: ParsedLocation }) => any
+    loaderDeps?: (opts: { search: TFullSearchSchema }) => TLoaderDeps
     loader?: RouteLoaderFn<
       TAllParams,
-      TFullSearchSchema,
+      NoInfer<TLoaderDeps>,
       NoInfer<TAllContext>,
       NoInfer<TRouteContext>,
       TLoaderData
@@ -241,31 +240,26 @@ export type ParentParams<TParentParams> = AnyPathParams extends TParentParams
 
 export type RouteLoaderFn<
   TAllParams = {},
-  TFullSearchSchema extends Record<string, any> = {},
+  TLoaderDeps extends Record<string, any> = {},
   TAllContext extends Record<string, any> = AnyContext,
   TRouteContext extends Record<string, any> = AnyContext,
   TLoaderData extends any = unknown,
 > = (
-  match: LoaderFnContext<
-    TAllParams,
-    TFullSearchSchema,
-    TAllContext,
-    TRouteContext
-  >,
+  match: LoaderFnContext<TAllParams, TLoaderDeps, TAllContext, TRouteContext>,
 ) => Promise<TLoaderData> | TLoaderData
 
 export interface LoaderFnContext<
   TAllParams = {},
-  TFullSearchSchema extends Record<string, any> = {},
+  TLoaderDeps extends Record<string, any> = {},
   TAllContext extends Record<string, any> = AnyContext,
   TRouteContext extends Record<string, any> = AnyContext,
 > {
   abortController: AbortController
   preload: boolean
   params: TAllParams
-  search: TFullSearchSchema
+  deps: TLoaderDeps
   context: Expand<Assign<TAllContext, TRouteContext>>
-  location: ParsedLocation<TFullSearchSchema>
+  location: ParsedLocation // Do not supply search schema here so as to demotivate people from trying to shortcut loaderDeps
   navigate: (opts: NavigateOptions<AnyRoute>) => Promise<void>
   parentMatchPromise?: Promise<void>
   cause: 'preload' | 'enter' | 'stay'
@@ -308,6 +302,8 @@ export interface AnyRoute
     any,
     any,
     any,
+    any,
+    any,
     any
   > {}
 
@@ -425,6 +421,7 @@ export class Route<
     Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
   >,
   TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
   TLoaderData extends any = unknown,
   TChildren extends RouteConstraints['TChildren'] = unknown,
   TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
@@ -440,6 +437,7 @@ export class Route<
     TAllParams,
     TRouteContext,
     TAllContext,
+    TLoaderDeps,
     TLoaderData
   >
 
@@ -472,6 +470,7 @@ export class Route<
       TAllParams,
       TRouteContext,
       TAllContext,
+      TLoaderDeps,
       TLoaderData
     >,
   ) {
@@ -501,6 +500,7 @@ export class Route<
     routeTree: TRouteTree
     routerContext: TRouterContext
     loaderData: TLoaderData
+    loaderDeps: TLoaderDeps
   }
 
   init = (opts: { originalIndex: number }) => {
@@ -516,6 +516,7 @@ export class Route<
       TAllParams,
       TRouteContext,
       TAllContext,
+      TLoaderDeps,
       TLoaderData
     > &
       RoutePathOptionsIntersection<TCustomId, TPath>
@@ -585,6 +586,8 @@ export class Route<
     TRouteContext,
     TAllContext,
     TRouterContext,
+    TLoaderDeps,
+    TLoaderData,
     TNewChildren,
     TRouteTree
   > => {
@@ -632,12 +635,13 @@ export class Route<
   }
 }
 
-export type AnyRootRoute = RootRoute<any, any, any>
+export type AnyRootRoute = RootRoute<any, any, any, any>
 
 export function rootRouteWithContext<TRouterContext extends {}>() {
   return <
     TSearchSchema extends Record<string, any> = {},
     TRouteContext extends RouteContext = RouteContext,
+    TLoaderDeps extends Record<string, any> = {},
     TLoaderData extends any = unknown,
   >(
     options?: Omit<
@@ -651,7 +655,8 @@ export function rootRouteWithContext<TRouterContext extends {}>() {
         {}, // TAllParams
         TRouteContext, // TRouteContext
         Assign<TRouterContext, TRouteContext>, // TAllContext
-        TLoaderData // TLoaderData
+        TLoaderDeps,
+        TLoaderData // TLoaderData,
       >,
       | 'path'
       | 'id'
@@ -669,6 +674,7 @@ export class RootRoute<
   TSearchSchema extends Record<string, any> = {},
   TRouteContext extends RouteContext = RouteContext,
   TRouterContext extends {} = {},
+  TLoaderDeps extends Record<string, any> = {},
   TLoaderData extends any = unknown,
 > extends Route<
   any, // TParentRoute
@@ -683,6 +689,7 @@ export class RootRoute<
   TRouteContext, // TRouteContext
   Expand<Assign<TRouterContext, TRouteContext>>, // TAllContext
   TRouterContext, // TRouterContext
+  TLoaderDeps,
   TLoaderData,
   any, // TChildren
   any // TRouteTree
@@ -699,6 +706,7 @@ export class RootRoute<
         {}, // TAllParams
         TRouteContext, // TRouteContext
         Assign<TRouterContext, TRouteContext>, // TAllContext
+        TLoaderDeps,
         TLoaderData
       >,
       | 'path'
@@ -809,6 +817,7 @@ export class NotFoundRoute<
     Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
   >,
   TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
   TLoaderData extends any = unknown,
   TChildren extends RouteConstraints['TChildren'] = unknown,
   TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
@@ -825,6 +834,7 @@ export class NotFoundRoute<
   TRouteContext,
   TAllContext,
   TRouterContext,
+  TLoaderDeps,
   TLoaderData,
   TChildren,
   TRouteTree
@@ -841,6 +851,7 @@ export class NotFoundRoute<
         {},
         TRouteContext,
         TAllContext,
+        TLoaderDeps,
         TLoaderData
       >,
       'caseSensitive' | 'parseParams' | 'stringifyParams' | 'path' | 'id'

package/src/routeInfo.ts

@@ -19,6 +19,8 @@ export type ParseRouteChildren<TRouteTree extends AnyRoute> =
     any,
     any,
     any,
+    any,
+    any,
     infer TChildren,
     any
   >

package/src/router.ts

@@ -617,13 +617,21 @@ export class Router<
         }
       })()
 
+      // This is where we need to call route.options.loaderDeps() to get any additional
+      // deps that the route's loader function might need to run. We need to do this
+      // before we create the match so that we can pass the deps to the route's
+      // potential key function which is used to uniquely identify the route match in state
+
+      const loaderDeps =
+        route.options.loaderDeps?.({
+          search: preMatchSearch,
+        }) ?? ''
+
+      const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : ''
+
       const interpolatedPath = interpolatePath(route.fullPath, routeParams)
       const matchId =
-        interpolatePath(route.id, routeParams, true) +
-        (route.options.key?.({
-          search: preMatchSearch,
-          location: this.state.location,
-        }) ?? '')
+        interpolatePath(route.id, routeParams, true) + loaderDepsHash
 
       // Waste not, want not. If we already have a match for this route,
       // reuse it. This is important for layout routes, which might stick
@@ -662,6 +670,7 @@ export class Router<
             shouldReloadDeps: undefined,
             fetchCount: 0,
             cause,
+            loaderDeps,
           }
 
       // Regardless of whether we're reusing an existing match or creating
@@ -1133,7 +1142,7 @@ export class Router<
             } else {
               const loaderContext: LoaderFnContext = {
                 params: match.params,
-                search: match.search,
+                deps: match.loaderDeps,
                 preload: !!preload,
                 parentMatchPromise,
                 abortController: match.abortController,