@tanstack/router-core 0.0.1-alpha.7 → 0.0.1-alpha.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.9",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",

package/src/link.ts

@@ -220,8 +220,10 @@ export type LinkOptions<
   activeOptions?: ActiveOptions
   // If set, will preload the linked route on hover and cache it for this many milliseconds in hopes that the user will eventually navigate there.
   preload?: false | 'intent'
-  // When preloaded and set, will cache the preloaded result for this duration in milliseconds
+  // When preloaded, the preloaded result will be considered "fresh" for this duration in milliseconds
   preloadMaxAge?: number
+  // When preloaded and subsequently inactive, the preloaded result will remain in memory for this duration in milliseconds
+  preloadGcMaxAge?: number
   // Delay intent preloading by this many milliseconds. If the intent exits before this delay, the preload will be cancelled.
   preloadDelay?: number
   // If true, will render the link without the href attribute

package/src/routeMatch.ts

@@ -30,6 +30,7 @@ export interface RouteMatch<
   routeLoaderData: TRouteInfo['routeLoaderData']
   isFetching: boolean
   isPending: boolean
+  invalidAt: number
   __: {
     element?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
     errorElement?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
@@ -60,7 +61,7 @@ export interface RouteMatch<
     resolve: () => void
   }
   cancel: () => void
-  load: () => Promise<void>
+  load: (opts?: { maxAge?: number }) => Promise<void>
   invalidate: () => void
   hasLoaders: () => boolean
 }
@@ -97,13 +98,10 @@ export function createRouteMatch<
     isPending: false,
     isFetching: false,
     isInvalid: false,
+    invalidAt: Infinity,
     getIsInvalid: () => {
       const now = Date.now()
-      const maxAge =
-        routeMatch.options.loaderMaxAge ??
-        router.options.defaultLoaderMaxAge ??
-        0
-      return routeMatch.isInvalid || routeMatch.updatedAt! + maxAge < now
+      return routeMatch.isInvalid || routeMatch.invalidAt < now
     },
     __: {
       abortController: new AbortController(),
@@ -212,7 +210,7 @@ export function createRouteMatch<
         elementTypes.some((d) => typeof route.options[d] === 'function')
       )
     },
