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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.173",
+  "version": "0.0.1-beta.175",
   "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.173"
+    "@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'
 
 //
@@ -37,6 +37,7 @@ import {
   FullSearchSchema,
   RouteById,
   RoutePaths,
+  RouteIds,
 } from './routeInfo'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
@@ -108,13 +109,13 @@ export type HydrationCtx = {
 
 export interface RouteMatch<
   TRouteTree extends AnyRoute = AnyRoute,
-  TRoute extends AnyRoute = AnyRoute,
+  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
 > {
   id: string
   key?: string
-  routeId: string
+  routeId: TRouteId
   pathname: string
-  params: TRoute['types']['allParams']
+  params: RouteById<TRouteTree, TRouteId>['types']['allParams']
   status: 'pending' | 'success' | 'error'
   isFetching: boolean
   invalid: boolean
@@ -122,20 +123,21 @@ export interface RouteMatch<
   paramsError: unknown
   searchError: unknown
   updatedAt: number
-  invalidAt: number
-  preloadInvalidAt: number
-  loaderData: TRoute['types']['loader']
+  maxAge: number
+  preloadMaxAge: number
+  loaderData: RouteById<TRouteTree, TRouteId>['types']['loader']
   loadPromise?: Promise<void>
   __resolveLoadPromise?: () => void
-  routeContext: TRoute['types']['routeContext']
-  context: TRoute['types']['context']
-  routeSearch: TRoute['types']['searchSchema']
-  search: FullSearchSchema<TRouteTree> & TRoute['types']['fullSearchSchema']
+  routeContext: RouteById<TRouteTree, TRouteId>['types']['routeContext']
+  context: RouteById<TRouteTree, TRouteId>['types']['context']
+  routeSearch: RouteById<TRouteTree, TRouteId>['types']['searchSchema']
+  search: FullSearchSchema<TRouteTree> &
+    RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema']
   fetchedAt: number
   abortController: AbortController
 }
 
-export type AnyRouteMatch = RouteMatch<AnyRoute, AnyRoute>
+export type AnyRouteMatch = RouteMatch<any>
 
 export type RouterContextOptions<TRouteTree extends AnyRoute> =
   AnyContext extends TRouteTree['types']['routerContext']
@@ -155,6 +157,7 @@ export interface RouterOptions<
   parseSearch?: SearchParser
   defaultPreload?: false | 'intent'
   defaultPreloadDelay?: number
+  refetchOnWindowFocus?: boolean
   defaultComponent?: RegisteredRouteComponent<
     unknown,
     AnySearchSchema,
@@ -196,11 +199,11 @@ export interface RouterState<
 > {
   status: 'idle' | 'pending'
   isFetching: boolean
-  matchesById: Record<string, RouteMatch<TRouteTree, ParseRoute<TRouteTree>>>
+  matchesById: Record<string, RouteMatch<TRouteTree>>
   matchIds: string[]
   pendingMatchIds: string[]
-  matches: RouteMatch<TRouteTree, ParseRoute<TRouteTree>>[]
-  pendingMatches: RouteMatch<TRouteTree, ParseRoute<TRouteTree>>[]
+  matches: RouteMatch<TRouteTree>[]
+  pendingMatches: RouteMatch<TRouteTree>[]
   location: ParsedLocation<FullSearchSchema<TRouteTree>>
   resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
   lastUpdated: number
@@ -247,7 +250,8 @@ export type DehydratedRouteMatch = Pick<
   RouteMatch,
   | 'fetchedAt'
   | 'invalid'
-  | 'invalidAt'
+  | 'maxAge'
+  | 'preloadMaxAge'
   | 'id'
   | 'loaderData'
   | 'status'
@@ -292,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>,
@@ -418,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 => {
@@ -523,7 +548,6 @@ export class Router<
       }
 
       // Cancel any pending matches
-      // this.cancelMatches()
 
       let pendingMatches!: RouteMatch<any, any>[]
 
@@ -575,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',
@@ -582,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',
@@ -603,16 +652,17 @@ export class Router<
 
     this.latestLoadPromise = promise
 
+    this.latestLoadPromise.then(() => {
+      this.cleanMatches()
+    })
+
     return this.latestLoadPromise
   }
 
   #mergeMatches = (
-    prevMatchesById: Record<
-      string,
-      RouteMatch<TRouteTree, ParseRoute<TRouteTree>>
-    >,
+    prevMatchesById: Record<string, RouteMatch<TRouteTree>>,
     nextMatches: AnyRouteMatch[],
-  ): Record<string, RouteMatch<TRouteTree, ParseRoute<TRouteTree>>> => {
+  ): Record<string, RouteMatch<TRouteTree>> => {
     const nextMatchesById: any = {
       ...prevMatchesById,
     }
@@ -672,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)
@@ -701,7 +754,7 @@ export class Router<
     pathname: string,
     locationSearch: AnySearchSchema,
     opts?: { throwOnError?: boolean; debug?: boolean },
-  ): RouteMatch<TRouteTree, ParseRoute<TRouteTree>>[] => {
+  ): RouteMatch<TRouteTree>[] => {
     let routeParams: AnyPathParams = {}
 
     let foundRoute = this.flatRoutes.find((route) => {
@@ -796,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',
@@ -918,13 +971,14 @@ export 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: number | undefined
 
     // Check each match middleware to see if the route can be accessed
@@ -1003,7 +1057,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
           }
@@ -1099,8 +1155,6 @@ export class Router<
     })
 
     await Promise.all(matchPromises)
-
-    this.cleanMatches()
   }
 
   reload = () => {
@@ -1351,7 +1405,8 @@ export class Router<
           pick(d, [
             'fetchedAt',
             'invalid',
-            'invalidAt',
+            'preloadMaxAge',
+            'maxAge',
             'id',
             'loaderData',
             'status',
@@ -1710,22 +1765,17 @@ export class Router<
     })
 
     this.resetNextScroll = location.resetScroll ?? true
-    console.log('resetScroll', this.resetNextScroll)
 
     return this.latestLoadPromise
   }
 
-  getRouteMatch = (
-    id: string,
-  ): undefined | RouteMatch<TRouteTree, AnyRoute> => {
+  getRouteMatch = (id: string): undefined | RouteMatch<TRouteTree> => {
     return this.state.matchesById[id]
   }
 
   setRouteMatch = (
     id: string,
-    updater: (
-      prev: RouteMatch<TRouteTree, AnyRoute>,
-    ) => RouteMatch<TRouteTree, AnyRoute>,
+    updater: (prev: RouteMatch<TRouteTree>) => RouteMatch<TRouteTree>,
   ) => {
     this.__store.setState((prev) => {
       if (!prev.matchesById[id]) {
@@ -1757,29 +1807,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,
     }))
   }
 
@@ -1815,27 +1860,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
@@ -1905,3 +1929,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
+}