@tanstack/router-core 0.0.1-beta.173 → 0.0.1-beta.175

package/build/esm/index.js

@@ -11,7 +11,7 @@
 import invariant from 'tiny-invariant';
 export { default as invariant } from 'tiny-invariant';
 export { default as warning } from 'tiny-warning';
-import { Store } from '@tanstack/react-store';
+import { Store } from '@tanstack/store';
 
 // While the public API was clearly inspired by the "history" npm package,
 // This implementation attempts to be more lightweight by
@@ -709,6 +709,8 @@ function stringifySearchWith(stringify, parser) {
 //
 
 const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+const visibilityChangeEvent = 'visibilitychange';
+const focusEvent = 'focus';
 class Router {
   #unsubHistory;
   resetNextScroll = false;
@@ -785,12 +787,26 @@ class Router {
     this.__store.setState(s => Object.assign(s, getInitialRouterState()));
   };
   mount = () => {
-    // If the router matches are empty, start loading the matches
-    // if (!this.state.matches.length) {
+    // addEventListener does not exist in React Native, but window does
+    // In the future, we might need to invert control here for more adapters
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (typeof window !== 'undefined' && window.addEventListener) {
+      window.addEventListener(visibilityChangeEvent, this.#onFocus, false);
+      window.addEventListener(focusEvent, this.#onFocus, false);
+    }
     this.safeLoad();
-    // }
+    return () => {
+      if (typeof window !== 'undefined' && window.removeEventListener) {
+        window.removeEventListener(visibilityChangeEvent, this.#onFocus);
+        window.removeEventListener(focusEvent, this.#onFocus);
+      }
+    };
+  };
+  #onFocus = () => {
+    if (this.options.refetchOnWindowFocus ?? true) {
+      this.reload();
+    }
   };
-
   update = opts => {
     this.options = {
       ...this.options,
@@ -861,7 +877,6 @@ class Router {
       };
 
       // Cancel any pending matches
-      // this.cancelMatches()
 
       let pendingMatches;
       this.#emit({
@@ -904,6 +919,9 @@ class Router {
         if (latestPromise = checkLatest()) {
           return latestPromise;
         }
+        const exitingMatchIds = this.state.matchIds.filter(id => !this.state.pendingMatchIds.includes(id));
+        const enteringMatchIds = this.state.pendingMatchIds.filter(id => !this.state.matchIds.includes(id));
+        const stayingMatchIds = this.state.matchIds.filter(id => this.state.pendingMatchIds.includes(id));
         this.__store.setState(s => ({
           ...s,
           status: 'idle',
@@ -911,6 +929,13 @@ class Router {
           matchIds: s.pendingMatchIds,
           pendingMatchIds: []
         }));
+        [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onTransition']].forEach(([matchIds, hook]) => {
+          matchIds.forEach(id => {
+            const match = this.getRouteMatch(id);
+            const route = this.getRoute(match.routeId);
+            route.options[hook]?.(match);
+          });
+        });
         this.#emit({
           type: 'onLoad',
           from: prevLocation,
@@ -927,6 +952,9 @@ class Router {
       }
     });
     this.latestLoadPromise = promise;
+    this.latestLoadPromise.then(() => {
+      this.cleanMatches();
+    });
     return this.latestLoadPromise;
   };
   #mergeMatches = (prevMatchesById, nextMatches) => {
@@ -971,7 +999,7 @@ class Router {
     const now = Date.now();
     const outdatedMatchIds = Object.values(this.state.matchesById).filter(match => {
       const route = this.getRoute(match.routeId);
-      return !this.state.matchIds.includes(match.id) && !this.state.pendingMatchIds.includes(match.id) && match.preloadInvalidAt < now && (route.options.gcMaxAge ? match.updatedAt + route.options.gcMaxAge < now : true);
+      return !this.state.matchIds.includes(match.id) && !this.state.pendingMatchIds.includes(match.id) && (match.preloadMaxAge > -1 ? match.updatedAt + match.preloadMaxAge < now : true) && (route.options.gcMaxAge ? match.updatedAt + route.options.gcMaxAge < now : true);
     }).map(d => d.id);
     if (outdatedMatchIds.length) {
       this.__store.setState(s => {
@@ -1059,8 +1087,8 @@ class Router {
         params: routeParams,
         pathname: joinPaths([this.basepath, interpolatedPath]),
         updatedAt: Date.now(),
-        invalidAt: Infinity,
-        preloadInvalidAt: Infinity,
+        maxAge: -1,
+        preloadMaxAge: -1,
         routeSearch: {},
         search: {},
         status: hasLoaders ? 'pending' : 'success',
@@ -1156,11 +1184,13 @@ class Router {
           paramsError: match.paramsError,
           searchError: match.searchError,
           params: match.params,
-          preloadInvalidAt: 0
+          preloadMaxAge: 0
         }));
       });
+    } else {
+      // If we're preloading, clean preload matches before we try and use them
+      this.cleanMatches();
     }
-    this.cleanMatches();
     let firstBadMatchIndex;
 
     // Check each match middleware to see if the route can be accessed
@@ -1222,8 +1252,7 @@ class Router {
       matchPromises.push((async () => {
         const parentMatchPromise = matchPromises[index - 1];
         const route = this.getRoute(match.routeId);
-        if (match.isFetching || match.status === 'success' && !this.getIsInvalid({
-          matchId: match.id,
+        if (match.isFetching || match.status === 'success' && !isMatchInvalid(match, {
           preload: opts?.preload
         })) {
           return this.getRouteMatch(match.id)?.loadPromise;
@@ -1296,7 +1325,6 @@ class Router {
       })());
     });
     await Promise.all(matchPromises);
-    this.cleanMatches();
   };
   reload = () => {
     return this.navigate({
@@ -1481,7 +1509,7 @@ class Router {
   dehydrate = () => {
     return {
       state: {
-        dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'invalidAt', 'id', 'loaderData', 'status', 'updatedAt']))
+        dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'preloadMaxAge', 'maxAge', 'id', 'loaderData', 'status', 'updatedAt']))
       }
     };
   };
@@ -1720,7 +1748,6 @@ class Router {
       ...next.state
     });
     this.resetNextScroll = location.resetScroll ?? true;
-    console.log('resetScroll', this.resetNextScroll);
     return this.latestLoadPromise;
   };
   getRouteMatch = id => {
@@ -1745,17 +1772,17 @@ class Router {
     if (!match) return;
     const route = this.getRoute(match.routeId);
     const updatedAt = opts?.updatedAt ?? Date.now();
-    const preloadInvalidAt = updatedAt + (opts?.maxAge ?? route.options.preloadMaxAge ?? this.options.defaultPreloadMaxAge ?? 5000);
-    const invalidAt = updatedAt + (opts?.maxAge ?? route.options.maxAge ?? this.options.defaultMaxAge ?? Infinity);
+    const preloadMaxAge = opts?.maxAge ?? route.options.preloadMaxAge ?? this.options.defaultPreloadMaxAge ?? 5000;
+    const maxAge = opts?.maxAge ?? route.options.maxAge ?? this.options.defaultMaxAge ?? -1;
     this.setRouteMatch(id, s => ({
       ...s,
       error: undefined,
       status: 'success',
       isFetching: false,
-      updatedAt: Date.now(),
+      updatedAt: updatedAt,
       loaderData: functionalUpdate(updater, s.loaderData),
-      preloadInvalidAt,
-      invalidAt
+      preloadMaxAge,
+      maxAge
     }));
   };
   invalidate = async opts => {
@@ -1786,20 +1813,6 @@ class Router {
       return this.reload();
     }
   };
-  getIsInvalid = opts => {
-    if (!opts?.matchId) {
-      return !!this.state.matches.find(d => this.getIsInvalid({
-        matchId: d.id,
-        preload: opts?.preload
-      }));
-    }
-    const match = this.getRouteMatch(opts?.matchId);
-    if (!match) {
-      return false;
-    }
-    const now = Date.now();
-    return match.invalid || (opts?.preload ? match.preloadInvalidAt : match.invalidAt) < now;
-  };
 }
 
 // Detect if we're in the DOM
@@ -1845,6 +1858,16 @@ function lazyFn(fn, key) {
     return imported[key || 'default'](...args);
   };
 }
+function isMatchInvalid(match, opts) {
+  const now = Date.now();
+  if (match.invalid) {
+    return true;
+  }
+  if (opts?.preload) {
+    return match.preloadMaxAge < 0 ? false : match.updatedAt + match.preloadMaxAge < now;
+  }
+  return match.maxAge < 0 ? false : match.updatedAt + match.maxAge < now;
+}
 
 const windowKey = 'window';
 const delimiter = '___';
@@ -1990,5 +2013,5 @@ function isDehydratedDeferred(obj) {
   return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
 }
 
-export { FileRoute, PathParamError, RootRoute, Route, Router, RouterContext, SearchParamError, cleanPath, componentTypes, createBrowserHistory, createHashHistory, createMemoryHistory, decode, defaultParseSearch, defaultStringifySearch, defer, encode, functionalUpdate, interpolatePath, isDehydratedDeferred, isPlainObject, isRedirect, joinPaths, last, lazyFn, matchByPath, matchPathname, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, restoreScrollPositions, rootRouteId, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, watchScrollPositions };
+export { FileRoute, PathParamError, RootRoute, Route, Router, RouterContext, SearchParamError, cleanPath, componentTypes, createBrowserHistory, createHashHistory, createMemoryHistory, decode, defaultParseSearch, defaultStringifySearch, defer, encode, functionalUpdate, interpolatePath, isDehydratedDeferred, isMatchInvalid, isPlainObject, isRedirect, joinPaths, last, lazyFn, matchByPath, matchPathname, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, restoreScrollPositions, rootRouteId, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, watchScrollPositions };
 //# sourceMappingURL=index.js.map