@tanstack/router-core 0.0.1-beta.4 → 0.0.1-beta.45

package/src/router.ts

@@ -12,9 +12,10 @@ import { GetFrameworkGeneric } from './frameworks'
 import {
   LinkInfo,
   LinkOptions,
-  NavigateOptionsAbsolute,
+  NavigateOptions,
   ToOptions,
   ValidFromPath,
+  ResolveRelativePath,
 } from './link'
 import {
   cleanPath,
@@ -22,8 +23,9 @@ import {
   joinPaths,
   matchPathname,
   resolvePath,
+  trimPath,
 } from './path'
-import { AnyRoute, cascadeLoaderData, createRoute, Route } from './route'
+import { AnyRoute, createRoute, Route } from './route'
 import {
   AnyLoaderData,
   AnyPathParams,
@@ -40,17 +42,36 @@ 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
+}
+
+export type RegisteredRouter = RegisterRouter extends {
+  router: Router<infer TRouteConfig, infer TAllRouteInfo, infer TRouterContext>
+}
+  ? Router<TRouteConfig, TAllRouteInfo, TRouterContext>
+  : Router
+
+export type RegisteredAllRouteInfo = RegisterRouter extends {
+  router: Router<infer TRouteConfig, infer TAllRouteInfo, infer TRouterContext>
+}
+  ? TAllRouteInfo
+  : AnyAllRouteInfo
 
 export interface LocationState {}
 
@@ -80,7 +101,10 @@ export type FilterRoutesFn = <TRoute extends Route<any, RouteInfo>>(
   routeConfigs: TRoute[],
 ) => TRoute[]
 
-export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
+export interface RouterOptions<
+  TRouteConfig extends AnyRouteConfig,
+  TRouterContext,
+> {
   history?: BrowserHistory | MemoryHistory | HashHistory
   stringifySearch?: SearchSerializer
   parseSearch?: SearchParser
@@ -89,23 +113,24 @@ export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
   defaultPreloadMaxAge?: number
   defaultPreloadGcMaxAge?: number
   defaultPreloadDelay?: number
-  useErrorBoundary?: boolean
-  defaultElement?: GetFrameworkGeneric<'Element'>
-  defaultErrorElement?: GetFrameworkGeneric<'Element'>
-  defaultCatchElement?: GetFrameworkGeneric<'Element'>
-  defaultPendingElement?: GetFrameworkGeneric<'Element'>
-  defaultPendingMs?: number
-  defaultPendingMinMs?: number
+  defaultComponent?: GetFrameworkGeneric<'Component'>
+  defaultErrorComponent?: GetFrameworkGeneric<'ErrorComponent'>
+  defaultPendingComponent?: GetFrameworkGeneric<'Component'>
   defaultLoaderMaxAge?: number
   defaultLoaderGcMaxAge?: number
   caseSensitive?: boolean
   routeConfig?: TRouteConfig
   basepath?: string
-  createRouter?: (router: Router<any, any>) => void
-  createRoute?: (opts: { route: AnyRoute; router: Router<any, any> }) => void
-  createElement?: (
-    element: GetFrameworkGeneric<'SyncOrAsyncElement'>,
-  ) => Promise<GetFrameworkGeneric<'Element'>>
+  useServerData?: boolean
+  createRouter?: (router: Router<any, any, any>) => void
+  createRoute?: (opts: {
+    route: AnyRoute
+    router: Router<any, any, any>
+  }) => void
+  context?: TRouterContext
+  loadComponent?: (
+    component: GetFrameworkGeneric<'Component'>,
+  ) => Promise<GetFrameworkGeneric<'Component'>>
 }
 
 export interface Action<
@@ -113,10 +138,13 @@ export interface Action<
   TResponse = unknown,
   // TError = unknown,
 > {
-  submit: (submission?: TPayload) => Promise<TResponse>
+  submit: (
+    submission?: TPayload,
+    actionOpts?: { invalidate?: boolean; multi?: boolean },
+  ) => Promise<TResponse>
   current?: ActionState<TPayload, TResponse>
   latest?: ActionState<TPayload, TResponse>
-  pending: ActionState<TPayload, TResponse>[]
+  submissions: ActionState<TPayload, TResponse>[]
 }
 
 export interface ActionState<
@@ -127,6 +155,7 @@ export interface ActionState<
   submittedAt: number
   status: 'idle' | 'pending' | 'success' | 'error'
   submission: TPayload
+  isMulti: boolean
   data?: TResponse
   error?: unknown
 }
@@ -160,42 +189,41 @@ export interface Loader<
 }
 
 export interface LoaderState<
