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

package/build/cjs/router.js

@@ -31,7 +31,6 @@ class Router {
   navigateTimeout = null;
   latestLoadPromise = Promise.resolve();
   subscribers = new Set();
-  pendingMatches = [];
   injectedHtml = [];
 
   // Must build in constructor
@@ -355,7 +354,6 @@ class Router {
         routeContext: undefined,
         context: undefined,
         abortController: new AbortController(),
-        shouldReloadDeps: undefined,
         fetchCount: 0,
         cause,
         loaderDeps
@@ -567,9 +565,10 @@ class Router {
     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)
@@ -694,65 +693,24 @@ class Router {
               }),
               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 = !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 {
-              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,
@@ -791,24 +749,23 @@ class Router {
               ...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
@@ -827,9 +784,6 @@ class Router {
           await fetch();
         }
         resolve();
-        // No Fetching
-
-        resolve();
       }));
     });
     await Promise.all(matchPromises);
@@ -856,12 +810,16 @@ class Router {
       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, {
@@ -869,12 +827,13 @@ class Router {
         });
 
         // 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);
           })
         }));
@@ -896,19 +855,23 @@ class Router {
         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);
           });
@@ -936,13 +899,13 @@ 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]));
+    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]
           }));
         }
       });
@@ -1072,7 +1035,7 @@ function getInitialRouterState(location) {
     location,
     matches: [],
     pendingMatches: [],
-    preloadMatches: [],
+    cachedMatches: [],
     lastUpdated: Date.now()
   };
 }