@tanstack/router-core 0.0.1-beta.35 → 0.0.1-beta.39

package/src/router.ts

@@ -12,9 +12,10 @@ import { GetFrameworkGeneric } from './frameworks'
 import {
   LinkInfo,
   LinkOptions,
-  NavigateOptionsAbsolute,
+  NavigateOptions,
   ToOptions,
   ValidFromPath,
+  ResolveRelativePath,
 } from './link'
 import {
   cleanPath,
@@ -41,18 +42,20 @@ import {
   RouteInfo,
   RoutesById,
 } from './routeInfo'
-import { createRouteMatch, RouteMatch } from './routeMatch'
+import { createRouteMatch, RouteMatch, RouteMatchStore } from './routeMatch'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
+import { createStore, batch, SetStoreFunction } from '@solidjs/reactivity'
 import {
   functionalUpdate,
   last,
+  NoInfer,
   pick,
   PickAsRequired,
   PickRequired,
-  replaceEqualDeep,
   Timeout,
   Updater,
 } from './utils'
+import { sharedClone } from './sharedClone'
 
 export interface RegisterRouter {
   // router: Router
@@ -128,9 +131,6 @@ export interface RouterOptions<
   loadComponent?: (
     component: GetFrameworkGeneric<'Component'>,
   ) => Promise<GetFrameworkGeneric<'Component'>>
-  // renderComponent?: (
-  //   component: GetFrameworkGeneric<'Component'>,
-  // ) => GetFrameworkGeneric<'Element'>
 }
 
 export interface Action<
@@ -196,24 +196,22 @@ export interface LoaderState<
   loaderContext: LoaderContext<TFullSearchSchema, TAllParams>
 }
 
-export interface RouterState<
+export interface RouterStore<
   TSearchObj extends AnySearchSchema = {},
   TState extends LocationState = LocationState,
 > {
   status: 'idle' | 'loading'
-  location: Location<TSearchObj, TState>
-  matches: RouteMatch[]
+  latestLocation: Location<TSearchObj, TState>
+  currentMatches: RouteMatch[]
+  currentLocation: Location<TSearchObj, TState>
+  pendingMatches?: RouteMatch[]
+  pendingLocation?: Location<TSearchObj, TState>
   lastUpdated: number
   actions: Record<string, Action>
   loaders: Record<string, Loader>
-  pending?: PendingState
   isFetching: boolean
   isPreloading: boolean
-}
-
-export interface PendingState {
-  location: Location
-  matches: RouteMatch[]
+  matchCache: Record<string, MatchCacheEntry>
 }
 
 type Listener = (router: Router<any, any, any>) => void
@@ -258,28 +256,27 @@ type LinkCurrentTargetElement = {
 
 export interface DehydratedRouterState
   extends Pick<
-    RouterState,
-    'status' | 'location' | 'lastUpdated' | 'location'
+    RouterStore,
+    'status' | 'latestLocation' | 'currentLocation' | 'lastUpdated'
   > {
-  matches: DehydratedRouteMatch[]
+  currentMatches: DehydratedRouteMatch[]
 }
 
 export interface DehydratedRouter<TRouterContext = unknown> {
-  location: Router['__location']
-  state: DehydratedRouterState
+  // location: Router['__location']
+  store: DehydratedRouterState
   context: TRouterContext
 }
 
-interface DehydratedRouteMatch
-  extends Pick<
-    RouteMatch<any, any>,
-    | 'matchId'
-    | 'status'
-    | 'routeLoaderData'
-    | 'loaderData'
-    | 'isInvalid'
-    | 'invalidAt'
-  > {}
+export type MatchCache = Record<string, MatchCacheEntry>
+
+interface DehydratedRouteMatch {
+  matchId: string
+  store: Pick<
+    RouteMatchStore<any, any>,
+    'status' | 'routeLoaderData' | 'isInvalid' | 'invalidAt'
+  >
+}
 
 export interface RouterContext {}
 
@@ -300,24 +297,14 @@ export interface Router<
     RouterOptions<TRouteConfig, TRouterContext>,
     'stringifySearch' | 'parseSearch' | 'context'
   >
-  // Computed in this.update()
+  store: RouterStore<TAllRouteInfo['fullSearchSchema']>
+  setStore: SetStoreFunction<RouterStore<TAllRouteInfo['fullSearchSchema']>>
   basepath: string
-  // Internal:
-  listeners: Listener[]
-  __location: Location<TAllRouteInfo['fullSearchSchema']>
-  navigateTimeout?: Timeout
-  nextAction?: 'push' | 'replace'
-  state: RouterState<TAllRouteInfo['fullSearchSchema']>
+  // __location: Location<TAllRouteInfo['fullSearchSchema']>
   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,
     TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
@@ -329,7 +316,6 @@ export interface Router<
   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,
@@ -359,7 +345,7 @@ export interface Router<
     TFrom extends ValidFromPath<TAllRouteInfo> = '/',
     TTo extends string = '.',
   >(
-    opts: NavigateOptionsAbsolute<TAllRouteInfo, TFrom, TTo>,
+    opts: NavigateOptions<TAllRouteInfo, TFrom, TTo>,
   ) => Promise<void>
   matchRoute: <
     TFrom extends ValidFromPath<TAllRouteInfo> = '/',
@@ -367,7 +353,12 @@ export interface Router<
   >(
     matchLocation: ToOptions<TAllRouteInfo, TFrom, TTo>,
     opts?: MatchRouteOptions,
-  ) => boolean
+  ) =>
+    | false
+    | TAllRouteInfo['routeInfoById'][ResolveRelativePath<
+        TFrom,
+        NoInfer<TTo>
+      >]['allParams']
   buildLink: <
     TFrom extends ValidFromPath<TAllRouteInfo> = '/',
     TTo extends string = '.',
