@tanstack/router-core 0.0.1-beta.161 → 0.0.1-beta.163

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.161",
+  "version": "0.0.1-beta.163",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -43,7 +43,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.161"
+    "@tanstack/react-store": "0.0.1-beta.163"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js",

package/src/fileRoute.ts

@@ -59,7 +59,7 @@ export type ResolveFilePath<
   ? TrimPathLeft<TFilePath>
   : Replace<
       TrimPathLeft<TFilePath>,
-      TrimPathLeft<TParentRoute['__types']['customId']>,
+      TrimPathLeft<TParentRoute['types']['customId']>,
       ''
     >
 
@@ -96,14 +96,14 @@ export class FileRoute<
       ? AnyPathParams
       : Record<ParsePathParams<TPath>, RouteConstraints['TPath']>,
     TAllParams extends RouteConstraints['TAllParams'] = MergeParamsFromParent<
-      TParentRoute['__types']['allParams'],
+      TParentRoute['types']['allParams'],
       TParams
     >,
-    TParentContext extends RouteConstraints['TParentContext'] = TParentRoute['__types']['routeContext'],
-    TAllParentContext extends RouteConstraints['TId'] = TParentRoute['__types']['context'],
+    TParentContext extends RouteConstraints['TParentContext'] = TParentRoute['types']['routeContext'],
+    TAllParentContext extends RouteConstraints['TId'] = TParentRoute['types']['context'],
     TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
     TContext extends RouteConstraints['TAllContext'] = MergeParamsFromParent<
-      TParentRoute['__types']['context'],
+      TParentRoute['types']['context'],
       TRouteContext
     >,
     TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,

package/src/history.ts

