@tanstack/router-core 0.0.1-beta.174 → 0.0.1-beta.176

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.174",
+  "version": "0.0.1-beta.176",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -42,8 +42,8 @@
     "@babel/runtime": "^7.16.7",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@gisatcz/cross-package-react-context": "^0.2.0",
-    "@tanstack/react-store": "0.0.1-beta.174"
+    "@tanstack/store": "^0.0.1",
+    "@gisatcz/cross-package-react-context": "^0.2.0"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js",

package/src/route.ts

@@ -1,5 +1,11 @@
 import { ParsePathParams } from './link'
-import { AnyRouter, Router, RouteMatch, RegisteredRouter } from './router'
+import {
+  AnyRouter,
+  Router,
+  RouteMatch,
+  RegisteredRouter,
+  AnyRouteMatch,
+} from './router'
 import { IsAny, NoInfer, PickRequired, UnionToIntersection } from './utils'
 import invariant from 'tiny-invariant'
 import { joinPaths, trimPath } from './path'
@@ -386,21 +392,11 @@ export type UpdatableRouteOptions<
     >,
   ) => Promise<void> | void
   onError?: (err: any) => void
-  // This function is called
-  // when moving from an inactive state to an active one. Likewise, when moving from
-  // an active to an inactive state, the return function (if provided) is called.
-  onLoaded?: (matchContext: {
-    params: TAllParams
-    search: TFullSearchSchema
-  }) =>
-    | void
-    | undefined
-    | ((match: { params: TAllParams; search: TFullSearchSchema }) => void)
-  // This function is called when the route remains active from one transition to the next.
-  onTransition?: (match: {
-    params: TAllParams
-    search: TFullSearchSchema
-  }) => void
+  // These functions are called as route matches are loaded, stick around and leave the active
+  // matches
+  onEnter?: (match: AnyRouteMatch) => void
+  onTransition?: (match: AnyRouteMatch) => void
+  onLeave?: (match: AnyRouteMatch) => void
 }
 
 export type ParseParamsOption<TPath extends string, TParams> = ParseParamsFn<

package/src/router.ts

@@ -1,4 +1,4 @@
-import { Store } from '@tanstack/react-store'
+import { Store } from '@tanstack/store'
 import invariant from 'tiny-invariant'
 
 //
@@ -123,8 +123,8 @@ export interface RouteMatch<
   paramsError: unknown
   searchError: unknown
   updatedAt: number
-  invalidAt: number
-  preloadInvalidAt: number
+  maxAge: number
+  preloadMaxAge: number
   loaderData: RouteById<TRouteTree, TRouteId>['types']['loader']
   loadPromise?: Promise<void>
   __resolveLoadPromise?: () => void
@@ -157,6 +157,7 @@ export interface RouterOptions<
   parseSearch?: SearchParser
   defaultPreload?: false | 'intent'
   defaultPreloadDelay?: number
+  refetchOnWindowFocus?: boolean
   defaultComponent?: RegisteredRouteComponent<
     unknown,
     AnySearchSchema,
@@ -249,7 +250,8 @@ export type DehydratedRouteMatch = Pick<
   RouteMatch,
   | 'fetchedAt'
   | 'invalid'
-  | 'invalidAt'
+  | 'maxAge'
+  | 'preloadMaxAge'
   | 'id'
   | 'loaderData'
   | 'status'
@@ -294,6 +296,9 @@ export type RouterListener<TRouterEvent extends RouterEvent> = {
   fn: ListenerFn<TRouterEvent>
 }
 
+const visibilityChangeEvent = 'visibilitychange'
+const focusEvent = 'focus'
+
 export class Router<
   TRouteTree extends AnyRoute = AnyRoute,
   TDehydrated extends Record<string, any> = Record<string, any>,
@@ -420,10 +425,28 @@ export class Router<
   }
 
   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?: RouterOptions<any, any>): this => {
@@ -525,7 +548,6 @@ export class Router<
       }
 
       // Cancel any pending matches
