@tanstack/react-router 0.0.1-beta.279 → 0.0.1-beta.280

package/build/types/Matches.d.ts

@@ -23,7 +23,6 @@ export interface RouteMatch<TRouteTree extends AnyRoute = AnyRoute, TRouteId ext
     context: RouteById<TRouteTree, TRouteId>['types']['allContext'];
     search: FullSearchSchema<TRouteTree> & RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'];
     fetchCount: number;
-    shouldReloadDeps: any;
     abortController: AbortController;
     cause: 'preload' | 'enter' | 'stay';
     loaderDeps: RouteById<TRouteTree, TRouteId>['types']['loaderDeps'];

package/build/types/fileRoute.d.ts

@@ -23,6 +23,10 @@ export declare class FileRoute<TFilePath extends keyof FileRoutesByPath, TParent
         pendingComponent?: import("./route").RouteComponent<any> | undefined;
         pendingMs?: number | undefined;
         pendingMinMs?: number | undefined;
+        staleTime?: number | undefined;
+        gcTime?: number | undefined;
+        preloadStaleTime?: number | undefined;
+        preloadGcTime?: number | undefined;
         preSearchFilters?: import("./route").SearchFilter<TFullSearchSchema, TFullSearchSchema>[] | undefined;
         postSearchFilters?: import("./route").SearchFilter<TFullSearchSchema, TFullSearchSchema>[] | undefined;
         onError?: ((err: any) => void) | undefined;

package/build/types/route.d.ts

@@ -34,7 +34,6 @@ export type ParamsFallback<TPath extends string, TParams> = unknown extends TPar
 export type BaseRouteOptions<TParentRoute extends AnyRoute = AnyRoute, TCustomId extends string = string, TPath extends string = string, TSearchSchema extends Record<string, any> = {}, TFullSearchSchema extends Record<string, any> = TSearchSchema, TParams extends AnyPathParams = {}, TAllParams = ParamsFallback<TPath, TParams>, TRouteContext extends RouteContext = RouteContext, TAllContext extends Record<string, any> = AnyContext, TLoaderDeps extends Record<string, any> = {}, TLoaderData extends any = unknown> = RoutePathOptions<TCustomId, TPath> & {
     getParentRoute: () => TParentRoute;
     validateSearch?: SearchSchemaValidator<TSearchSchema>;
-    shouldReload?: boolean | ((match: LoaderFnContext<TAllParams, TFullSearchSchema, TAllContext, TRouteContext>) => any);
 } & (keyof PickRequired<RouteContext> extends never ? {
     beforeLoad?: BeforeLoadFn<TFullSearchSchema, TParentRoute, TAllParams, TRouteContext>;
 } : {
@@ -70,6 +69,10 @@ export type UpdatableRouteOptions<TFullSearchSchema extends Record<string, any>>
     pendingComponent?: RouteComponent;
     pendingMs?: number;
     pendingMinMs?: number;
+    staleTime?: number;
+    gcTime?: number;
+    preloadStaleTime?: number;
+    preloadGcTime?: number;
     preSearchFilters?: SearchFilter<TFullSearchSchema>[];
     postSearchFilters?: SearchFilter<TFullSearchSchema>[];
     onError?: (err: any) => void;

package/build/types/router.d.ts

@@ -42,7 +42,10 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends
     defaultPendingComponent?: RouteComponent;
     defaultPendingMs?: number;
     defaultPendingMinMs?: number;
-    defaultPreloadMaxAge?: number;
+    defaultStaleTime?: number;
+    defaultPreloadStaleTime?: number;
+    defaultPreloadGcTime?: number;
+    defaultGcTime?: number;
     caseSensitive?: boolean;
     routeTree?: TRouteTree;
     basepath?: string;
@@ -65,7 +68,7 @@ export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
     isTransitioning: boolean;
     matches: RouteMatch<TRouteTree>[];
     pendingMatches?: RouteMatch<TRouteTree>[];
-    preloadMatches: RouteMatch<TRouteTree>[];
+    cachedMatches: RouteMatch<TRouteTree>[];
     location: ParsedLocation<FullSearchSchema<TRouteTree>>;
     resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>;
     lastUpdated: number;
@@ -127,7 +130,6 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     navigateTimeout: Timeout | null;
     latestLoadPromise: Promise<void>;
     subscribers: Set<RouterListener<RouterEvent>>;
-    pendingMatches: AnyRouteMatch[];
     injectedHtml: InjectedHtmlEntry[];
     dehydratedData?: TDehydrated;
     __store: Store<RouterState<TRouteTree>>;

package/build/umd/index.development.js

@@ -1192,7 +1192,6 @@
             }
           }
         }
