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

package/package.json

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

package/src/RouterProvider.tsx

@@ -57,7 +57,7 @@ import {
   PickAsRequired,
   functionalUpdate,
   last,
-  partialDeepEqual,
+  deepEqual,
   pick,
   replaceEqualDeep,
   useStableCallback,
@@ -492,6 +492,7 @@ export function RouterProvider<
           loadPromise: Promise.resolve(),
           context: undefined!,
           abortController: new AbortController(),
+          shouldReloadDeps: undefined,
           fetchedAt: 0,
         }
 
@@ -984,8 +985,28 @@ export function RouterProvider<
               }
 
               // Default to reloading the route all the time
-              const shouldReload =
-                route.options.shouldReload?.(loaderContext) ?? true
+              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
@@ -1251,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
@@ -1406,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
@@ -1493,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,14 +108,16 @@ export type BaseRouteOptions<
 > = RoutePathOptions<TCustomId, TPath> & {
   getParentRoute: () => TParentRoute
   validateSearch?: SearchSchemaValidator<TSearchSchema>
-  shouldReload?: (
-    match: LoaderFnContext<
-      TAllParams,
-      TFullSearchSchema,
-      TAllContext,
-      TRouteContext
-    >,
-  ) => any
+  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.

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