-    load: async () => {
+    load: async (opts) => {
       const id = '' + Date.now() + Math.random()
       routeMatch.__.latestId = id
 
@@ -298,6 +296,12 @@ export function createRouteMatch<
               routeMatch.error = undefined
               routeMatch.status = 'success'
               routeMatch.updatedAt = Date.now()
+              routeMatch.invalidAt =
+                routeMatch.updatedAt +
+                (opts?.maxAge ??
+                  routeMatch.options.loaderMaxAge ??
+                  router.options.defaultLoaderMaxAge ??
+                  0)
             } catch (err) {
               if (id !== routeMatch.__.latestId) {
                 return routeMatch.__.loaderPromise

package/src/router.ts

@@ -81,9 +81,10 @@ export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
   stringifySearch?: SearchSerializer
   parseSearch?: SearchParser
   filterRoutes?: FilterRoutesFn
-  defaultLinkPreload?: false | 'intent'
-  defaultLinkPreloadMaxAge?: number
-  defaultLinkPreloadDelay?: number
+  defaultPreload?: false | 'intent'
+  defaultPreloadMaxAge?: number
+  defaultPreloadGcMaxAge?: number
+  defaultPreloadDelay?: number
   useErrorBoundary?: boolean
   defaultElement?: GetFrameworkGeneric<'Element'>
   defaultErrorElement?: GetFrameworkGeneric<'Element'>
@@ -227,9 +228,10 @@ export interface Router<
   getRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
     id: TId,
   ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-  loadRoute: (
+  loadRoute: (navigateOpts: BuildNextOptions) => Promise<RouteMatch[]>
+  preloadRoute: (
     navigateOpts: BuildNextOptions,
-    loaderOpts: { maxAge: number },
+    loaderOpts: { maxAge?: number; gcMaxAge?: number },
   ) => Promise<RouteMatch[]>
   matchRoutes: (
     pathname: string,
@@ -238,8 +240,8 @@ export interface Router<
   loadMatches: (
     resolvedMatches: RouteMatch[],
     loaderOpts?: { withPending?: boolean } & (
-      | { preload: true; maxAge: number }
-      | { preload?: false; maxAge?: never }
+      | { preload: true; maxAge: number; gcMaxAge: number }
+      | { preload?: false; maxAge?: never; gcMaxAge?: never }
     ),
   ) => Promise<void>
   invalidateRoute: (opts: MatchLocation) => void
@@ -289,7 +291,8 @@ export function createRouter<
   const originalOptions = {
     defaultLoaderGcMaxAge: 5 * 60 * 1000,
     defaultLoaderMaxAge: 0,
-    defaultLinkPreloadDelay: 50,
+    defaultPreloadMaxAge: 2000,
+    defaultPreloadDelay: 50,
     ...userOptions,
     stringifySearch: userOptions?.stringifySearch ?? defaultStringifySearch,
     parseSearch: userOptions?.parseSearch ?? defaultParseSearch,
@@ -782,17 +785,32 @@ export function createRouter<
       })
     },
 
-    loadRoute: async (
-      navigateOpts: BuildNextOptions = router.location,
-      loaderOpts: { maxAge: number },
-    ) => {
+    loadRoute: async (navigateOpts = router.location) => {
+      const next = router.buildNext(navigateOpts)
+      const matches = router.matchRoutes(next.pathname, {
+        strictParseParams: true,
+      })
+      await router.loadMatches(matches)
+      return matches
+    },
+
+    preloadRoute: async (navigateOpts = router.location, loaderOpts) => {
       const next = router.buildNext(navigateOpts)
       const matches = router.matchRoutes(next.pathname, {
         strictParseParams: true,
       })
       await router.loadMatches(matches, {
         preload: true,
-        maxAge: loaderOpts.maxAge,
+        maxAge:
+          loaderOpts.maxAge ??
+          router.options.defaultPreloadMaxAge ??
+          router.options.defaultLoaderMaxAge ??
+          0,
+        gcMaxAge:
+          loaderOpts.gcMaxAge ??
+          router.options.defaultPreloadGcMaxAge ??
+          router.options.defaultLoaderGcMaxAge ??
+          0,
       })
       return matches
     },
@@ -905,23 +923,23 @@ export function createRouter<
 
     loadMatches: async (resolvedMatches, loaderOpts) => {
       const now = Date.now()
+      const minMaxAge = loaderOpts?.preload
+        ? Math.max(loaderOpts?.maxAge, loaderOpts?.gcMaxAge)
+        : 0
 
       const matchPromises = resolvedMatches.map(async (match) => {
         // Validate the match (loads search params etc)
         match.__.validate()
 
-        // If the match doesn't have a loader, don't attempt to load it
-        if (!match.hasLoaders()) {
-          return
-        }
         // If this is a preload, add it to the preload cache
-        if (loaderOpts?.preload && loaderOpts?.maxAge > 0) {
+        if (loaderOpts?.preload && minMaxAge > 0) {
           // If the match is currently active, don't preload it
           if (router.state.matches.find((d) => d.matchId === match.matchId)) {
             return
           }
+
           router.matchCache[match.matchId] = {
-            gc: now + loaderOpts.maxAge, // TODO: Should this use the route's maxAge?
+            gc: now + loaderOpts.gcMaxAge,
             match,
           }
         }
@@ -932,7 +950,9 @@ export function createRouter<
           match.status === 'error' ||
           match.status === 'idle'
         ) {
-          match.load()
+          const maxAge = loaderOpts?.preload ? loaderOpts?.maxAge : undefined
+
+          match.load({ maxAge })
         }
 
         if (match.status === 'loading') {
@@ -1051,6 +1071,7 @@ export function createRouter<
       activeOptions,
       preload,
       preloadMaxAge: userPreloadMaxAge,
+      preloadGcMaxAge: userPreloadGcMaxAge,
       preloadDelay: userPreloadDelay,
       disabled,
     }) => {
@@ -1079,14 +1100,9 @@ export function createRouter<
 
       const next = router.buildNext(nextOpts)
 
-      preload = preload ?? router.options.defaultLinkPreload
-      const preloadMaxAge =
-        userPreloadMaxAge ??
-        router.options.defaultLinkPreloadMaxAge ??
-        router.options.defaultLoaderGcMaxAge ??
-        0
+      preload = preload ?? router.options.defaultPreload
       const preloadDelay =
-        userPreloadDelay ?? router.options.defaultLinkPreloadDelay ?? 0
+        userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
 
       // Compare path/hash for matches
       const pathIsEqual = router.state.location.pathname === next.pathname
@@ -1124,22 +1140,28 @@ export function createRouter<
 
       // The click handler
       const handleFocus = (e: MouseEvent) => {
-        if (preload && preloadMaxAge > 0) {
-          router.loadRoute(nextOpts, { maxAge: preloadMaxAge })
+        if (preload) {
+          router.preloadRoute(nextOpts, {
+            maxAge: userPreloadMaxAge,
+            gcMaxAge: userPreloadGcMaxAge,
+          })
         }
       }
 
       const handleEnter = (e: MouseEvent) => {
         const target = (e.target || {}) as LinkCurrentTargetElement
 
-        if (preload && preloadMaxAge > 0) {
+        if (preload) {
           if (target.preloadTimeout) {
             return
           }
 
           target.preloadTimeout = setTimeout(() => {
             target.preloadTimeout = null
-            router.loadRoute(nextOpts, { maxAge: preloadMaxAge })
+            router.preloadRoute(nextOpts, {
+              maxAge: userPreloadMaxAge,
+              gcMaxAge: userPreloadGcMaxAge,
+            })
           }, preloadDelay)
         }
       }