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

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.278",
   "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.278"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -95,6 +95,8 @@ export function Match({ matchId }: { matchId: string }) {
   const PendingComponent = (route.options.pendingComponent ??
     router.options.defaultPendingComponent) as any
 
+  const pendingElement = PendingComponent ? <PendingComponent /> : null
+
   const routeErrorComponent =
     route.options.errorComponent ??
     router.options.defaultErrorComponent ??
@@ -115,7 +117,7 @@ export function Match({ matchId }: { matchId: string }) {
 
   return (
     <matchContext.Provider value={matchId}>
-      <ResolvedSuspenseBoundary fallback={PendingComponent}>
+      <ResolvedSuspenseBoundary fallback={pendingElement}>
         <ResolvedCatchBoundary
           getResetKey={() => router.state.resolvedLocation.state?.key}
           errorComponent={routeErrorComponent}
@@ -123,7 +125,7 @@ export function Match({ matchId }: { matchId: string }) {
             warning(false, `Error in route match: ${matchId}`)
           }}
         >
-          <MatchInner matchId={matchId!} pendingElement={PendingComponent} />
+          <MatchInner matchId={matchId!} pendingElement={pendingElement} />
         </ResolvedCatchBoundary>
       </ResolvedSuspenseBoundary>
     </matchContext.Provider>
@@ -161,7 +163,7 @@ function MatchInner({
 
   if (match.status === 'pending') {
     if (match.showPending) {
-      return pendingElement || null
+      return pendingElement
     }
     throw match.loadPromise
   }
@@ -218,6 +220,7 @@ export type UseMatchRouteOptions<
 export function useMatchRoute<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
 >() {
+  useRouterState({ select: (s) => [s.location, s.resolvedLocation] })
   const { matchRoute } = useRouter()
 
   return React.useCallback(
@@ -370,6 +373,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 => {

package/src/router.ts

@@ -989,11 +989,11 @@ export class Router<
     let firstBadMatchIndex: number | undefined
 
     const updateMatch = (match: AnyRouteMatch) => {
-      const isPreload = this.state.preloadMatches.find((d) => d.id === match.id)
+      // const isPreload = this.state.preloadMatches.find((d) => d.id === match.id)
       const isPending = this.state.pendingMatches?.find(
         (d) => d.id === match.id,
       )
-      const matchesKey = isPreload
+      const matchesKey = preload
         ? 'preloadMatches'
         : isPending
           ? 'pendingMatches'