@tanstack/router-core 0.0.1-beta.41 → 0.0.1-beta.49

package/src/router.ts

@@ -1,11 +1,3 @@
-import {
-  BrowserHistory,
-  createBrowserHistory,
-  createMemoryHistory,
-  HashHistory,
-  History,
-  MemoryHistory,
-} from 'history'
 import invariant from 'tiny-invariant'
 import { GetFrameworkGeneric } from './frameworks'
 
@@ -25,7 +17,7 @@ import {
   resolvePath,
   trimPath,
 } from './path'
-import { AnyRoute, createRoute, Route } from './route'
+import { AnyRoute, Route } from './route'
 import {
   AnyLoaderData,
   AnyPathParams,
@@ -38,13 +30,12 @@ import {
 import {
   AllRouteInfo,
   AnyAllRouteInfo,
-  AnyRouteInfo,
   RouteInfo,
   RoutesById,
 } from './routeInfo'
-import { createRouteMatch, RouteMatch, RouteMatchStore } from './routeMatch'
+import { RouteMatch, RouteMatchStore } from './routeMatch'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
-import { createStore, batch, SetStoreFunction } from '@solidjs/reactivity'
+import { createStore, batch, Store } from './store'
 import {
   functionalUpdate,
   last,
@@ -55,12 +46,19 @@ import {
   Timeout,
   Updater,
 } from './utils'
-import { sharedClone } from './sharedClone'
+import { replaceEqualDeep } from './interop'
+import {
+  createBrowserHistory,
+  createMemoryHistory,
+  RouterHistory,
+} from './history'
 
 export interface RegisterRouter {
   // router: Router
 }
 
+export type AnyRouter = Router<any, any, any>
+
 export type RegisteredRouter = RegisterRouter extends {
   router: Router<infer TRouteConfig, infer TAllRouteInfo, infer TRouterContext>
 }
@@ -75,7 +73,7 @@ export type RegisteredAllRouteInfo = RegisterRouter extends {
 
 export interface LocationState {}
 
-export interface Location<
+export interface ParsedLocation<
   TSearchObj extends AnySearchSchema = {},
   TState extends LocationState = LocationState,
 > {
@@ -105,7 +103,7 @@ export interface RouterOptions<
   TRouteConfig extends AnyRouteConfig,
   TRouterContext,
 > {
-  history?: BrowserHistory | MemoryHistory | HashHistory
+  history?: RouterHistory
   stringifySearch?: SearchSerializer
   parseSearch?: SearchParser
   filterRoutes?: FilterRoutesFn
@@ -122,43 +120,20 @@ export interface RouterOptions<
   routeConfig?: TRouteConfig
   basepath?: string
   useServerData?: boolean
-  createRouter?: (router: Router<any, any, any>) => void
-  createRoute?: (opts: {
-    route: AnyRoute
-    router: Router<any, any, any>
-  }) => void
+  createRouter?: (router: AnyRouter) => void
+  createRoute?: (opts: { route: AnyRoute; router: AnyRouter }) => void
   context?: TRouterContext
   loadComponent?: (
     component: GetFrameworkGeneric<'Component'>,
   ) => Promise<GetFrameworkGeneric<'Component'>>
+  onRouteChange?: () => void
+  fetchServerDataFn?: FetchServerDataFn
 }
 
-export interface Action<
-  TPayload = unknown,
-  TResponse = unknown,
-  // TError = unknown,
-> {
-  submit: (
-    submission?: TPayload,
-    actionOpts?: { invalidate?: boolean; multi?: boolean },
-  ) => Promise<TResponse>
-  current?: ActionState<TPayload, TResponse>
-  latest?: ActionState<TPayload, TResponse>
-  submissions: ActionState<TPayload, TResponse>[]
-}
-
-export interface ActionState<
-  TPayload = unknown,
-  TResponse = unknown,
-  // TError = unknown,
-> {
-  submittedAt: number
-  status: 'idle' | 'pending' | 'success' | 'error'
-  submission: TPayload
-  isMulti: boolean
-  data?: TResponse
-  error?: unknown
-}
+type FetchServerDataFn = (ctx: {
+  router: AnyRouter
+  routeMatch: RouteMatch
+}) => Promise<any>
 
 export interface Loader<
   TFullSearchSchema extends AnySearchSchema = {},
@@ -201,21 +176,18 @@ export interface RouterStore<
   TState extends LocationState = LocationState,
 > {
   status: 'idle' | 'loading'
-  latestLocation: Location<TSearchObj, TState>
+  latestLocation: ParsedLocation<TSearchObj, TState>
   currentMatches: RouteMatch[]
-  currentLocation: Location<TSearchObj, TState>
+  currentLocation: ParsedLocation<TSearchObj, TState>
   pendingMatches?: RouteMatch[]
-  pendingLocation?: Location<TSearchObj, TState>
+  pendingLocation?: ParsedLocation<TSearchObj, TState>
   lastUpdated: number
-  actions: Record<string, Action>
   loaders: Record<string, Loader>
   isFetching: boolean
   isPreloading: boolean
   matchCache: Record<string, MatchCacheEntry>
 }
 
-type Listener = (router: Router<any, any, any>) => void
-
 export type ListenerFn = () => void
 
 export interface BuildNextOptions {
@@ -264,7 +236,7 @@ export interface DehydratedRouterState
 
 export interface DehydratedRouter<TRouterContext = unknown> {
   // location: Router['__location']
-  store: DehydratedRouterState
+  state: DehydratedRouterState
   context: TRouterContext
 }
 
@@ -272,1119 +244,1153 @@ export type MatchCache = Record<string, MatchCacheEntry>
 
 interface DehydratedRouteMatch {
   matchId: string
-  store: Pick<
+  state: Pick<
     RouteMatchStore<any, any>,
-    'status' | 'routeLoaderData' | 'isInvalid' | 'invalidAt'
+    'status' | 'routeLoaderData' | 'invalid' | 'invalidAt'
   >
 }
 
 export interface RouterContext {}
 
-export interface Router<
+export const defaultFetchServerDataFn: FetchServerDataFn = async ({
+  router,
+  routeMatch,
+}) => {
+  const next = router.buildNext({
+    to: '.',
+    search: (d: any) => ({
+      ...(d ?? {}),
+      __data: {
+        matchId: routeMatch.id,
+      },
+    }),
+  })
+
+  const res = await fetch(next.href, {
+    method: 'GET',
+    signal: routeMatch.abortController.signal,
+  })
+
+  if (res.ok) {
+    return res.json()
+  }
+
+  throw new Error('Failed to fetch match data')
+}
+
+export class Router<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
   TRouterContext = unknown,
 > {
-  types: {
+  types!: {
     // Super secret internal stuff
     RouteConfig: TRouteConfig
     AllRouteInfo: TAllRouteInfo
   }
 
-  // Public API
-  history: BrowserHistory | MemoryHistory | HashHistory
   options: PickAsRequired<
     RouterOptions<TRouteConfig, TRouterContext>,
     'stringifySearch' | 'parseSearch' | 'context'
   >
-  store: RouterStore<TAllRouteInfo['fullSearchSchema']>
-  setStore: SetStoreFunction<RouterStore<TAllRouteInfo['fullSearchSchema']>>
+  history: RouterHistory
   basepath: string
   // __location: Location<TAllRouteInfo['fullSearchSchema']>
-  routeTree: Route<TAllRouteInfo, RouteInfo>
-  routesById: RoutesById<TAllRouteInfo>
-  reset: () => void
-  mount: () => () => void
-  update: <
-    TRouteConfig extends RouteConfig = RouteConfig,
-    TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
-    TRouterContext = unknown,
-  >(
-    opts?: RouterOptions<TRouteConfig, TRouterContext>,
-  ) => Router<TRouteConfig, TAllRouteInfo, TRouterContext>
-
-  buildNext: (opts: BuildNextOptions) => Location
-  cancelMatches: () => void
-  load: (next?: Location) => Promise<void>
-  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: NavigateOptions<TAllRouteInfo, TFrom, TTo>,
-  ) => Promise<void>
-  matchRoute: <
-    TFrom extends ValidFromPath<TAllRouteInfo> = '/',
-    TTo extends string = '.',
-  >(
-    matchLocation: ToOptions<TAllRouteInfo, TFrom, TTo>,
-    opts?: MatchRouteOptions,
-  ) =>
-    | false
-    | TAllRouteInfo['routeInfoById'][ResolveRelativePath<
-        TFrom,
-        NoInfer<TTo>
-      >]['allParams']
-  buildLink: <
-    TFrom extends ValidFromPath<TAllRouteInfo> = '/',
-    TTo extends string = '.',
-  >(
-    opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
-  ) => LinkInfo
-  dehydrate: () => DehydratedRouter<TRouterContext>
-  hydrate: (dehydratedRouter: DehydratedRouter<TRouterContext>) => void
-}
+  routeTree!: Route<TAllRouteInfo, RouteInfo>
+  routesById!: RoutesById<TAllRouteInfo>
+  navigateTimeout: undefined | Timeout
+  nextAction: undefined | 'push' | 'replace'
+  navigationPromise: undefined | Promise<void>
+
+  store: Store<RouterStore<TAllRouteInfo['fullSearchSchema']>>
+  startedLoadingAt = Date.now()
+  resolveNavigation = () => {}
+
+  constructor(options?: RouterOptions<TRouteConfig, TRouterContext>) {
+    this.options = {
+      defaultLoaderGcMaxAge: 5 * 60 * 1000,
+      defaultLoaderMaxAge: 0,
+      defaultPreloadMaxAge: 2000,
+      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.history =
+      this.options?.history ?? isServer
+        ? createMemoryHistory()
+        : createBrowserHistory()
+    this.store = createStore(getInitialRouterState())
+    this.basepath = ''
 
-// This is the default history object if none is defined
-const createDefaultHistory = () =>
-  isServer ? createMemoryHistory() : createBrowserHistory()
+    this.update(options)
 
-function getInitialRouterState(): RouterStore {
-  return {
-    status: 'idle',
-    latestLocation: null!,
-    currentLocation: null!,
-    currentMatches: [],
-    actions: {},
-    loaders: {},
-    lastUpdated: Date.now(),
-    matchCache: {},
-    get isFetching() {
-      return (
-        this.status === 'loading' ||
-        this.currentMatches.some((d) => d.store.isFetching)
-      )
-    },
-    get isPreloading() {
-      return Object.values(this.matchCache).some(
-        (d) =>
-          d.match.store.isFetching &&
-          !this.currentMatches.find((dd) => dd.matchId === d.match.matchId),
-      )
-    },
+    // Allow frameworks to hook into the router creation
+    this.options.createRouter?.(this)
   }
-}
 
-export function createRouter<
-  TRouteConfig extends AnyRouteConfig = RouteConfig,
-  TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
-  TRouterContext = unknown,
->(
-  userOptions?: RouterOptions<TRouteConfig, TRouterContext>,
-): Router<TRouteConfig, TAllRouteInfo, TRouterContext> {
-  const originalOptions = {
-    defaultLoaderGcMaxAge: 5 * 60 * 1000,
-    defaultLoaderMaxAge: 0,
-    defaultPreloadMaxAge: 2000,
-    defaultPreloadDelay: 50,
-    context: undefined!,
-    ...userOptions,
-    stringifySearch: userOptions?.stringifySearch ?? defaultStringifySearch,
-    parseSearch: userOptions?.parseSearch ?? defaultParseSearch,
+  reset = () => {
+    this.store.setState((s) => Object.assign(s, getInitialRouterState()))
   }
 
-  const [store, setStore] = createStore<RouterStore>(getInitialRouterState())
+  mount = () => {
+    // Mount only does anything on the client
+    if (!isServer) {
+      // If the router matches are empty, load the matches
+      if (!this.store.state.currentMatches.length) {
+        this.load()
+      }
 
-  let navigateTimeout: undefined | Timeout
-  let nextAction: undefined | 'push' | 'replace'
-  let navigationPromise: undefined | Promise<void>
+      const unsubHistory = this.history.listen(() => {
+        this.load(this.#parseLocation(this.store.state.latestLocation))
+      })
 
-  let startedLoadingAt = Date.now()
-  let resolveNavigation = () => {}
+      const visibilityChangeEvent = 'visibilitychange'
+      const focusEvent = 'focus'
 
-  function onFocus() {
-    router.load()
-  }
+      // 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 (window.addEventListener) {
+        // Listen to visibilitychange and focus
+        window.addEventListener(visibilityChangeEvent, this.#onFocus, false)
+        window.addEventListener(focusEvent, this.#onFocus, false)
+      }
 
-  function buildRouteTree(rootRouteConfig: RouteConfig) {
-    const recurseRoutes = (
-      routeConfigs: RouteConfig[],
-      parent?: Route<TAllRouteInfo, any, any>,
-    ): Route<TAllRouteInfo, any, any>[] => {
-      return routeConfigs.map((routeConfig, i) => {
-        const routeOptions = routeConfig.options
-        const route = createRoute(routeConfig, routeOptions, i, parent, router)
-        const existingRoute = (router.routesById as any)[route.routeId]
+      return () => {
+        unsubHistory()
+        if (window.removeEventListener) {
+          // Be sure to unsubscribe if a new handler is set
 
-        if (existingRoute) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(
-              `Duplicate routes found with id: ${String(route.routeId)}`,
-              router.routesById,
-              route,
-            )
-          }
-          throw new Error()
+          window.removeEventListener(visibilityChangeEvent, this.#onFocus)
+          window.removeEventListener(focusEvent, this.#onFocus)
         }
+      }
+    }
 
-        ;(router.routesById as any)[route.routeId] = route
-
-        const children = routeConfig.children as RouteConfig[]
-
-        route.childRoutes = children?.length
-          ? recurseRoutes(children, route)
-          : undefined
+    return () => {}
+  }
 
-        return route
+  update = <
+    TRouteConfig extends RouteConfig = RouteConfig,
+    TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+    TRouterContext = unknown,
+  >(
+    opts?: RouterOptions<TRouteConfig, TRouterContext>,
+  ): Router<TRouteConfig, TAllRouteInfo, TRouterContext> => {
+    if (!this.store.state.latestLocation) {
+      this.store.setState((s) => {
+        s.latestLocation = this.#parseLocation()
+        s.currentLocation = s.latestLocation
       })
     }
 
-    const routes = recurseRoutes([rootRouteConfig])
+    Object.assign(this.options, opts)
 
-    return routes[0]!
-  }
+    const { basepath, routeConfig } = this.options
 
-  function parseLocation(
-    location: History['location'],
-    previousLocation?: Location,
-  ): Location {
-    const parsedSearch = router.options.parseSearch(location.search)
+    this.basepath = `/${trimPath(basepath ?? '') ?? ''}`
 
-    return {
-      pathname: location.pathname,
-      searchStr: location.search,
-      search: sharedClone(previousLocation?.search, parsedSearch),
-      hash: location.hash.split('#').reverse()[0] ?? '',
-      href: `${location.pathname}${location.search}${location.hash}`,
-      state: location.state as LocationState,
-      key: location.key,
+    if (routeConfig) {
+      this.routesById = {} as any
+      this.routeTree = this.#buildRouteTree(routeConfig)
     }
-  }
 
-  function navigate(location: BuildNextOptions & { replace?: boolean }) {
-    const next = router.buildNext(location)
-    return commitLocation(next, location.replace)
+    return this as any
   }
 
-  function buildLocation(dest: BuildNextOptions = {}): Location {
-    const fromPathname = dest.fromCurrent
-      ? store.latestLocation.pathname
-      : dest.from ?? store.latestLocation.pathname
+  buildNext = (opts: BuildNextOptions) => {
+    const next = this.#buildLocation(opts)
 
-    let pathname = resolvePath(
-      router.basepath ?? '/',
-      fromPathname,
-      `${dest.to ?? '.'}`,
-    )
+    const matches = this.matchRoutes(next.pathname)
 
-    const fromMatches = router.matchRoutes(store.latestLocation.pathname, {
-      strictParseParams: true,
-    })
+    const __preSearchFilters = matches
+      .map((match) => match.route.options.preSearchFilters ?? [])
+      .flat()
+      .filter(Boolean)
 
-    const toMatches = router.matchRoutes(pathname)
+    const __postSearchFilters = matches
+      .map((match) => match.route.options.postSearchFilters ?? [])
+      .flat()
+      .filter(Boolean)
 
-    const prevParams = { ...last(fromMatches)?.params }
+    return this.#buildLocation({
+      ...opts,
+      __preSearchFilters,
+      __postSearchFilters,
+    })
+  }
 
-    let nextParams =
-      (dest.params ?? true) === true
-        ? prevParams
-        : functionalUpdate(dest.params!, prevParams)
+  cancelMatches = () => {
+    ;[
+      ...this.store.state.currentMatches,
+      ...(this.store.state.pendingMatches || []),
+    ].forEach((match) => {
+      match.cancel()
+    })
+  }
 
-    if (nextParams) {
-      toMatches
-        .map((d) => d.options.stringifyParams)
-        .filter(Boolean)
-        .forEach((fn) => {
-          Object.assign({}, nextParams!, fn!(nextParams!))
-        })
-    }
+  load = async (next?: ParsedLocation) => {
+    let now = Date.now()
+    const startedAt = now
+    this.startedLoadingAt = startedAt
 
-    pathname = interpolatePath(pathname, nextParams ?? {})
+    // Cancel any pending matches
+    this.cancelMatches()
 
-    // Pre filters first
-    const preFilteredSearch = dest.__preSearchFilters?.length
-      ? dest.__preSearchFilters.reduce(
-          (prev, next) => next(prev),
-          store.latestLocation.search,
-        )
-      : store.latestLocation.search
+    let matches!: RouteMatch<any, any>[]
 
-    // 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
-        : {}
+    batch(() => {
+      if (next) {
+        // Ingest the new location
+        this.store.setState((s) => {
+          s.latestLocation = next
+        })
+      }
 
-    // Then post filters
-    const postFilteredSearch = dest.__postSearchFilters?.length
-      ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch)
-      : destSearch
+      // Match the routes
+      matches = this.matchRoutes(this.store.state.latestLocation.pathname, {
+        strictParseParams: true,
+      })
 
-    const search = sharedClone(store.latestLocation.search, postFilteredSearch)
+      this.store.setState((s) => {
+        s.status = 'loading'
+        s.pendingMatches = matches
+        s.pendingLocation = this.store.state.latestLocation
+      })
+    })
 
-    const searchStr = router.options.stringifySearch(search)
-    let hash =
-      dest.hash === true
-        ? store.latestLocation.hash
-        : functionalUpdate(dest.hash!, store.latestLocation.hash)
-    hash = hash ? `#${hash}` : ''
+    // Load the matches
+    try {
+      await this.loadMatches(matches)
+    } catch (err: any) {
+      console.warn(err)
+      invariant(
+        false,
+        'Matches failed to load due to error above ☝️. Navigation cancelled!',
+      )
+    }
 
-    return {
-      pathname,
-      search,
-      searchStr,
-      state: store.latestLocation.state,
-      hash,
-      href: `${pathname}${searchStr}${hash}`,
-      key: dest.key,
+    if (this.startedLoadingAt !== startedAt) {
+      // Ignore side-effects of outdated side-effects
+      return this.navigationPromise
     }
-  }
 
-  function commitLocation(next: Location, replace?: boolean): Promise<void> {
-    const id = '' + Date.now() + Math.random()
+    const previousMatches = this.store.state.currentMatches
 
-    if (navigateTimeout) clearTimeout(navigateTimeout)
+    const exiting: RouteMatch[] = [],
+      staying: RouteMatch[] = []
 
-    let nextAction: 'push' | 'replace' = 'replace'
+    previousMatches.forEach((d) => {
+      if (matches.find((dd) => dd.id === d.id)) {
+        staying.push(d)
+      } else {
+        exiting.push(d)
+      }
+    })
 
-    if (!replace) {
-      nextAction = 'push'
-    }
+    const entering = matches.filter((d) => {
+      return !previousMatches.find((dd) => dd.id === d.id)
+    })
 
-    const isSameUrl = parseLocation(router.history.location).href === next.href
+    now = Date.now()
 
-    if (isSameUrl && !next.key) {
-      nextAction = 'replace'
-    }
+    exiting.forEach((d) => {
+      d.__onExit?.({
+        params: d.params,
+        search: d.store.state.routeSearch,
+      })
 
-    router.history[nextAction](
-      {
-        pathname: next.pathname,
-        hash: next.hash,
-        search: next.searchStr,
-      },
-      {
-        id,
-        ...next.state,
-      },
-    )
+      // Clear non-loading error states when match leaves
+      if (d.store.state.status === 'error' && !d.store.state.isFetching) {
+        d.store.setState((s) => {
+          s.status = 'idle'
+          s.error = undefined
+        })
+      }
 
-    return (navigationPromise = new Promise((resolve) => {
-      const previousNavigationResolve = resolveNavigation
+      const gc = Math.max(
+        d.route.options.loaderGcMaxAge ??
+          this.options.defaultLoaderGcMaxAge ??
+          0,
+        d.route.options.loaderMaxAge ?? this.options.defaultLoaderMaxAge ?? 0,
+      )
 
-      resolveNavigation = () => {
-        previousNavigationResolve()
-        resolve()
+      if (gc > 0) {
+        this.store.setState((s) => {
+          s.matchCache[d.id] = {
+            gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
+            match: d,
+          }
+        })
       }
-    }))
-  }
+    })
 
-  const router: Router<TRouteConfig, TAllRouteInfo, TRouterContext> = {
-    types: undefined!,
+    staying.forEach((d) => {
+      d.route.options.onTransition?.({
+        params: d.params,
+        search: d.store.state.routeSearch,
+      })
+    })
 
-    // public api
-    history: userOptions?.history || createDefaultHistory(),
-    store,
-    setStore,
-    options: originalOptions,
-    basepath: '',
-    routeTree: undefined!,
-    routesById: {} as any,
+    entering.forEach((d) => {
+      d.__onExit = d.route.options.onLoaded?.({
+        params: d.params,
+        search: d.store.state.search,
+      })
+      delete this.store.state.matchCache[d.id]
+    })
 
-    reset: () => {
-      setStore((s) => Object.assign(s, getInitialRouterState()))
-    },
+    this.store.setState((s) => {
+      Object.assign(s, {
+        status: 'idle',
+        currentLocation: this.store.state.latestLocation,
+        currentMatches: matches,
+        pendingLocation: undefined,
+        pendingMatches: undefined,
+      })
+    })
 
-    getRoute: (id) => {
-      return router.routesById[id]
-    },
+    this.options.onRouteChange?.()
 
-    dehydrate: () => {
-      return {
-        store: {
-          ...pick(store, [
-            'latestLocation',
-            'currentLocation',
-            'status',
-            'lastUpdated',
-          ]),
-          currentMatches: store.currentMatches.map((match) => ({
-            matchId: match.matchId,
-            store: pick(match.store, [
-              'status',
-              'routeLoaderData',
-              'isInvalid',
-              'invalidAt',
-            ]),
-          })),
-        },
-        context: router.options.context as TRouterContext,
-      }
-    },
+    this.resolveNavigation()
+  }
 
-    hydrate: (dehydratedRouter) => {
-      setStore((s) => {
-        // Update the context TODO: make this part of state?
-        router.options.context = dehydratedRouter.context
+  cleanMatchCache = () => {
+    const now = Date.now()
 
-        // Match the routes
-        const currentMatches = router.matchRoutes(
-          dehydratedRouter.store.latestLocation.pathname,
-          {
-            strictParseParams: true,
-          },
-        )
+    this.store.setState((s) => {
+      Object.keys(s.matchCache).forEach((matchId) => {
+        const entry = s.matchCache[matchId]!
 
-        currentMatches.forEach((match, index) => {
-          const dehydratedMatch = dehydratedRouter.store.currentMatches[index]
-          invariant(
-            dehydratedMatch && dehydratedMatch.matchId === match.matchId,
-            'Oh no! There was a hydration mismatch when attempting to restore the state of the router! 😬',
-          )
-          Object.assign(match, dehydratedMatch)
-        })
+        // Don't remove loading matches
+        if (entry.match.store.state.status === 'loading') {
+          return
+        }
 
-        currentMatches.forEach((match) => match.__.validate())
+        // Do not remove successful matches that are still valid
+        if (entry.gc > 0 && entry.gc > now) {
+          return
+        }
 
-        Object.assign(s, { ...dehydratedRouter.store, currentMatches })
+        // Everything else gets removed
+        delete s.matchCache[matchId]
       })
-    },
+    })
+  }
 
-    mount: () => {
-      // Mount only does anything on the client
-      if (!isServer) {
-        // If the router matches are empty, load the matches
-        if (!store.currentMatches.length) {
-          router.load()
-        }
+  getRoute = <TId extends keyof TAllRouteInfo['routeInfoById']>(
+    id: TId,
+  ): Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]> => {
+    const route = this.routesById[id]
 
-        const unsub = router.history.listen((event) => {
-          router.load(parseLocation(event.location, store.latestLocation))
-        })
+    invariant(route, `Route with id "${id as string}" not found`)
 
-        // 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 (window.addEventListener) {
-          // Listen to visibilitychange and focus
-          window.addEventListener('visibilitychange', onFocus, false)
-          window.addEventListener('focus', onFocus, false)
-        }
+    return route
+  }
 
-        return () => {
-          unsub()
-          if (window.removeEventListener) {
-            // Be sure to unsubscribe if a new handler is set
-            window.removeEventListener('visibilitychange', onFocus)
-            window.removeEventListener('focus', onFocus)
-          }
-        }
-      }
+  loadRoute = async (
+    navigateOpts: BuildNextOptions = this.store.state.latestLocation,
+  ): Promise<RouteMatch[]> => {
+    const next = this.buildNext(navigateOpts)
+    const matches = this.matchRoutes(next.pathname, {
+      strictParseParams: true,
+    })
+    await this.loadMatches(matches)
+    return matches
+  }
 
-      return () => {}
-    },
+  preloadRoute = async (
+    navigateOpts: BuildNextOptions = this.store.state.latestLocation,
+    loaderOpts: { maxAge?: number; gcMaxAge?: number },
+  ) => {
+    const next = this.buildNext(navigateOpts)
+    const matches = this.matchRoutes(next.pathname, {
+      strictParseParams: true,
+    })
 
-    update: (opts) => {
-      const newHistory = opts?.history !== router.history
-      if (!store.latestLocation || newHistory) {
-        if (opts?.history) {
-          router.history = opts.history
-        }
-        setStore((s) => {
-          s.latestLocation = parseLocation(router.history.location)
-          s.currentLocation = s.latestLocation
-        })
-      }
+    await this.loadMatches(matches, {
+      preload: true,
+      maxAge:
+        loaderOpts.maxAge ??
+        this.options.defaultPreloadMaxAge ??
+        this.options.defaultLoaderMaxAge ??
+        0,
+      gcMaxAge:
+        loaderOpts.gcMaxAge ??
+        this.options.defaultPreloadGcMaxAge ??
+        this.options.defaultLoaderGcMaxAge ??
+        0,
+    })
+    return matches
+  }
 
-      Object.assign(router.options, opts)
+  matchRoutes = (pathname: string, opts?: { strictParseParams?: boolean }) => {
+    const matches: RouteMatch[] = []
 
-      const { basepath, routeConfig } = router.options
+    if (!this.routeTree) {
+      return matches
+    }
 
-      router.basepath = `/${trimPath(basepath ?? '') ?? ''}`
+    const existingMatches = [
+      ...this.store.state.currentMatches,
+      ...(this.store.state.pendingMatches ?? []),
+    ]
 
-      if (routeConfig) {
-        router.routesById = {} as any
-        router.routeTree = buildRouteTree(routeConfig)
-      }
+    const recurse = async (routes: Route<any, any>[]): Promise<void> => {
+      const parentMatch = last(matches)
+      let params = parentMatch?.params ?? {}
 
-      return router as any
-    },
+      const filteredRoutes = this.options.filterRoutes?.(routes) ?? routes
 
-    cancelMatches: () => {
-      ;[...store.currentMatches, ...(store.pendingMatches || [])].forEach(
-        (match) => {
-          match.cancel()
-        },
-      )
-    },
+      let foundRoutes: Route[] = []
 
-    load: async (next?: Location) => {
-      let now = Date.now()
-      const startedAt = now
-      startedLoadingAt = startedAt
-
-      // Cancel any pending matches
-      router.cancelMatches()
+      const findMatchInRoutes = (parentRoutes: Route[], routes: Route[]) => {
+        routes.some((route) => {
+          if (!route.path && route.childRoutes?.length) {
+            return findMatchInRoutes([...foundRoutes, route], route.childRoutes)
+          }
 
-      let matches!: RouteMatch<any, any>[]
+          const fuzzy = !!(route.path !== '/' || route.childRoutes?.length)
 
-      batch(() => {
-        if (next) {
-          // Ingest the new location
-          setStore((s) => {
-            s.latestLocation = next
+          const matchParams = matchPathname(this.basepath, pathname, {
+            to: route.fullPath,
+            fuzzy,
+            caseSensitive:
+              route.options.caseSensitive ?? this.options.caseSensitive,
           })
-        }
 
-        // Match the routes
-        matches = router.matchRoutes(store.latestLocation.pathname, {
-          strictParseParams: true,
-        })
+          if (matchParams) {
+            let parsedParams
+
+            try {
+              parsedParams =
+                route.options.parseParams?.(matchParams!) ?? matchParams
+            } catch (err) {
+              if (opts?.strictParseParams) {
+                throw err
+              }
+            }
+
+            params = {
+              ...params,
+              ...parsedParams,
+            }
+          }
 
-        console.log('set loading', matches)
-        setStore((s) => {
-          s.status = 'loading'
-          s.pendingMatches = matches
-          s.pendingLocation = store.latestLocation
+          if (!!matchParams) {
+            foundRoutes = [...parentRoutes, route]
+          }
+
+          return !!foundRoutes.length
         })
-      })
 
-      // Load the matches
-      try {
-        await router.loadMatches(matches)
-      } catch (err: any) {
-        console.log(err)
-        invariant(
-          false,
-          'Matches failed to load due to error above ☝️. Navigation cancelled!',
-        )
+        return !!foundRoutes.length
       }
 
-      if (startedLoadingAt !== startedAt) {
-        // Ignore side-effects of outdated side-effects
-        return navigationPromise
-      }
+      findMatchInRoutes([], filteredRoutes)
 
-      const previousMatches = store.currentMatches
+      if (!foundRoutes.length) {
+        return
+      }
 
-      const exiting: RouteMatch[] = [],
-        staying: RouteMatch[] = []
+      foundRoutes.forEach((foundRoute) => {
+        const interpolatedPath = interpolatePath(foundRoute.path, params)
+        const matchId = interpolatePath(foundRoute.id, params, true)
+
+        const match =
+          existingMatches.find((d) => d.id === matchId) ||
+          this.store.state.matchCache[matchId]?.match ||
+          new RouteMatch(this, foundRoute, {
+            matchId,
+            params,
+            pathname: joinPaths([this.basepath, interpolatedPath]),
+          })
 
-      previousMatches.forEach((d) => {
-        if (matches.find((dd) => dd.matchId === d.matchId)) {
-          staying.push(d)
-        } else {
-          exiting.push(d)
-        }
+        matches.push(match)
       })
 
-      const entering = matches.filter((d) => {
-        return !previousMatches.find((dd) => dd.matchId === d.matchId)
-      })
+      const foundRoute = last(foundRoutes)!
 
-      now = Date.now()
+      if (foundRoute.childRoutes?.length) {
+        recurse(foundRoute.childRoutes)
+      }
+    }
 
-      exiting.forEach((d) => {
-        d.__.onExit?.({
-          params: d.params,
-          search: d.store.routeSearch,
-        })
+    recurse([this.routeTree])
 
-        // Clear idle error states when match leaves
-        if (d.store.status === 'error' && !d.store.isFetching) {
-          d.store.status = 'idle'
-          d.store.error = undefined
-        }
+    linkMatches(matches)
 
-        const gc = Math.max(
-          d.options.loaderGcMaxAge ?? router.options.defaultLoaderGcMaxAge ?? 0,
-          d.options.loaderMaxAge ?? router.options.defaultLoaderMaxAge ?? 0,
-        )
+    return matches
+  }
 
-        if (gc > 0) {
-          store.matchCache[d.matchId] = {
-            gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
-            match: d,
+  loadMatches = async (
+    resolvedMatches: RouteMatch[],
+    loaderOpts?:
+      | { preload: true; maxAge: number; gcMaxAge: number }
+      | { preload?: false; maxAge?: never; gcMaxAge?: never },
+  ) => {
+    this.cleanMatchCache()
+    resolvedMatches.forEach(async (match) => {
+      // Validate the match (loads search params etc)
+      match.__validate()
+    })
+
+    // Check each match middleware to see if the route can be accessed
+    await Promise.all(
+      resolvedMatches.map(async (match) => {
+        try {
+          await match.route.options.beforeLoad?.({
+            router: this as any,
+            match,
+          })
+        } catch (err) {
+          if (!loaderOpts?.preload) {
+            match.route.options.onLoadError?.(err)
           }
+
+          throw err
         }
-      })
+      }),
+    )
 
-      staying.forEach((d) => {
-        d.options.onTransition?.({
-          params: d.params,
-          search: d.store.routeSearch,
-        })
-      })
+    const matchPromises = resolvedMatches.map(async (match, index) => {
+      const prevMatch = resolvedMatches[(index = 1)]
+      const search = match.store.state.search as { __data?: any }
 
-      entering.forEach((d) => {
-        d.__.onExit = d.options.onLoaded?.({
-          params: d.params,
-          search: d.store.search,
-        })
-        delete store.matchCache[d.matchId]
-      })
-
-      if (startedLoadingAt !== startedAt) {
-        // Ignore side-effects of match loading
+      if (search.__data?.matchId && search.__data.matchId !== match.id) {
         return
       }
 
-      matches.forEach((match) => {
-        // Clear actions
-        if (match.action) {
-          // TODO: Check reactivity here
-          match.action.current = undefined
-          match.action.submissions = []
-        }
-      })
+      match.load(loaderOpts)
 
-      setStore((s) => {
-        console.log('set', matches)
-        Object.assign(s, {
-          status: 'idle',
-          currentLocation: store.latestLocation,
-          currentMatches: matches,
-          pendingLocation: undefined,
-          pendingMatches: undefined,
-        })
-      })
-
-      resolveNavigation()
-    },
-
-    cleanMatchCache: () => {
-      const now = Date.now()
+      if (match.store.state.status !== 'success' && match.__loadPromise) {
+        // Wait for the first sign of activity from the match
+        await match.__loadPromise
+      }
 
-      setStore((s) => {
-        Object.keys(s.matchCache).forEach((matchId) => {
-          const entry = s.matchCache[matchId]!
+      if (prevMatch) {
+        await prevMatch.__loadPromise
+      }
+    })
 
-          // Don't remove loading matches
-          if (entry.match.store.status === 'loading') {
-            return
-          }
+    await Promise.all(matchPromises)
+  }
 
-          // Do not remove successful matches that are still valid
-          if (entry.gc > 0 && entry.gc > now) {
-            return
-          }
+  loadMatchData = async (
+    routeMatch: RouteMatch<any, any>,
+  ): Promise<Record<string, unknown>> => {
+    if (isServer || !this.options.useServerData) {
+      return (
+        (await routeMatch.route.options.loader?.({
+          // parentLoaderPromise: routeMatch.parentMatch.dataPromise,
+          params: routeMatch.params,
+          search: routeMatch.store.state.routeSearch,
+          signal: routeMatch.abortController.signal,
+        })) || {}
+      )
+    } else {
+      // Refresh:
+      // '/dashboard'
+      // '/dashboard/invoices/'
+      // '/dashboard/invoices/123'
 
-          // Everything else gets removed
-          delete s.matchCache[matchId]
-        })
-      })
-    },
+      // New:
+      // '/dashboard/invoices/456'
 
-    loadRoute: async (navigateOpts = store.latestLocation) => {
-      const next = router.buildNext(navigateOpts)
-      const matches = router.matchRoutes(next.pathname, {
-        strictParseParams: true,
-      })
-      await router.loadMatches(matches)
-      return matches
-    },
+      // TODO: batch requests when possible
 
-    preloadRoute: async (navigateOpts = store.latestLocation, loaderOpts) => {
-      const next = router.buildNext(navigateOpts)
-      const matches = router.matchRoutes(next.pathname, {
-        strictParseParams: true,
-      })
+      return this.options.fetchServerDataFn!({ router: this, routeMatch })
+    }
+  }
 
-      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
-    },
+  invalidateRoute = async (opts: MatchLocation) => {
+    const next = this.buildNext(opts)
+    const unloadedMatchIds = this.matchRoutes(next.pathname).map((d) => d.id)
+
+    await Promise.allSettled(
+      [
+        ...this.store.state.currentMatches,
+        ...(this.store.state.pendingMatches ?? []),
+      ].map(async (match) => {
+        if (unloadedMatchIds.includes(match.id)) {
+          return match.invalidate()
+        }
+      }),
+    )
+  }
 
-    matchRoutes: (pathname, opts) => {
-      router.cleanMatchCache()
+  reload = () => {
+    this.navigate({
+      fromCurrent: true,
+      replace: true,
+      search: true,
+    } as any)
+  }
 
-      const matches: RouteMatch[] = []
+  resolvePath = (from: string, path: string) => {
+    return resolvePath(this.basepath!, from, cleanPath(path))
+  }
 
-      if (!router.routeTree) {
-        return matches
-      }
+  navigate = async <
+    TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+    TTo extends string = '.',
+  >({
+    from,
+    to = '.' as any,
+    search,
+    hash,
+    replace,
+    params,
+  }: NavigateOptions<TAllRouteInfo, TFrom, TTo>) => {
+    // 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 = String(from)
+
+    let isExternal
+
+    try {
+      new URL(`${toString}`)
+      isExternal = true
+    } catch (e) {}
+
+    invariant(
+      !isExternal,
+      'Attempting to navigate to external url with this.navigate!',
+    )
 
-      const existingMatches = [
-        ...store.currentMatches,
-        ...(store.pendingMatches ?? []),
-      ]
+    return this.#commitLocation({
+      from: fromString,
+      to: toString,
+      search,
+      hash,
+      replace,
+      params,
+    })
+  }
 
-      const recurse = async (routes: Route<any, any>[]): Promise<void> => {
-        const parentMatch = last(matches)
-        let params = parentMatch?.params ?? {}
+  matchRoute = <
+    TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+    TTo extends string = '.',
+  >(
+    location: ToOptions<TAllRouteInfo, TFrom, TTo>,
+    opts?: MatchRouteOptions,
+  ):
+    | false
+    | TAllRouteInfo['routeInfoById'][ResolveRelativePath<
+        TFrom,
+        NoInfer<TTo>
+      >]['allParams'] => {
+    location = {
+      ...location,
+      to: location.to
+        ? this.resolvePath(location.from ?? '', location.to)
+        : undefined,
+    }
 
-        const filteredRoutes = router.options.filterRoutes?.(routes) ?? routes
+    const next = this.buildNext(location)
 
-        let foundRoutes: Route[] = []
+    if (opts?.pending) {
+      if (!this.store.state.pendingLocation) {
+        return false
+      }
 
-        const findMatchInRoutes = (parentRoutes: Route[], routes: Route[]) => {
-          routes.some((route) => {
-            if (!route.routePath && route.childRoutes?.length) {
-              return findMatchInRoutes(
-                [...foundRoutes, route],
-                route.childRoutes,
-              )
-            }
+      return matchPathname(
+        this.basepath,
+        this.store.state.pendingLocation!.pathname,
+        {
+          ...opts,
+          to: next.pathname,
+        },
+      ) as any
+    }
 
-            const fuzzy = !!(
-              route.routePath !== '/' || route.childRoutes?.length
-            )
+    return matchPathname(
+      this.basepath,
+      this.store.state.currentLocation.pathname,
+      {
+        ...opts,
+        to: next.pathname,
+      },
+    ) as any
+  }
 
-            const matchParams = matchPathname(router.basepath, pathname, {
-              to: route.fullPath,
-              fuzzy,
-              caseSensitive:
-                route.options.caseSensitive ?? router.options.caseSensitive,
-            })
+  buildLink = <
+    TFrom extends ValidFromPath<TAllRouteInfo> = '/',
+    TTo extends string = '.',
+  >({
+    from,
+    to = '.' as any,
+    search,
+    params,
+    hash,
+    target,
+    replace,
+    activeOptions,
+    preload,
+    preloadMaxAge: userPreloadMaxAge,
+    preloadGcMaxAge: userPreloadGcMaxAge,
+    preloadDelay: userPreloadDelay,
+    disabled,
+  }: LinkOptions<TAllRouteInfo, 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
+
+    try {
+      new URL(`${to}`)
+      return {
+        type: 'external',
+        href: to,
+      }
+    } catch (e) {}
 
-            if (matchParams) {
-              let parsedParams
+    const nextOpts = {
+      from,
+      to,
+      search,
+      params,
+      hash,
+      replace,
+    }
 
-              try {
-                parsedParams =
-                  route.options.parseParams?.(matchParams!) ?? matchParams
-              } catch (err) {
-                if (opts?.strictParseParams) {
-                  throw err
-                }
-              }
+    const next = this.buildNext(nextOpts)
 
-              params = {
-                ...params,
-                ...parsedParams,
-              }
-            }
+    preload = preload ?? this.options.defaultPreload
+    const preloadDelay =
+      userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0
 
-            if (!!matchParams) {
-              foundRoutes = [...parentRoutes, route]
-            }
+    // Compare path/hash for matches
+    const pathIsEqual =
+      this.store.state.currentLocation.pathname === next.pathname
+    const currentPathSplit =
+      this.store.state.currentLocation.pathname.split('/')
+    const nextPathSplit = next.pathname.split('/')
+    const pathIsFuzzyEqual = nextPathSplit.every(
+      (d, i) => d === currentPathSplit[i],
+    )
+    const hashIsEqual = this.store.state.currentLocation.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) {
+          this.invalidateRoute(nextOpts)
+        }
 
-            return !!foundRoutes.length
-          })
+        // All is well? Navigate!
+        this.#commitLocation(nextOpts as any)
+      }
+    }
 
-          return !!foundRoutes.length
-        }
+    // The click handler
+    const handleFocus = (e: MouseEvent) => {
+      if (preload) {
+        this.preloadRoute(nextOpts, {
+          maxAge: userPreloadMaxAge,
+          gcMaxAge: userPreloadGcMaxAge,
+        }).catch((err) => {
+          console.warn(err)
+          console.warn('Error preloading route! ☝️')
+        })
+      }
+    }
 
-        findMatchInRoutes([], filteredRoutes)
+    const handleEnter = (e: MouseEvent) => {
+      const target = (e.target || {}) as LinkCurrentTargetElement
 
-        if (!foundRoutes.length) {
+      if (preload) {
+        if (target.preloadTimeout) {
           return
         }
 
-        foundRoutes.forEach((foundRoute) => {
-          const interpolatedPath = interpolatePath(foundRoute.routePath, params)
-          const matchId = interpolatePath(foundRoute.routeId, params, true)
-
-          const match =
-            existingMatches.find((d) => d.matchId === matchId) ||
-            store.matchCache[matchId]?.match ||
-            createRouteMatch(router, foundRoute, {
-              parentMatch,
-              matchId,
-              params,
-              pathname: joinPaths([router.basepath, interpolatedPath]),
-            })
-
-          matches.push(match)
-        })
+        target.preloadTimeout = setTimeout(() => {
+          target.preloadTimeout = null
+          this.preloadRoute(nextOpts, {
+            maxAge: userPreloadMaxAge,
+            gcMaxAge: userPreloadGcMaxAge,
+          }).catch((err) => {
+            console.warn(err)
+            console.warn('Error preloading route! ☝️')
+          })
+        }, preloadDelay)
+      }
+    }
 
-        const foundRoute = last(foundRoutes)!
+    const handleLeave = (e: MouseEvent) => {
+      const target = (e.target || {}) as LinkCurrentTargetElement
 
-        if (foundRoute.childRoutes?.length) {
-          recurse(foundRoute.childRoutes)
-        }
+      if (target.preloadTimeout) {
+        clearTimeout(target.preloadTimeout)
+        target.preloadTimeout = null
       }
+    }
 
-      recurse([router.routeTree])
+    return {
+      type: 'internal',
+      next,
+      handleFocus,
+      handleClick,
+      handleEnter,
+      handleLeave,
+      isActive,
+      disabled,
+    }
+  }
+
+  dehydrate = (): DehydratedRouter<TRouterContext> => {
+    return {
+      state: {
+        ...pick(this.store.state, [
+          'latestLocation',
+          'currentLocation',
+          'status',
+          'lastUpdated',
+        ]),
+        currentMatches: this.store.state.currentMatches.map((match) => ({
+          matchId: match.id,
+          state: {
+            ...pick(match.store.state, [
+              'status',
+              'routeLoaderData',
+              'invalidAt',
+              'invalid',
+            ]),
+          },
+        })),
+      },
+      context: this.options.context as TRouterContext,
+    }
+  }
 
-      linkMatches(matches)
+  hydrate = (dehydratedRouter: DehydratedRouter<TRouterContext>) => {
+    this.store.setState((s) => {
+      // Update the context TODO: make this part of state?
+      this.options.context = dehydratedRouter.context
 
-      return matches
-    },
+      // Match the routes
+      const currentMatches = this.matchRoutes(
+        dehydratedRouter.state.latestLocation.pathname,
+        {
+          strictParseParams: true,
+        },
+      )
 
-    loadMatches: async (resolvedMatches, loaderOpts) => {
-      resolvedMatches.forEach(async (match) => {
-        // Validate the match (loads search params etc)
-        match.__.validate()
+      currentMatches.forEach((match, index) => {
+        const dehydratedMatch = dehydratedRouter.state.currentMatches[index]
+        invariant(
+          dehydratedMatch && dehydratedMatch.matchId === match.id,
+          'Oh no! There was a hydration mismatch when attempting to rethis.store the state of the router! 😬',
+        )
+        Object.assign(match, dehydratedMatch)
       })
 
-      // Check each match middleware to see if the route can be accessed
-      await Promise.all(
-        resolvedMatches.map(async (match) => {
-          try {
-            await match.options.beforeLoad?.({
-              router: router as any,
-              match,
-            })
-          } catch (err) {
-            if (!loaderOpts?.preload) {
-              match.options.onLoadError?.(err)
-            }
+      currentMatches.forEach((match) => match.__validate())
 
-            throw err
-          }
-        }),
-      )
+      Object.assign(s, { ...dehydratedRouter.state, currentMatches })
+    })
+  }
 
-      const matchPromises = resolvedMatches.map(async (match) => {
-        const search = match.store.search as { __data?: any }
+  getLoader = <TFrom extends keyof TAllRouteInfo['routeInfoById'] = '/'>(opts: {
+    from: TFrom
+  }): unknown extends TAllRouteInfo['routeInfoById'][TFrom]['routeLoaderData']
+    ?
+        | Loader<
+            LoaderContext<
+              TAllRouteInfo['routeInfoById'][TFrom]['fullSearchSchema'],
+              TAllRouteInfo['routeInfoById'][TFrom]['allParams']
+            >,
+            TAllRouteInfo['routeInfoById'][TFrom]['routeLoaderData']
+          >
+        | undefined
+    : Loader<
+        TAllRouteInfo['routeInfoById'][TFrom]['fullSearchSchema'],
+        TAllRouteInfo['routeInfoById'][TFrom]['allParams'],
+        TAllRouteInfo['routeInfoById'][TFrom]['routeLoaderData']
+      > => {
+    const id = opts.from || ('/' as any)
+
+    const route = this.getRoute(id)
+
+    if (!route) return undefined as any
+
+    let loader =
+      this.store.state.loaders[id] ||
+      (() => {
+        this.store.setState((s) => {
+          s.loaders[id] = {
+            pending: [],
+            fetch: (async (loaderContext: LoaderContext<any, any>) => {
+              if (!route) {
+                return
+              }
+              const loaderState: LoaderState<any, any> = {
+                loadedAt: Date.now(),
+                loaderContext,
+              }
+              this.store.setState((s) => {
+                s.loaders[id]!.current = loaderState
+                s.loaders[id]!.latest = loaderState
+                s.loaders[id]!.pending.push(loaderState)
+              })
+              try {
+                return await route.options.loader?.(loaderContext)
+              } finally {
+                this.store.setState((s) => {
+                  s.loaders[id]!.pending = s.loaders[id]!.pending.filter(
+                    (d) => d !== loaderState,
+                  )
+                })
+              }
+            }) as any,
+          }
+        })
+        return this.store.state.loaders[id]!
+      })()
 
-        if (search.__data?.matchId && search.__data.matchId !== match.matchId) {
-          return
-        }
+    return loader as any
+  }
 
-        match.load(loaderOpts)
+  #buildRouteTree = (rootRouteConfig: RouteConfig) => {
+    const recurseRoutes = (
+      routeConfigs: RouteConfig[],
+      parent?: Route<TAllRouteInfo, any, any>,
+    ): Route<TAllRouteInfo, any, any>[] => {
+      return routeConfigs.map((routeConfig, i) => {
+        const routeOptions = routeConfig.options
+        const route = new Route(routeConfig, routeOptions, i, parent, this)
+        const existingRoute = (this.routesById as any)[route.id]
 
-        if (match.store.status !== 'success' && match.__.loadPromise) {
-          // Wait for the first sign of activity from the match
-          await match.__.loadPromise
+        if (existingRoute) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(
+              `Duplicate routes found with id: ${String(route.id)}`,
+              this.routesById,
+              route,
+            )
+          }
+          throw new Error()
         }
-      })
 
-      await Promise.all(matchPromises)
-    },
+        ;(this.routesById as any)[route.id] = route
 
-    loadMatchData: async (routeMatch) => {
-      if (isServer || !router.options.useServerData) {
-        return (
-          (await routeMatch.options.loader?.({
-            // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
-            params: routeMatch.params,
-            search: routeMatch.store.routeSearch,
-            signal: routeMatch.__.abortController.signal,
-          })) || {}
-        )
-      } else {
-        const next = router.buildNext({
-          to: '.',
-          search: (d: any) => ({
-            ...(d ?? {}),
-            __data: {
-              matchId: routeMatch.matchId,
-            },
-          }),
-        })
+        const children = routeConfig.children as RouteConfig[]
 
-        // Refresh:
-        // '/dashboard'
-        // '/dashboard/invoices/'
-        // '/dashboard/invoices/123'
+        route.childRoutes = children.length
+          ? recurseRoutes(children, route)
+          : undefined
 
-        // New:
-        // '/dashboard/invoices/456'
+        return route
+      })
+    }
 
-        // TODO: batch requests when possible
+    const routes = recurseRoutes([rootRouteConfig])
 
-        const res = await fetch(next.href, {
-          method: 'GET',
-          // signal: routeMatch.__.abortController.signal,
-        })
+    return routes[0]!
+  }
 
-        if (res.ok) {
-          return res.json()
-        }
+  #parseLocation = (previousLocation?: ParsedLocation): ParsedLocation => {
+    let { pathname, search, hash, state } = this.history.location
 
-        throw new Error('Failed to fetch match data')
-      }
-    },
+    const parsedSearch = this.options.parseSearch(search)
 
-    invalidateRoute: (opts: MatchLocation) => {
-      const next = router.buildNext(opts)
-      const unloadedMatchIds = router
-        .matchRoutes(next.pathname)
-        .map((d) => d.matchId)
-      ;[...store.currentMatches, ...(store.pendingMatches ?? [])].forEach(
-        (match) => {
-          if (unloadedMatchIds.includes(match.matchId)) {
-            match.invalidate()
-          }
-        },
-      )
-    },
+    console.log({
+      pathname: pathname,
+      searchStr: search,
+      search: replaceEqualDeep(previousLocation?.search, parsedSearch),
+      hash: hash.split('#').reverse()[0] ?? '',
+      href: `${pathname}${search}${hash}`,
+      state: state as LocationState,
+      key: state?.key || '__init__',
+    })
 
-    reload: () =>
-      navigate({
-        fromCurrent: true,
-        replace: true,
-        search: true,
-      }),
+    return {
+      pathname: pathname,
+      searchStr: search,
+      search: replaceEqualDeep(previousLocation?.search, parsedSearch),
+      hash: hash.split('#').reverse()[0] ?? '',
+      href: `${pathname}${search}${hash}`,
+      state: state as LocationState,
+      key: state?.key || '__init__',
+    }
+  }
 
-    resolvePath: (from: string, path: string) => {
-      return resolvePath(router.basepath!, from, cleanPath(path))
-    },
+  #onFocus = () => {
+    this.load()
+  }
 
-    matchRoute: (location, opts) => {
-      // const location = router.buildNext(opts)
+  #buildLocation = (dest: BuildNextOptions = {}): ParsedLocation => {
+    const fromPathname = dest.fromCurrent
+      ? this.store.state.latestLocation.pathname
+      : dest.from ?? this.store.state.latestLocation.pathname
 
-      location = {
-        ...location,
-        to: location.to
-          ? router.resolvePath(location.from ?? '', location.to)
-          : undefined,
-      }
+    let pathname = resolvePath(
+      this.basepath ?? '/',
+      fromPathname,
+      `${dest.to ?? '.'}`,
+    )
 
-      const next = router.buildNext(location)
+    const fromMatches = this.matchRoutes(
+      this.store.state.latestLocation.pathname,
+      {
+        strictParseParams: true,
+      },
+    )
 
-      if (opts?.pending) {
-        if (!store.pendingLocation) {
-          return false
-        }
+    const toMatches = this.matchRoutes(pathname)
 
-        return !!matchPathname(
-          router.basepath,
-          store.pendingLocation.pathname,
-          {
-            ...opts,
-            to: next.pathname,
-          },
-        )
-      }
+    const prevParams = { ...last(fromMatches)?.params }
 
-      return matchPathname(router.basepath, store.currentLocation.pathname, {
-        ...opts,
-        to: next.pathname,
-      }) as any
-    },
+    let nextParams =
+      (dest.params ?? true) === true
+        ? prevParams
+        : functionalUpdate(dest.params!, prevParams)
 
-    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
+    if (nextParams) {
+      toMatches
+        .map((d) => d.route.options.stringifyParams)
+        .filter(Boolean)
+        .forEach((fn) => {
+          Object.assign({}, nextParams!, fn!(nextParams!))
+        })
+    }
 
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
-      const toString = String(to)
-      const fromString = String(from)
+    pathname = interpolatePath(pathname, nextParams ?? {})
 
-      let isExternal
+    // Pre filters first
+    const preFilteredSearch = dest.__preSearchFilters?.length
+      ? dest.__preSearchFilters?.reduce(
+          (prev, next) => next(prev),
+          this.store.state.latestLocation.search,
+        )
+      : this.store.state.latestLocation.search
 
-      try {
-        new URL(`${toString}`)
-        isExternal = true
-      } catch (e) {}
+    // 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
+        : {}
 
-      invariant(
-        !isExternal,
-        'Attempting to navigate to external url with router.navigate!',
-      )
+    // Then post filters
+    const postFilteredSearch = dest.__postSearchFilters?.length
+      ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch)
+      : destSearch
 
-      return navigate({
-        from: fromString,
-        to: toString,
-        search,
-        hash,
-        replace,
-        params,
-      })
-    },
+    const search = replaceEqualDeep(
+      this.store.state.latestLocation.search,
+      postFilteredSearch,
+    )
 
-    buildLink: ({
-      from,
-      to = '.',
+    const searchStr = this.options.stringifySearch(search)
+    let hash =
+      dest.hash === true
+        ? this.store.state.latestLocation.hash
+        : functionalUpdate(dest.hash!, this.store.state.latestLocation.hash)
+    hash = hash ? `#${hash}` : ''
+
+    return {
+      pathname,
       search,
-      params,
+      searchStr,
+      state: this.store.state.latestLocation.state,
       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
-
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
-
-      try {
-        new URL(`${to}`)
-        return {
-          type: 'external',
-          href: to,
-        }
-      } catch (e) {}
-
-      const nextOpts = {
-        from,
-        to,
-        search,
-        params,
-        hash,
-        replace,
-      }
+      href: `${pathname}${searchStr}${hash}`,
+      key: dest.key,
+    }
+  }
 
-      const next = router.buildNext(nextOpts)
+  #commitLocation = (location: BuildNextOptions & { replace?: boolean }) => {
+    const next = this.buildNext(location)
+    const id = '' + Date.now() + Math.random()
 
-      preload = preload ?? router.options.defaultPreload
-      const preloadDelay =
-        userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
+    if (this.navigateTimeout) clearTimeout(this.navigateTimeout)
 
-      // Compare path/hash for matches
-      const pathIsEqual = store.currentLocation.pathname === next.pathname
-      const currentPathSplit = store.currentLocation.pathname.split('/')
-      const nextPathSplit = next.pathname.split('/')
-      const pathIsFuzzyEqual = nextPathSplit.every(
-        (d, i) => d === currentPathSplit[i],
-      )
-      const hashIsEqual = store.currentLocation.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)
-          }
+    let nextAction: 'push' | 'replace' = 'replace'
 
-          // All is well? Navigate!
-          navigate(nextOpts)
-        }
-      }
+    if (!location.replace) {
+      nextAction = 'push'
+    }
 
-      // The click handler
-      const handleFocus = (e: MouseEvent) => {
-        if (preload) {
-          router
-            .preloadRoute(nextOpts, {
-              maxAge: userPreloadMaxAge,
-              gcMaxAge: userPreloadGcMaxAge,
-            })
-            .catch((err) => {
-              console.log(err)
-              console.warn('Error preloading route! ☝️')
-            })
-        }
-      }
+    const isSameUrl = this.store.state.latestLocation.href === next.href
 
-      const handleEnter = (e: MouseEvent) => {
-        const target = (e.target || {}) as LinkCurrentTargetElement
+    if (isSameUrl && !next.key) {
+      nextAction = 'replace'
+    }
 
-        if (preload) {
-          if (target.preloadTimeout) {
-            return
-          }
+    const href = `${next.pathname}${next.searchStr}${
+      next.hash ? `#${next.hash}` : ''
+    }`
 
-          target.preloadTimeout = setTimeout(() => {
-            target.preloadTimeout = null
-            router
-              .preloadRoute(nextOpts, {
-                maxAge: userPreloadMaxAge,
-                gcMaxAge: userPreloadGcMaxAge,
-              })
-              .catch((err) => {
-                console.log(err)
-                console.warn('Error preloading route! ☝️')
-              })
-          }, preloadDelay)
-        }
-      }
+    this.history[nextAction === 'push' ? 'push' : 'replace'](href, {
+      id,
+      ...next.state,
+    })
 
-      const handleLeave = (e: MouseEvent) => {
-        const target = (e.target || {}) as LinkCurrentTargetElement
+    this.load(this.#parseLocation(this.store.state.latestLocation))
 
-        if (target.preloadTimeout) {
-          clearTimeout(target.preloadTimeout)
-          target.preloadTimeout = null
-        }
-      }
+    return (this.navigationPromise = new Promise((resolve) => {
+      const previousNavigationResolve = this.resolveNavigation
 
-      return {
-        type: 'internal',
-        next,
-        handleFocus,
-        handleClick,
-        handleEnter,
-        handleLeave,
-        isActive,
-        disabled,
+      this.resolveNavigation = () => {
+        previousNavigationResolve()
+        resolve()
       }
-    },
-    buildNext: (opts: BuildNextOptions) => {
-      const next = buildLocation(opts)
-
-      const matches = router.matchRoutes(next.pathname)
-
-      const __preSearchFilters = matches
-        .map((match) => match.options.preSearchFilters ?? [])
-        .flat()
-        .filter(Boolean)
+    }))
+  }
+}
 
-      const __postSearchFilters = matches
-        .map((match) => match.options.postSearchFilters ?? [])
-        .flat()
-        .filter(Boolean)
+// Detect if we're in the DOM
+const isServer = typeof window === 'undefined' || !window.document.createElement
 
-      return buildLocation({
-        ...opts,
-        __preSearchFilters,
-        __postSearchFilters,
-      })
+function getInitialRouterState(): RouterStore {
+  return {
+    status: 'idle',
+    latestLocation: null!,
+    currentLocation: null!,
+    currentMatches: [],
+    loaders: {},
+    lastUpdated: Date.now(),
+    matchCache: {},
+    get isFetching() {
+      return (
+        this.status === 'loading' ||
+        this.currentMatches.some((d) => d.store.state.isFetching)
+      )
+    },
+    get isPreloading() {
+      return Object.values(this.matchCache).some(
+        (d) =>
+          d.match.store.state.isFetching &&
+          !this.currentMatches.find((dd) => dd.id === d.match.id),
+      )
     },
   }
-
-  router.update(userOptions)
-
-  // Allow frameworks to hook into the router creation
-  router.options.createRouter?.(router)
-
-  return router
 }
 
 function isCtrlEvent(e: MouseEvent) {
@@ -1396,9 +1402,7 @@ function linkMatches(matches: RouteMatch<any, any>[]) {
     const parent = matches[index - 1]
 
     if (parent) {
-      match.__.setParentMatch(parent)
-    } else {
-      match.__.setParentMatch(undefined)
+      match.__setParentMatch(parent)
     }
   })
 }