-      // this.cancelMatches()
 
       let pendingMatches!: RouteMatch<any, any>[]
 
@@ -577,6 +599,18 @@ export class Router<
           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',
@@ -584,6 +618,19 @@ export class Router<
           matchIds: s.pendingMatchIds,
           pendingMatchIds: [],
         }))
+        ;(
+          [
+            [exitingMatchIds, 'onLeave'],
+            [enteringMatchIds, 'onEnter'],
+            [stayingMatchIds, 'onTransition'],
+          ] as const
+        ).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',
@@ -605,6 +652,10 @@ export class Router<
 
     this.latestLoadPromise = promise
 
+    this.latestLoadPromise.then(() => {
+      this.cleanMatches()
+    })
+
     return this.latestLoadPromise
   }
 
@@ -671,10 +722,13 @@ export class Router<
     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 &&
+          (match.preloadMaxAge > -1
+            ? match.updatedAt + match.preloadMaxAge < now
+            : true) &&
           (route.options.gcMaxAge
             ? match.updatedAt + route.options.gcMaxAge < now
             : true)
@@ -795,8 +849,8 @@ export class Router<
         params: routeParams,
         pathname: joinPaths([this.basepath, interpolatedPath]),
         updatedAt: Date.now(),
-        invalidAt: Infinity,
-        preloadInvalidAt: Infinity,
+        maxAge: -1,
+        preloadMaxAge: -1,
         routeSearch: {},
         search: {} as any,
         status: hasLoaders ? 'pending' : 'success',
@@ -917,13 +971,11 @@ export class Router<
           paramsError: match.paramsError,
           searchError: match.searchError,
           params: match.params,
-          preloadInvalidAt: 0,
+          preloadMaxAge: 0,
         }))
       })
     }
 
-    this.cleanMatches()
-
     let firstBadMatchIndex: number | undefined
 
     // Check each match middleware to see if the route can be accessed
@@ -1002,7 +1054,9 @@ export class Router<
           if (
             match.isFetching ||
             (match.status === 'success' &&
-              !this.getIsInvalid({ matchId: match.id, preload: opts?.preload }))
+              !isMatchInvalid(match, {
+                preload: opts?.preload,
+              }))
           ) {
             return this.getRouteMatch(match.id)?.loadPromise
           }
@@ -1098,8 +1152,6 @@ export class Router<
     })
 
     await Promise.all(matchPromises)
-
-    this.cleanMatches()
   }
 
   reload = () => {
@@ -1350,7 +1402,8 @@ export class Router<
           pick(d, [
             'fetchedAt',
             'invalid',
-            'invalidAt',
+            'preloadMaxAge',
+            'maxAge',
             'id',
             'loaderData',
             'status',
@@ -1709,7 +1762,6 @@ export class Router<
     })
 
     this.resetNextScroll = location.resetScroll ?? true
-    console.log('resetScroll', this.resetNextScroll)
 
     return this.latestLoadPromise
   }
@@ -1752,29 +1804,24 @@ export class Router<
     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 preloadMaxAge =
+      opts?.maxAge ??
+      route.options.preloadMaxAge ??
+      this.options.defaultPreloadMaxAge ??
+      5000
 
-    const invalidAt =
-      updatedAt +
-      (opts?.maxAge ??
-        route.options.maxAge ??
-        this.options.defaultMaxAge ??
-        Infinity)
+    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,
     }))
   }
 
@@ -1810,27 +1857,6 @@ export class Router<
       return this.reload()
     }
   }
-
-  getIsInvalid = (opts?: { matchId: string; preload?: boolean }): boolean => {
-    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
@@ -1900,3 +1926,22 @@ export function lazyFn<
     return imported[key || 'default'](...args)
   }
 }
+
+export function isMatchInvalid(
+  match: AnyRouteMatch,
+  opts?: { preload?: boolean },
+) {
+  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
+}