-  TFullSearchSchema = unknown,
-  TAllParams = unknown,
+  TFullSearchSchema extends AnySearchSchema = {},
+  TAllParams extends AnyPathParams = {},
 > {
   loadedAt: number
   loaderContext: LoaderContext<TFullSearchSchema, TAllParams>
 }
 
-export interface RouterState {
+export interface RouterStore<
+  TSearchObj extends AnySearchSchema = {},
+  TState extends LocationState = LocationState,
+> {
   status: 'idle' | 'loading'
-  location: Location
-  matches: RouteMatch[]
+  latestLocation: Location<TSearchObj, TState>
+  currentMatches: RouteMatch[]
+  currentLocation: Location<TSearchObj, TState>
+  pendingMatches?: RouteMatch[]
+  pendingLocation?: Location<TSearchObj, TState>
   lastUpdated: number
-  loaderData: unknown
-  currentAction?: ActionState
-  latestAction?: ActionState
   actions: Record<string, Action>
   loaders: Record<string, Loader>
-  pending?: PendingState
   isFetching: boolean
   isPreloading: boolean
+  matchCache: Record<string, MatchCacheEntry>
 }
 
-export interface PendingState {
-  location: Location
-  matches: RouteMatch[]
-}
-
-type Listener = (router: Router<any, any>) => void
+type Listener = (router: Router<any, any, any>) => void
 
 export type ListenerFn = () => void
 
 export interface BuildNextOptions {
   to?: string | number | null
-  params?: true | Updater<Record<string, any>>
+  params?: true | Updater<unknown>
   search?: true | Updater<unknown>
   hash?: true | Updater<string>
+  state?: LocationState
   key?: string
   from?: string
   fromCurrent?: boolean
@@ -217,50 +245,77 @@ export interface MatchLocation {
 }
 
 export interface MatchRouteOptions {
-  pending: boolean
+  pending?: boolean
   caseSensitive?: boolean
+  fuzzy?: boolean
 }
 
 type LinkCurrentTargetElement = {
   preloadTimeout?: null | ReturnType<typeof setTimeout>
 }
 
+export interface DehydratedRouterState
+  extends Pick<
+    RouterStore,
+    'status' | 'latestLocation' | 'currentLocation' | 'lastUpdated'
+  > {
+  currentMatches: DehydratedRouteMatch[]
+}
+
+export interface DehydratedRouter<TRouterContext = unknown> {
+  // location: Router['__location']
+  store: DehydratedRouterState
+  context: TRouterContext
+}
+
+export type MatchCache = Record<string, MatchCacheEntry>
+
+interface DehydratedRouteMatch {
+  matchId: string
+  store: Pick<
+    RouteMatchStore<any, any>,
+    'status' | 'routeLoaderData' | 'isInvalid' | 'invalidAt'
+  >
+}
+
+export interface RouterContext {}
+
 export interface Router<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+  TRouterContext = unknown,
 > {
+  types: {
+    // Super secret internal stuff
+    RouteConfig: TRouteConfig
+    AllRouteInfo: TAllRouteInfo
+  }
+
+  // Public API
   history: BrowserHistory | MemoryHistory | HashHistory
   options: PickAsRequired<
-    RouterOptions<TRouteConfig>,
-    'stringifySearch' | 'parseSearch'
+    RouterOptions<TRouteConfig, TRouterContext>,
+    'stringifySearch' | 'parseSearch' | 'context'
   >
-  // Computed in this.update()
+  store: RouterStore<TAllRouteInfo['fullSearchSchema']>
+  setStore: SetStoreFunction<RouterStore<TAllRouteInfo['fullSearchSchema']>>
   basepath: string
-  // Internal:
-  allRouteInfo: TAllRouteInfo
-  listeners: Listener[]
-  location: Location
-  navigateTimeout?: Timeout
-  nextAction?: 'push' | 'replace'
-  state: RouterState
+  // __location: Location<TAllRouteInfo['fullSearchSchema']>
   routeTree: Route<TAllRouteInfo, RouteInfo>
   routesById: RoutesById<TAllRouteInfo>
-  navigationPromise: Promise<void>
-  removeActionQueue: { action: Action; actionState: ActionState }[]
-  startedLoadingAt: number
-  resolveNavigation: () => void
-  subscribe: (listener: Listener) => () => void
-  notify: () => void
+  reset: () => void
   mount: () => () => void
-  onFocus: () => void
-  update: <TRouteConfig extends RouteConfig = RouteConfig>(
-    opts?: RouterOptions<TRouteConfig>,
-  ) => Router<TRouteConfig>
+  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
-  loadLocation: (next?: Location) => Promise<void>
-  matchCache: Record<string, MatchCacheEntry>
+  load: (next?: Location) => Promise<void>
   cleanMatchCache: () => void
   getRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
     id: TId,
@@ -276,11 +331,13 @@ export interface Router<
   ) => RouteMatch[]
   loadMatches: (
     resolvedMatches: RouteMatch[],
-    loaderOpts?: { withPending?: boolean } & (
+    loaderOpts?:
       | { preload: true; maxAge: number; gcMaxAge: number }
-      | { preload?: false; maxAge?: never; gcMaxAge?: never }
-    ),
+      | { 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
@@ -288,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> = '/',
@@ -296,27 +353,20 @@ 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 = '.',
   >(
     opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
   ) => LinkInfo
-  __: {
-    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>
-  }
+  dehydrate: () => DehydratedRouter<TRouterContext>
+  hydrate: (dehydratedRouter: DehydratedRouter<TRouterContext>) => void
 }
 
 // Detect if we're in the DOM
@@ -327,192 +377,427 @@ const isServer =
 const createDefaultHistory = () =>
   isServer ? createMemoryHistory() : createBrowserHistory()
 
+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),
+      )
+    },
+  }
+}
+
 export function createRouter<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+  TRouterContext = unknown,
 >(
-  userOptions?: RouterOptions<TRouteConfig>,
-): Router<TRouteConfig, TAllRouteInfo> {
-  const history = userOptions?.history || createDefaultHistory()
-
+  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,
   }
 
