@tanstack/react-router 0.0.1-beta.221 → 0.0.1-beta.223

package/package.json

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

package/src/Matches.tsx

@@ -2,14 +2,50 @@ import * as React from 'react'
 import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
-import { RouteMatch } from './RouterProvider'
 import { useRouter, useRouterState } from './RouterProvider'
 import { ResolveRelativePath, ToOptions } from './link'
 import { AnyRoute, ReactNode, rootRouteId } from './route'
-import { RouteById, RouteByPath, RouteIds, RoutePaths } from './routeInfo'
+import {
+  FullSearchSchema,
+  ParseRoute,
+  RouteById,
+  RouteByPath,
+  RouteIds,
+  RoutePaths,
+} from './routeInfo'
 import { RegisteredRouter } from './router'
 import { NoInfer, StrictOrFrom } from './utils'
 
+export interface RouteMatch<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
+> {
+  id: string
+  routeId: TRouteId
+  pathname: string
+  params: RouteById<TRouteTree, TRouteId>['types']['allParams']
+  status: 'pending' | 'success' | 'error'
+  isFetching: boolean
+  invalid: boolean
+  error: unknown
+  paramsError: unknown
+  searchError: unknown
+  updatedAt: number
+  loadPromise?: Promise<void>
+  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
+  shouldReloadDeps: any
+  abortController: AbortController
+  cause: 'enter' | 'stay'
+}
+
+export type AnyRouteMatch = RouteMatch<any>
+
 export function Matches() {
   const { routesById, state } = useRouter()
   const { matches } = state

package/src/RouterProvider.tsx

@@ -36,9 +36,7 @@ import {
 } from './route'
 import {
   FullSearchSchema,
-  ParseRoute,
   RouteById,
-  RouteIds,
   RoutePaths,
   RoutesById,
   RoutesByPath,
@@ -64,6 +62,7 @@ import {
   escapeJSON,
 } from './utils'
 import { MatchRouteOptions } from './Matches'
+import { AnyRouteMatch, RouteMatch } from './Matches'
 
 export interface CommitLocationOptions {
   replace?: boolean
@@ -475,8 +474,12 @@ export function RouterProvider<
         // around between navigation actions that only change leaf routes.
         const existingMatch = getRouteMatch(state, matchId)
 
+        const cause = state.matches.find((d) => d.id === matchId)
+          ? 'stay'
+          : 'enter'
+
         if (existingMatch) {
-          return { ...existingMatch }
+          return { ...existingMatch, cause }
         }
 
         // Create a fresh route match
@@ -504,6 +507,7 @@ export function RouterProvider<
           abortController: new AbortController(),
           shouldReloadDeps: undefined,
           fetchedAt: 0,
+          cause,
         }
 
         return routeMatch
@@ -922,6 +926,7 @@ export function RouterProvider<
                 navigate: (opts) =>
                   navigate({ ...opts, from: match.pathname } as any),
                 buildLocation,
+                cause: match.cause,
               })) ?? ({} as any)
 
             const context = {
@@ -977,10 +982,6 @@ export function RouterProvider<
             if (match.isFetching) {
               loadPromise = getRouteMatch(state, match.id)?.loadPromise
             } else {
-              const cause = state.matches.find((d) => d.id === match.id)
-                ? 'stay'
-                : 'enter'
-
               const loaderContext: LoaderFnContext = {
                 params: match.params,
                 search: match.search,
@@ -991,18 +992,20 @@ export function RouterProvider<
                 location: state.location,
                 navigate: (opts) =>
                   navigate({ ...opts, from: match.pathname } as any),
-                cause,
+                cause: match.cause,
               }
 
               // Default to reloading the route all the time
               let shouldReload = true
 
-              if (cause !== 'enter') {
-                let shouldReloadDeps =
-                  typeof route.options.shouldReload === 'function'
-                    ? route.options.shouldReload?.(loaderContext)
-                    : !!(route.options.shouldReload ?? true)
+              let shouldReloadDeps =
+                typeof route.options.shouldReload === 'function'
+                  ? route.options.shouldReload?.(loaderContext)
+                  : !!(route.options.shouldReload ?? true)
 
+              if (match.cause === 'enter') {
+                match.shouldReloadDeps = shouldReloadDeps
+              } else if (match.cause === 'stay') {
                 if (typeof shouldReloadDeps === 'object') {
                   // compare the deps to see if they've changed
                   shouldReload = !deepEqual(
@@ -1545,31 +1548,3 @@ export function useRouter<
   warning(value, 'useRouter must be used inside a <RouterProvider> component!')
   return value as any
 }
-export interface RouteMatch<
-  TRouteTree extends AnyRoute = AnyRoute,
-  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
-> {
-  id: string
-  routeId: TRouteId
-  pathname: string
-  params: RouteById<TRouteTree, TRouteId>['types']['allParams']
-  status: 'pending' | 'success' | 'error'
-  isFetching: boolean
-  invalid: boolean
-  error: unknown
-  paramsError: unknown
-  searchError: unknown
-  updatedAt: number
-  loadPromise?: Promise<void>
-  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
-  shouldReloadDeps: any
-  abortController: AbortController
-}
-
-export type AnyRouteMatch = RouteMatch<any>

package/src/route.ts

@@ -2,7 +2,7 @@ import { HistoryLocation } from '@tanstack/history'
 import * as React from 'react'
 import invariant from 'tiny-invariant'
 import { useLoaderData, useMatch } from './Matches'
-import { AnyRouteMatch } from './RouterProvider'
+import { AnyRouteMatch } from './Matches'
 import { NavigateOptions, ParsePathParams, ToSubOptions } from './link'
 import { ParsedLocation } from './location'
 import { joinPaths, trimPath } from './path'
@@ -178,6 +178,7 @@ type BeforeLoadFn<
   location: ParsedLocation
   navigate: NavigateFn<AnyRoute>
   buildLocation: BuildLocationFn<AnyRoute>
+  cause: 'enter' | 'stay'
 }) => Promise<TRouteContext> | TRouteContext | void
 
 export type UpdatableRouteOptions<

package/src/router.ts

@@ -17,7 +17,7 @@ import {
   PendingRouteComponent,
   RouteComponent,
 } from './route'
-import { RouteMatch } from './RouterProvider'
+import { RouteMatch } from './Matches'
 import { ParsedLocation } from './location'
 import { LocationState } from './location'
 import { SearchSerializer, SearchParser } from './searchParams'

package/src/useSearch.tsx

@@ -1,7 +1,7 @@
 import { AnyRoute } from './route'
 import { RouteIds, RouteById } from './routeInfo'
 import { RegisteredRouter } from './router'
-import { RouteMatch } from './RouterProvider'
+import { RouteMatch } from './Matches'
 import { useMatch } from './Matches'
 import { StrictOrFrom } from './utils'
 

package/src/utils.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useMatch } from './Matches'
-import { RouteMatch } from './RouterProvider'
+import { RouteMatch } from './Matches'
 import { AnyRoute } from './route'
 import { ParseRoute, RouteIds, RoutesById, RouteById } from './routeInfo'
 import { RegisteredRouter } from './router'