@tanstack/router-core 0.0.1-beta.177 → 0.0.1-beta.179

package/package.json

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

package/src/route.ts

@@ -254,7 +254,6 @@ export type BaseRouteOptions<
   TRouteContext extends RouteContext = RouteContext,
   TAllContext extends AnyContext = AnyContext,
 > = RoutePathOptions<TCustomId, TPath> & {
-  layoutLimit?: string
   getParentRoute: () => TParentRoute
   validateSearch?: SearchSchemaValidator<TSearchSchema>
   loader?: LoaderFn<
@@ -265,7 +264,34 @@ export type BaseRouteOptions<
     NoInfer<TRouteContext>,
     TAllContext
   >
-} & ([TLoader] extends [never]
+} & (keyof PickRequired<RouteContext> extends never
+    ? // This async function is called before a route is loaded.
+      // If an error is thrown here, the route's loader will not be called.
+      // If thrown during a navigation, the navigation will be cancelled and the error will be passed to the `onError` function.
+      // If thrown during a preload event, the error will be logged to the console.
+      {
+        beforeLoad?: BeforeLoadFn<
+          TParentRoute,
+          TAllParams,
+          TSearchSchema,
+          TFullSearchSchema,
+          TParentContext,
+          TAllParentContext,
+          TRouteContext
+        >
+      }
+    : {
+        beforeLoad: BeforeLoadFn<
+          TParentRoute,
+          TAllParams,
+          TSearchSchema,
+          TFullSearchSchema,
+          TParentContext,
+          TAllParentContext,
+          TRouteContext
+        >
+      }) &
+  ([TLoader] extends [never]
     ? {
         loader: 'Loaders must return a type other than never. If you are throwing a redirect() and not returning anything, return a redirect() instead.'
       }
@@ -286,32 +312,12 @@ export type BaseRouteOptions<
         stringifyParams?: never
         parseParams?: never
       }
-  ) &
-  (keyof PickRequired<RouteContext> extends never
-    ? {
-        getContext?: GetContextFn<
-          TParentRoute,
-          TAllParams,
-          TFullSearchSchema,
-          TParentContext,
-          TAllParentContext,
-          TRouteContext
-        >
-      }
-    : {
-        getContext: GetContextFn<
-          TParentRoute,
-          TAllParams,
-          TFullSearchSchema,
-          TParentContext,
-          TAllParentContext,
-          TRouteContext
-        >
-      })
+  )
 
-type GetContextFn<
+type BeforeLoadFn<
   TParentRoute,
   TAllParams,
+  TSearchSchema,
   TFullSearchSchema,
   TParentContext,
   TAllParentContext,
@@ -319,7 +325,10 @@ type GetContextFn<
 > = (
   opts: {
     params: TAllParams
+    routeSearch: TSearchSchema
     search: TFullSearchSchema
+    abortController: AbortController
+    preload: boolean
   } & (TParentRoute extends undefined
     ? {
         context?: TAllParentContext
@@ -329,7 +338,7 @@ type GetContextFn<
         context: TAllParentContext
         parentContext: TParentContext
       }),
-) => TRouteContext
+) => Promise<TRouteContext> | TRouteContext | void
 
 export type UpdatableRouteOptions<
   TLoader,
@@ -378,19 +387,6 @@ export type UpdatableRouteOptions<
   maxAge?: number
   // If set, a match of this route that becomes inactive (or unused) will be garbage collected after this many milliseconds
   gcMaxAge?: number
-  // This async function is called before a route is loaded.
-  // If an error is thrown here, the route's loader will not be called.
-  // If thrown during a navigation, the navigation will be cancelled and the error will be passed to the `onError` function.
-  // If thrown during a preload event, the error will be logged to the console.
-  beforeLoad?: (
-    opts: LoaderContext<
-      TSearchSchema,
-      TFullSearchSchema,
-      TAllParams,
-      NoInfer<TRouteContext>,
-      TAllContext
-    >,
-  ) => Promise<void> | void
   onError?: (err: any) => void
   // These functions are called as route matches are loaded, stick around and leave the active
   // matches
@@ -641,15 +637,7 @@ export class Route<
     TAllParentContext,
     TRouteContext,
     TAllContext
-  > &
-    UpdatableRouteOptions<
-      TLoader,
-      TSearchSchema,
-      TFullSearchSchema,
-      TAllParams,
-      TRouteContext,
-      TAllContext
-    >
+  >
 
   // Set up in this.init()
   parentRoute!: TParentRoute

package/src/router.ts

@@ -243,6 +243,7 @@ type LinkCurrentTargetElement = {
 }
 
 export interface DehydratedRouterState {
+  matchIds: string[]
   dehydratedMatches: DehydratedRouteMatch[]
 }
 
@@ -298,6 +299,7 @@ export type RouterListener<TRouterEvent extends RouterEvent> = {
 
 const visibilityChangeEvent = 'visibilitychange'
 const focusEvent = 'focus'
+const preloadWarning = 'Error preloading route! ☝️'
 
 export class Router<
   TRouteTree extends AnyRoute = AnyRoute,
@@ -914,52 +916,24 @@ export class Router<
         }
       })()
 
