@tanstack/react-router 0.0.1-beta.273 → 0.0.1-beta.274

package/build/types/Matches.d.ts

@@ -22,10 +22,10 @@ export interface RouteMatch<TRouteTree extends AnyRoute = AnyRoute, TRouteId ext
     routeContext: RouteById<TRouteTree, TRouteId>['types']['routeContext'];
     context: RouteById<TRouteTree, TRouteId>['types']['allContext'];
     search: FullSearchSchema<TRouteTree> & RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'];
-    fetchedAt: number;
+    fetchCount: number;
     shouldReloadDeps: any;
     abortController: AbortController;
-    cause: 'enter' | 'stay';
+    cause: 'preload' | 'enter' | 'stay';
 }
 export type AnyRouteMatch = RouteMatch<any>;
 export declare function Matches(): React.JSX.Element;

package/build/types/RouterProvider.d.ts

@@ -22,7 +22,7 @@ export type NavigateFn<TRouteTree extends AnyRoute> = <TFrom extends RoutePaths<
 export type MatchRouteFn<TRouteTree extends AnyRoute> = <TFrom extends RoutePaths<TRouteTree> = '/', TTo extends string = '', TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>>(location: ToOptions<TRouteTree, TFrom, TTo>, opts?: MatchRouteOptions) => false | RouteById<TRouteTree, TResolved>['types']['allParams'];
 export type BuildLocationFn<TRouteTree extends AnyRoute> = (opts: BuildNextOptions) => ParsedLocation;
 export type InjectedHtmlEntry = string | (() => Promise<string> | string);
-export declare const routerContext: React.Context<Router<any, Record<string, any>>>;
+export declare let routerContext: React.Context<Router<any, Record<string, any>>>;
 export declare function RouterProvider<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TDehydrated extends Record<string, any> = Record<string, any>>({ router, ...rest }: RouterProps<TRouteTree, TDehydrated>): React.JSX.Element;
 export declare function getRouteMatch<TRouteTree extends AnyRoute>(state: RouterState<TRouteTree>, id: string): undefined | RouteMatch<TRouteTree>;
 export declare function useRouterState<TSelected = RouterState<RegisteredRouter['routeTree']>>(opts?: {

package/build/types/route.d.ts

@@ -61,7 +61,7 @@ type BeforeLoadFn<TFullSearchSchema extends Record<string, any>, TParentRoute ex
     location: ParsedLocation;
     navigate: NavigateFn<AnyRoute>;
     buildLocation: BuildLocationFn<AnyRoute>;
-    cause: 'enter' | 'stay';
+    cause: 'preload' | 'enter' | 'stay';
 }) => Promise<TRouteContext> | TRouteContext | void;
 export type UpdatableRouteOptions<TFullSearchSchema extends Record<string, any>> = MetaOptions & {
     caseSensitive?: boolean;
@@ -102,7 +102,7 @@ export interface LoaderFnContext<TAllParams = {}, TFullSearchSchema extends Reco
     location: ParsedLocation<TFullSearchSchema>;
     navigate: (opts: NavigateOptions<AnyRoute>) => Promise<void>;
     parentMatchPromise?: Promise<void>;
-    cause: 'enter' | 'stay';
+    cause: 'preload' | 'enter' | 'stay';
 }
 export type SearchFilter<T, U = T> = (prev: T) => U;
 export type ResolveId<TParentRoute, TCustomId extends string, TPath extends string> = TParentRoute extends {

package/build/types/router.d.ts

@@ -41,6 +41,7 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends
     defaultPendingComponent?: RouteComponent;
     defaultPendingMs?: number;
     defaultPendingMinMs?: number;
+    defaultPreloadMaxAge?: number;
     caseSensitive?: boolean;
     routeTree?: TRouteTree;
     basepath?: string;
@@ -63,6 +64,7 @@ export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
     isTransitioning: boolean;
     matches: RouteMatch<TRouteTree>[];
     pendingMatches?: RouteMatch<TRouteTree>[];
+    preloadMatches: RouteMatch<TRouteTree>[];
     location: ParsedLocation<FullSearchSchema<TRouteTree>>;
     resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>;
     lastUpdated: number;
@@ -87,7 +89,7 @@ export interface BuildNextOptions {
 export interface DehydratedRouterState {
     dehydratedMatches: DehydratedRouteMatch[];
 }
-export type DehydratedRouteMatch = Pick<RouteMatch, 'fetchedAt' | 'id' | 'status' | 'updatedAt'>;
+export type DehydratedRouteMatch = Pick<RouteMatch, 'id' | 'status' | 'updatedAt'>;
 export interface DehydratedRouter {
     state: DehydratedRouterState;
 }

package/build/umd/index.development.js

@@ -1080,9 +1080,13 @@
     });
   }
 