-  let router: Router<TRouteConfig, TAllRouteInfo> = {
-    history,
+  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: userOptions?.history || createDefaultHistory(),
+    store,
+    setStore,
     options: originalOptions,
-    listeners: [],
-    removeActionQueue: [],
-    // Resolved after construction
     basepath: '',
     routeTree: undefined!,
     routesById: {} as any,
-    location: undefined!,
-    allRouteInfo: undefined!,
-    //
-    navigationPromise: Promise.resolve(),
-    resolveNavigation: () => {},
-    matchCache: {},
-    state: {
-      status: 'idle',
-      location: null!,
-      matches: [],
-      actions: {},
-      loaders: {},
-      loaderData: {} as any,
-      lastUpdated: Date.now(),
-      isFetching: false,
-      isPreloading: false,
-    },
-    startedLoadingAt: Date.now(),
-    subscribe: (listener: Listener): (() => void) => {
-      router.listeners.push(listener as Listener)
-      return () => {
-        router.listeners = router.listeners.filter((x) => x !== listener)
-      }
+
+    reset: () => {
+      setStore((s) => Object.assign(s, getInitialRouterState()))
     },
+
     getRoute: (id) => {
       return router.routesById[id]
     },
-    notify: (): void => {
-      router.state = {
-        ...router.state,
-        isFetching:
-          router.state.status === 'loading' ||
-          router.state.matches.some((d) => d.isFetching),
-        isPreloading: Object.values(router.matchCache).some(
-          (d) =>
-            d.match.isFetching &&
-            !router.state.matches.find((dd) => dd.matchId === d.match.matchId),
-        ),
-      }
 
-      cascadeLoaderData(router.state.matches)
-      router.listeners.forEach((listener) => listener(router))
+    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,
+      }
     },
 
-    mount: () => {
-      const next = router.__.buildLocation({
-        to: '.',
-        search: true,
-        hash: true,
-      })
+    hydrate: (dehydratedRouter) => {
+      setStore((s) => {
+        // Update the context TODO: make this part of state?
+        router.options.context = dehydratedRouter.context
+
+        // Match the routes
+        const currentMatches = router.matchRoutes(
+          dehydratedRouter.store.latestLocation.pathname,
+          {
+            strictParseParams: 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)
-      } else {
-        router.loadLocation()
-      }
+        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)
+        })
 
-      const unsub = history.listen((event) => {
-        router.loadLocation(
-          router.__.parseLocation(event.location, router.location),
-        )
+        currentMatches.forEach((match) => match.__.validate())
+
+        Object.assign(s, { ...dehydratedRouter.store, currentMatches })
       })
+    },
 
-      // 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)
-      }
+    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()
+        }
+
+        const unsub = router.history.listen((event) => {
+          router.load(parseLocation(event.location, store.latestLocation))
+        })
+
+        // 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()
-        // 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.loadLocation()
+      return () => {}
     },
 
     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
+        })
+      }
+
       Object.assign(router.options, opts)
 
       const { basepath, routeConfig } = router.options
 
