@tanstack/router-core 0.0.1-beta.19 → 0.0.1-beta.191

package/src/router.ts

@@ -1,214 +1,234 @@
-import {
-  BrowserHistory,
-  createBrowserHistory,
-  createMemoryHistory,
-  HashHistory,
-  History,
-  MemoryHistory,
-} from 'history'
+import { Store } from '@tanstack/store'
 import invariant from 'tiny-invariant'
-import { GetFrameworkGeneric } from './frameworks'
+
+//
 
 import {
   LinkInfo,
   LinkOptions,
-  NavigateOptionsAbsolute,
+  NavigateOptions,
   ToOptions,
-  ValidFromPath,
+  ResolveRelativePath,
 } from './link'
 import {
   cleanPath,
   interpolatePath,
   joinPaths,
   matchPathname,
+  parsePathname,
   resolvePath,
+  trimPath,
+  trimPathRight,
 } from './path'
-import { AnyRoute, createRoute, Route } from './route'
 import {
-  AnyLoaderData,
-  AnyPathParams,
-  AnyRouteConfig,
+  Route,
   AnySearchSchema,
-  LoaderContext,
-  RouteConfig,
-  SearchFilter,
-} from './routeConfig'
+  AnyRoute,
+  AnyContext,
+  AnyPathParams,
+  RegisteredRouteComponent,
+  RegisteredErrorRouteComponent,
+  RegisteredPendingRouteComponent,
+  RouteMask,
+} from './route'
 import {
-  AllRouteInfo,
-  AnyAllRouteInfo,
-  AnyRouteInfo,
-  RouteInfo,
   RoutesById,
+  RoutesByPath,
+  ParseRoute,
+  FullSearchSchema,
+  RouteById,
+  RoutePaths,
+  RouteIds,
 } from './routeInfo'
-import { createRouteMatch, RouteMatch } from './routeMatch'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
   functionalUpdate,
   last,
+  NoInfer,
   pick,
   PickAsRequired,
-  PickRequired,
-  replaceEqualDeep,
   Timeout,
   Updater,
+  replaceEqualDeep,
+  partialDeepEqual,
+  NonNullableUpdater,
 } from './utils'
+import {
+  createBrowserHistory,
+  createMemoryHistory,
+  HistoryLocation,
+  HistoryState,
+  RouterHistory,
+} from './history'
+
+//
+
+declare global {
+  interface Window {
+    __TSR_DEHYDRATED__?: HydrationCtx
+  }
+}
+
+export interface Register {
+  // router: Router
+}
 
 export interface LocationState {}
 