@@ -376,20 +367,6 @@ export interface Router<
   ) => LinkInfo
   dehydrate: () => DehydratedRouter<TRouterContext>
   hydrate: (dehydratedRouter: DehydratedRouter<TRouterContext>) => 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>
-  }
 }
 
 // Detect if we're in the DOM
@@ -400,16 +377,29 @@ const isServer =
 const createDefaultHistory = () =>
   isServer ? createMemoryHistory() : createBrowserHistory()
 
-function getInitialRouterState(): RouterState {
+function getInitialRouterState(): RouterStore {
   return {
     status: 'idle',
-    location: null!,
-    matches: [],
+    latestLocation: null!,
+    currentLocation: null!,
+    currentMatches: [],
     actions: {},
     loaders: {},
     lastUpdated: Date.now(),
-    isFetching: false,
-    isPreloading: false,
+    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),
+      )
+    },
   }
 }
 
@@ -420,8 +410,6 @@ export function createRouter<
 >(
   userOptions?: RouterOptions<TRouteConfig, TRouterContext>,
 ): Router<TRouteConfig, TAllRouteInfo, TRouterContext> {
-  const history = userOptions?.history || createDefaultHistory()
-
   const originalOptions = {
     defaultLoaderGcMaxAge: 5 * 60 * 1000,
     defaultLoaderMaxAge: 0,
@@ -433,168 +421,311 @@ export function createRouter<
     parseSearch: userOptions?.parseSearch ?? defaultParseSearch,
   }
 
-  let router: Router<TRouteConfig, TAllRouteInfo, TRouterContext> = {
+  const [store, setStore] = createStore<RouterStore>(getInitialRouterState())
+
+  let navigateTimeout: undefined | Timeout
+  let nextAction: undefined | 'push' | 'replace'
+  let navigationPromise: undefined | Promise<void>
+
+  let startedLoadingAt = Date.now()
+  let resolveNavigation = () => {}
+
+  function onFocus() {
+    router.load()
+  }
+
+  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]
+
+        if (existingRoute) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(
+              `Duplicate routes found with id: ${String(route.routeId)}`,
+              router.routesById,
+              route,
+            )
+          }
+          throw new Error()
+        }
+
+        ;(router.routesById as any)[route.routeId] = route
+
+        const children = routeConfig.children as RouteConfig[]
+
+        route.childRoutes = children?.length
+          ? recurseRoutes(children, route)
+          : undefined
+
+        return route
+      })
+    }
+
+    const routes = recurseRoutes([rootRouteConfig])
+
+    return routes[0]!
+  }
+
+  function parseLocation(
+    location: History['location'],
+    previousLocation?: Location,
+  ): Location {
+    const parsedSearch = router.options.parseSearch(location.search)
+
+    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,
+    }
+  }
+
+  function navigate(location: BuildNextOptions & { replace?: boolean }) {
+    const next = router.buildNext(location)
+    return commitLocation(next, location.replace)
+  }
+
+  function buildLocation(dest: BuildNextOptions = {}): Location {
+    const fromPathname = dest.fromCurrent
+      ? store.latestLocation.pathname
+      : dest.from ?? store.latestLocation.pathname
+
+    let pathname = resolvePath(
+      router.basepath ?? '/',
+      fromPathname,
+      `${dest.to ?? '.'}`,
+    )
+
+    const fromMatches = router.matchRoutes(store.latestLocation.pathname, {
+      strictParseParams: true,
+    })
+
+    const toMatches = router.matchRoutes(pathname)
+
+    const prevParams = { ...last(fromMatches)?.params }
+
+    let nextParams =
+      (dest.params ?? true) === true
+        ? prevParams
+        : functionalUpdate(dest.params!, prevParams)
+
+    if (nextParams) {
+      toMatches
+        .map((d) => d.options.stringifyParams)
+        .filter(Boolean)
+        .forEach((fn) => {
+          Object.assign({}, nextParams!, fn!(nextParams!))
+        })
+    }
+
+    pathname = interpolatePath(pathname, nextParams ?? {})
+
+    // Pre filters first
+    const preFilteredSearch = dest.__preSearchFilters?.length
+      ? dest.__preSearchFilters.reduce(
+          (prev, next) => next(prev),
+          store.latestLocation.search,
+        )
+      : store.latestLocation.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 = sharedClone(store.latestLocation.search, postFilteredSearch)
+
+    const searchStr = router.options.stringifySearch(search)
+    let hash =
+      dest.hash === true
+        ? store.latestLocation.hash
+        : functionalUpdate(dest.hash!, store.latestLocation.hash)
+    hash = hash ? `#${hash}` : ''
+
+    return {
+      pathname,
+      search,
+      searchStr,
+      state: store.latestLocation.state,
+      hash,
+      href: `${pathname}${searchStr}${hash}`,
+      key: dest.key,
+    }
+  }
+
+  function commitLocation(next: Location, replace?: boolean): Promise<void> {
+    const id = '' + Date.now() + Math.random()
+
+    if (navigateTimeout) clearTimeout(navigateTimeout)
+
+    let nextAction: 'push' | 'replace' = 'replace'
+
+    if (!replace) {
+      nextAction = 'push'
+    }
+
+    const isSameUrl = parseLocation(router.history.location).href === next.href
+
+    if (isSameUrl && !next.key) {
+      nextAction = 'replace'
+    }
+
+    router.history[nextAction](
+      {
+        pathname: next.pathname,
+        hash: next.hash,
+        search: next.searchStr,
+      },
+      {
+        id,
+        ...next.state,
+      },
+    )
+
+    return (navigationPromise = new Promise((resolve) => {
+      const previousNavigationResolve = resolveNavigation
+
+      resolveNavigation = () => {
+        previousNavigationResolve()
+        resolve()
+      }
+    }))
+  }
+
+  const router: Router<TRouteConfig, TAllRouteInfo, TRouterContext> = {
     types: undefined!,
 
     // public api
-    history,
+    history: userOptions?.history || createDefaultHistory(),
+    store,
+    setStore,
     options: originalOptions,
-    listeners: [],
-    // Resolved after construction
     basepath: '',
     routeTree: undefined!,
     routesById: {} as any,
-    __location: undefined!,
-    //
-    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)
-      }
+      setStore((s) => Object.assign(s, getInitialRouterState()))
     },