-      router.basepath = cleanPath(`/${basepath ?? ''}`)
+      router.basepath = `/${trimPath(basepath ?? '') ?? ''}`
 
       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()
+        },
+      )
     },
 
-    loadLocation: async (next?: Location) => {
-      const id = Math.random()
-      router.startedLoadingAt = id
-
-      if (next) {
-        // Ingest the new location
-        router.location = next
-      }
-
-      // Clear out old actions
-      router.removeActionQueue.forEach(({ action, actionState }) => {
-        if (router.state.currentAction === actionState) {
-          router.state.currentAction = undefined
-        }
-        if (action.current === actionState) {
-          action.current = undefined
-        }
-      })
-      router.removeActionQueue = []
+    load: async (next?: Location) => {
+      let now = Date.now()
+      const startedAt = now
+      startedLoadingAt = startedAt
 
       // Cancel any pending matches
       router.cancelMatches()
 
-      // Match the routes
-      const matches = router.matchRoutes(location.pathname, {
-        strictParseParams: true,
-      })
+      let matches!: RouteMatch<any, any>[]
 
-      router.state = {
-        ...router.state,
-        pending: {
-          matches: matches,
-          location: router.location,
-        },
-        status: 'loading',
-      }
+      batch(() => {
+        if (next) {
+          // Ingest the new location
+          setStore((s) => {
+            s.latestLocation = next
+          })
+        }
 
-      router.notify()
+        // Match the routes
+        matches = router.matchRoutes(store.latestLocation.pathname, {
+          strictParseParams: true,
+        })
 
-      // Load the matches
-      await router.loadMatches(matches, {
-        withPending: true,
+        console.log('set loading', matches)
+        setStore((s) => {
+          s.status = 'loading'
+          s.pendingMatches = matches
+          s.pendingLocation = store.latestLocation
+        })
       })
 
-      if (router.startedLoadingAt !== id) {
-        // Ignore side-effects of match loading
-        return router.navigationPromise
+      // 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!',
+        )
+      }
+
+      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[] = []
@@ -525,24 +810,31 @@ export function createRouter<
         }
       })
 
-      const now = Date.now()
+      const entering = matches.filter((d) => {
+        return !previousMatches.find((dd) => dd.matchId === d.matchId)
+      })
+
+      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(
           d.options.loaderGcMaxAge ?? router.options.defaultLoaderGcMaxAge ?? 0,
           d.options.loaderMaxAge ?? router.options.defaultLoaderMaxAge ?? 0,
         )