-  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  exports.routerContext = /*#__PURE__*/React__namespace.createContext(null);
   if (typeof document !== 'undefined') {
-    window.__TSR_ROUTER_CONTEXT__ = routerContext;
+    if (window.__TSR_ROUTER_CONTEXT__) {
+      exports.routerContext = window.__TSR_ROUTER_CONTEXT__;
+    } else {
+      window.__TSR_ROUTER_CONTEXT__ = exports.routerContext;
+    }
   }
   function RouterProvider({
     router,
@@ -1098,7 +1102,7 @@
       }
     });
     const matches = router.options.InnerWrap ? /*#__PURE__*/React__namespace.createElement(router.options.InnerWrap, null, /*#__PURE__*/React__namespace.createElement(Matches, null)) : /*#__PURE__*/React__namespace.createElement(Matches, null);
-    const provider = /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+    const provider = /*#__PURE__*/React__namespace.createElement(exports.routerContext.Provider, {
       value: router
     }, matches, /*#__PURE__*/React__namespace.createElement(Transitioner, null));
     if (router.options.Wrap) {
@@ -1192,14 +1196,14 @@
     return null;
   }
   function getRouteMatch(state, id) {
-    return [...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+    return [...state.preloadMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
   }
   function useRouterState(opts) {
     const router = useRouter();
     return useStore(router.__store, opts?.select);
   }
   function useRouter() {
-    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
+    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || exports.routerContext : exports.routerContext;
     const value = React__namespace.useContext(resolvedContext);
     warning(value, 'useRouter must be used inside a <RouterProvider> component!');
     return value;
@@ -2296,7 +2300,7 @@
           context: undefined,
           abortController: new AbortController(),
           shouldReloadDeps: undefined,
-          fetchedAt: 0,
+          fetchCount: 0,
           cause
         };
 
@@ -2505,10 +2509,13 @@
     }) => {
       let latestPromise;
       let firstBadMatchIndex;
-      const updatePendingMatch = match => {
+      const updateMatch = match => {
+        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 ? 'preloadMatches' : isPending ? 'pendingMatches' : 'matches';
         this.__store.setState(s => ({
           ...s,
-          pendingMatches: s.pendingMatches?.map(d => d.id === match.id ? match : d)
+          [matchesKey]: s[matchesKey]?.map(d => d.id === match.id ? match : d)
         }));
       };
 
@@ -2561,7 +2568,7 @@
                 from: match.pathname
               }),
               buildLocation: this.buildLocation,
