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

package/build/cjs/router.js

@@ -318,11 +318,18 @@ class Router {
           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 = path.interpolatePath(route.fullPath, routeParams);
-      const matchId = path.interpolatePath(route.id, routeParams, true) + (route.options.key?.({
-        search: preMatchSearch,
-        location: this.state.location
-      }) ?? '');
+      const matchId = path.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
@@ -353,8 +360,9 @@ class Router {
         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
@@ -562,10 +570,13 @@ class Router {
   }) => {
     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)
       }));
     };
 
@@ -618,7 +629,7 @@ class Router {
               from: match.pathname
             }),
             buildLocation: this.buildLocation,
-            cause: match.cause
+            cause: preload ? 'preload' : match.cause
           })) ?? {};
           if (redirects.isRedirect(beforeLoadContext)) {
             throw beforeLoadContext;
@@ -648,7 +659,7 @@ class Router {
     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 => {
@@ -663,92 +674,95 @@ class Router {
         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 = RouterProvider.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 = RouterProvider.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 = !utils.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 = !utils.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;
@@ -789,18 +803,38 @@ class Router {
             // 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;
@@ -823,20 +857,32 @@ class Router {
         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
@@ -894,6 +940,17 @@ class Router {
     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,
@@ -956,7 +1013,7 @@ class Router {
   dehydrate = () => {
     return {
       state: {
-        dehydratedMatches: this.state.matches.map(d => utils.pick(d, ['fetchedAt', 'id', 'status', 'updatedAt', 'loaderData']))
+        dehydratedMatches: this.state.matches.map(d => utils.pick(d, ['id', 'status', 'updatedAt', 'loaderData']))
       }
     };
   };
@@ -1019,6 +1076,7 @@ function getInitialRouterState(location) {
     location,
     matches: [],
     pendingMatches: [],
+    preloadMatches: [],
     lastUpdated: Date.now()
   };
 }