-      Object.assign(match, {
-        ...searchInfo,
-      })
-
-      const contextInfo = (() => {
-        try {
-          const routeContext =
-            route.options.getContext?.({
-              parentContext: parentMatch?.routeContext ?? {},
-              context: parentMatch?.context ?? this?.options.context ?? {},
-              params: match.params,
-              search: match.search,
-            }) || ({} as any)
-
-          const context = {
-            ...(parentMatch?.context ?? this?.options.context),
-            ...routeContext,
-          } as any
-
-          return {
-            context,
-            routeContext,
-          }
-        } catch (err) {
-          route.options.onError?.(err)
-          throw err
-        }
-      })()
-
-      Object.assign(match, {
-        ...contextInfo,
-      })
+      Object.assign(match, searchInfo)
     })
 
     return matches as any
   }
 
   loadMatches = async (
-    resolvedMatches: AnyRouteMatch[],
+    _resolvedMatches: AnyRouteMatch[],
     opts?: {
       preload?: boolean
       maxAge?: number
     },
   ) => {
+    const getFreshMatches = () =>
+      _resolvedMatches.map((d) => this.getRouteMatch(d.id)!)
+
     if (!opts?.preload) {
-      resolvedMatches.forEach((match) => {
+      getFreshMatches().forEach((match) => {
         // Update each match with its latest route data
         this.setRouteMatch(match.id, (s) => ({
           ...s,
@@ -980,7 +954,8 @@ export class Router<
 
     // Check each match middleware to see if the route can be accessed
     try {
-      for (const [index, match] of resolvedMatches.entries()) {
+      for (const [index, match] of getFreshMatches().entries()) {
+        const parentMatch = getFreshMatches()[index - 1]
         const route = this.getRoute(match.routeId)
 
         const handleError = (err: any, code: string) => {
@@ -1020,10 +995,24 @@ export class Router<
         let didError = false
 
         try {
-          await route.options.beforeLoad?.({
-            ...match,
-            preload: !!opts?.preload,
-          })
+          const routeContext =
+            (await route.options.beforeLoad?.({
+              ...match,
+              preload: !!opts?.preload,
+              parentContext: parentMatch?.routeContext ?? {},
+              context: parentMatch?.context ?? this?.options.context ?? {},
+            })) ?? ({} as any)
+
+          const context = {
+            ...(parentMatch?.context ?? this?.options.context),
+            ...routeContext,
+          } as any
+
+          this.setRouteMatch(match.id, (s) => ({
+            ...s,
+            context,
+            routeContext,
+          }))
         } catch (err) {
           handleError(err, 'BEFORE_LOAD')
           didError = true
@@ -1042,7 +1031,7 @@ export class Router<
       throw err
     }
 
-    const validResolvedMatches = resolvedMatches.slice(0, firstBadMatchIndex)
+    const validResolvedMatches = getFreshMatches().slice(0, firstBadMatchIndex)
     const matchPromises: Promise<any>[] = []
 
     validResolvedMatches.forEach((match, index) => {
@@ -1335,7 +1324,7 @@ export class Router<
       if (preload) {
         this.preloadRoute(nextOpts).catch((err) => {
           console.warn(err)
-          console.warn('Error preloading route! ☝️')
+          console.warn(preloadWarning)
         })
       }
     }
@@ -1343,7 +1332,7 @@ export class Router<
     const handleTouchStart = (e: TouchEvent) => {
       this.preloadRoute(nextOpts).catch((err) => {
         console.warn(err)
-        console.warn('Error preloading route! ☝️')
+        console.warn(preloadWarning)
       })
     }
 
@@ -1359,7 +1348,7 @@ export class Router<
           target.preloadTimeout = null
           this.preloadRoute(nextOpts).catch((err) => {
             console.warn(err)
-            console.warn('Error preloading route! ☝️')
+            console.warn(preloadWarning)
           })
         }, preloadDelay)
       }
@@ -1390,6 +1379,7 @@ export class Router<
   dehydrate = (): DehydratedRouter => {
     return {
       state: {
+        matchIds: this.state.matchIds,
         dehydratedMatches: this.state.matches.map((d) =>
           pick(d, [
             'fetchedAt',
@@ -1421,13 +1411,15 @@ export class Router<
     const ctx = _ctx
     this.dehydratedData = ctx.payload as any
     this.options.hydrate?.(ctx.payload as any)
-    const { dehydratedMatches } = ctx.router.state
+    const dehydratedState = ctx.router.state
 
     let matches = this.matchRoutes(
       this.state.location.pathname,
       this.state.location.search,
     ).map((match) => {
-      const dehydratedMatch = dehydratedMatches.find((d) => d.id === match.id)
+      const dehydratedMatch = dehydratedState.dehydratedMatches.find(
+        (d) => d.id === match.id,
+      )
 
       invariant(
         dehydratedMatch,
@@ -1446,6 +1438,7 @@ export class Router<
     this.__store.setState((s) => {
       return {
         ...s,
+        matchIds: dehydratedState.matchIds,
         matches,
         matchesById: this.#mergeMatches(s.matchesById, matches),
       }
@@ -1469,10 +1462,10 @@ export class Router<
         return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
           strKey,
         )}"] = ${JSON.stringify(data)}
-        // ;(() => {
-        //   var el = document.getElementById('${id}')
-        //   el.parentElement.removeChild(el)
-        // })()
+        ;(() => {
+          var el = document.getElementById('${id}')
+          el.parentElement.removeChild(el)
+        })()
         </script>`
       })