-              cause: match.cause
+              cause: preload ? 'preload' : match.cause
             })) ?? {};
             if (isRedirect(beforeLoadContext)) {
               throw beforeLoadContext;
@@ -2591,7 +2598,7 @@
       const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
       const matchPromises = [];
       validResolvedMatches.forEach((match, index) => {
-        matchPromises.push((async () => {
+        matchPromises.push(new Promise(async resolve => {
           const parentMatchPromise = matchPromises[index - 1];
           const route = this.looseRoutesById[match.routeId];
           const handleErrorAndRedirect = err => {
@@ -2606,92 +2613,95 @@
           let loadPromise;
           matches[index] = match = {
             ...match,
-            fetchedAt: Date.now(),
             showPending: false
           };
+          let didShowPending = false;
           const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-          let pendingPromise;
-          if (!preload && pendingMs && (route.options.pendingComponent ?? this.options.defaultPendingComponent)) {
-            pendingPromise = new Promise(r => setTimeout(r, pendingMs));
-          }
-          if (match.isFetching) {
-            loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
-          } else {
-            const loaderContext = {
-              params: match.params,
-              search: match.search,
-              preload: !!preload,
-              parentMatchPromise,
-              abortController: match.abortController,
-              context: match.context,
-              location: this.state.location,
-              navigate: opts => this.navigate({
-                ...opts,
-                from: match.pathname
-              }),
-              cause: match.cause
-            };
+          const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
+          const shouldPending = !preload && pendingMs && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
+          const fetch = async () => {
+            if (match.isFetching) {
+              loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
+            } else {
+              const loaderContext = {
+                params: match.params,
+                search: match.search,
+                preload: !!preload,
+                parentMatchPromise,
+                abortController: match.abortController,
+                context: match.context,
+                location: this.state.location,
+                navigate: opts => this.navigate({
+                  ...opts,
+                  from: match.pathname
+                }),
+                cause: preload ? 'preload' : match.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 ?? true);
-            if (match.cause === 'enter' || invalidate) {
-              match.shouldReloadDeps = shouldReloadDeps;
-            } else if (match.cause === 'stay') {
-              if (typeof shouldReloadDeps === 'object') {
-                // compare the deps to see if they've changed
-                shouldReload = !deepEqual(shouldReloadDeps, match.shouldReloadDeps);
-                match.shouldReloadDeps = shouldReloadDeps;
+              // 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 {
-                shouldReload = !!shouldReloadDeps;
+                compareDeps();
+              }
+              if (typeof shouldReloadDeps === 'object') {
+                matches[index] = match = {
+                  ...match,
+                  shouldReloadDeps
+                };
               }
-            }
 
-            // If the user doesn't want the route to reload, just
-            // resolve with the existing loader data
+              // 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
-              };
-              const componentsPromise = Promise.all(componentTypes.map(async type => {
-                const component = route.options[type];
-                if (component?.preload) {
-                  await component.preload();
+              if (!shouldLoad) {
+                loadPromise = Promise.resolve(match.loaderData);
+              } else {
+                if (match.fetchCount && match.status === 'success') {
+                  resolve();
                 }
-              }));
-              const loaderPromise = route.options.loader?.(loaderContext);
-              loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
-            }
-          }
-          matches[index] = match = {
-            ...match,
-            loadPromise
-          };
-          if (!preload) {
-            updatePendingMatch(match);
-          }
-          let didShowPending = false;
-          const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
-          await new Promise(async resolve => {
-            // If the route has a pending component and a pendingMs option,
-            // forcefully show the pending component
-            if (pendingPromise) {
-              pendingPromise.then(() => {
-                if (latestPromise = checkLatest()) return;
-                didShowPending = true;
+
+                // Otherwise, load the route
                 matches[index] = match = {
                   ...match,
-                  showPending: true
+                  isFetching: true,
+                  fetchCount: match.fetchCount + 1
                 };
-                updatePendingMatch(match);
-                resolve();
-              });
+                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]);
+              }
             }
+            matches[index] = match = {
+              ...match,
+              loadPromise
+            };
+            updateMatch(match);
             try {
               const loaderData = await loadPromise;
               if (latestPromise = checkLatest()) return await latestPromise;
@@ -2732,18 +2742,38 @@
               // we already moved the pendingMatches to the matches
               // state, so we need to update that specific match
               if (didShowPending && pendingMinMs && match.showPending) {
-                this.__store.setState(s => ({
-                  ...s,
-                  matches: s.matches?.map(d => d.id === match.id ? match : d)
-                }));
+                updateMatch(match);
               }
             }
-            if (!preload) {
-              updatePendingMatch(match);
+            updateMatch(match);
+          };
+          if (match.fetchCount && match.status === 'success') {
+            // Background Fetching
+            fetch();
+          } else {
+            // Critical Fetching
+
+            // If we need to potentially show the pending component,
+            // start a timer to show it after the pendingMs
+            if (shouldPending) {
+              new Promise(r => setTimeout(r, pendingMs)).then(async () => {
+                if (latestPromise = checkLatest()) return latestPromise;
+                didShowPending = true;
+                matches[index] = match = {
+                  ...match,
+                  showPending: true
+                };
+                updateMatch(match);
+                resolve();
+              });
             }
-            resolve();
-          });
-        })());
+            await fetch();
+          }
+          resolve();
+          // No Fetching
+
+          resolve();
+        }));
       });
       await Promise.all(matchPromises);
       return matches;
@@ -2766,20 +2796,32 @@
           toLocation: next,
           pathChanged: pathDidChange
         });
-
-        // Match the routes
-        let pendingMatches = this.matchRoutes(next.pathname, next.search, {
-          debug: true
-        });
+        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);
+            })
+          }));
 
-        // Ingest the new matches
-        this.__store.setState(s => ({
-          ...s,
-          isLoading: true,
-          location: next,
-          pendingMatches
-        }));
+          // Match the routes
+          pendingMatches = this.matchRoutes(next.pathname, next.search, {
+            debug: true
+          });
+
+          // Ingest the new matches
+          this.__store.setState(s => ({
+            ...s,
+            isLoading: true,
+            location: next,
+            pendingMatches,
+            preloadMatches: s.preloadMatches.filter(d => {
+              return !pendingMatches.find(e => e.id === d.id);
+            })
+          }));
+        });
         try {
           try {
             // Load the matches
@@ -2837,6 +2879,17 @@
       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]));
+      this.__store.batch(() => {
+        matches.forEach(match => {
+          if (!loadedMatchIds[match.id]) {
+            this.__store.setState(s => ({
+              ...s,
+              preloadMatches: [...s.preloadMatches, match]
+            }));
+          }
+        });
+      });
       matches = await this.loadMatches({
         matches,
         preload: true,
@@ -2899,7 +2952,7 @@
     dehydrate = () => {
       return {
         state: {
-          dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'id', 'status', 'updatedAt', 'loaderData']))
+          dehydratedMatches: this.state.matches.map(d => pick(d, ['id', 'status', 'updatedAt', 'loaderData']))
         }
       };
     };
@@ -2962,6 +3015,7 @@
       location,
       matches: [],
       pendingMatches: [],
+      preloadMatches: [],
       lastUpdated: Date.now()
     };
   }
@@ -3255,7 +3309,6 @@
   exports.resolvePath = resolvePath;
   exports.rootRouteId = rootRouteId;
   exports.rootRouteWithContext = rootRouteWithContext;
-  exports.routerContext = routerContext;
   exports.shallow = shallow;
   exports.stringifySearchWith = stringifySearchWith;
   exports.trimPath = trimPath;