+
         if (gc > 0) {
-          router.matchCache[d.matchId] = {
+          store.matchCache[d.matchId] = {
             gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
             match: d,
           }
@@ -552,67 +844,70 @@ export function createRouter<
       staying.forEach((d) => {
         d.options.onTransition?.({
           params: d.params,
-          search: d.routeSearch,
+          search: d.store.routeSearch,
         })
       })
 
-      const entering = matches.filter((d) => {
-        return !previousMatches.find((dd) => dd.matchId === d.matchId)
-      })
-
       entering.forEach((d) => {
-        d.__.onExit = d.options.onMatch?.({
+        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 (matches.some((d) => d.status === 'loading')) {
-        router.notify()
-        await Promise.all(
-          matches.map((d) => d.__.loaderPromise || Promise.resolve()),
-        )
-      }
-      if (router.startedLoadingAt !== id) {
+      if (startedLoadingAt !== startedAt) {
         // Ignore side-effects of match loading
         return
       }
 
-      router.state = {
-        ...router.state,
-        location: router.location,
-        matches,
-        pending: undefined,
-        status: 'idle',
-      }
+      matches.forEach((match) => {
+        // Clear actions
+        if (match.action) {
+          // TODO: Check reactivity here
+          match.action.current = undefined
+          match.action.submissions = []
+        }
+      })
 
-      router.notify()
-      router.resolveNavigation()
+      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()
 
-      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,
@@ -621,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:
@@ -652,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> => {
@@ -677,7 +973,7 @@ export function createRouter<
               route.routePath !== '/' || route.childRoutes?.length
             )
 
-            const matchParams = matchPathname(pathname, {
+            const matchParams = matchPathname(router.basepath, pathname, {
               to: route.fullPath,
               fuzzy,
               caseSensitive:
@@ -724,11 +1020,12 @@ export function createRouter<
 
           const match =
             existingMatches.find((d) => d.matchId === matchId) ||
-            router.matchCache[matchId]?.match ||
+            store.matchCache[matchId]?.match ||
             createRouteMatch(router, foundRoute, {
+              parentMatch,
               matchId,
               params,
-              pathname: joinPaths([pathname, interpolatedPath]),
+              pathname: joinPaths([router.basepath, interpolatedPath]),
             })
 
           matches.push(match)
@@ -743,49 +1040,113 @@ 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()
-        match.load(loaderOpts)
+      })
+
+      // 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)
+            }
 
-        if (match.status === 'loading') {
-          // If requested, start the pending timers
-          if (loaderOpts?.withPending) match.__.startPending()
+            throw err
+          }
+        }),
+      )
+
+      const matchPromises = resolvedMatches.map(async (match) => {
+        const search = match.store.search as { __data?: any }
+
+        if (search.__data?.matchId && search.__data.matchId !== match.matchId) {
+          return
+        }
 
+        match.load(loaderOpts)
+
+        if (match.store.status !== 'success' && match.__.loadPromise) {
           // Wait for the first sign of activity from the match
-          // This might be completion, error, or a pending state
           await match.__.loadPromise
         }
       })
 
-      router.notify()
-
       await Promise.all(matchPromises)
     },
 
+    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,
+            },
+          }),
+        })
+
+        // Refresh:
+        // '/dashboard'
+        // '/dashboard/invoices/'
+        // '/dashboard/invoices/123'
+
+        // New:
+        // '/dashboard/invoices/456'
+
+        // TODO: batch requests when possible
+
+        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')
+      }
+    },
+
     invalidateRoute: (opts: MatchLocation) => {
       const next = router.buildNext(opts)
       const unloadedMatchIds = router
         .matchRoutes(next.pathname)
         .map((d) => d.matchId)
-      ;[
-        ...router.state.matches,
-        ...(router.state.pending?.matches ?? []),
-      ].forEach((match) => {
-        if (unloadedMatchIds.includes(match.matchId)) {
-          match.invalidate()
-        }
-      })
+      ;[...store.currentMatches, ...(store.pendingMatches ?? [])].forEach(
+        (match) => {
+          if (unloadedMatchIds.includes(match.matchId)) {
+            match.invalidate()
+          }
+        },
+      )
     },
 
     reload: () =>
-      router.__.navigate({
+      navigate({
         fromCurrent: true,
         replace: true,
         search: true,
@@ -808,19 +1169,24 @@ export function createRouter<
       const next = router.buildNext(location)
 
       if (opts?.pending) {
-        if (!router.state.pending?.location) {
+        if (!store.pendingLocation) {
           return false
         }
-        return !!matchPathname(router.state.pending.location.pathname, {
-          ...opts,
-          to: next.pathname,
-        })
+
+        return !!matchPathname(
+          router.basepath,
+          store.pendingLocation.pathname,
+          {
+            ...opts,
+            to: next.pathname,
+          },
+        )
       }
 
-      return !!matchPathname(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 }) => {
@@ -844,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,
@@ -899,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
@@ -927,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! ☝️')
+            })
         }
       }
 
@@ -952,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)
         }
       }
@@ -981,7 +1357,7 @@ export function createRouter<
       }
     },
     buildNext: (opts: BuildNextOptions) => {
-      const next = router.__.buildLocation(opts)
+      const next = buildLocation(opts)
 
       const matches = router.matchRoutes(next.pathname)
 
@@ -995,225 +1371,14 @@ 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>,
-        ): Route<TAllRouteInfo, any>[] => {
-          return routeConfigs.map((routeConfig) => {
-            const routeOptions = routeConfig.options
-            const route = createRoute(routeConfig, routeOptions, parent, router)
-
-            // {
-            //   pendingMs: routeOptions.pendingMs ?? router.defaultPendingMs,
-            //   pendingMinMs: routeOptions.pendingMinMs ?? router.defaultPendingMinMs,
-            // }
-
-            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 resolvedFrom: Location = {
-        //   ...router.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,
-            },
-          )
-        } 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()
-          }
-        })
-
-        return router.navigationPromise
-      },
-    },
   }
 
-  router.location = router.__.parseLocation(history.location)
-  router.state.location = router.location
-
   router.update(userOptions)
 
   // Allow frameworks to hook into the router creation
@@ -1225,3 +1390,15 @@ export function createRouter<
 function isCtrlEvent(e: MouseEvent) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
 }
+
+function linkMatches(matches: RouteMatch<any, any>[]) {
+  matches.forEach((match, index) => {
+    const parent = matches[index - 1]
+
+    if (parent) {
+      match.__.setParentMatch(parent)
+    } else {
+      match.__.setParentMatch(undefined)
+    }
+  })
+}