-        router.pendingMatches = [];
         router.__store.setState(s => ({
           ...s,
           isTransitioning: false,
@@ -1208,7 +1207,7 @@
     return null;
   }
   function getRouteMatch(state, id) {
-    return [...state.preloadMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+    return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
   }
   function useRouterState(opts) {
     const router = useRouter();
@@ -1755,7 +1754,7 @@
         // Combine the matches based on user router.options
         const pathTest = activeOptions?.exact ? s.location.pathname === next.pathname : pathIsFuzzyEqual;
         const hashTest = activeOptions?.includeHash ? s.location.hash === next.hash : true;
-        const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(s.location.search, next.search, true) : true;
+        const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(s.location.search, next.search, !activeOptions?.exact) : true;
 
         // The final "active" test
         return pathTest && hashTest && searchTest;
@@ -2002,7 +2001,6 @@
     navigateTimeout = null;
     latestLoadPromise = Promise.resolve();
     subscribers = new Set();
-    pendingMatches = [];
     injectedHtml = [];
 
     // Must build in constructor
@@ -2326,7 +2324,6 @@
           routeContext: undefined,
           context: undefined,
           abortController: new AbortController(),
-          shouldReloadDeps: undefined,
           fetchCount: 0,
           cause,
           loaderDeps
@@ -2538,9 +2535,10 @@
       let latestPromise;
       let firstBadMatchIndex;
       const updateMatch = match => {
-        // const isPreload = this.state.preloadMatches.find((d) => d.id === match.id)
+        // const isPreload = this.state.cachedMatches.find((d) => d.id === match.id)
         const isPending = this.state.pendingMatches?.find(d => d.id === match.id);
-        const matchesKey = preload ? 'preloadMatches' : isPending ? 'pendingMatches' : 'matches';
+        const isMatched = this.state.matches.find(d => d.id === match.id);
+        const matchesKey = isPending ? 'pendingMatches' : isMatched ? 'matches' : 'cachedMatches';
         this.__store.setState(s => ({
           ...s,
           [matchesKey]: s[matchesKey]?.map(d => d.id === match.id ? match : d)
@@ -2665,65 +2663,24 @@
                 }),
                 cause: preload ? 'preload' : match.cause
               };
-
-              // Default to reloading the route all the time
-              let shouldLoad = true;
-              const shouldReloadFn = route.options.shouldReload;
-              let shouldReloadDeps = typeof shouldReloadFn === 'function' ? shouldReloadFn(loaderContext) : !!(shouldReloadFn ?? true);
-              const compareDeps = () => {
-                if (typeof shouldReloadDeps === 'object') {
-                  // compare the deps to see if they've changed
-                  shouldLoad = !deepEqual(shouldReloadDeps, match.shouldReloadDeps);
-                } else {
-                  shouldLoad = !!shouldReloadDeps;
-                }
-              };
-
-              // If it's the first preload, or the route is entering, or we're
-              // invalidating, we definitely need to load the route
-              if (invalidate) ; else if (preload) {
-                if (!match.fetchCount) ; else {
-                  compareDeps();
-                }
-              } else if (match.cause === 'enter') {
-                if (!match.fetchCount) ; else {
-                  compareDeps();
-                }
-              } else {
-                compareDeps();
-              }
-              if (typeof shouldReloadDeps === 'object') {
-                matches[index] = match = {
-                  ...match,
-                  shouldReloadDeps
-                };
+              if (match.fetchCount && match.status === 'success') {
+                resolve();
               }
 
-              // If the user doesn't want the route to reload, just
-              // resolve with the existing loader data
-
-              if (!shouldLoad) {
-                loadPromise = Promise.resolve(match.loaderData);
-              } else {
-                if (match.fetchCount && match.status === 'success') {
-                  resolve();
+              // Otherwise, load the route
+              matches[index] = match = {
+                ...match,
+                isFetching: true,
+                fetchCount: match.fetchCount + 1
+              };
+              const componentsPromise = Promise.all(componentTypes.map(async type => {
+                const component = route.options[type];
+                if (component?.preload) {
+                  await component.preload();
                 }
-
-                // Otherwise, load the route
-                matches[index] = match = {
-                  ...match,
-                  isFetching: true,
-                  fetchCount: match.fetchCount + 1
-                };
-                const componentsPromise = Promise.all(componentTypes.map(async type => {
-                  const component = route.options[type];
-                  if (component?.preload) {
-                    await component.preload();
-                  }
-                }));
-                const loaderPromise = route.options.loader?.(loaderContext);
-                loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
-              }
+              }));
+              const loaderPromise = route.options.loader?.(loaderContext);
+              loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
             }
             matches[index] = match = {
               ...match,
@@ -2762,24 +2719,23 @@
                 ...match,
                 error,
                 status: 'error',
-                isFetching: false,
-                updatedAt: Date.now()
+                isFetching: false
               };
-            } finally {
-              // If we showed the pending component, that means
-              // we already moved the pendingMatches to the matches
-              // state, so we need to update that specific match
-              if (didShowPending && pendingMinMs && match.showPending) {
-                updateMatch(match);
-              }
             }
             updateMatch(match);
           };
-          if (match.fetchCount && match.status === 'success') {
-            // Background Fetching
-            fetch();
+
+          // This is where all of the stale-while-revalidate magic happens
+          const age = Date.now() - match.updatedAt;
+          let staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 30_000 // 30 seconds for preloads by default
+          : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
+          if (match.status === 'success') {
+            // Background Fetching, no need to wait
+            if (age > staleAge) {
+              fetch();
+            }
           } else {
-            // Critical Fetching
+            // Critical Fetching, we need to await
 
             // If we need to potentially show the pending component,
             // start a timer to show it after the pendingMs
@@ -2798,9 +2754,6 @@
             await fetch();
           }
           resolve();
-          // No Fetching
-
-          resolve();
         }));
       });
       await Promise.all(matchPromises);
