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

package/build/types/utils.d.ts

@@ -0,0 +1,53 @@
+export type NoInfer<T> = [T][T extends any ? 0 : never];
+export type IsAny<T, Y, N> = 1 extends 0 & T ? Y : N;
+export type IsAnyBoolean<T> = 1 extends 0 & T ? true : false;
+export type IsKnown<T, Y, N> = unknown extends T ? N : Y;
+export type PickAsRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+export type PickAsPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type PickUnsafe<T, K> = K extends keyof T ? Pick<T, K> : never;
+export type PickExtra<T, K> = {
+    [TKey in keyof K as string extends TKey ? never : TKey extends keyof T ? never : TKey]: K[TKey];
+};
+export type PickRequired<T> = {
+    [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+};
+export type Expand<T> = T extends object ? T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never : T;
+export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => any ? I : never;
+type Compute<T> = {
+    [K in keyof T]: T[K];
+} | never;
+type AllKeys<T> = T extends any ? keyof T : never;
+export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<{
+    [K in Keys]: T[Keys];
+} & {
+    [K in AllKeys<T>]?: T extends any ? K extends keyof T ? T[K] : never : never;
+}>;
+export type Values<O> = O[ValueKeys<O>];
+export type ValueKeys<O> = Extract<keyof O, PropertyKey>;
+export type DeepAwaited<T> = T extends Promise<infer A> ? DeepAwaited<A> : T extends Record<infer A, Promise<infer B>> ? {
+    [K in A]: DeepAwaited<B>;
+} : T;
+export type PathParamMask<TRoutePath extends string> = TRoutePath extends `${infer L}/$${infer C}/${infer R}` ? PathParamMask<`${L}/${string}/${R}`> : TRoutePath extends `${infer L}/$${infer C}` ? PathParamMask<`${L}/${string}`> : TRoutePath;
+export type Timeout = ReturnType<typeof setTimeout>;
+export type Updater<TPrevious, TResult = TPrevious> = TResult | ((prev?: TPrevious) => TResult);
+export type PickExtract<T, U> = {
+    [K in keyof T as T[K] extends U ? K : never]: T[K];
+};
+export type PickExclude<T, U> = {
+    [K in keyof T as T[K] extends U ? never : K]: T[K];
+};
+export declare function last<T>(arr: T[]): T | undefined;
+export declare function functionalUpdate<TResult>(updater: Updater<TResult>, previous: TResult): TResult;
+export declare function pick<T, K extends keyof T>(parent: T, keys: K[]): Pick<T, K>;
+/**
+ * This function returns `a` if `b` is deeply equal.
+ * If not, it will replace any deeply equal children of `b` with those of `a`.
+ * This can be used for structural sharing between immutable JSON values for example.
+ * Do not use this with signals
+ */
+export declare function replaceEqualDeep<T>(prev: any, _next: T): T;
+export declare function isPlainObject(o: any): boolean;
+export declare function partialDeepEqual(a: any, b: any): boolean;
+export {};

package/build/umd/index.development.js

@@ -9,8 +9,8 @@
  * @license MIT
  */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('use-sync-external-store/shim/with-selector')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'use-sync-external-store/shim/with-selector'], factory) :
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.RouterCore = {}));
 })(this, (function (exports) { 'use strict';
 
@@ -804,6 +804,8 @@
     //
 
     const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+    const visibilityChangeEvent = 'visibilitychange';
+    const focusEvent = 'focus';
     class Router {
       #unsubHistory;
       resetNextScroll = false;
@@ -880,12 +882,26 @@
         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,
@@ -956,7 +972,6 @@
           };
 
           // Cancel any pending matches
-          // this.cancelMatches()
 
           let pendingMatches;
           this.#emit({
@@ -999,6 +1014,9 @@
             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',
@@ -1006,6 +1024,13 @@
               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,
@@ -1022,6 +1047,9 @@
           }
         });
         this.latestLoadPromise = promise;
+        this.latestLoadPromise.then(() => {
+          this.cleanMatches();
+        });
         return this.latestLoadPromise;
       };
       #mergeMatches = (prevMatchesById, nextMatches) => {
@@ -1066,7 +1094,7 @@
         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 => {
@@ -1154,8 +1182,8 @@
             params: routeParams,
             pathname: joinPaths([this.basepath, interpolatedPath]),
             updatedAt: Date.now(),
-            invalidAt: Infinity,
-            preloadInvalidAt: Infinity,
+            maxAge: -1,
+            preloadMaxAge: -1,
             routeSearch: {},
             search: {},
             status: hasLoaders ? 'pending' : 'success',
@@ -1251,11 +1279,13 @@
               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
@@ -1317,8 +1347,7 @@
           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;
@@ -1391,7 +1420,6 @@
           })());
         });
         await Promise.all(matchPromises);
-        this.cleanMatches();
       };
       reload = () => {
         return this.navigate({
@@ -1576,7 +1604,7 @@
       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']))
           }
         };
       };
@@ -1815,7 +1843,6 @@
           ...next.state
         });
         this.resetNextScroll = location.resetScroll ?? true;
-        console.log('resetScroll', this.resetNextScroll);
         return this.latestLoadPromise;
       };
       getRouteMatch = id => {
@@ -1840,17 +1867,17 @@
         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 => {
@@ -1881,20 +1908,6 @@
           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
@@ -1940,6 +1953,16 @@
         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 = '___';
@@ -2106,6 +2129,7 @@
     exports.interpolatePath = interpolatePath;
     exports.invariant = invariant;
     exports.isDehydratedDeferred = isDehydratedDeferred;
+    exports.isMatchInvalid = isMatchInvalid;
     exports.isPlainObject = isPlainObject;
     exports.isRedirect = isRedirect;
     exports.joinPaths = joinPaths;