+
     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),
-      )
-
-      if (
-        router.state.isFetching !== isFetching ||
-        router.state.isPreloading !== isPreloading
-      ) {
-        router.state = {
-          ...router.state,
-          isFetching,
-          isPreloading,
-        }
-      }
-
-      cascadeLoaderData(router.state.matches)
-      router.listeners.forEach((listener) => listener(router))
-    },
 
     dehydrate: () => {
       return {
-        location: router.__location,
-        state: {
-          ...pick(router.state, [
+        store: {
+          ...pick(store, [
+            'latestLocation',
+            'currentLocation',
             'status',
-            'location',
             'lastUpdated',
-            'location',
           ]),
-          matches: router.state.matches.map((match) =>
-            pick(match, [
-              'matchId',
+          currentMatches: store.currentMatches.map((match) => ({
+            matchId: match.matchId,
+            store: pick(match.store, [
               'status',
               'routeLoaderData',
-              'loaderData',
               'isInvalid',
               'invalidAt',
             ]),
-          ),
+          })),
         },
         context: router.options.context as TRouterContext,
       }
     },
 
-    hydrate: (dehydratedState) => {
-      // Update the location
-      router.__location = dehydratedState.location
-
-      // Update the context
-      router.options.context = dehydratedState.context
+    hydrate: (dehydratedRouter) => {
+      setStore((s) => {
+        // Update the context TODO: make this part of state?
+        router.options.context = dehydratedRouter.context
 
-      // Match the routes
-      const matches = router.matchRoutes(router.__location.pathname, {
-        strictParseParams: true,
-      })
-
-      matches.forEach((match, index) => {
-        const dehydratedMatch = dehydratedState.state.matches[index]
-        invariant(
-          dehydratedMatch,
-          'Oh no! Dehydrated route matches did not match the active state of the router 😬',
+        // Match the routes
+        const currentMatches = router.matchRoutes(
+          dehydratedRouter.store.latestLocation.pathname,
+          {
+            strictParseParams: true,
+          },
         )
-        Object.assign(match, dehydratedMatch)
-      })
 
-      matches.forEach((match) => match.__.validate())
+        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)
+        })
+
+        currentMatches.forEach((match) => match.__.validate())
 
-      router.state = {
-        ...router.state,
-        ...dehydratedState,
-        matches,
-      }
+        Object.assign(s, { ...dehydratedRouter.store, currentMatches })
+      })
     },
 
     mount: () => {
-      const next = router.__.buildLocation({
-        to: '.',
-        search: true,
-        hash: true,
-      })
-
-      // 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)
-      // }
-
-      if (!router.state.matches.length) {
-        router.load()
-      }
+      // Mount only does anything on the client
+      if (!isServer) {
+        // If the router matches are empty, load the matches
+        if (!store.currentMatches.length) {
+          router.load()
+        }
 
-      const unsub = router.history.listen((event) => {
-        router.load(router.__.parseLocation(event.location, router.__location))
-      })
+        const unsub = router.history.listen((event) => {
+          router.load(parseLocation(event.location, store.latestLocation))
+        })
 
-      // 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)
-      }
+        // 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 () => {
-        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)
+        return () => {
+          unsub()
+          if (window.removeEventListener) {
+            // Be sure to unsubscribe if a new handler is set
+            window.removeEventListener('visibilitychange', onFocus)
+            window.removeEventListener('focus', onFocus)
+          }
         }
       }
-    },
 
-    onFocus: () => {
-      router.load()
+      return () => {}
     },
 
     update: (opts) => {
       const newHistory = opts?.history !== router.history
-      if (!router.__location || newHistory) {
+      if (!store.latestLocation || newHistory) {
         if (opts?.history) {
           router.history = opts.history
         }
-        router.__location = router.__.parseLocation(router.history.location)
-        router.state.location = router.__location
+        setStore((s) => {
+          s.latestLocation = parseLocation(router.history.location)
+          s.currentLocation = s.latestLocation
+        })
       }
 
       Object.assign(router.options, opts)
@@ -605,82 +736,68 @@ export function createRouter<
 
       if (routeConfig) {
         router.routesById = {} as any
-        router.routeTree = router.__.buildRouteTree(routeConfig)
+        router.routeTree = buildRouteTree(routeConfig)
       }
 
       return router as any
     },
 
     cancelMatches: () => {
-      ;[
-        ...router.state.matches,
-        ...(router.state.pending?.matches ?? []),
-      ].forEach((match) => {
-        match.cancel()
-      })
+      ;[...store.currentMatches, ...(store.pendingMatches || [])].forEach(
+        (match) => {
+          match.cancel()
+        },
+      )
     },
 
     load: async (next?: Location) => {
-      const id = Math.random()
-      router.startedLoadingAt = id
-
-      if (next) {
-        // Ingest the new location
-        router.__location = next
-      }
+      let now = Date.now()
+      const startedAt = now
+      startedLoadingAt = startedAt
 
       // Cancel any pending matches
       router.cancelMatches()
 
-      // Match the routes
-      const matches = router.matchRoutes(router.__location.pathname, {
-        strictParseParams: true,
-      })
+      let matches!: RouteMatch<any, any>[]
 
-      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',
+      batch(() => {
+        if (next) {
+          // Ingest the new location
+          setStore((s) => {
+            s.latestLocation = next
+          })
         }
-      }
 
-      // Check if each match middleware to see if the route can be accessed
-      try {
-        await Promise.all(
-          matches.map((match) =>
-            match.options.beforeLoad?.({
-              router: router as any,
-              match,
-            }),
-          ),
-        )
-      } catch (err: any) {
-        console.info(err)
-        invariant(false, `A route's beforeLoad middleware failed! 👆`)
-      }
+        // Match the routes
+        matches = router.matchRoutes(store.latestLocation.pathname, {
+          strictParseParams: true,
+        })
 
-      router.notify()
+        console.log('set loading', matches)
+        setStore((s) => {
+          s.status = 'loading'
+          s.pendingMatches = matches
+          s.pendingLocation = store.latestLocation
+        })
+      })
 
       // Load the matches
-      await router.loadMatches(matches)
+      try {
+        await router.loadMatches(matches)
+      } catch (err: any) {
+        console.log(err)
+        invariant(
+          false,
+          'Matches failed to load due to error above ☝️. Navigation cancelled!',
+        )
+      }
 
-      if (router.startedLoadingAt !== id) {
-        // Ignore side-effects of match loading
-        return router.navigationPromise
+      if (startedLoadingAt !== startedAt) {
+        // Ignore side-effects of outdated side-effects
+        return navigationPromise
       }
 
-      const previousMatches = router.state.matches
+      const previousMatches = store.currentMatches
 
       const exiting: RouteMatch[] = [],
         staying: RouteMatch[] = []
@@ -697,18 +814,18 @@ export function createRouter<
         return !previousMatches.find((dd) => dd.matchId === d.matchId)
       })
 
-      const now = Date.now()
+      now = Date.now()
 
       exiting.forEach((d) => {
         d.__.onExit?.({
           params: d.params,
-          search: d.routeSearch,
+          search: d.store.routeSearch,
         })
 
         // Clear idle error states when match leaves
-        if (d.status === 'error' && !d.isFetching) {
-          d.status = 'idle'
-          d.error = undefined
+        if (d.store.status === 'error' && !d.store.isFetching) {
+          d.store.status = 'idle'
+          d.store.error = undefined
         }
 
         const gc = Math.max(
@@ -717,7 +834,7 @@ export function createRouter<
         )
 
         if (gc > 0) {
-          router.matchCache[d.matchId] = {
+          store.matchCache[d.matchId] = {
             gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
             match: d,
           }
@@ -727,19 +844,19 @@ export function createRouter<
       staying.forEach((d) => {
         d.options.onTransition?.({
           params: d.params,
-          search: d.routeSearch,
+          search: d.store.routeSearch,
         })
       })
 
       entering.forEach((d) => {
         d.__.onExit = d.options.onLoaded?.({
           params: d.params,
-          search: d.search,
+          search: d.store.search,
         })
-        delete router.matchCache[d.matchId]
+        delete store.matchCache[d.matchId]
       })
 
-      if (router.startedLoadingAt !== id) {
+      if (startedLoadingAt !== startedAt) {
         // Ignore side-effects of match loading
         return
       }
@@ -747,45 +864,50 @@ export function createRouter<
       matches.forEach((match) => {
         // Clear actions
         if (match.action) {
+          // TODO: Check reactivity here
           match.action.current = undefined
           match.action.submissions = []
         }
       })
 
-      router.state = {
-        ...router.state,
-        location: router.__location,
-        matches,
-        pending: undefined,
-        status: 'idle',
-      }
+      setStore((s) => {
+        console.log('set', matches)
+        Object.assign(s, {
+          status: 'idle',
+          currentLocation: store.latestLocation,
+          currentMatches: matches,
+          pendingLocation: undefined,
+          pendingMatches: undefined,
+        })
+      })
 
-      router.notify()
-      router.resolveNavigation()
+      resolveNavigation()
     },
 
     cleanMatchCache: () => {
       const now = Date.now()
 
-      Object.keys(router.matchCache).forEach((matchId) => {
-        const entry = router.matchCache[matchId]!
+      setStore((s) => {
+        Object.keys(s.matchCache).forEach((matchId) => {
+          const entry = s.matchCache[matchId]!
 
-        // Don't remove loading matches
-        if (entry.match.status === 'loading') {
-          return
-        }
+          // Don't remove loading matches
+          if (entry.match.store.status === 'loading') {
+            return
+          }
 
-        // Do not remove successful matches that are still valid
-        if (entry.gc > 0 && entry.gc > now) {
-          return
-        }
+          // Do not remove successful matches that are still valid
+          if (entry.gc > 0 && entry.gc > now) {
+            return
+          }
 
-        // Everything else gets removed
-        delete router.matchCache[matchId]
+          // Everything else gets removed
+          delete s.matchCache[matchId]
+        })
       })
     },
 
-    loadRoute: async (navigateOpts = router.__location) => {
+    loadRoute: async (navigateOpts = store.latestLocation) => {
       const next = router.buildNext(navigateOpts)
       const matches = router.matchRoutes(next.pathname, {
         strictParseParams: true,
@@ -794,11 +916,12 @@ export function createRouter<
       return matches
     },
 
-    preloadRoute: async (navigateOpts = router.__location, loaderOpts) => {
+    preloadRoute: async (navigateOpts = store.latestLocation, loaderOpts) => {
       const next = router.buildNext(navigateOpts)
       const matches = router.matchRoutes(next.pathname, {
         strictParseParams: true,
       })
+
       await router.loadMatches(matches, {
         preload: true,
         maxAge:
@@ -825,8 +948,8 @@ export function createRouter<
       }
 
       const existingMatches = [
-        ...router.state.matches,
-        ...(router.state.pending?.matches ?? []),
+        ...store.currentMatches,
+        ...(store.pendingMatches ?? []),
       ]
 
       const recurse = async (routes: Route<any, any>[]): Promise<void> => {
@@ -857,14 +980,6 @@ export function createRouter<
                 route.options.caseSensitive ?? router.options.caseSensitive,
             })
 
-            console.log(
-              router.basepath,
-              route.fullPath,
-              fuzzy,
-              pathname,
-              matchParams,
-            )
-
             if (matchParams) {
               let parsedParams
 
@@ -905,7 +1020,7 @@ export function createRouter<
 
           const match =
             existingMatches.find((d) => d.matchId === matchId) ||
-            router.matchCache[matchId]?.match ||
+            store.matchCache[matchId]?.match ||
             createRouteMatch(router, foundRoute, {
               parentMatch,
               matchId,
@@ -925,17 +1040,37 @@ export function createRouter<
 
       recurse([router.routeTree])
 
-      cascadeLoaderData(matches)
+      linkMatches(matches)
 
       return matches
     },
 
     loadMatches: async (resolvedMatches, loaderOpts) => {
-      const matchPromises = resolvedMatches.map(async (match) => {
+      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.options.beforeLoad?.({
+              router: router as any,
+              match,
+            })
+          } catch (err) {
+            if (!loaderOpts?.preload) {
+              match.options.onLoadError?.(err)
+            }
+
+            throw err
+          }
+        }),
+      )
 
-        const search = match.search as { __data?: any }
+      const matchPromises = resolvedMatches.map(async (match) => {
+        const search = match.store.search as { __data?: any }
 
         if (search.__data?.matchId && search.__data.matchId !== match.matchId) {
           return
@@ -943,14 +1078,12 @@ export function createRouter<
 
         match.load(loaderOpts)
 
-        if (match.status !== 'success' && match.__.loadPromise) {
+        if (match.store.status !== 'success' && match.__.loadPromise) {
           // Wait for the first sign of activity from the match
           await match.__.loadPromise
         }
       })
 
-      router.notify()
-
       await Promise.all(matchPromises)
     },
 
@@ -960,9 +1093,9 @@ export function createRouter<
           (await routeMatch.options.loader?.({
             // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
             params: routeMatch.params,
-            search: routeMatch.routeSearch,
+            search: routeMatch.store.routeSearch,
             signal: routeMatch.__.abortController.signal,
-          })) ?? {}
+          })) || {}
         )
       } else {
         const next = router.buildNext({
@@ -1003,18 +1136,17 @@ export function createRouter<
       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()
-        }
-      })
+      ;[...store.currentMatches, ...(store.pendingMatches ?? [])].forEach(
+        (match) => {
+          if (unloadedMatchIds.includes(match.matchId)) {
+            match.invalidate()
+          }
+        },
+      )
     },
 
     reload: () =>
-      router.__.navigate({
+      navigate({
         fromCurrent: true,
         replace: true,
         search: true,
@@ -1037,13 +1169,13 @@ export function createRouter<
       const next = router.buildNext(location)
 
       if (opts?.pending) {
-        if (!router.state.pending?.location) {
+        if (!store.pendingLocation) {
           return false
         }
 
         return !!matchPathname(
           router.basepath,
-          router.state.pending.location.pathname,
+          store.pendingLocation.pathname,
           {
             ...opts,
             to: next.pathname,
@@ -1051,10 +1183,10 @@ export function createRouter<
         )
       }
 
-      return !!matchPathname(router.basepath, router.state.location.pathname, {
+      return matchPathname(router.basepath, store.currentLocation.pathname, {
         ...opts,
         to: next.pathname,
-      })
+      }) as any
     },
 
     navigate: async ({ from, to = '.', search, hash, replace, params }) => {
@@ -1078,7 +1210,7 @@ export function createRouter<
         'Attempting to navigate to external url with router.navigate!',
       )
 
-      return router.__.navigate({
+      return navigate({
         from: fromString,
         to: toString,
         search,
@@ -1133,13 +1265,13 @@ export function createRouter<
         userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
 
       // Compare path/hash for matches
-      const pathIsEqual = router.state.location.pathname === next.pathname
-      const currentPathSplit = router.state.location.pathname.split('/')
+      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 = router.state.location.hash === next.hash
+      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
@@ -1161,18 +1293,23 @@ export function createRouter<
             router.invalidateRoute(nextOpts)
           }
 
-          // All is well? Navigate!)
-          router.__.navigate(nextOpts)
+          // All is well? Navigate!
+          navigate(nextOpts)
         }
       }
 
       // The click handler
       const handleFocus = (e: MouseEvent) => {
         if (preload) {
-          router.preloadRoute(nextOpts, {
-            maxAge: userPreloadMaxAge,
-            gcMaxAge: userPreloadGcMaxAge,
-          })
+          router
+            .preloadRoute(nextOpts, {
+              maxAge: userPreloadMaxAge,
+              gcMaxAge: userPreloadGcMaxAge,
+            })
+            .catch((err) => {
+              console.log(err)
+              console.warn('Error preloading route! ☝️')
+            })
         }
       }
 
@@ -1186,10 +1323,15 @@ export function createRouter<
 
           target.preloadTimeout = setTimeout(() => {
             target.preloadTimeout = null
-            router.preloadRoute(nextOpts, {
-              maxAge: userPreloadMaxAge,
-              gcMaxAge: userPreloadGcMaxAge,
-            })
+            router
+              .preloadRoute(nextOpts, {
+                maxAge: userPreloadMaxAge,
+                gcMaxAge: userPreloadGcMaxAge,
+              })
+              .catch((err) => {
+                console.log(err)
+                console.warn('Error preloading route! ☝️')
+              })
           }, preloadDelay)
         }
       }
@@ -1215,7 +1357,7 @@ export function createRouter<
       }
     },
     buildNext: (opts: BuildNextOptions) => {
-      const next = router.__.buildLocation(opts)
+      const next = buildLocation(opts)
 
       const matches = router.matchRoutes(next.pathname)
 
@@ -1229,214 +1371,12 @@ export function createRouter<
         .flat()
         .filter(Boolean)
 
-      return router.__.buildLocation({
+      return buildLocation({
         ...opts,
         __preSearchFilters,
         __postSearchFilters,
       })
     },
-
-    __: {
-      buildRouteTree: (rootRouteConfig: RouteConfig) => {
-        const recurseRoutes = (
-          routeConfigs: RouteConfig[],
-          parent?: Route<TAllRouteInfo, any, any>,
-        ): Route<TAllRouteInfo, any, 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()
-            }
-
-            ;(router.routesById as any)[route.routeId] = route
-
-            const children = routeConfig.children as RouteConfig[]
-
-            route.childRoutes = children?.length
-              ? recurseRoutes(children, route)
-              : undefined
-
-            return route
-          })
-        }
-
-        const routes = recurseRoutes([rootRouteConfig])
-
-        return routes[0]!
-      },
-
-      parseLocation: (
-        location: History['location'],
-        previousLocation?: Location,
-      ): Location => {
-        const parsedSearch = router.options.parseSearch(location.search)
-
-        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,
-        }
-      },
-
-      navigate: (location: BuildNextOptions & { replace?: boolean }) => {
-        const next = router.buildNext(location)
-        return router.__.commitLocation(next, location.replace)
-      },
-
-      buildLocation: (dest: BuildNextOptions = {}): Location => {
-        const fromPathname = dest.fromCurrent
-          ? router.__location.pathname
-          : dest.from ?? router.__location.pathname
-
-        let pathname = resolvePath(
-          router.basepath ?? '/',
-          fromPathname,
-          `${dest.to ?? '.'}`,
-        )
-
-        const fromMatches = router.matchRoutes(router.__location.pathname, {
-          strictParseParams: true,
-        })
-
-        const toMatches = router.matchRoutes(pathname)
-
-        const prevParams = { ...last(fromMatches)?.params }
-
-        let nextParams =
-          (dest.params ?? true) === true
-            ? prevParams
-            : functionalUpdate(dest.params!, prevParams)
-
-        if (nextParams) {
-          toMatches
-            .map((d) => d.options.stringifyParams)
-            .filter(Boolean)
-            .forEach((fn) => {
-              Object.assign({}, nextParams!, fn!(nextParams!))
-            })
-        }
-
-        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,
-        )
-
-        const searchStr = router.options.stringifySearch(search)
-        let hash =
-          dest.hash === true
-            ? router.__location.hash
-            : functionalUpdate(dest.hash!, router.__location.hash)
-        hash = hash ? `#${hash}` : ''
-
-        return {
-          pathname,
-          search,
-          searchStr,
-          state: router.__location.state,
-          hash,
-          href: `${pathname}${searchStr}${hash}`,
-          key: dest.key,
-        }
-      },
-
-      commitLocation: (next: Location, replace?: boolean): Promise<void> => {
-        const id = '' + Date.now() + Math.random()
-
-        if (router.navigateTimeout) clearTimeout(router.navigateTimeout)
-
-        let nextAction: 'push' | 'replace' = 'replace'
-
-        if (!replace) {
-          nextAction = 'push'
-        }
-
-        const isSameUrl =
-          router.__.parseLocation(history.location).href === next.href
-
-        if (isSameUrl && !next.key) {
-          nextAction = 'replace'
-        }
-
-        if (nextAction === 'replace') {
-          history.replace(
-            {
-              pathname: next.pathname,
-              hash: next.hash,
-              search: next.searchStr,
-            },
-            {
-              id,
-              ...next.state,
-            },
-          )
-        } else {
-          history.push(
-            {
-              pathname: next.pathname,
-              hash: next.hash,
-              search: next.searchStr,
-            },
-            {
-              id,
-            },
-          )
-        }
-
-        router.navigationPromise = new Promise((resolve) => {
-          const previousNavigationResolve = router.resolveNavigation
-
-          router.resolveNavigation = () => {
-            previousNavigationResolve()
-            resolve()
-            delete router.navigationPromise
-          }
-        })
-
-        return router.navigationPromise
-      },
-    },
   }
 
   router.update(userOptions)
@@ -1451,15 +1391,14 @@ function isCtrlEvent(e: MouseEvent) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
 }
 
-function cascadeLoaderData(matches: RouteMatch<any, any>[]) {
+function linkMatches(matches: RouteMatch<any, any>[]) {
   matches.forEach((match, index) => {
     const parent = matches[index - 1]
 
     if (parent) {
-      match.loaderData = replaceEqualDeep(match.loaderData, {
-        ...parent.loaderData,
-        ...match.routeLoaderData,
-      })
+      match.__.setParentMatch(parent)
+    } else {
+      match.__.setParentMatch(undefined)
     }
   })
 }