@tanstack/react-router 0.0.1-beta.215 → 0.0.1-beta.217

package/package.json

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

package/src/RouterProvider.tsx

@@ -27,7 +27,13 @@ import {
   trimPathRight,
 } from './path'
 import { isRedirect } from './redirects'
-import { AnyPathParams, AnyRoute, AnySearchSchema, Route } from './route'
+import {
+  AnyPathParams,
+  AnyRoute,
+  AnySearchSchema,
+  LoaderFnContext,
+  Route,
+} from './route'
 import {
   FullSearchSchema,
   ParseRoute,
@@ -51,7 +57,7 @@ import {
   PickAsRequired,
   functionalUpdate,
   last,
-  partialDeepEqual,
+  deepEqual,
   pick,
   replaceEqualDeep,
   useStableCallback,
@@ -486,6 +492,7 @@ export function RouterProvider<
           loadPromise: Promise.resolve(),
           context: undefined!,
           abortController: new AbortController(),
+          shouldReloadDeps: undefined,
           fetchedAt: 0,
         }
 
@@ -960,22 +967,11 @@ export function RouterProvider<
             if (match.isFetching) {
               loadPromise = getRouteMatch(state, match.id)?.loadPromise
             } else {
-              matches[index] = match = {
-                ...match,
-                isFetching: true,
-              }
+              const cause = state.matches.find((d) => d.id === match.id)
+                ? 'stay'
+                : 'enter'
 
-              const componentsPromise = Promise.all(
-                componentTypes.map(async (type) => {
-                  const component = route.options[type]
-
-                  if ((component as any)?.preload) {
-                    await (component as any).preload()
-                  }
-                }),
-              )
-
-              const loaderPromise = route.options.loader?.({
+              const loaderContext: LoaderFnContext = {
                 params: match.params,
                 search: match.search,
                 preload: !!preload,
@@ -985,12 +981,62 @@ export function RouterProvider<
                 location: state.location,
                 navigate: (opts) =>
                   navigate({ ...opts, from: match.pathname } as any),
-              })
+                cause,
+              }
+
+              // Default to reloading the route all the time
+              let shouldReload = true
+              let shouldReloadDeps =
+                typeof route.options.shouldReload === 'function'
+                  ? route.options.shouldReload?.(loaderContext)
+                  : !!route.options.shouldReload
+
+              if (typeof shouldReloadDeps === 'object') {
+                // compare the deps to see if they've changed
+                shouldReload = !deepEqual(
+                  shouldReloadDeps,
+                  match.shouldReloadDeps,
+                )
+                console.log(
+                  shouldReloadDeps,
+                  match.shouldReloadDeps,
+                  shouldReload,
+                )
+
+                match.shouldReloadDeps = shouldReloadDeps
+              } else {
+                shouldReload = !!shouldReloadDeps
+              }
+
+              // If the user doesn't want the route to reload, just
+              // resolve with the existing loader data
+
+              if (!shouldReload) {
+                loadPromise = Promise.resolve(match.loaderData)
+              } else {
+                // Otherwise, load the route
+                matches[index] = match = {
+                  ...match,
+                  isFetching: true,
+                }
 
-              loadPromise = Promise.all([
-                componentsPromise,
-                loaderPromise,
-              ]).then((d) => d[1])
+                const componentsPromise = Promise.all(
+                  componentTypes.map(async (type) => {
+                    const component = route.options[type]
+
+                    if ((component as any)?.preload) {
+                      await (component as any).preload()
+                    }
+                  }),
+                )
+
+                const loaderPromise = route.options.loader?.(loaderContext)
+
+                loadPromise = Promise.all([
+                  componentsPromise,
+                  loaderPromise,
+                ]).then((d) => d[1])
+              }
             }
 
             matches[index] = match = {
@@ -1226,7 +1272,7 @@ export function RouterProvider<
       : true
     const searchTest =
       activeOptions?.includeSearch ?? true
-        ? partialDeepEqual(latestLocationRef.current.search, next.search)
+        ? deepEqual(latestLocationRef.current.search, next.search, true)
         : true
 
     // The final "active" test
@@ -1381,9 +1427,7 @@ export function RouterProvider<
       }
 
       if (match && (opts?.includeSearch ?? true)) {
-        return partialDeepEqual(baseLocation.search, next.search)
-          ? match
-          : false
+        return deepEqual(baseLocation.search, next.search, true) ? match : false
       }
 
       return match
@@ -1468,6 +1512,7 @@ export interface RouteMatch<
   search: FullSearchSchema<TRouteTree> &
     RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema']
   fetchedAt: number
+  shouldReloadDeps: any
   abortController: AbortController
 }
 

package/src/route.ts

@@ -108,6 +108,16 @@ export type BaseRouteOptions<
 > = RoutePathOptions<TCustomId, TPath> & {
   getParentRoute: () => TParentRoute
   validateSearch?: SearchSchemaValidator<TSearchSchema>
+  shouldReload?:
+    | boolean
+    | ((
+        match: LoaderFnContext<
+          TAllParams,
+          TFullSearchSchema,
+          TAllContext,
+          TRouteContext
+        >,
+      ) => any)
 } & (keyof PickRequired<RouteContext> extends never
     ? // This async function is called before a route is loaded.
       // If an error is thrown here, the route's loader will not be called.
@@ -268,9 +278,7 @@ export type RouteLoadFn<
     TFullSearchSchema,
     TAllContext,
     TRouteContext
-  > & {
-    parentMatchPromise?: Promise<void>
-  },
+  >,
 ) => Promise<TLoaderData> | TLoaderData
 
 export interface LoaderFnContext<
@@ -286,6 +294,8 @@ export interface LoaderFnContext<
   context: Expand<Assign<TAllContext, TRouteContext>>
   location: ParsedLocation<TFullSearchSchema>
   navigate: (opts: NavigateOptions<AnyRoute>) => Promise<void>
+  parentMatchPromise?: Promise<void>
+  cause: 'enter' | 'stay'
 }
 
 export type SearchFilter<T, U = T> = (prev: T) => U

package/src/utils.ts

@@ -231,7 +231,7 @@ function hasObjectPrototype(o: any) {
   return Object.prototype.toString.call(o) === '[object Object]'
 }
 
-export function partialDeepEqual(a: any, b: any): boolean {
+export function deepEqual(a: any, b: any, partial: boolean = false): boolean {
   if (a === b) {
     return true
   }
@@ -241,14 +241,20 @@ export function partialDeepEqual(a: any, b: any): boolean {
   }
 
   if (isPlainObject(a) && isPlainObject(b)) {
-    return !Object.keys(b).some((key) => !partialDeepEqual(a[key], b[key]))
+    const aKeys = Object.keys(a)
+    const bKeys = Object.keys(b)
+
+    if (!partial && aKeys.length !== bKeys.length) {
+      return false
+    }
+
+    return !bKeys.some(
+      (key) => !(key in a) || !deepEqual(a[key], b[key], partial),
+    )
   }
 
   if (Array.isArray(a) && Array.isArray(b)) {
-    return !(
-      a.length !== b.length ||
-      a.some((item, index) => !partialDeepEqual(item, b[index]))
-    )
+    return !a.some((item, index) => !deepEqual(item, b[index], partial))
   }
 
   return false