@tanstack/react-router 0.0.1-beta.276 → 0.0.1-beta.277

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.276",
+  "version": "0.0.1-beta.277",
   "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.276"
+    "@tanstack/history": "0.0.1-beta.277"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -370,6 +370,30 @@ export function useParentMatches<T = RouteMatch[]>(opts?: {
   })
 }
 
+export function useLoaderDeps<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
+    TRouteTree,
+    TFrom
+  >,
+  TSelected = Required<TRouteMatch>['loaderDeps'],
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatch) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...opts,
+    select: (s) => {
+      return typeof opts.select === 'function'
+        ? opts.select(s?.loaderDeps)
+        : s?.loaderDeps
+    },
+  })!
+}
+
 export function useLoaderData<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,

package/src/route.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import invariant from 'tiny-invariant'
-import { useLoaderData, useMatch } from './Matches'
+import { useLoaderData, useLoaderDeps, useMatch } from './Matches'
 import { AnyRouteMatch } from './Matches'
 import { NavigateOptions, ParsePathParams, ToSubOptions } from './link'
 import { ParsedLocation } from './location'
@@ -345,6 +345,7 @@ export class RouteApi<
   > = TRoute['types']['fullSearchSchema'],
   TAllParams extends AnyPathParams = TRoute['types']['allParams'],
   TAllContext extends Record<string, any> = TRoute['types']['allContext'],
+  TLoaderDeps extends Record<string, any> = TRoute['types']['loaderDeps'],
   TLoaderData extends any = TRoute['types']['loaderData'],
 > {
   id: TId
@@ -354,13 +355,13 @@ export class RouteApi<
   }
 
   useMatch = <TSelected = TAllContext>(opts?: {
-    select?: (search: TAllContext) => TSelected
+    select?: (s: TAllContext) => TSelected
   }): TSelected => {
     return useMatch({ ...opts, from: this.id }) as any
   }
 
   useRouteContext = <TSelected = TAllContext>(opts?: {
-    select?: (search: TAllContext) => TSelected
+    select?: (s: TAllContext) => TSelected
   }): TSelected => {
     return useMatch({
       ...opts,
@@ -370,19 +371,25 @@ export class RouteApi<
   }
 
   useSearch = <TSelected = TFullSearchSchema>(opts?: {
-    select?: (search: TFullSearchSchema) => TSelected
+    select?: (s: TFullSearchSchema) => TSelected
   }): TSelected => {
     return useSearch({ ...opts, from: this.id } as any)
   }
 
   useParams = <TSelected = TAllParams>(opts?: {
-    select?: (search: TAllParams) => TSelected
+    select?: (s: TAllParams) => TSelected
   }): TSelected => {
     return useParams({ ...opts, from: this.id } as any)
   }
 
+  useLoaderDeps = <TSelected = TLoaderDeps>(opts?: {
+    select?: (s: TLoaderDeps) => TSelected
+  }): TSelected => {
+    return useLoaderDeps({ ...opts, from: this.id } as any) as any
+  }
+
   useLoaderData = <TSelected = TLoaderData>(opts?: {
-    select?: (search: TLoaderData) => TSelected
+    select?: (s: TLoaderData) => TSelected
   }): TSelected => {
     return useLoaderData({ ...opts, from: this.id } as any) as any
   }
@@ -628,6 +635,12 @@ export class Route<
     return useParams({ ...opts, from: this.id } as any)
   }
 
+  useLoaderDeps = <TSelected = TLoaderDeps>(opts?: {
+    select?: (s: TLoaderDeps) => TSelected
+  }): TSelected => {
+    return useLoaderDeps({ ...opts, from: this.id } as any) as any
+  }
+
   useLoaderData = <TSelected = TLoaderData>(opts?: {
     select?: (search: TLoaderData) => TSelected
   }): TSelected => {