@@ -2827,12 +2780,16 @@
         let pendingMatches;
         const previousMatches = this.state.matches;
         this.__store.batch(() => {
-          this.__store.setState(s => ({
-            ...s,
-            preloadMatches: s.preloadMatches.filter(d => {
-              return Date.now() - d.updatedAt < (this.options.defaultPreloadMaxAge ?? 3000);
-            })
-          }));
+          // This is where all of the garbage collection magic happens
+          this.__store.setState(s => {
+            return {
+              ...s,
+              cachedMatches: s.cachedMatches.filter(d => {
+                const route = this.looseRoutesById[d.routeId];
+                return d.status !== 'error' && Date.now() - d.updatedAt < (route.options.gcTime ?? this.options.defaultGcTime ?? 5 * 60 * 1000);
+              })
+            };
+          });
 
           // Match the routes
           pendingMatches = this.matchRoutes(next.pathname, next.search, {
@@ -2840,12 +2797,13 @@
           });
 
           // Ingest the new matches
+          // If a cached moved to pendingMatches, remove it from cachedMatches
           this.__store.setState(s => ({
             ...s,
             isLoading: true,
             location: next,
             pendingMatches,
-            preloadMatches: s.preloadMatches.filter(d => {
+            cachedMatches: s.cachedMatches.filter(d => {
               return !pendingMatches.find(e => e.id === d.id);
             })
           }));
@@ -2867,19 +2825,23 @@
           if (latestPromise = this.checkLatest(promise)) {
             return latestPromise;
           }
-          const exitingMatchIds = previousMatches.filter(id => !this.pendingMatches.includes(id));
-          const enteringMatchIds = this.pendingMatches.filter(id => !previousMatches.includes(id));
-          const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id));
+          const exitingMatches = previousMatches.filter(match => !pendingMatches.find(d => d.id === match.id));
+          const enteringMatches = pendingMatches.filter(match => !previousMatches.find(d => d.id === match.id));
+          const stayingMatches = previousMatches.filter(match => pendingMatches.find(d => d.id === match.id));
+
+          // Commit the pending matches. If a previous match was
+          // removed, place it in the cachedMatches
           this.__store.setState(s => ({
             ...s,
             isLoading: false,
             matches: pendingMatches,
-            pendingMatches: undefined
+            pendingMatches: undefined,
+            cachedMatches: [...s.cachedMatches, ...exitingMatches.filter(d => d.status !== 'error')]
           }))
 
           //
           ;
-          [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onStay']].forEach(([matches, hook]) => {
+          [[exitingMatches, 'onLeave'], [enteringMatches, 'onEnter'], [stayingMatches, 'onStay']].forEach(([matches, hook]) => {
             matches.forEach(match => {
               this.looseRoutesById[match.routeId].options[hook]?.(match);
             });
@@ -2907,13 +2869,13 @@
       let matches = this.matchRoutes(next.pathname, next.search, {
         throwOnError: true
       });
-      const loadedMatchIds = Object.fromEntries([...this.state.matches, ...(this.state.pendingMatches ?? []), ...this.state.preloadMatches]?.map(d => [d.id, true]));
+      const loadedMatchIds = Object.fromEntries([...this.state.matches, ...(this.state.pendingMatches ?? []), ...this.state.cachedMatches]?.map(d => [d.id, true]));
       this.__store.batch(() => {
         matches.forEach(match => {
           if (!loadedMatchIds[match.id]) {
             this.__store.setState(s => ({
               ...s,
-              preloadMatches: [...s.preloadMatches, match]
+              cachedMatches: [...s.cachedMatches, match]
             }));
           }
         });
@@ -3043,7 +3005,7 @@
       location,
       matches: [],
       pendingMatches: [],
-      preloadMatches: [],
+      cachedMatches: [],
       lastUpdated: Date.now()
     };
   }