-export interface Location<
-  TSearchObj extends AnySearchSchema = {},
-  TState extends LocationState = LocationState,
-> {
+export type AnyRouter = Router<any, any>
+
+export type RegisteredRouter = Register extends {
+  router: infer TRouter extends AnyRouter
+}
+  ? TRouter
+  : AnyRouter
+
+export interface ParsedLocation<TSearchObj extends AnySearchSchema = {}> {
   href: string
   pathname: string
   search: TSearchObj
   searchStr: string
-  state: TState
+  state: HistoryState
   hash: string
-  key?: string
+  maskedLocation?: ParsedLocation<TSearchObj>
+  unmaskOnReload?: boolean
 }
 
 export interface FromLocation {
   pathname: string
   search?: unknown
-  key?: string
   hash?: string
 }
 
 export type SearchSerializer = (searchObj: Record<string, any>) => string
 export type SearchParser = (searchStr: string) => Record<string, any>
-export type FilterRoutesFn = <TRoute extends Route<any, RouteInfo>>(
-  routeConfigs: TRoute[],
-) => TRoute[]
 
-export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
-  history?: BrowserHistory | MemoryHistory | HashHistory
-  stringifySearch?: SearchSerializer
-  parseSearch?: SearchParser
-  filterRoutes?: FilterRoutesFn
-  defaultPreload?: false | 'intent'
-  defaultPreloadMaxAge?: number
-  defaultPreloadGcMaxAge?: number
-  defaultPreloadDelay?: number
-  defaultComponent?: GetFrameworkGeneric<'Component'>
-  defaultErrorComponent?: GetFrameworkGeneric<'Component'>
-  defaultPendingComponent?: GetFrameworkGeneric<'Component'>
-  defaultLoaderMaxAge?: number
-  defaultLoaderGcMaxAge?: number
-  caseSensitive?: boolean
-  routeConfig?: TRouteConfig
-  basepath?: string
-  useServerData?: boolean
-  createRouter?: (router: Router<any, any>) => void
-  createRoute?: (opts: { route: AnyRoute; router: Router<any, any> }) => void
-  loadComponent?: (
-    component: GetFrameworkGeneric<'Component'>,
-  ) => Promise<GetFrameworkGeneric<'Component'>>
-  // renderComponent?: (
-  //   component: GetFrameworkGeneric<'Component'>,
-  // ) => GetFrameworkGeneric<'Element'>
+export type HydrationCtx = {
+  router: DehydratedRouter
+  payload: Record<string, any>
 }
 
-export interface Action<
-  TPayload = unknown,
-  TResponse = unknown,
-  // TError = unknown,
+export interface RouteMatch<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
 > {
-  submit: (
-    submission?: TPayload,
-    actionOpts?: { invalidate?: boolean; multi?: boolean },
-  ) => Promise<TResponse>
-  current?: ActionState<TPayload, TResponse>
-  latest?: ActionState<TPayload, TResponse>
-  submissions: ActionState<TPayload, TResponse>[]
+  id: string
+  key?: string
+  routeId: TRouteId
+  pathname: string
+  params: RouteById<TRouteTree, TRouteId>['types']['allParams']
+  status: 'pending' | 'success' | 'error'
+  isFetching: boolean
+  invalid: boolean
+  error: unknown
+  paramsError: unknown
+  searchError: unknown
+  updatedAt: number
+  maxAge: number
+  preloadMaxAge: number
+  loaderData: RouteById<TRouteTree, TRouteId>['types']['loader']
+  loadPromise?: Promise<void>
+  __resolveLoadPromise?: () => void
+  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 interface ActionState<
-  TPayload = unknown,
-  TResponse = unknown,
-  // TError = unknown,
-> {
-  submittedAt: number
-  status: 'idle' | 'pending' | 'success' | 'error'
-  submission: TPayload
-  isMulti: boolean
-  data?: TResponse
-  error?: unknown
-}
+export type AnyRouteMatch = RouteMatch<any>
 
-export interface Loader<
-  TFullSearchSchema extends AnySearchSchema = {},
-  TAllParams extends AnyPathParams = {},
-  TRouteLoaderData = AnyLoaderData,
-> {
-  fetch: keyof PickRequired<TFullSearchSchema> extends never
-    ? keyof TAllParams extends never
-      ? (loaderContext: { signal?: AbortSignal }) => Promise<TRouteLoaderData>
-      : (loaderContext: {
-          params: TAllParams
-          search?: TFullSearchSchema
-          signal?: AbortSignal
-        }) => Promise<TRouteLoaderData>
-    : keyof TAllParams extends never
-    ? (loaderContext: {
-        search: TFullSearchSchema
-        params: TAllParams
-        signal?: AbortSignal
-      }) => Promise<TRouteLoaderData>
-    : (loaderContext: {
-        search: TFullSearchSchema
-        signal?: AbortSignal
-      }) => Promise<TRouteLoaderData>
-  current?: LoaderState<TFullSearchSchema, TAllParams>
-  latest?: LoaderState<TFullSearchSchema, TAllParams>
-  pending: LoaderState<TFullSearchSchema, TAllParams>[]
-}
+export type RouterContextOptions<TRouteTree extends AnyRoute> =
+  AnyContext extends TRouteTree['types']['routerContext']
+    ? {
+        context?: TRouteTree['types']['routerContext']
+      }
+    : {
+        context: TRouteTree['types']['routerContext']
+      }
 
-export interface LoaderState<
-  TFullSearchSchema extends AnySearchSchema = {},
-  TAllParams extends AnyPathParams = {},
+export interface RouterOptions<
+  TRouteTree extends AnyRoute,
+  TDehydrated extends Record<string, any>,
 > {
-  loadedAt: number
-  loaderContext: LoaderContext<AnyLoaderData, TFullSearchSchema, TAllParams>
+  history?: RouterHistory
+  stringifySearch?: SearchSerializer
+  parseSearch?: SearchParser
+  defaultPreload?: false | 'intent'
+  defaultPreloadDelay?: number
+  reloadOnWindowFocus?: boolean
+  defaultComponent?: RegisteredRouteComponent<
+    unknown,
+    AnySearchSchema,
+    AnyPathParams,
+    AnyContext,
+    AnyContext
+  >
+  defaultErrorComponent?: RegisteredErrorRouteComponent<
+    AnySearchSchema,
+    AnyPathParams,
+    AnyContext,
+    AnyContext
+  >
+  defaultPendingComponent?: RegisteredPendingRouteComponent<
+    AnySearchSchema,
+    AnyPathParams,
+    AnyContext,
+    AnyContext
+  >
+  defaultMaxAge?: number
+  defaultGcMaxAge?: number
+  defaultPreloadMaxAge?: number
+  caseSensitive?: boolean
+  routeTree?: TRouteTree
+  basepath?: string
+  createRoute?: (opts: { route: AnyRoute; router: AnyRouter }) => void
+  context?: TRouteTree['types']['routerContext']
+  dehydrate?: () => TDehydrated
+  hydrate?: (dehydrated: TDehydrated) => void
+  routeMasks?: RouteMask<TRouteTree>[]
+  unmaskOnReload?: boolean
 }
 
-export interface RouterState {
-  status: 'idle' | 'loading'
-  location: Location
-  matches: RouteMatch[]
-  lastUpdated: number
-  actions: Record<string, Action>
-  loaders: Record<string, Loader>
-  pending?: PendingState
+export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
+  status: 'idle' | 'pending'
   isFetching: boolean
-  isPreloading: boolean
-}
-
-export interface PendingState {
-  location: Location
-  matches: RouteMatch[]
+  matchesById: Record<string, RouteMatch<TRouteTree>>
+  matchIds: string[]
+  pendingMatchIds: string[]
+  matches: RouteMatch<TRouteTree>[]
+  pendingMatches: RouteMatch<TRouteTree>[]
+  renderedMatchIds: string[]
+  renderedMatches: RouteMatch<TRouteTree>[]
+  location: ParsedLocation<FullSearchSchema<TRouteTree>>
+  resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
+  lastUpdated: number
 }
 
-type Listener = (router: Router<any, any>) => void
-
-export type ListenerFn = () => void
+export type ListenerFn<TEvent extends RouterEvent> = (event: TEvent) => void
 
 export interface BuildNextOptions {
   to?: string | number | null
-  params?: true | Updater<Record<string, any>>
+  params?: true | Updater<unknown>
   search?: true | Updater<unknown>
   hash?: true | Updater<string>
-  state?: LocationState
-  key?: string
+  state?: true | NonNullableUpdater<LocationState>
+  mask?: {
+    to?: string | number | null
+    params?: true | Updater<unknown>
+    search?: true | Updater<unknown>
+    hash?: true | Updater<string>
+    state?: true | NonNullableUpdater<LocationState>
+    unmaskOnReload?: boolean
+  }
   from?: string
-  fromCurrent?: boolean
-  __preSearchFilters?: SearchFilter<any>[]
-  __postSearchFilters?: SearchFilter<any>[]
 }
 
-export type MatchCacheEntry = {
-  gc: number
-  match: RouteMatch
+export interface CommitLocationOptions {
+  replace?: boolean
+  resetScroll?: boolean
 }
 
 export interface MatchLocation {
@@ -216,1150 +236,1833 @@ export interface MatchLocation {
   fuzzy?: boolean
   caseSensitive?: boolean
   from?: string
-  fromCurrent?: boolean
 }
 
 export interface MatchRouteOptions {
-  pending: boolean
+  pending?: boolean
   caseSensitive?: boolean
+  includeSearch?: boolean
+  fuzzy?: boolean
 }
 
 type LinkCurrentTargetElement = {
   preloadTimeout?: null | ReturnType<typeof setTimeout>
 }
 
-interface DehydratedRouterState
-  extends Pick<RouterState, 'status' | 'location' | 'lastUpdated'> {
-  matches: DehydratedRouteMatch[]
+export interface DehydratedRouterState {
+  matchIds: string[]
+  dehydratedMatches: DehydratedRouteMatch[]
+}
+
+export type DehydratedRouteMatch = Pick<
+  RouteMatch,
+  | 'fetchedAt'
+  | 'invalid'
+  | 'maxAge'
+  | 'preloadMaxAge'
+  | 'id'
+  | 'loaderData'
+  | 'status'
+  | 'updatedAt'
+>
+
+export interface DehydratedRouter {
+  state: DehydratedRouterState
+}
+
+export type RouterConstructorOptions<
+  TRouteTree extends AnyRoute,
+  TDehydrated extends Record<string, any>,
+> = Omit<RouterOptions<TRouteTree, TDehydrated>, 'context'> &
+  RouterContextOptions<TRouteTree>
+
+export const componentTypes = [
+  'component',
+  'errorComponent',
+  '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>
 }
 
-interface DehydratedRouteMatch
-  extends Pick<
-    RouteMatch<any, any>,
-    | 'matchId'
-    | 'status'
-    | 'routeLoaderData'
-    | 'loaderData'
-    | 'isInvalid'
-    | 'invalidAt'
-  > {}
-
-export interface Router<
-  TRouteConfig extends AnyRouteConfig = RouteConfig,
-  TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+const visibilityChangeEvent = 'visibilitychange'
+const focusEvent = 'focus'
+const preloadWarning = 'Error preloading route! ☝️'
+
+export class Router<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TDehydrated extends Record<string, any> = Record<string, any>,
 > {
-  types: {
-    // Super secret internal stuff
-    RouteConfig: TRouteConfig
-    AllRouteInfo: TAllRouteInfo
+  types!: {
+    RootRoute: TRouteTree
   }
 
-  // Public API
-  history: BrowserHistory | MemoryHistory | HashHistory
   options: PickAsRequired<
-    RouterOptions<TRouteConfig>,
-    'stringifySearch' | 'parseSearch'
+    RouterOptions<TRouteTree, TDehydrated>,
+    'stringifySearch' | 'parseSearch' | 'context'
   >
-  // Computed in this.update()
-  basepath: string
-  // Internal:
-  listeners: Listener[]
-  location: Location
-  navigateTimeout?: Timeout
-  nextAction?: 'push' | 'replace'
-  state: RouterState
-  routeTree: Route<TAllRouteInfo, RouteInfo>
-  routesById: RoutesById<TAllRouteInfo>
-  navigationPromise: Promise<void>
-  startedLoadingAt: number
-  resolveNavigation: () => void
-  subscribe: (listener: Listener) => () => void
-  reset: () => void
-  notify: () => void
-  mount: () => () => void
-  onFocus: () => void
-  update: <TRouteConfig extends RouteConfig = RouteConfig>(
-    opts?: RouterOptions<TRouteConfig>,
-  ) => Router<TRouteConfig>
-
-  buildNext: (opts: BuildNextOptions) => Location
-  cancelMatches: () => void
-  load: (next?: Location) => Promise<void>
-  matchCache: Record<string, MatchCacheEntry>
-  cleanMatchCache: () => void
-  getRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
-    id: TId,
-  ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-  loadRoute: (navigateOpts: BuildNextOptions) => Promise<RouteMatch[]>
-  preloadRoute: (
-    navigateOpts: BuildNextOptions,
-    loaderOpts: { maxAge?: number; gcMaxAge?: number },
-  ) => Promise<RouteMatch[]>
-  matchRoutes: (
-    pathname: string,
-    opts?: { strictParseParams?: boolean },
-  ) => RouteMatch[]
-  loadMatches: (
-    resolvedMatches: RouteMatch[],
-    loaderOpts?:
-      | { preload: true; maxAge: number; gcMaxAge: number }
-      | { preload?: false; maxAge?: never; gcMaxAge?: never },
-  ) => Promise<void>
-  loadMatchData: (
-    routeMatch: RouteMatch<any, any>,
-  ) => Promise<Record<string, unknown>>
-  invalidateRoute: (opts: MatchLocation) => void
-  reload: () => Promise<void>
-  resolvePath: (from: string, path: string) => string
-  navigate: <
-    TFrom extends ValidFromPath<TAllRouteInfo> = '/',
-    TTo extends string = '.',
-  >(
-    opts: NavigateOptionsAbsolute<TAllRouteInfo, TFrom, TTo>,
-  ) => Promise<void>
-  matchRoute: <
-    TFrom extends ValidFromPath<TAllRouteInfo> = '/',
-    TTo extends string = '.',
-  >(
-    matchLocation: ToOptions<TAllRouteInfo, TFrom, TTo>,
-    opts?: MatchRouteOptions,
-  ) => boolean
-  buildLink: <
-    TFrom extends ValidFromPath<TAllRouteInfo> = '/',
-    TTo extends string = '.',
-  >(
-    opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
-  ) => LinkInfo
-  dehydrateState: () => DehydratedRouterState
-  hydrateState: (state: DehydratedRouterState) => void
-  __: {
-    buildRouteTree: (
-      routeConfig: RouteConfig,
-    ) => Route<TAllRouteInfo, AnyRouteInfo>
-    parseLocation: (
-      location: History['location'],
-      previousLocation?: Location,
-    ) => Location
-    buildLocation: (dest: BuildNextOptions) => Location
-    commitLocation: (next: Location, replace?: boolean) => Promise<void>
-    navigate: (
-      location: BuildNextOptions & { replace?: boolean },
-    ) => Promise<void>
-  }
-}
+  history!: RouterHistory
+  #unsubHistory?: () => void
+  basepath!: string
+  routeTree!: TRouteTree
+  routesById!: RoutesById<TRouteTree>
+  routesByPath!: RoutesByPath<TRouteTree>
+  flatRoutes!: ParseRoute<TRouteTree>[]
+  navigateTimeout: undefined | Timeout
+  nextAction: undefined | 'push' | 'replace'
+  navigationPromise: undefined | Promise<void>
+
+  __store: Store<RouterState<TRouteTree>>
+  state: RouterState<TRouteTree>
+  dehydratedData?: TDehydrated
+  resetNextScroll = false
+  tempLocationKey = `${Math.round(Math.random() * 10000000)}`
+  // nextTemporaryLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>
+
+  constructor(options: RouterConstructorOptions<TRouteTree, TDehydrated>) {
+    this.options = {
+      defaultPreloadDelay: 50,
+      context: undefined!,
+      ...options,
+      stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+      parseSearch: options?.parseSearch ?? defaultParseSearch,
+      // fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn,
+    }
 
-// Detect if we're in the DOM
-const isServer =
-  typeof window === 'undefined' || !window.document?.createElement
+    this.__store = new Store<RouterState<TRouteTree>>(getInitialRouterState(), {
+      onUpdate: () => {
+        const prev = this.state
 
-// This is the default history object if none is defined
-const createDefaultHistory = () =>
-  isServer ? createMemoryHistory() : createBrowserHistory()
+        const next = this.__store.state
 
-function getInitialRouterState(): RouterState {
-  return {
-    status: 'idle',
-    location: null!,
-    matches: [],
-    actions: {},
-    loaders: {},
-    lastUpdated: Date.now(),
-    isFetching: false,
-    isPreloading: false,
-  }
-}
+        const matchesByIdChanged = prev.matchesById !== next.matchesById
+        let matchesChanged
+        let pendingMatchesChanged
 
-export function createRouter<
-  TRouteConfig extends AnyRouteConfig = RouteConfig,
-  TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
->(
-  userOptions?: RouterOptions<TRouteConfig>,
-): Router<TRouteConfig, TAllRouteInfo> {
-  const history = userOptions?.history || createDefaultHistory()
-
-  const originalOptions = {
-    defaultLoaderGcMaxAge: 5 * 60 * 1000,
-    defaultLoaderMaxAge: 0,
-    defaultPreloadMaxAge: 2000,
-    defaultPreloadDelay: 50,
-    ...userOptions,
-    stringifySearch: userOptions?.stringifySearch ?? defaultStringifySearch,
-    parseSearch: userOptions?.parseSearch ?? defaultParseSearch,
-  }
+        if (!matchesByIdChanged) {
+          matchesChanged =
+            prev.matchIds.length !== next.matchIds.length ||
+            prev.matchIds.some((d, i) => d !== next.matchIds[i])
 
-  let router: Router<TRouteConfig, TAllRouteInfo> = {
-    types: undefined!,
-
-    // public api
-    history,
-    options: originalOptions,
-    listeners: [],
-    // Resolved after construction
-    basepath: '',
-    routeTree: undefined!,
-    routesById: {} as any,
-    location: undefined!,
-    //
-    navigationPromise: Promise.resolve(),
-    resolveNavigation: () => {},
-    matchCache: {},
-    state: getInitialRouterState(),
-    reset: () => {
-      router.state = getInitialRouterState()
-      router.notify()
-    },
-    startedLoadingAt: Date.now(),
-    subscribe: (listener: Listener): (() => void) => {
-      router.listeners.push(listener as Listener)
-      return () => {
-        router.listeners = router.listeners.filter((x) => x !== listener)
-      }
-    },
-    getRoute: (id) => {
-      return router.routesById[id]
-    },
-    notify: (): void => {
-      const isFetching =
-        router.state.status === 'loading' ||
-        router.state.matches.some((d) => d.isFetching)
-
-      const isPreloading = Object.values(router.matchCache).some(
-        (d) =>
-          d.match.isFetching &&
-          !router.state.matches.find((dd) => dd.matchId === d.match.matchId),
-      )
+          pendingMatchesChanged =
+            prev.pendingMatchIds.length !== next.pendingMatchIds.length ||
+            prev.pendingMatchIds.some((d, i) => d !== next.pendingMatchIds[i])
+        }
 
-      if (
-        router.state.isFetching !== isFetching ||
-        router.state.isPreloading !== isPreloading
-      ) {
-        router.state = {
-          ...router.state,
-          isFetching,
-          isPreloading,
+        if (matchesByIdChanged || matchesChanged) {
+          next.matches = next.matchIds.map((id) => {
+            return next.matchesById[id] as any
+          })
         }
-      }
 
-      cascadeLoaderData(router.state.matches)
-      router.listeners.forEach((listener) => listener(router))
-    },
+        if (matchesByIdChanged || pendingMatchesChanged) {
+          next.pendingMatches = next.pendingMatchIds.map((id) => {
+            return next.matchesById[id] as any
+          })
+        }
 
-    dehydrateState: () => {
-      return {
-        ...pick(router.state, ['status', 'location', 'lastUpdated']),
-        matches: router.state.matches.map((match) =>
-          pick(match, [
-            'matchId',
-            'status',
-            'routeLoaderData',
-            'loaderData',
-            'isInvalid',
-            'invalidAt',
-          ]),
-        ),
-      }
-    },
+        if (matchesByIdChanged || matchesChanged || pendingMatchesChanged) {
+          const hasPendingComponent = next.pendingMatches.some((d) => {
+            const route = this.getRoute(d.routeId as any)
+            return !!route?.options.pendingComponent
+          })
 
-    hydrateState: (dehydratedState) => {
-      // Match the routes
-      const matches = router.matchRoutes(router.location.pathname, {
-        strictParseParams: true,
-      })
+          next.renderedMatchIds = hasPendingComponent
+            ? next.pendingMatchIds
+            : next.matchIds
 
-      matches.forEach((match, index) => {
-        const dehydratedMatch = dehydratedState.matches[index]
-        invariant(
-          dehydratedMatch,
-          'Oh no! Dehydrated route matches did not match the active state of the router 😬',
+          next.renderedMatches = next.renderedMatchIds.map((id) => {
+            return next.matchesById[id] as any
+          })
+        }
+
+        next.isFetching = [...next.matches, ...next.pendingMatches].some(
+          (d) => d.isFetching,
         )
-        Object.assign(match, dehydratedMatch)
-      })
 
-      matches.forEach((match) => match.__.validate())
+        this.state = next
+      },
+      defaultPriority: 'low',
+    })
 
-      router.state = {
-        ...router.state,
-        ...dehydratedState,
-        matches,
-      }
-    },
+    this.state = this.__store.state
 
-    mount: () => {
-      const next = router.__.buildLocation({
-        to: '.',
-        search: true,
-        hash: true,
-      })
+    this.update(options)
 
-      // If the current location isn't updated, trigger a navigation
-      // to the current location. Otherwise, load the current location.
-      if (next.href !== router.location.href) {
-        router.__.commitLocation(next, true)
-      }
+    const nextLocation = this.buildLocation({
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+    })
 
-      if (!router.state.matches.length) {
-        router.load()
-      }
+    if (this.state.location.href !== nextLocation.href) {
+      this.#commitLocation({ ...nextLocation, replace: true })
+    }
+  }
 
-      const unsub = router.history.listen((event) => {
-        router.load(router.__.parseLocation(event.location, router.location))
-      })
+  subscribers = new Set<RouterListener<RouterEvent>>()
 
-      // addEventListener does not exist in React Native, but window does
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (!isServer && window.addEventListener) {
-        // Listen to visibillitychange and focus
-        window.addEventListener('visibilitychange', router.onFocus, false)
-        window.addEventListener('focus', router.onFocus, false)
-      }
+  subscribe = <TType extends keyof RouterEvents>(
+    eventType: TType,
+    fn: ListenerFn<RouterEvents[TType]>,
+  ) => {
+    const listener: RouterListener<any> = {
+      eventType,
+      fn,
+    }
 
-      return () => {
-        unsub()
-        if (!isServer && window.removeEventListener) {
-          // Be sure to unsubscribe if a new handler is set
-          window.removeEventListener('visibilitychange', router.onFocus)
-          window.removeEventListener('focus', router.onFocus)
-        }
-      }
-    },
+    this.subscribers.add(listener)
 
-    onFocus: () => {
-      router.load()
-    },
+    return () => {
+      this.subscribers.delete(listener)
+    }
+  }
 
-    update: (opts) => {
-      const newHistory = opts?.history !== router.history
-      if (!router.location || newHistory) {
-        if (opts?.history) {
-          router.history = opts.history
-        }
-        router.location = router.__.parseLocation(router.history.location)
-        router.state.location = router.location
+  #emit = (routerEvent: RouterEvent) => {
+    this.subscribers.forEach((listener) => {
+      if (listener.eventType === routerEvent.type) {
+        listener.fn(routerEvent)
       }
+    })
+  }
 
-      Object.assign(router.options, opts)
+  reset = () => {
+    this.__store.setState((s) => Object.assign(s, getInitialRouterState()))
+  }
 
-      const { basepath, routeConfig } = router.options
+  mount = () => {
+    // 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)
+    }
 
-      router.basepath = cleanPath(`/${basepath ?? ''}`)
+    this.safeLoad()
 
-      if (routeConfig) {
-        router.routesById = {} as any
-        router.routeTree = router.__.buildRouteTree(routeConfig)
+    return () => {
+      if (typeof window !== 'undefined' && window.removeEventListener) {
+        window.removeEventListener(visibilityChangeEvent, this.#onFocus)
+        window.removeEventListener(focusEvent, this.#onFocus)
       }
+    }
+  }
 
-      return router as any
-    },
-
-    cancelMatches: () => {
-      ;[
-        ...router.state.matches,
-        ...(router.state.pending?.matches ?? []),
-      ].forEach((match) => {
-        match.cancel()
+  #onFocus = () => {
+    if (this.options.reloadOnWindowFocus ?? true) {
+      this.invalidate({
+        __fromFocus: true,
       })
-    },
+    }
+  }
 
-    load: async (next?: Location) => {
-      const id = Math.random()
-      router.startedLoadingAt = id
+  update = (opts?: RouterOptions<any, any>): this => {
+    this.options = {
+      ...this.options,
+      ...opts,
+      context: {
+        ...this.options.context,
+        ...opts?.context,
+      },
+    }
 
-      if (next) {
-        // Ingest the new location
-        router.location = next
+    if (
+      !this.history ||
+      (this.options.history && this.options.history !== this.history)
+    ) {
+      if (this.#unsubHistory) {
+        this.#unsubHistory()
       }
 
-      // Cancel any pending matches
-      router.cancelMatches()
+      this.history =
+        this.options.history ??
+        (isServer ? createMemoryHistory() : createBrowserHistory()!)
 
-      // Match the routes
-      const matches = router.matchRoutes(router.location.pathname, {
-        strictParseParams: true,
+      const parsedLocation = this.#parseLocation()
+
+      this.__store.setState((s) => ({
+        ...s,
+        resolvedLocation: parsedLocation as any,
+        location: parsedLocation as any,
+      }))
+
+      this.#unsubHistory = this.history.subscribe(() => {
+        this.safeLoad({
+          next: this.#parseLocation(this.state.location),
+        })
       })
+    }
 
-      if (typeof document !== 'undefined') {
-        router.state = {
-          ...router.state,
-          pending: {
-            matches: matches,
-            location: router.location,
-          },
-          status: 'loading',
-        }
-      } else {
-        router.state = {
-          ...router.state,
-          matches: matches,
-          location: router.location,
-          status: 'loading',
-        }
-      }
+    const { basepath, routeTree } = this.options
 
-      router.notify()
+    this.basepath = `/${trimPath(basepath ?? '') ?? ''}`
 
-      // Load the matches
-      await router.loadMatches(matches)
+    if (routeTree && routeTree !== this.routeTree) {
+      this.#processRoutes(routeTree)
+    }
 
-      if (router.startedLoadingAt !== id) {
-        // Ignore side-effects of match loading
-        return router.navigationPromise
-      }
+    return this
+  }
 
-      const previousMatches = router.state.matches
+  cancelMatches = () => {
+    this.state.matches.forEach((match) => {
+      this.cancelMatch(match.id)
+    })
+  }
 
-      const exiting: RouteMatch[] = [],
-        staying: RouteMatch[] = []
+  cancelMatch = (id: string) => {
+    this.getRouteMatch(id)?.abortController?.abort()
+  }
 
-      previousMatches.forEach((d) => {
-        if (matches.find((dd) => dd.matchId === d.matchId)) {
-          staying.push(d)
-        } else {
-          exiting.push(d)
-        }
-      })
+  safeLoad = async (opts?: { next?: ParsedLocation }) => {
+    try {
+      return this.load(opts)
+    } catch (err) {
+      // Don't do anything
+    }
+  }
 
-      const entering = matches.filter((d) => {
-        return !previousMatches.find((dd) => dd.matchId === d.matchId)
-      })
+  latestLoadPromise: Promise<void> = Promise.resolve()
+
+  load = async (opts?: {
+    next?: ParsedLocation
+    throwOnError?: boolean
+    __dehydratedMatches?: DehydratedRouteMatch[]
+  }) => {
+    const promise = new Promise<void>(async (resolve, reject) => {
+      const prevLocation = this.state.resolvedLocation
+      const pathDidChange = !!(
+        opts?.next && prevLocation!.href !== opts.next.href
+      )
 
-      const now = Date.now()
+      let latestPromise: Promise<void> | undefined | null
 
-      exiting.forEach((d) => {
-        d.__.onExit?.({
-          params: d.params,
-          search: d.routeSearch,
-        })
+      const checkLatest = (): undefined | Promise<void> | null => {
+        return this.latestLoadPromise !== promise
+          ? this.latestLoadPromise
+          : undefined
+      }
 
-        // Clear idle error states when match leaves
-        if (d.status === 'error' && !d.isFetching) {
-          d.status = 'idle'
-          d.error = undefined
-        }
-        const gc = Math.max(
-          d.options.loaderGcMaxAge ?? router.options.defaultLoaderGcMaxAge ?? 0,
-          d.options.loaderMaxAge ?? router.options.defaultLoaderMaxAge ?? 0,
-        )
-        if (gc > 0) {
-          router.matchCache[d.matchId] = {
-            gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
-            match: d,
-          }
-        }
-      })
+      // Cancel any pending matches
 
-      staying.forEach((d) => {
-        d.options.onTransition?.({
-          params: d.params,
-          search: d.routeSearch,
-        })
+      let pendingMatches!: RouteMatch<any, any>[]
+
+      this.#emit({
+        type: 'onBeforeLoad',
+        from: prevLocation,
+        to: opts?.next ?? this.state.location,
+        pathChanged: pathDidChange,
       })
 
-      entering.forEach((d) => {
-        d.__.onExit = d.options.onMatch?.({
-          params: d.params,
-          search: d.search,
-        })
-        delete router.matchCache[d.matchId]
+      this.__store.batch(() => {
+        if (opts?.next) {
+          // Ingest the new location
+          this.__store.setState((s) => ({
+            ...s,
+            location: opts.next! as any,
+          }))
+        }
+
+        // Match the routes
+        pendingMatches = this.matchRoutes(
+          this.state.location.pathname,
+          this.state.location.search,
+          {
+            throwOnError: opts?.throwOnError,
+            debug: true,
+          },
+        )
+
+        this.__store.setState((s) => ({
+          ...s,
+          status: 'pending',
+          pendingMatchIds: pendingMatches.map((d) => d.id),
+          matchesById: this.#mergeMatches(s.matchesById, pendingMatches),
+        }))
       })
 
-      if (router.startedLoadingAt !== id) {
-        // Ignore side-effects of match loading
-        return
-      }
+      try {
+        // Load the matches
+        try {
+          await this.loadMatches(pendingMatches.map((d) => d.id))
+        } catch (err) {
+          // swallow this error, since we'll display the
+          // errors on the route components
+        }
 
-      matches.forEach((match) => {
-        // Clear actions
-        if (match.action) {
-          match.action.current = undefined
-          match.action.submissions = []
+        // Only apply the latest transition
+        if ((latestPromise = checkLatest())) {
+          return latestPromise
         }
-      })
 
-      router.state = {
-        ...router.state,
-        location: router.location,
-        matches,
-        pending: undefined,
-        status: 'idle',
-      }
+        const exitingMatchIds = this.state.matchIds.filter(
+          (id) => !this.state.pendingMatchIds.includes(id),
+        )
 
-      router.notify()
-      router.resolveNavigation()
-    },
+        const enteringMatchIds = this.state.pendingMatchIds.filter(
+          (id) => !this.state.matchIds.includes(id),
+        )
 
-    cleanMatchCache: () => {
-      const now = Date.now()
+        const stayingMatchIds = this.state.matchIds.filter((id) =>
+          this.state.pendingMatchIds.includes(id),
+        )
 
-      Object.keys(router.matchCache).forEach((matchId) => {
-        const entry = router.matchCache[matchId]!
+        this.__store.setState((s) => ({
+          ...s,
+          status: 'idle',
+          resolvedLocation: s.location,
+          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)
+          })
+        })
 
-        // Don't remove loading matches
-        if (entry.match.status === 'loading') {
-          return
-        }
+        this.#emit({
+          type: 'onLoad',
+          from: prevLocation,
+          to: this.state.location,
+          pathChanged: pathDidChange,
+        })
 
-        // Do not remove successful matches that are still valid
-        if (entry.gc > 0 && entry.gc > now) {
-          return
+        resolve()
+      } catch (err) {
+        // Only apply the latest transition
+        if ((latestPromise = checkLatest())) {
+          return latestPromise
         }
 
-        // Everything else gets removed
-        delete router.matchCache[matchId]
-      })
-    },
+        reject(err)
+      }
+    })
 
-    loadRoute: async (navigateOpts = router.location) => {
-      const next = router.buildNext(navigateOpts)
-      const matches = router.matchRoutes(next.pathname, {
-        strictParseParams: true,
-      })
-      await router.loadMatches(matches)
-      return matches
-    },
+    this.latestLoadPromise = promise
 
-    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 ??
-          router.options.defaultPreloadMaxAge ??
-          router.options.defaultLoaderMaxAge ??
-          0,
-        gcMaxAge:
-          loaderOpts.gcMaxAge ??
-          router.options.defaultPreloadGcMaxAge ??
-          router.options.defaultLoaderGcMaxAge ??
-          0,
-      })
-      return matches
-    },
+    this.latestLoadPromise.then(() => {
+      this.cleanMatches()
+    })
 
-    matchRoutes: (pathname, opts) => {
-      router.cleanMatchCache()
+    return this.latestLoadPromise
+  }
 
-      const matches: RouteMatch[] = []
+  #mergeMatches = (
+    prevMatchesById: Record<string, RouteMatch<TRouteTree>>,
+    nextMatches: AnyRouteMatch[],
+  ): Record<string, RouteMatch<TRouteTree>> => {
+    let matchesById = { ...prevMatchesById }
 
-      if (!router.routeTree) {
-        return matches
+    nextMatches.forEach((match) => {
+      if (!matchesById[match.id]) {
+        matchesById[match.id] = match
       }
 
-      const existingMatches = [
-        ...router.state.matches,
-        ...(router.state.pending?.matches ?? []),
-      ]
-
-      const recurse = async (routes: Route<any, any>[]): Promise<void> => {
-        const parentMatch = last(matches)
-        let params = parentMatch?.params ?? {}
-
-        const filteredRoutes = router.options.filterRoutes?.(routes) ?? routes
+      matchesById[match.id] = {
+        ...matchesById[match.id],
+        ...match,
+      }
+    })
 
-        let foundRoutes: Route[] = []
+    return matchesById
+  }
 
-        const findMatchInRoutes = (parentRoutes: Route[], routes: Route[]) => {
-          routes.some((route) => {
-            if (!route.routePath && route.childRoutes?.length) {
-              return findMatchInRoutes(
-                [...foundRoutes, route],
-                route.childRoutes,
-              )
-            }
+  getRoute = (id: string): Route => {
+    const route = (this.routesById as any)[id]
 
-            const fuzzy = !!(
-              route.routePath !== '/' || route.childRoutes?.length
-            )
+    invariant(route, `Route with id "${id as string}" not found`)
 
-            const matchParams = matchPathname(pathname, {
-              to: route.fullPath,
-              fuzzy,
-              caseSensitive:
-                route.options.caseSensitive ?? router.options.caseSensitive,
-            })
+    return route as any
+  }
 
-            if (matchParams) {
-              let parsedParams
+  preloadRoute = async (
+    navigateOpts: BuildNextOptions & {
+      maxAge?: number
+    } = this.state.location,
+  ) => {
+    let next = this.buildLocation(navigateOpts)
 
-              try {
-                parsedParams =
-                  route.options.parseParams?.(matchParams!) ?? matchParams
-              } catch (err) {
-                if (opts?.strictParseParams) {
-                  throw err
-                }
-              }
+    const matches = this.matchRoutes(next.pathname, next.search, {
+      throwOnError: true,
+    })
 
-              params = {
-                ...params,
-                ...parsedParams,
-              }
-            }
+    this.__store.setState((s) => {
+      return {
+        ...s,
+        matchesById: this.#mergeMatches(s.matchesById, matches),
+      }
+    })
 
-            if (!!matchParams) {
-              foundRoutes = [...parentRoutes, route]
-            }
+    await this.loadMatches(
+      matches.map((d) => d.id),
+      {
+        preload: true,
+        maxAge: navigateOpts.maxAge,
+      },
+    )
 
-            return !!foundRoutes.length
-          })
+    return [last(matches)!, matches] as const
+  }
 
-          return !!foundRoutes.length
-        }
+  cleanMatches = () => {
+    const now = Date.now()
 
-        findMatchInRoutes([], filteredRoutes)
+    const outdatedMatchIds = Object.values(this.state.matchesById)
+      .filter((match) => {
+        const route = this.getRoute(match.routeId)
 
-        if (!foundRoutes.length) {
-          return
-        }
+        return (
+          !this.state.matchIds.includes(match.id) &&
+          !this.state.pendingMatchIds.includes(match.id) &&
+          (match.preloadMaxAge > -1
+            ? match.updatedAt + match.preloadMaxAge < now
+            : true) &&
+          (route.options.gcMaxAge
+            ? match.updatedAt + route.options.gcMaxAge < now
+            : true)
+        )
+      })
+      .map((d) => d.id)
 
-        foundRoutes.forEach((foundRoute) => {
-          const interpolatedPath = interpolatePath(foundRoute.routePath, params)
-          const matchId = interpolatePath(foundRoute.routeId, params, true)
-
-          const match =
-            existingMatches.find((d) => d.matchId === matchId) ||
-            router.matchCache[matchId]?.match ||
-            createRouteMatch(router, foundRoute, {
-              parentMatch,
-              matchId,
-              params,
-              pathname: joinPaths([pathname, interpolatedPath]),
-            })
-
-          matches.push(match)
+    if (outdatedMatchIds.length) {
+      this.__store.setState((s) => {
+        const matchesById = { ...s.matchesById }
+        outdatedMatchIds.forEach((id) => {
+          delete matchesById[id]
         })
+        return {
+          ...s,
+          matchesById,
+        }
+      })
+    }
+  }
 
-        const foundRoute = last(foundRoutes)!
+  matchRoutes = (
+    pathname: string,
+    locationSearch: AnySearchSchema,
+    opts?: { throwOnError?: boolean; debug?: boolean },
+  ): RouteMatch<TRouteTree>[] => {
+    let routeParams: AnyPathParams = {}
+
+    let foundRoute = this.flatRoutes.find((route) => {
+      const matchedParams = matchPathname(
+        this.basepath,
+        trimPathRight(pathname),
+        {
+          to: route.fullPath,
+          caseSensitive:
+            route.options.caseSensitive ?? this.options.caseSensitive,
+        },
+      )
 
-        if (foundRoute.childRoutes?.length) {
-          recurse(foundRoute.childRoutes)
-        }
+      if (matchedParams) {
+        routeParams = matchedParams
+        return true
       }
 
-      recurse([router.routeTree])
+      return false
+    })
 
-      cascadeLoaderData(matches)
+    let routeCursor: AnyRoute =
+      foundRoute || (this.routesById as any)['__root__']
 
-      return matches
-    },
+    let matchedRoutes: AnyRoute[] = [routeCursor]
+    // let includingLayouts = true
+    while (routeCursor?.parentRoute) {
+      routeCursor = routeCursor.parentRoute
+      if (routeCursor) matchedRoutes.unshift(routeCursor)
+    }
 
-    loadMatches: async (resolvedMatches, loaderOpts) => {
-      const matchPromises = resolvedMatches.map(async (match) => {
-        // Validate the match (loads search params etc)
-        match.__.validate()
-        match.load(loaderOpts)
+    // Existing matches are matches that are already loaded along with
+    // pending matches that are still loading
 
-        const search = match.search as { __data?: any }
+    const parseErrors = matchedRoutes.map((route) => {
+      let parsedParamsError
 
-        if (search.__data && search.__data.matchId !== match.matchId) {
-          return
-        }
+      if (route.options.parseParams) {
+        try {
+          const parsedParams = route.options.parseParams(routeParams)
+          // Add the parsed params to the accumulated params bag
+          Object.assign(routeParams, parsedParams)
+        } catch (err: any) {
+          parsedParamsError = new PathParamError(err.message, {
+            cause: err,
+          })
+
+          if (opts?.throwOnError) {
+            throw parsedParamsError
+          }
 
-        if (match.__.loadPromise) {
-          // Wait for the first sign of activity from the match
-          await match.__.loadPromise
+          return parsedParamsError
         }
-      })
+      }
 
-      router.notify()
+      return
+    })
 
-      await Promise.all(matchPromises)
-    },
+    const matches = matchedRoutes.map((route, index) => {
+      const interpolatedPath = interpolatePath(route.path, routeParams)
+      const key = route.options.key
+        ? route.options.key({
+            params: routeParams,
+            search: locationSearch,
+          }) ?? ''
+        : ''
 
-    loadMatchData: async (routeMatch) => {
-      if (isServer || !router.options.useServerData) {
-        return (
-          (await routeMatch.options.loader?.({
-            // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
-            params: routeMatch.params,
-            search: routeMatch.routeSearch,
-            signal: routeMatch.__.abortController.signal,
-          })) ?? {}
-        )
-      } else {
-        const next = router.buildNext({
-          to: '.',
-          search: (d: any) => ({
-            ...(d ?? {}),
-            __data: {
-              matchId: routeMatch.matchId,
-            },
-          }),
-        })
+      const stringifiedKey = key ? JSON.stringify(key) : ''
 
-        const res = await fetch(next.href, {
-          method: 'GET',
-          // signal: routeMatch.__.abortController.signal,
-        })
+      const matchId =
+        interpolatePath(route.id, routeParams, true) + stringifiedKey
 
-        if (res.ok) {
-          return res.json()
-        }
+      // Waste not, want not. If we already have a match for this route,
+      // reuse it. This is important for layout routes, which might stick
+      // around between navigation actions that only change leaf routes.
+      const existingMatch = this.getRouteMatch(matchId)
 
-        throw new Error('Failed to fetch match data')
+      if (existingMatch) {
+        return { ...existingMatch }
       }
-    },
 
-    invalidateRoute: (opts: MatchLocation) => {
-      const next = router.buildNext(opts)
-      const unloadedMatchIds = router
-        .matchRoutes(next.pathname)
-        .map((d) => d.matchId)
-      ;[
-        ...router.state.matches,
-        ...(router.state.pending?.matches ?? []),
-      ].forEach((match) => {
-        if (unloadedMatchIds.includes(match.matchId)) {
-          match.invalidate()
-        }
-      })
-    },
+      // Create a fresh route match
+      const hasLoaders = !!(
+        route.options.loader ||
+        componentTypes.some((d) => (route.options[d] as any)?.preload)
+      )
 
-    reload: () =>
-      router.__.navigate({
-        fromCurrent: true,
-        replace: true,
-        search: true,
-      }),
+      const routeMatch: AnyRouteMatch = {
+        id: matchId,
+        key: stringifiedKey,
+        routeId: route.id,
+        params: routeParams,
+        pathname: joinPaths([this.basepath, interpolatedPath]),
+        updatedAt: Date.now(),
+        maxAge: -1,
+        preloadMaxAge: -1,
+        routeSearch: {},
+        search: {} as any,
+        status: hasLoaders ? 'pending' : 'success',
+        isFetching: false,
+        invalid: false,
+        error: undefined,
+        paramsError: parseErrors[index],
+        searchError: undefined,
+        loaderData: undefined,
+        loadPromise: Promise.resolve(),
+        routeContext: undefined!,
+        context: undefined!,
+        abortController: new AbortController(),
+        fetchedAt: 0,
+      }
 
-    resolvePath: (from: string, path: string) => {
-      return resolvePath(router.basepath!, from, cleanPath(path))
-    },
+      return routeMatch
+    })
+
+    // Take each match and resolve its search params and context
+    // This has to happen after the matches are created or found
+    // so that we can use the parent match's search params and context
+    matches.forEach((match, i): any => {
+      const parentMatch = matches[i - 1]
+      const route = this.getRoute(match.routeId)
+
+      const searchInfo = (() => {
+        // Validate the search params and stabilize them
+        const parentSearchInfo = {
+          search: parentMatch?.search ?? locationSearch,
+          routeSearch: parentMatch?.routeSearch ?? locationSearch,
+        }
 
-    matchRoute: (location, opts) => {
-      // const location = router.buildNext(opts)
+        try {
+          const validator =
+            typeof route.options.validateSearch === 'object'
+              ? route.options.validateSearch.parse
+              : route.options.validateSearch
 
-      location = {
-        ...location,
-        to: location.to
-          ? router.resolvePath(location.from ?? '', location.to)
-          : undefined,
-      }
+          let routeSearch = validator?.(parentSearchInfo.search) ?? {}
 
-      const next = router.buildNext(location)
+          let search = {
+            ...parentSearchInfo.search,
+            ...routeSearch,
+          }
 
-      if (opts?.pending) {
-        if (!router.state.pending?.location) {
-          return false
+          routeSearch = replaceEqualDeep(match.routeSearch, routeSearch)
+          search = replaceEqualDeep(match.search, search)
+
+          return {
+            routeSearch,
+            search,
+            searchDidChange: match.routeSearch !== routeSearch,
+          }
+        } catch (err: any) {
+          match.searchError = new SearchParamError(err.message, {
+            cause: err,
+          })
+
+          if (opts?.throwOnError) {
+            throw match.searchError
+          }
+
+          return parentSearchInfo
         }
-        return !!matchPathname(router.state.pending.location.pathname, {
-          ...opts,
-          to: next.pathname,
-        })
-      }
+      })()
 
-      return !!matchPathname(router.state.location.pathname, {
-        ...opts,
-        to: next.pathname,
-      })
+      Object.assign(match, searchInfo)
+    })
+
+    return matches as any
+  }
+
+  loadMatches = async (
+    matchIds: string[],
+    opts?: {
+      preload?: boolean
+      maxAge?: number
     },
+  ) => {
+    const getFreshMatches = () => matchIds.map((d) => this.getRouteMatch(d)!)
+
+    if (!opts?.preload) {
+      getFreshMatches().forEach((match) => {
+        // Update each match with its latest route data
+        this.setRouteMatch(match.id, (s) => ({
+          ...s,
+          routeSearch: match.routeSearch,
+          search: match.search,
+          routeContext: match.routeContext,
+          context: match.context,
+          error: match.error,
+          paramsError: match.paramsError,
+          searchError: match.searchError,
+          params: match.params,
+          preloadMaxAge: 0,
+        }))
+      })
+    }
 
-    navigate: async ({ from, to = '.', search, hash, replace, params }) => {
-      // If this link simply reloads the current route,
-      // make sure it has a new key so it will trigger a data refresh
+    let firstBadMatchIndex: number | undefined
 
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
-      const toString = String(to)
-      const fromString = String(from)
+    // Check each match middleware to see if the route can be accessed
+    try {
+      for (const [index, match] of getFreshMatches().entries()) {
+        const parentMatch = getFreshMatches()[index - 1]
+        const route = this.getRoute(match.routeId)
 
-      let isExternal
+        const handleError = (err: any, code: string) => {
+          err.routerCode = code
+          firstBadMatchIndex = firstBadMatchIndex ?? index
 
-      try {
-        new URL(`${toString}`)
-        isExternal = true
-      } catch (e) {}
+          if (isRedirect(err)) {
+            throw err
+          }
 
-      invariant(
-        !isExternal,
-        'Attempting to navigate to external url with router.navigate!',
-      )
+          try {
+            route.options.onError?.(err)
+          } catch (errorHandlerErr) {
+            err = errorHandlerErr
 
-      return router.__.navigate({
-        from: fromString,
-        to: toString,
-        search,
-        hash,
-        replace,
-        params,
-      })
-    },
+            if (isRedirect(errorHandlerErr)) {
+              throw errorHandlerErr
+            }
+          }
 
-    buildLink: ({
-      from,
-      to = '.',
-      search,
-      params,
-      hash,
-      target,
-      replace,
-      activeOptions,
-      preload,
-      preloadMaxAge: userPreloadMaxAge,
-      preloadGcMaxAge: userPreloadGcMaxAge,
-      preloadDelay: userPreloadDelay,
-      disabled,
-    }) => {
-      // If this link simply reloads the current route,
-      // make sure it has a new key so it will trigger a data refresh
+          this.setRouteMatch(match.id, (s) => ({
+            ...s,
+            error: err,
+            status: 'error',
+            updatedAt: Date.now(),
+          }))
+        }
 
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
+        if (match.paramsError) {
+          handleError(match.paramsError, 'PARSE_PARAMS')
+        }
 
-      try {
-        new URL(`${to}`)
-        return {
-          type: 'external',
-          href: to,
+        if (match.searchError) {
+          handleError(match.searchError, 'VALIDATE_SEARCH')
         }
-      } catch (e) {}
 
-      const nextOpts = {
-        from,
-        to,
-        search,
-        params,
-        hash,
-        replace,
+        let didError = false
+
+        try {
+          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
+        }
+
+        // If we errored, do not run the next matches' middleware
+        if (didError) {
+          break
+        }
+      }
+    } catch (err) {
+      if (isRedirect(err)) {
+        if (!opts?.preload) this.navigate(err as any)
+        return
       }
 
-      const next = router.buildNext(nextOpts)
+      throw err
+    }
 
-      preload = preload ?? router.options.defaultPreload
-      const preloadDelay =
-        userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
+    const validResolvedMatches = getFreshMatches().slice(0, firstBadMatchIndex)
+    const matchPromises: Promise<any>[] = []
+
+    validResolvedMatches.forEach((match, index) => {
+      matchPromises.push(
+        (async () => {
+          const parentMatchPromise = matchPromises[index - 1]
+          const route = this.getRoute(match.routeId)
+
+          if (
+            match.isFetching ||
+            (match.status === 'success' &&
+              !isMatchInvalid(match, {
+                preload: opts?.preload,
+              }))
+          ) {
+            return this.getRouteMatch(match.id)?.loadPromise
+          }
 
-      // Compare path/hash for matches
-      const pathIsEqual = router.state.location.pathname === next.pathname
-      const currentPathSplit = router.state.location.pathname.split('/')
-      const nextPathSplit = next.pathname.split('/')
-      const pathIsFuzzyEqual = nextPathSplit.every(
-        (d, i) => d === currentPathSplit[i],
-      )
-      const hashIsEqual = router.state.location.hash === next.hash
-      // Combine the matches based on user options
-      const pathTest = activeOptions?.exact ? pathIsEqual : pathIsFuzzyEqual
-      const hashTest = activeOptions?.includeHash ? hashIsEqual : true
-
-      // The final "active" test
-      const isActive = pathTest && hashTest
-
-      // The click handler
-      const handleClick = (e: MouseEvent) => {
-        if (
-          !disabled &&
-          !isCtrlEvent(e) &&
-          !e.defaultPrevented &&
-          (!target || target === '_self') &&
-          e.button === 0
-        ) {
-          e.preventDefault()
-          if (pathIsEqual && !search && !hash) {
-            router.invalidateRoute(nextOpts)
+          const fetchedAt = Date.now()
+          const checkLatest = () => {
+            const latest = this.getRouteMatch(match.id)
+            return latest && latest.fetchedAt !== fetchedAt
+              ? latest.loadPromise
+              : undefined
           }
 
-          // All is well? Navigate!)
-          router.__.navigate(nextOpts)
-        }
-      }
+          const handleIfRedirect = (err: any) => {
+            if (isRedirect(err)) {
+              if (!opts?.preload) {
+                this.navigate(err as any)
+              }
+              return true
+            }
+            return false
+          }
 
-      // The click handler
-      const handleFocus = (e: MouseEvent) => {
-        if (preload) {
-          router.preloadRoute(nextOpts, {
-            maxAge: userPreloadMaxAge,
-            gcMaxAge: userPreloadGcMaxAge,
-          })
-        }
-      }
+          const load = async () => {
+            let latestPromise
+
+            try {
+              const componentsPromise = Promise.all(
+                componentTypes.map(async (type) => {
+                  const component = route.options[type]
+
+                  if ((component as any)?.preload) {
+                    await (component as any).preload()
+                  }
+                }),
+              )
+
+              const loaderPromise = route.options.loader?.({
+                ...match,
+                preload: !!opts?.preload,
+                parentMatchPromise,
+              })
+
+              const [_, loader] = await Promise.all([
+                componentsPromise,
+                loaderPromise,
+              ])
+              if ((latestPromise = checkLatest())) return await latestPromise
 
-      const handleEnter = (e: MouseEvent) => {
-        const target = (e.target || {}) as LinkCurrentTargetElement
+              this.setRouteMatchData(match.id, () => loader, opts)
+            } catch (error) {
+              if ((latestPromise = checkLatest())) return await latestPromise
+              if (handleIfRedirect(error)) return
+
+              try {
+                route.options.onError?.(error)
+              } catch (onErrorError) {
+                error = onErrorError
+                if (handleIfRedirect(onErrorError)) return
+              }
 
-        if (preload) {
-          if (target.preloadTimeout) {
-            return
+              this.setRouteMatch(match.id, (s) => ({
+                ...s,
+                error,
+                status: 'error',
+                isFetching: false,
+                updatedAt: Date.now(),
+              }))
+            }
           }
 
-          target.preloadTimeout = setTimeout(() => {
-            target.preloadTimeout = null
-            router.preloadRoute(nextOpts, {
-              maxAge: userPreloadMaxAge,
-              gcMaxAge: userPreloadGcMaxAge,
-            })
-          }, preloadDelay)
-        }
+          let loadPromise: Promise<void> | undefined
+
+          this.__store.batch(() => {
+            this.setRouteMatch(match.id, (s) => ({
+              ...s,
+              // status: s.status !== 'success' ? 'pending' : s.status,
+              isFetching: true,
+              fetchedAt,
+              invalid: false,
+            }))
+
+            loadPromise = load()
+
+            this.setRouteMatch(match.id, (s) => ({
+              ...s,
+              loadPromise,
+            }))
+          })
+
+          await loadPromise
+        })(),
+      )
+    })
+
+    await Promise.all(matchPromises)
+  }
+
+  resolvePath = (from: string, path: string) => {
+    return resolvePath(this.basepath!, from, cleanPath(path))
+  }
+
+  navigate = async <
+    TFrom extends RoutePaths<TRouteTree> = '/',
+    TTo extends string = '',
+    TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+    TMaskTo extends string = '',
+  >({
+    from,
+    to = '' as any,
+    ...rest
+  }: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>) => {
+    // If this link simply reloads the current route,
+    // make sure it has a new key so it will trigger a data refresh
+
+    // If this `to` is a valid external URL, return
+    // null for LinkUtils
+    const toString = String(to)
+    const fromString = typeof from === 'undefined' ? from : String(from)
+    let isExternal
+
+    try {
+      new URL(`${toString}`)
+      isExternal = true
+    } catch (e) {}
+
+    invariant(
+      !isExternal,
+      'Attempting to navigate to external url with this.navigate!',
+    )
+
+    return this.#buildAndCommitLocation({
+      ...rest,
+      from: fromString,
+      to: toString,
+    })
+  }
+
+  matchRoute = <
+    TRouteTree extends AnyRoute = AnyRoute,
+    TFrom extends RoutePaths<TRouteTree> = '/',
+    TTo extends string = '',
+    TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>,
+  >(
+    location: ToOptions<TRouteTree, TFrom, TTo>,
+    opts?: MatchRouteOptions,
+  ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {
+    location = {
+      ...location,
+      to: location.to
+        ? this.resolvePath(location.from ?? '', location.to)
+        : undefined,
+    } as any
+
+    const next = this.buildLocation(location)
+    if (opts?.pending && this.state.status !== 'pending') {
+      return false
+    }
+
+    const baseLocation = opts?.pending
+      ? this.state.location
+      : this.state.resolvedLocation
+
+    if (!baseLocation) {
+      return false
+    }
+
+    const match = matchPathname(this.basepath, baseLocation.pathname, {
+      ...opts,
+      to: next.pathname,
+    }) as any
+
+    if (!match) {
+      return false
+    }
+
+    if (opts?.includeSearch ?? true) {
+      return partialDeepEqual(baseLocation.search, next.search) ? match : false
+    }
+
+    return match
+  }
+
+  buildLink = <
+    TFrom extends RoutePaths<TRouteTree> = '/',
+    TTo extends string = '',
+  >(
+    dest: LinkOptions<TRouteTree, TFrom, TTo>,
+  ): LinkInfo => {
+    // If this link simply reloads the current route,
+    // make sure it has a new key so it will trigger a data refresh
+
+    // If this `to` is a valid external URL, return
+    // null for LinkUtils
+
+    const {
+      to,
+      preload: userPreload,
+      preloadDelay: userPreloadDelay,
+      activeOptions,
+      disabled,
+      target,
+      replace,
+      resetScroll,
+    } = dest
+
+    try {
+      new URL(`${to}`)
+      return {
+        type: 'external',
+        href: to as any,
       }
+    } catch (e) {}
+
+    const nextOpts = dest
+
+    const next = this.buildLocation(nextOpts)
+
+    const preload = userPreload ?? this.options.defaultPreload
+    const preloadDelay =
+      userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0
+
+    // Compare path/hash for matches
+    const currentPathSplit = this.state.location.pathname.split('/')
+    const nextPathSplit = next.pathname.split('/')
+    const pathIsFuzzyEqual = nextPathSplit.every(
+      (d, i) => d === currentPathSplit[i],
+    )
+    // Combine the matches based on user options
+    const pathTest = activeOptions?.exact
+      ? this.state.location.pathname === next.pathname
+      : pathIsFuzzyEqual
+    const hashTest = activeOptions?.includeHash
+      ? this.state.location.hash === next.hash
+      : true
+    const searchTest =
+      activeOptions?.includeSearch ?? true
+        ? partialDeepEqual(this.state.location.search, next.search)
+        : true
+
+    // The final "active" test
+    const isActive = pathTest && hashTest && searchTest
+
+    // The click handler
+    const handleClick = (e: MouseEvent) => {
+      if (
+        !disabled &&
+        !isCtrlEvent(e) &&
+        !e.defaultPrevented &&
+        (!target || target === '_self') &&
+        e.button === 0
+      ) {
+        e.preventDefault()
+
+        // All is well? Navigate!
+        this.#commitLocation({ ...next, replace, resetScroll })
+      }
+    }
+
+    // The click handler
+    const handleFocus = (e: MouseEvent) => {
+      if (preload) {
+        this.preloadRoute(nextOpts).catch((err) => {
+          console.warn(err)
+          console.warn(preloadWarning)
+        })
+      }
+    }
+
+    const handleTouchStart = (e: TouchEvent) => {
+      this.preloadRoute(nextOpts).catch((err) => {
+        console.warn(err)
+        console.warn(preloadWarning)
+      })
+    }
 
-      const handleLeave = (e: MouseEvent) => {
-        const target = (e.target || {}) as LinkCurrentTargetElement
+    const handleEnter = (e: MouseEvent) => {
+      const target = (e.target || {}) as LinkCurrentTargetElement
 
+      if (preload) {
         if (target.preloadTimeout) {
-          clearTimeout(target.preloadTimeout)
+          return
+        }
+
+        target.preloadTimeout = setTimeout(() => {
           target.preloadTimeout = null
+          this.preloadRoute(nextOpts).catch((err) => {
+            console.warn(err)
+            console.warn(preloadWarning)
+          })
+        }, preloadDelay)
+      }
+    }
+
+    const handleLeave = (e: MouseEvent) => {
+      const target = (e.target || {}) as LinkCurrentTargetElement
+
+      if (target.preloadTimeout) {
+        clearTimeout(target.preloadTimeout)
+        target.preloadTimeout = null
+      }
+    }
+
+    return {
+      type: 'internal',
+      next,
+      handleFocus,
+      handleClick,
+      handleEnter,
+      handleLeave,
+      handleTouchStart,
+      isActive,
+      disabled,
+    }
+  }
+
+  dehydrate = (): DehydratedRouter => {
+    return {
+      state: {
+        matchIds: this.state.matchIds,
+        dehydratedMatches: this.state.matches.map((d) =>
+          pick(d, [
+            'fetchedAt',
+            'invalid',
+            'preloadMaxAge',
+            'maxAge',
+            'id',
+            'loaderData',
+            'status',
+            'updatedAt',
+          ]),
+        ),
+      },
+    }
+  }
+
+  hydrate = async (__do_not_use_server_ctx?: HydrationCtx) => {
+    let _ctx = __do_not_use_server_ctx
+    // Client hydrates from window
+    if (typeof document !== 'undefined') {
+      _ctx = window.__TSR_DEHYDRATED__
+    }
+
+    invariant(
+      _ctx,
+      'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?',
+    )
+
+    const ctx = _ctx
+    this.dehydratedData = ctx.payload as any
+    this.options.hydrate?.(ctx.payload as any)
+    const dehydratedState = ctx.router.state
+
+    let matches = this.matchRoutes(
+      this.state.location.pathname,
+      this.state.location.search,
+    ).map((match) => {
+      const dehydratedMatch = dehydratedState.dehydratedMatches.find(
+        (d) => d.id === match.id,
+      )
+
+      invariant(
+        dehydratedMatch,
+        `Could not find a client-side match for dehydrated match with id: ${match.id}!`,
+      )
+
+      if (dehydratedMatch) {
+        return {
+          ...match,
+          ...dehydratedMatch,
         }
       }
+      return match
+    })
 
+    this.__store.setState((s) => {
       return {
-        type: 'internal',
-        next,
-        handleFocus,
-        handleClick,
-        handleEnter,
-        handleLeave,
-        isActive,
-        disabled,
+        ...s,
+        matchIds: dehydratedState.matchIds,
+        matches,
+        matchesById: this.#mergeMatches(s.matchesById, matches),
       }
-    },
-    buildNext: (opts: BuildNextOptions) => {
-      const next = router.__.buildLocation(opts)
-
-      const matches = router.matchRoutes(next.pathname)
+    })
+  }
 
-      const __preSearchFilters = matches
-        .map((match) => match.options.preSearchFilters ?? [])
-        .flat()
-        .filter(Boolean)
+  injectedHtml: (string | (() => Promise<string> | string))[] = []
 
-      const __postSearchFilters = matches
-        .map((match) => match.options.postSearchFilters ?? [])
-        .flat()
-        .filter(Boolean)
+  injectHtml = async (html: string | (() => Promise<string> | string)) => {
+    this.injectedHtml.push(html)
+  }
 
-      return router.__.buildLocation({
-        ...opts,
-        __preSearchFilters,
-        __postSearchFilters,
+  dehydrateData = <T>(key: any, getData: T | (() => Promise<T> | T)) => {
+    if (typeof document === 'undefined') {
+      const strKey = typeof key === 'string' ? key : JSON.stringify(key)
+
+      this.injectHtml(async () => {
+        const id = `__TSR_DEHYDRATED__${strKey}`
+        const data =
+          typeof getData === 'function' ? await (getData as any)() : getData
+        return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
+          strKey,
+        )}"] = ${JSON.stringify(data)}
+        ;(() => {
+          var el = document.getElementById('${id}')
+          el.parentElement.removeChild(el)
+        })()
+        </script>`
       })
-    },
 
-    __: {
-      buildRouteTree: (rootRouteConfig: RouteConfig) => {
-        const recurseRoutes = (
-          routeConfigs: RouteConfig[],
-          parent?: Route<TAllRouteInfo, any>,
-        ): Route<TAllRouteInfo, any>[] => {
-          return routeConfigs.map((routeConfig) => {
-            const routeOptions = routeConfig.options
-            const route = createRoute(routeConfig, routeOptions, parent, router)
-            const existingRoute = (router.routesById as any)[route.routeId]
-
-            if (existingRoute) {
-              if (process.env.NODE_ENV !== 'production') {
-                console.warn(
-                  `Duplicate routes found with id: ${String(route.routeId)}`,
-                  router.routesById,
-                  route,
-                )
-              }
-              throw new Error()
-            }
+      return () => this.hydrateData<T>(key)
+    }
 
-            ;(router.routesById as any)[route.routeId] = route
+    return () => undefined
+  }
 
-            const children = routeConfig.children as RouteConfig[]
+  hydrateData = <T = unknown>(key: any) => {
+    if (typeof document !== 'undefined') {
+      const strKey = typeof key === 'string' ? key : JSON.stringify(key)
 
-            route.childRoutes = children?.length
-              ? recurseRoutes(children, route)
-              : undefined
+      return window[`__TSR_DEHYDRATED__${strKey}` as any] as T
+    }
 
-            return route
-          })
+    return undefined
+  }
+
+  // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+  //   this.state.matches
+  //     .find((d) => d.id === matchId)
+  //     ?.__promisesByKey[key]?.resolve(value)
+  // }
+
+  #processRoutes = (routeTree: TRouteTree) => {
+    this.routeTree = routeTree as any
+    this.routesById = {} as any
+    this.routesByPath = {} as any
+    this.flatRoutes = [] as any
+
+    const recurseRoutes = (routes: AnyRoute[]) => {
+      routes.forEach((route, i) => {
+        route.init({ originalIndex: i, router: this })
+
+        const existingRoute = (this.routesById as any)[route.id]
+
+        invariant(
+          !existingRoute,
+          `Duplicate routes found with id: ${String(route.id)}`,
+        )
+        ;(this.routesById as any)[route.id] = route
+
+        if (!route.isRoot && route.path) {
+          const trimmedFullPath = trimPathRight(route.fullPath)
+          if (
+            !(this.routesByPath as any)[trimmedFullPath] ||
+            route.fullPath.endsWith('/')
+          ) {
+            ;(this.routesByPath as any)[trimmedFullPath] = route
+          }
         }
 
-        const routes = recurseRoutes([rootRouteConfig])
+        const children = route.children as Route[]
 
-        return routes[0]!
-      },
+        if (children?.length) {
+          recurseRoutes(children)
+        }
+      })
+    }
 
-      parseLocation: (
-        location: History['location'],
-        previousLocation?: Location,
-      ): Location => {
-        const parsedSearch = router.options.parseSearch(location.search)
+    recurseRoutes([routeTree])
 
-        return {
-          pathname: location.pathname,
-          searchStr: location.search,
-          search: replaceEqualDeep(previousLocation?.search, parsedSearch),
-          hash: location.hash.split('#').reverse()[0] ?? '',
-          href: `${location.pathname}${location.search}${location.hash}`,
-          state: location.state as LocationState,
-          key: location.key,
+    this.flatRoutes = (Object.values(this.routesByPath) as AnyRoute[])
+      .map((d, i) => {
+        const trimmed = trimPath(d.fullPath)
+        const parsed = parsePathname(trimmed)
+
+        while (parsed.length > 1 && parsed[0]?.value === '/') {
+          parsed.shift()
         }
-      },
 
-      navigate: (location: BuildNextOptions & { replace?: boolean }) => {
-        const next = router.buildNext(location)
-        return router.__.commitLocation(next, location.replace)
-      },
+        const score = parsed.map((d) => {
+          if (d.type === 'param') {
+            return 0.5
+          }
 
-      buildLocation: (dest: BuildNextOptions = {}): Location => {
-        // const resolvedFrom: Location = {
-        //   ...router.location,
-        const fromPathname = dest.fromCurrent
-          ? router.location.pathname
-          : dest.from ?? router.location.pathname
-
-        let pathname = resolvePath(
-          router.basepath ?? '/',
-          fromPathname,
-          `${dest.to ?? '.'}`,
-        )
+          if (d.type === 'wildcard') {
+            return 0.25
+          }
 
-        const fromMatches = router.matchRoutes(router.location.pathname, {
-          strictParseParams: true,
+          return 1
         })
 
-        const toMatches = router.matchRoutes(pathname)
+        return { child: d, trimmed, parsed, index: i, score }
+      })
+      .sort((a, b) => {
+        let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0
 
-        const prevParams = { ...last(fromMatches)?.params }
+        if (isIndex !== 0) return isIndex
 
-        let nextParams =
-          (dest.params ?? true) === true
-            ? prevParams
-            : functionalUpdate(dest.params!, prevParams)
+        const length = Math.min(a.score.length, b.score.length)
 
-        if (nextParams) {
-          toMatches
-            .map((d) => d.options.stringifyParams)
-            .filter(Boolean)
-            .forEach((fn) => {
-              Object.assign({}, nextParams!, fn!(nextParams!))
-            })
+        // Sort by length of score
+        if (a.score.length !== b.score.length) {
+          return b.score.length - a.score.length
         }
 
-        pathname = interpolatePath(pathname, nextParams ?? {})
-
-        // Pre filters first
-        const preFilteredSearch = dest.__preSearchFilters?.length
-          ? dest.__preSearchFilters.reduce(
-              (prev, next) => next(prev),
-              router.location.search,
-            )
-          : router.location.search
-
-        // Then the link/navigate function
-        const destSearch =
-          dest.search === true
-            ? preFilteredSearch // Preserve resolvedFrom true
-            : dest.search
-            ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-            : dest.__preSearchFilters?.length
-            ? preFilteredSearch // Preserve resolvedFrom filters
-            : {}
-
-        // Then post filters
-        const postFilteredSearch = dest.__postSearchFilters?.length
-          ? dest.__postSearchFilters.reduce(
-              (prev, next) => next(prev),
-              destSearch,
-            )
-          : destSearch
-
-        const search = replaceEqualDeep(
-          router.location.search,
-          postFilteredSearch,
-        )
+        // Sort by min available score
+        for (let i = 0; i < length; i++) {
+          if (a.score[i] !== b.score[i]) {
+            return b.score[i]! - a.score[i]!
+          }
+        }
 
-        const searchStr = router.options.stringifySearch(search)
-        let hash =
-          dest.hash === true
-            ? router.location.hash
-            : functionalUpdate(dest.hash!, router.location.hash)
-        hash = hash ? `#${hash}` : ''
+        // Sort by min available parsed value
+        for (let i = 0; i < length; i++) {
+          if (a.parsed[i]!.value !== b.parsed[i]!.value) {
+            return a.parsed[i]!.value! > b.parsed[i]!.value! ? 1 : -1
+          }
+        }
 
-        return {
-          pathname,
-          search,
-          searchStr,
-          state: router.location.state,
-          hash,
-          href: `${pathname}${searchStr}${hash}`,
-          key: dest.key,
+        // Sort by length of trimmed full path
+        if (a.trimmed !== b.trimmed) {
+          return a.trimmed > b.trimmed ? 1 : -1
         }
-      },
 
-      commitLocation: (next: Location, replace?: boolean): Promise<void> => {
-        const id = '' + Date.now() + Math.random()
+        // Sort by original index
+        return a.index - b.index
+      })
+      .map((d, i) => {
+        d.child.rank = i
+        return d.child
+      }) as any
+  }
+
+  #parseLocation = (
+    previousLocation?: ParsedLocation,
+  ): ParsedLocation<FullSearchSchema<TRouteTree>> => {
+    const parse = ({
+      pathname,
+      search,
+      hash,
+      state,
+    }: HistoryLocation): ParsedLocation<FullSearchSchema<TRouteTree>> => {
+      const parsedSearch = this.options.parseSearch(search)
+
+      return {
+        pathname: pathname,
+        searchStr: search,
+        search: replaceEqualDeep(previousLocation?.search, parsedSearch) as any,
+        hash: hash.split('#').reverse()[0] ?? '',
+        href: `${pathname}${search}${hash}`,
+        state: replaceEqualDeep(previousLocation?.state, state) as HistoryState,
+      }
+    }
 
-        if (router.navigateTimeout) clearTimeout(router.navigateTimeout)
+    const location = parse(this.history.location)
 
-        let nextAction: 'push' | 'replace' = 'replace'
+    let { __tempLocation, __tempKey } = location.state
 
-        if (!replace) {
-          nextAction = 'push'
-        }
+    if (__tempLocation && (!__tempKey || __tempKey === this.tempLocationKey)) {
+      // Sync up the location keys
+      const parsedTempLocation = parse(__tempLocation) as any
+      parsedTempLocation.state.key = location.state.key
 
-        const isSameUrl =
-          router.__.parseLocation(history.location).href === next.href
+      delete parsedTempLocation.state.__tempLocation
 
-        if (isSameUrl && !next.key) {
-          nextAction = 'replace'
-        }
+      return {
+        ...parsedTempLocation,
+        maskedLocation: location,
+      }
+    }
 
-        if (nextAction === 'replace') {
-          history.replace(
-            {
-              pathname: next.pathname,
-              hash: next.hash,
-              search: next.searchStr,
-            },
-            {
-              id,
-              ...next.state,
-            },
+    return location
+  }
+
+  buildLocation = (opts: BuildNextOptions = {}): ParsedLocation => {
+    const build = (
+      dest: BuildNextOptions & {
+        unmaskOnReload?: boolean
+      } = {},
+      matches?: AnyRouteMatch[],
+    ): ParsedLocation => {
+      const from = this.state.location
+
+      const fromPathname = dest.from ?? from.pathname
+
+      let pathname = resolvePath(
+        this.basepath ?? '/',
+        fromPathname,
+        `${dest.to ?? ''}`,
+      )
+
+      const fromMatches = this.matchRoutes(fromPathname, from.search)
+
+      const prevParams = { ...last(fromMatches)?.params }
+
+      let nextParams =
+        (dest.params ?? true) === true
+          ? prevParams
+          : functionalUpdate(dest.params!, prevParams)
+
+      if (nextParams) {
+        matches
+          ?.map((d) => this.getRoute(d.routeId).options.stringifyParams)
+          .filter(Boolean)
+          .forEach((fn) => {
+            nextParams = { ...nextParams!, ...fn!(nextParams!) }
+          })
+      }
+
+      pathname = interpolatePath(pathname, nextParams ?? {})
+
+      const preSearchFilters =
+        matches
+          ?.map(
+            (match) =>
+              this.getRoute(match.routeId).options.preSearchFilters ?? [],
           )
-        } else {
-          history.push(
-            {
-              pathname: next.pathname,
-              hash: next.hash,
-              search: next.searchStr,
-            },
-            {
-              id,
-            },
+          .flat()
+          .filter(Boolean) ?? []
+
+      const postSearchFilters =
+        matches
+          ?.map(
+            (match) =>
+              this.getRoute(match.routeId).options.postSearchFilters ?? [],
           )
-        }
+          .flat()
+          .filter(Boolean) ?? []
+
+      // Pre filters first
+      const preFilteredSearch = preSearchFilters?.length
+        ? preSearchFilters?.reduce((prev, next) => next(prev), from.search)
+        : from.search
+
+      // Then the link/navigate function
+      const destSearch =
+        dest.search === true
+          ? preFilteredSearch // Preserve resolvedFrom true
+          : dest.search
+          ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+          : preSearchFilters?.length
+          ? preFilteredSearch // Preserve resolvedFrom filters
+          : {}
+
+      // Then post filters
+      const postFilteredSearch = postSearchFilters?.length
+        ? postSearchFilters.reduce((prev, next) => next(prev), destSearch)
+        : destSearch
+
+      const search = replaceEqualDeep(from.search, postFilteredSearch)
+
+      const searchStr = this.options.stringifySearch(search)
+
+      const hash =
+        dest.hash === true
+          ? from.hash
+          : dest.hash
+          ? functionalUpdate(dest.hash!, from.hash)
+          : from.hash
+
+      const hashStr = hash ? `#${hash}` : ''
+
+      let nextState =
+        dest.state === true
+          ? from.state
+          : dest.state
+          ? functionalUpdate(dest.state, from.state)
+          : from.state
+
+      nextState = replaceEqualDeep(from.state, nextState)
+
+      return {
+        pathname,
+        search,
+        searchStr,
+        state: nextState as any,
+        hash,
+        href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
+        unmaskOnReload: dest.unmaskOnReload,
+      }
+    }
 
-        router.navigationPromise = new Promise((resolve) => {
-          const previousNavigationResolve = router.resolveNavigation
+    const buildWithMatches = (
+      dest: BuildNextOptions = {},
+      maskedDest?: BuildNextOptions,
+    ) => {
+      let next = build(dest)
+      let maskedNext = maskedDest ? build(maskedDest) : undefined
 
-          router.resolveNavigation = () => {
-            previousNavigationResolve()
-            resolve()
+      if (!maskedNext) {
+        let params = {}
+
+        let foundMask = this.options.routeMasks?.find((d) => {
+          const match = matchPathname(this.basepath, next.pathname, {
+            to: d.from,
+            fuzzy: false,
+          })
+
+          if (match) {
+            params = match
+            return true
           }
+
+          return false
         })
 
-        return router.navigationPromise
-      },
+        if (foundMask) {
+          foundMask = {
+            ...foundMask,
+            from: interpolatePath(foundMask.from, params) as any,
+          }
+          maskedDest = foundMask
+          maskedNext = build(maskedDest)
+        }
+      }
+
+      const nextMatches = this.matchRoutes(next.pathname, next.search)
+      const maskedMatches = maskedNext
+        ? this.matchRoutes(maskedNext.pathname, maskedNext.search)
+        : undefined
+      const maskedFinal = maskedNext
+        ? build(maskedDest, maskedMatches)
+        : undefined
+
+      const final = build(dest, nextMatches)
+
+      if (maskedFinal) {
+        final.maskedLocation = maskedFinal
+      }
+
+      return final
+    }
+
+    if (opts.mask) {
+      return buildWithMatches(opts, {
+        ...pick(opts, ['from']),
+        ...opts.mask,
+      })
+    }
+
+    return buildWithMatches(opts)
+  }
+
+  #buildAndCommitLocation = ({
+    replace,
+    resetScroll,
+    ...rest
+  }: BuildNextOptions & CommitLocationOptions = {}) => {
+    const location = this.buildLocation(rest)
+    return this.#commitLocation({
+      ...location,
+      replace,
+      resetScroll,
+    })
+  }
+
+  #commitLocation = async (next: ParsedLocation & CommitLocationOptions) => {
+    if (this.navigateTimeout) clearTimeout(this.navigateTimeout)
+
+    let nextAction: 'push' | 'replace' = 'replace'
+
+    if (!next.replace) {
+      nextAction = 'push'
+    }
+
+    const isSameUrl = this.state.location.href === next.href
+
+    if (isSameUrl) {
+      nextAction = 'replace'
+    }
+
+    let { maskedLocation, ...nextHistory } = next
+
+    if (maskedLocation) {
+      nextHistory = {
+        ...maskedLocation,
+        state: {
+          ...maskedLocation.state,
+          __tempKey: undefined,
+          __tempLocation: {
+            ...nextHistory,
+            search: nextHistory.searchStr,
+            state: {
+              ...nextHistory.state,
+              __tempKey: undefined!,
+              __tempLocation: undefined!,
+              key: undefined!,
+            },
+          },
+        },
+      }
+
+      if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+        nextHistory.state.__tempKey = this.tempLocationKey
+      }
+    }
+
+    this.history[nextAction === 'push' ? 'push' : 'replace'](
+      nextHistory.href,
+      nextHistory.state,
+    )
+
+    this.resetNextScroll = next.resetScroll ?? true
+
+    return this.latestLoadPromise
+  }
+
+  getRouteMatch = (id: string): undefined | RouteMatch<TRouteTree> => {
+    return this.state.matchesById[id]
+  }
+
+  setRouteMatch = (
+    id: string,
+    updater: (prev: RouteMatch<TRouteTree>) => RouteMatch<TRouteTree>,
+  ) => {
+    this.__store.setState((prev) => {
+      if (!prev.matchesById[id]) {
+        return prev
+      }
+
+      return {
+        ...prev,
+        matchesById: {
+          ...prev.matchesById,
+          [id]: updater(prev.matchesById[id] as any),
+        },
+      }
+    })
+  }
+
+  setRouteMatchData = (
+    id: string,
+    updater: (prev: any) => any,
+    opts?: {
+      updatedAt?: number
+      maxAge?: number
     },
+  ) => {
+    const match = this.getRouteMatch(id)
+
+    if (!match) return
+
+    const route = this.getRoute(match.routeId)
+    const updatedAt = opts?.updatedAt ?? Date.now()
+
+    const preloadMaxAge =
+      opts?.maxAge ??
+      route.options.preloadMaxAge ??
+      this.options.defaultPreloadMaxAge ??
+      5000
+
+    const maxAge =
+      opts?.maxAge ?? route.options.maxAge ?? this.options.defaultMaxAge ?? -1
+
+    this.setRouteMatch(id, (s) => ({
+      ...s,
+      error: undefined,
+      status: 'success',
+      isFetching: false,
+      updatedAt: updatedAt,
+      loaderData: functionalUpdate(updater, s.loaderData),
+      preloadMaxAge,
+      maxAge,
+    }))
   }
 
-  router.update(userOptions)
+  invalidate = async (opts?: {
+    matchId?: string
+    reload?: boolean
+    __fromFocus?: boolean
+  }): Promise<void> => {
+    if (opts?.matchId) {
+      this.setRouteMatch(opts.matchId, (s) => ({
+        ...s,
+        invalid: true,
+      }))
+
+      const matchIndex = this.state.matches.findIndex(
+        (d) => d.id === opts.matchId,
+      )
+      const childMatch = this.state.matches[matchIndex + 1]
+
+      if (childMatch) {
+        return this.invalidate({
+          matchId: childMatch.id,
+          reload: false,
+          __fromFocus: opts.__fromFocus,
+        })
+      }
+    } else {
+      this.__store.batch(() => {
+        Object.values(this.state.matchesById).forEach((match) => {
+          const route = this.getRoute(match.routeId)
+          const shouldInvalidate = opts?.__fromFocus
+            ? route.options.reloadOnWindowFocus ?? true
+            : true
+
+          if (shouldInvalidate) {
+            this.setRouteMatch(match.id, (s) => ({
+              ...s,
+              invalid: true,
+            }))
+          }
+        })
+      })
+    }
+
+    if (opts?.reload ?? true) {
+      return this.load()
+    }
+  }
+}
 
-  // Allow frameworks to hook into the router creation
-  router.options.createRouter?.(router)
+// Detect if we're in the DOM
+const isServer = typeof window === 'undefined' || !window.document.createElement
 
-  return router
+function getInitialRouterState(): RouterState<any> {
+  return {
+    status: 'idle',
+    isFetching: false,
+    resolvedLocation: null!,
+    location: null!,
+    matchesById: {},
+    matchIds: [],
+    pendingMatchIds: [],
+    matches: [],
+    pendingMatches: [],
+    renderedMatchIds: [],
+    renderedMatches: [],
+    lastUpdated: Date.now(),
+  }
 }
 
 function isCtrlEvent(e: MouseEvent) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
 }
 
-function cascadeLoaderData(matches: RouteMatch<any, any>[]) {
-  matches.forEach((match, index) => {
-    const parent = matches[index - 1]
+export type AnyRedirect = Redirect<any, any, any>
 
-    if (parent) {
-      match.loaderData = replaceEqualDeep(match.loaderData, {
-        ...parent.loaderData,
-        ...match.routeLoaderData,
-      })
-    }
-  })
+export type Redirect<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+  TMaskTo extends string = '',
+> = NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
+  code?: number
+}
+
+export function redirect<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+>(opts: Redirect<TRouteTree, TFrom, TTo>): Redirect<TRouteTree, TFrom, TTo> {
+  ;(opts as any).isRedirect = true
+  return opts
+}
+
+export function isRedirect(obj: any): obj is AnyRedirect {
+  return !!obj?.isRedirect
+}
+
+export class SearchParamError extends Error {}
+export class PathParamError extends Error {}
+
+function escapeJSON(jsonString: string) {
+  return jsonString
+    .replace(/\\/g, '\\\\') // Escape backslashes
+    .replace(/'/g, "\\'") // Escape single quotes
+    .replace(/"/g, '\\"') // Escape double quotes
+}
+
+// A function that takes an import() argument which is a function and returns a new function that will
+// proxy arguments from the caller to the imported function, retaining all type
+// information along the way
+export function lazyFn<
+  T extends Record<string, (...args: any[]) => any>,
+  TKey extends keyof T = 'default',
+>(fn: () => Promise<T>, key?: TKey) {
+  return async (...args: Parameters<T[TKey]>): Promise<ReturnType<T[TKey]>> => {
+    const imported = await fn()
+    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
 }