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

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;
@@ -2261,11 +2265,18 @@
             return [parentSearch, searchError];
           }
         })();
+
+        // This is where we need to call route.options.loaderDeps() to get any additional
+        // deps that the route's loader function might need to run. We need to do this
+        // before we create the match so that we can pass the deps to the route's
+        // potential key function which is used to uniquely identify the route match in state
+
+        const loaderDeps = route.options.loaderDeps?.({
+          search: preMatchSearch
+        }) ?? '';
+        const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : '';
         const interpolatedPath = interpolatePath(route.fullPath, routeParams);
-        const matchId = interpolatePath(route.id, routeParams, true) + (route.options.key?.({
-          search: preMatchSearch,
-          location: this.state.location
-        }) ?? '');
+        const matchId = interpolatePath(route.id, routeParams, true) + loaderDepsHash;
 
         // Waste not, want not. If we already have a match for this route,
         // reuse it. This is important for layout routes, which might stick
@@ -2296,8 +2307,9 @@
           context: undefined,
           abortController: new AbortController(),
           shouldReloadDeps: undefined,
-          fetchedAt: 0,
-          cause
+          fetchCount: 0,
+          cause,
+          loaderDeps
         };
 
         // Regardless of whether we're reusing an existing match or creating
@@ -2505,10 +2517,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 +2576,7 @@
                 from: match.pathname
               }),
               buildLocation: this.buildLocation,
-              cause: match.cause
+              cause: preload ? 'preload' : match.cause
             })) ?? {};
             if (isRedirect(beforeLoadContext)) {
               throw beforeLoadContext;
@@ -2591,7 +2606,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 +2621,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,
+                deps: match.loaderDeps,
+                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 +2750,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 +2804,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 +2887,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 +2960,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 +3023,7 @@
       location,
       matches: [],
       pendingMatches: [],
+      preloadMatches: [],
       lastUpdated: Date.now()
     };
   }
@@ -3255,7 +3317,6 @@
   exports.resolvePath = resolvePath;
   exports.rootRouteId = rootRouteId;
   exports.rootRouteWithContext = rootRouteWithContext;
-  exports.routerContext = routerContext;
   exports.shallow = shallow;
   exports.stringifySearchWith = stringifySearchWith;
   exports.trimPath = trimPath;