@@ -4,7 +4,7 @@
 
 export interface RouterHistory {
   location: RouterLocation
-  listen: (cb: () => void) => () => void
+  subscribe: (cb: () => void) => () => void
   push: (path: string, state?: any) => void
   replace: (path: string, state?: any) => void
   go: (index: number) => void
@@ -45,7 +45,7 @@ const stopBlocking = () => {
 
 function createHistory(opts: {
   getLocation: () => RouterLocation
-  listener: false | ((onUpdate: () => void) => () => void)
+  subscriber: false | ((onUpdate: () => void) => () => void)
   pushState: (path: string, state: any) => void
   replaceState: (path: string, state: any) => void
   go: (n: number) => void
@@ -55,7 +55,7 @@ function createHistory(opts: {
 }): RouterHistory {
   let location = opts.getLocation()
   let unsub = () => {}
-  let listeners = new Set<() => void>()
+  let subscribers = new Set<() => void>()
   let blockers: BlockerFn[] = []
   let queue: (() => void)[] = []
 
@@ -72,7 +72,7 @@ function createHistory(opts: {
       queue.shift()?.()
     }
 
-    if (!opts.listener) {
+    if (!opts.subscriber) {
       onUpdate()
     }
   }
@@ -84,25 +84,25 @@ function createHistory(opts: {
 
   const onUpdate = () => {
     location = opts.getLocation()
-    listeners.forEach((listener) => listener())
+    subscribers.forEach((subscriber) => subscriber())
   }
 
   return {
     get location() {
       return location
     },
-    listen: (cb: () => void) => {
-      if (listeners.size === 0) {
+    subscribe: (cb: () => void) => {
+      if (subscribers.size === 0) {
         unsub =
-          typeof opts.listener === 'function'
-            ? opts.listener(onUpdate)
+          typeof opts.subscriber === 'function'
+            ? opts.subscriber(onUpdate)
             : () => {}
       }
-      listeners.add(cb)
+      subscribers.add(cb)
 
       return () => {
-        listeners.delete(cb)
-        if (listeners.size === 0) {
+        subscribers.delete(cb)
+        if (subscribers.size === 0) {
           unsub()
         }
       }
@@ -166,7 +166,7 @@ export function createBrowserHistory(opts?: {
 
   return createHistory({
     getLocation,
-    listener: (onUpdate) => {
+    subscriber: (onUpdate) => {
       window.addEventListener(pushStateEvent, onUpdate)
       window.addEventListener(popStateEvent, onUpdate)
 
@@ -234,7 +234,7 @@ export function createMemoryHistory(
 
   return createHistory({
     getLocation,
-    listener: false,
+    subscriber: false,
     pushState: (path, state) => {
       currentState = {
         ...state,

package/src/link.ts

@@ -152,17 +152,17 @@ export type SearchParamOptions<
   TFromSchema = UnionToIntersection<
     FullSearchSchema<TRouteTree> & RouteByPath<TRouteTree, TFrom> extends never
       ? {}
-      : RouteByPath<TRouteTree, TFrom>['__types']['fullSearchSchema']
+      : RouteByPath<TRouteTree, TFrom>['types']['fullSearchSchema']
   >,
   // Find the schema for the new path, and make optional any keys
   // that are already defined in the current schema
   TToSchema = Partial<
-    RouteByPath<TRouteTree, TFrom>['__types']['fullSearchSchema']
+    RouteByPath<TRouteTree, TFrom>['types']['fullSearchSchema']
   > &
     Omit<
-      RouteByPath<TRouteTree, TTo>['__types']['fullSearchSchema'],
+      RouteByPath<TRouteTree, TTo>['types']['fullSearchSchema'],
       keyof PickRequired<
-        RouteByPath<TRouteTree, TFrom>['__types']['fullSearchSchema']
+        RouteByPath<TRouteTree, TFrom>['types']['fullSearchSchema']
       >
     >,
   TFromFullSchema = UnionToIntersection<
@@ -188,14 +188,14 @@ export type PathParamOptions<
   TFromSchema = UnionToIntersection<
     RouteByPath<TRouteTree, TFrom> extends never
       ? {}
-      : RouteByPath<TRouteTree, TFrom>['__types']['allParams']
+      : RouteByPath<TRouteTree, TFrom>['types']['allParams']
   >,
   // Find the schema for the new path, and make optional any keys
   // that are already defined in the current schema
-  TToSchema = Partial<RouteByPath<TRouteTree, TFrom>['__types']['allParams']> &
+  TToSchema = Partial<RouteByPath<TRouteTree, TFrom>['types']['allParams']> &
     Omit<
-      RouteByPath<TRouteTree, TTo>['__types']['allParams'],
-      keyof PickRequired<RouteByPath<TRouteTree, TFrom>['__types']['allParams']>
+      RouteByPath<TRouteTree, TTo>['types']['allParams'],
+      keyof PickRequired<RouteByPath<TRouteTree, TFrom>['types']['allParams']>
     >,
   TFromFullParams = UnionToIntersection<AllParams<TRouteTree> & TFromSchema>,
   TToFullParams = UnionToIntersection<AllParams<TRouteTree> & TToSchema>,

package/src/route.ts

@@ -81,12 +81,12 @@ export type ComponentFromRoute<TRoute> = RegisteredRouteComponent<
 >
 
 export type RouteLoaderFromRoute<TRoute extends AnyRoute> = LoaderFn<
-  TRoute['__types']['loader'],
-  TRoute['__types']['searchSchema'],
-  TRoute['__types']['fullSearchSchema'],
-  TRoute['__types']['allParams'],
-  TRoute['__types']['routeContext'],
-  TRoute['__types']['context']
+  TRoute['types']['loader'],
+  TRoute['types']['searchSchema'],
+  TRoute['types']['fullSearchSchema'],
+  TRoute['types']['allParams'],
+  TRoute['types']['routeContext'],
+  TRoute['types']['context']
 >
 
 export type RouteProps<
@@ -312,7 +312,7 @@ export type UpdatableRouteOptions<
   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 `onLoadError` function.
+  // 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<
@@ -323,15 +323,6 @@ export type UpdatableRouteOptions<
       TContext
     >,
   ) => Promise<void> | void
-  // This function will be called if the route's loader throws an error **during an attempted navigation**.
-  // If you want to redirect due to an error, call `router.navigate()` from within this function.
-  onBeforeLoadError?: (err: any) => void
-  // This function will be called if the route's validateSearch option throws an error **during an attempted validation**.
-  // If you want to redirect due to an error, call `router.navigate()` from within this function.
-  // If you want to display the errorComponent, rethrow the error
-  onValidateSearchError?: (err: any) => void
-  onParseParamsError?: (err: any) => void
-  onLoadError?: (err: any) => void
   onError?: (err: any) => void
   // This function is called
   // when moving from an inactive state to an active one. Likewise, when moving from
@@ -443,13 +434,13 @@ export type ResolveId<
 
 export type InferFullSearchSchema<TRoute> = TRoute extends {
   isRoot: true
-  __types: {
+  types: {
     searchSchema: infer TSearchSchema
   }
 }
   ? TSearchSchema
   : TRoute extends {
-      __types: {
+      types: {
         fullSearchSchema: infer TFullSearchSchema
       }
     }
@@ -542,21 +533,21 @@ export class Route<
     string
   >,
   TAllParams extends RouteConstraints['TAllParams'] = MergeParamsFromParent<
-    TParentRoute['__types']['allParams'],
+    TParentRoute['types']['allParams'],
     TParams
   >,
-  TParentContext extends RouteConstraints['TParentContext'] = TParentRoute['__types']['routeContext'],
-  TAllParentContext extends RouteConstraints['TAllParentContext'] = TParentRoute['__types']['context'],
+  TParentContext extends RouteConstraints['TParentContext'] = TParentRoute['types']['routeContext'],
+  TAllParentContext extends RouteConstraints['TAllParentContext'] = TParentRoute['types']['context'],
   TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
   TAllContext extends RouteConstraints['TAllContext'] = MergeParamsFromParent<
-    TParentRoute['__types']['context'],
+    TParentRoute['types']['context'],
     TRouteContext
   >,
   TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
   TChildren extends RouteConstraints['TChildren'] = unknown,
   TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
 > {
-  __types!: {
+  types!: {
     parentRoute: TParentRoute
     path: TPath
     to: TrimPathRight<TFullPath>

package/src/routeInfo.ts

@@ -63,9 +63,9 @@ export type RoutePaths<TRouteTree extends AnyRoute> =
   | '/'
 
 export type FullSearchSchema<TRouteTree extends AnyRoute> = MergeUnion<
-  ParseRoute<TRouteTree>['__types']['fullSearchSchema']
+  ParseRoute<TRouteTree>['types']['fullSearchSchema']
 > & {}
 
 export type AllParams<TRouteTree extends AnyRoute> = MergeUnion<
-  ParseRoute<TRouteTree>['__types']['allParams']
+  ParseRoute<TRouteTree>['types']['allParams']
 >

package/src/router.ts

@@ -114,7 +114,7 @@ export interface RouteMatch<
   key?: string
   routeId: string
   pathname: string
-  params: TRoute['__types']['allParams']
+  params: TRoute['types']['allParams']
   status: 'pending' | 'success' | 'error'
   isFetching: boolean
   invalid: boolean
@@ -124,13 +124,13 @@ export interface RouteMatch<
   updatedAt: number
   invalidAt: number
   preloadInvalidAt: number
-  loaderData: TRoute['__types']['loader']
+  loaderData: TRoute['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: TRoute['types']['routeContext']
+  context: TRoute['types']['context']
+  routeSearch: TRoute['types']['searchSchema']
+  search: FullSearchSchema<TRouteTree> & TRoute['types']['fullSearchSchema']
   fetchedAt: number
   abortController: AbortController
 }
@@ -138,12 +138,12 @@ export interface RouteMatch<
 export type AnyRouteMatch = RouteMatch<AnyRoute, AnyRoute>
 
 export type RouterContextOptions<TRouteTree extends AnyRoute> =
-  AnyContext extends TRouteTree['__types']['routerContext']
+  AnyContext extends TRouteTree['types']['routerContext']
     ? {
-        context?: TRouteTree['__types']['routerContext']
+        context?: TRouteTree['types']['routerContext']
       }
     : {
-        context: TRouteTree['__types']['routerContext']
+        context: TRouteTree['types']['routerContext']
       }
 
 export interface RouterOptions<
@@ -171,8 +171,7 @@ export interface RouterOptions<
   routeTree?: TRouteTree
   basepath?: string
   createRoute?: (opts: { route: AnyRoute; router: AnyRouter }) => void
-  onRouteChange?: () => void
-  context?: TRouteTree['__types']['routerContext']
+  context?: TRouteTree['types']['routerContext']
   Wrap?: React.ComponentType<{
     children: React.ReactNode
     dehydratedState?: TDehydrated
@@ -197,7 +196,7 @@ export interface RouterState<
   lastUpdated: number
 }
 
-export type ListenerFn = () => void
+export type ListenerFn<TEvent extends RouterEvent> = (event: TEvent) => void
 
 export interface BuildNextOptions {
   to?: string | number | null
@@ -249,6 +248,28 @@ export const componentTypes = [
   'pendingComponent',
 ] as const
 
+export type RouterEvents = {
+  onBeforeLoad: {
+    type: 'onBeforeLoad'
+    from: ParsedLocation
+    to: ParsedLocation
+    pathChanged: boolean
+  }
+  onLoad: {
+    type: 'onLoad'
+    from: ParsedLocation
+    to: ParsedLocation
+    pathChanged: boolean
+  }
+}
+
+export type RouterEvent = RouterEvents[keyof RouterEvents]
+
+export type RouterListener<TRouterEvent extends RouterEvent> = {
+  eventType: TRouterEvent['type']
+  fn: ListenerFn<TRouterEvent>
+}
+
 export class Router<
   TRouteTree extends AnyRoute = AnyRoute,
   TDehydrated extends Record<string, any> = Record<string, any>,
@@ -343,6 +364,32 @@ export class Router<
     }
   }
 
+  subscribers = new Set<RouterListener<RouterEvent>>()
+
+  subscribe = <TType extends keyof RouterEvents>(
+    eventType: TType,
+    fn: ListenerFn<RouterEvents[TType]>,
+  ) => {
+    const listener: RouterListener<any> = {
+      eventType,
+      fn,
+    }
+
+    this.subscribers.add(listener)
+
+    return () => {
+      this.subscribers.delete(listener)
+    }
+  }
+
+  #emit = (routerEvent: RouterEvent) => {
+    this.subscribers.forEach((listener) => {
+      if (listener.eventType === routerEvent.type) {
+        listener.fn(routerEvent)
+      }
+    })
+  }
+
   reset = () => {
     this.__store.setState((s) => Object.assign(s, getInitialRouterState()))
   }
@@ -384,7 +431,7 @@ export class Router<
         location: parsedLocation as any,
       }))
 
-      this.#unsubHistory = this.history.listen(() => {
+      this.#unsubHistory = this.history.subscribe(() => {
         this.safeLoad({
           next: this.#parseLocation(this.state.location),
         })
@@ -435,6 +482,11 @@ export class Router<
 
   load = async (opts?: { next?: ParsedLocation; throwOnError?: boolean }) => {
     const promise = new Promise<void>(async (resolve, reject) => {
+      const prevLocation = this.state.resolvedLocation
+      const pathDidChange = !!(
+        opts?.next && prevLocation!.href !== opts.next.href
+      )
+
       let latestPromise: Promise<void> | undefined | null
 
       const checkLatest = (): undefined | Promise<void> | null => {
@@ -448,6 +500,13 @@ export class Router<
 
       let pendingMatches!: RouteMatch<any, any>[]
 
+      this.#emit({
+        type: 'onBeforeLoad',
+        from: prevLocation,
+        to: opts?.next ?? this.state.location,
+        pathChanged: pathDidChange,
+      })
+
       this.__store.batch(() => {
         if (opts?.next) {
           // Ingest the new location
@@ -489,8 +548,6 @@ export class Router<
           return latestPromise
         }
 
-        const prevLocation = this.state.resolvedLocation
-
         this.__store.setState((s) => ({
           ...s,
           status: 'idle',
@@ -499,9 +556,12 @@ export class Router<
           pendingMatchIds: [],
         }))
 
-        if (prevLocation!.href !== this.state.location.href) {
-          this.options.onRouteChange?.()
-        }
+        this.#emit({
+          type: 'onLoad',
+          from: prevLocation,
+          to: this.state.location,
+          pathChanged: pathDidChange,
+        })
 
         resolve()
       } catch (err) {
@@ -844,19 +904,16 @@ export class Router<
       for (const [index, match] of resolvedMatches.entries()) {
         const route = this.getRoute(match.routeId)
 
-        const handleError = (
-          err: any,
-          handler: undefined | ((err: any) => void),
-        ) => {
+        const handleError = (err: any, code: string) => {
+          err.routerCode = code
           firstBadMatchIndex = firstBadMatchIndex ?? index
-          handler = handler || route.options.onError
 
           if (isRedirect(err)) {
             throw err
           }
 
           try {
-            handler?.(err)
+            route.options.onError?.(err)
           } catch (errorHandlerErr) {
             err = errorHandlerErr
 
@@ -874,11 +931,11 @@ export class Router<
         }
 
         if (match.paramsError) {
-          handleError(match.paramsError, route.options.onParseParamsError)
+          handleError(match.paramsError, 'PARSE_PARAMS')
         }
 
         if (match.searchError) {
-          handleError(match.searchError, route.options.onValidateSearchError)
+          handleError(match.searchError, 'VALIDATE_SEARCH')
         }
 
         let didError = false
@@ -889,7 +946,7 @@ export class Router<
             preload: !!opts?.preload,
           })
         } catch (err) {
-          handleError(err, route.options.onBeforeLoadError)
+          handleError(err, 'BEFORE_LOAD')
           didError = true
         }
 
@@ -968,34 +1025,20 @@ export class Router<
               if ((latestPromise = checkLatest())) return await latestPromise
 
               this.setRouteMatchData(match.id, () => loader, opts)
-            } catch (loaderError) {
-              let latestError = loaderError
+            } catch (error) {
               if ((latestPromise = checkLatest())) return await latestPromise
-              if (handleIfRedirect(loaderError)) return
-
-              if (route.options.onLoadError) {
-                try {
-                  route.options.onLoadError(loaderError)
-                } catch (onLoadError) {
-                  latestError = onLoadError
-                  if (handleIfRedirect(onLoadError)) return
-                }
-              }
+              if (handleIfRedirect(error)) return
 
-              if (
-                (!route.options.onLoadError || latestError !== loaderError) &&
-                route.options.onError
-              ) {
-                try {
-                  route.options.onError(latestError)
-                } catch (onErrorError) {
-                  if (handleIfRedirect(onErrorError)) return
-                }
+              try {
+                route.options.onError?.(error)
+              } catch (onErrorError) {
+                error = onErrorError
+                if (handleIfRedirect(onErrorError)) return
               }
 
               this.setRouteMatch(match.id, (s) => ({
                 ...s,
-                error: loaderError,
+                error,
                 status: 'error',
                 isFetching: false,
                 updatedAt: Date.now(),
@@ -1089,7 +1132,7 @@ export class Router<
   >(
     location: ToOptions<TRouteTree, TFrom, TTo>,
     opts?: MatchRouteOptions,
-  ): false | RouteById<TRouteTree, TResolved>['__types']['allParams'] => {
+  ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {
     location = {
       ...location,
       to: location.to