@tanstack/router-core 0.0.1-alpha.9 → 0.0.1-beta.10

package/src/router.ts

@@ -23,10 +23,13 @@ import {
   matchPathname,
   resolvePath,
 } from './path'
-import { AnyRoute, cascadeLoaderData, createRoute, Route } from './route'
+import { AnyRoute, createRoute, Route } from './route'
 import {
+  AnyLoaderData,
+  AnyPathParams,
   AnyRouteConfig,
   AnySearchSchema,
+  LoaderContext,
   RouteConfig,
   SearchFilter,
 } from './routeConfig'
@@ -42,7 +45,9 @@ import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
   functionalUpdate,
   last,
+  pick,
   PickAsRequired,
+  PickRequired,
   replaceEqualDeep,
   Timeout,
   Updater,
@@ -99,6 +104,9 @@ export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
   basepath?: string
   createRouter?: (router: Router<any, any>) => void
   createRoute?: (opts: { route: AnyRoute; router: Router<any, any> }) => void
+  createElement?: (
+    element: GetFrameworkGeneric<'SyncOrAsyncElement'>,
+  ) => Promise<GetFrameworkGeneric<'Element'>>
 }
 
 export interface Action<
@@ -106,10 +114,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<
@@ -120,19 +131,54 @@ export interface ActionState<
   submittedAt: number
   status: 'idle' | 'pending' | 'success' | 'error'
   submission: TPayload
+  isMulti: boolean
   data?: TResponse
   error?: unknown
 }
 
+export interface Loader<
+  TFullSearchSchema extends AnySearchSchema = {},
+  TAllParams extends AnyPathParams = {},
+  TRouteLoaderData = AnyLoaderData,
+> {
+  fetch: keyof PickRequired<TFullSearchSchema> extends never
+    ? keyof TAllParams extends never
+      ? (loaderContext: { signal?: AbortSignal }) => Promise<TRouteLoaderData>
+      : (loaderContext: {
+          params: TAllParams
+          search?: TFullSearchSchema
+          signal?: AbortSignal
+        }) => Promise<TRouteLoaderData>
+    : keyof TAllParams extends never
+    ? (loaderContext: {
+        search: TFullSearchSchema
+        params: TAllParams
+        signal?: AbortSignal
+      }) => Promise<TRouteLoaderData>
+    : (loaderContext: {
+        search: TFullSearchSchema
+        signal?: AbortSignal
+      }) => Promise<TRouteLoaderData>
+  current?: LoaderState<TFullSearchSchema, TAllParams>
+  latest?: LoaderState<TFullSearchSchema, TAllParams>
+  pending: LoaderState<TFullSearchSchema, TAllParams>[]
+}
+
+export interface LoaderState<
+  TFullSearchSchema = unknown,
+  TAllParams = unknown,
+> {
+  loadedAt: number
+  loaderContext: LoaderContext<TFullSearchSchema, TAllParams>
+}
+
 export interface RouterState {
   status: 'idle' | 'loading'
   location: Location
   matches: RouteMatch[]
   lastUpdated: number
-  loaderData: unknown
-  currentAction?: ActionState
-  latestAction?: ActionState
   actions: Record<string, Action>
+  loaders: Record<string, Loader>
   pending?: PendingState
   isFetching: boolean
   isPreloading: boolean
@@ -143,7 +189,7 @@ export interface PendingState {
   matches: RouteMatch[]
 }
 
-type Listener = () => void
+type Listener = (router: Router<any, any>) => void
 
 export type ListenerFn = () => void
 
@@ -181,10 +227,27 @@ type LinkCurrentTargetElement = {
   preloadTimeout?: null | ReturnType<typeof setTimeout>
 }
 
+interface DehydratedRouterState
+  extends Pick<RouterState, 'status' | 'location' | 'lastUpdated'> {
+  matches: DehydratedRouteMatch[]
+}
+
+interface DehydratedRouteMatch
+  extends Pick<
+    RouteMatch<any, any>,
+    | 'matchId'
+    | 'status'
+    | 'routeLoaderData'
+    | 'loaderData'
+    | 'isInvalid'
+    | 'invalidAt'
+  > {}
+
 export interface Router<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
 > {
+  history: BrowserHistory | MemoryHistory | HashHistory
   options: PickAsRequired<
     RouterOptions<TRouteConfig>,
     'stringifySearch' | 'parseSearch'
@@ -201,28 +264,20 @@ export interface Router<
   routeTree: Route<TAllRouteInfo, RouteInfo>
   routesById: RoutesById<TAllRouteInfo>
   navigationPromise: Promise<void>
-  removeActionQueue: { action: Action; actionState: ActionState }[]
   startedLoadingAt: number
   resolveNavigation: () => void
   subscribe: (listener: Listener) => () => void
+  reset: () => void
   notify: () => void
   mount: () => () => void
   onFocus: () => void
   update: <TRouteConfig extends RouteConfig = RouteConfig>(
     opts?: RouterOptions<TRouteConfig>,
   ) => Router<TRouteConfig>
-  buildRouteTree: (
-    routeConfig: RouteConfig,
-  ) => Route<TAllRouteInfo, AnyRouteInfo>
-  parseLocation: (
-    location: History['location'],
-    previousLocation?: Location,
-  ) => Location
-  buildLocation: (dest: BuildNextOptions) => Location
-  commitLocation: (next: Location, replace?: boolean) => Promise<void>
+
   buildNext: (opts: BuildNextOptions) => Location
   cancelMatches: () => void
-  loadLocation: (next?: Location) => Promise<void>
+  load: (next?: Location) => Promise<void>
   matchCache: Record<string, MatchCacheEntry>
   cleanMatchCache: () => void
   getRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
@@ -247,9 +302,6 @@ export interface Router<
   invalidateRoute: (opts: MatchLocation) => void
   reload: () => Promise<void>
   resolvePath: (from: string, path: string) => string
-  _navigate: (
-    location: BuildNextOptions & { replace?: boolean },
-  ) => Promise<void>
   navigate: <
     TFrom extends ValidFromPath<TAllRouteInfo> = '/',
     TTo extends string = '.',
@@ -269,16 +321,44 @@ export interface Router<
   >(
     opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
   ) => LinkInfo
+  dehydrateState: () => DehydratedRouterState
+  hydrateState: (state: DehydratedRouterState) => void
+  __: {
+    buildRouteTree: (
+      routeConfig: RouteConfig,
+    ) => Route<TAllRouteInfo, AnyRouteInfo>
+    parseLocation: (
+      location: History['location'],
+      previousLocation?: Location,
+    ) => Location
+    buildLocation: (dest: BuildNextOptions) => Location
+    commitLocation: (next: Location, replace?: boolean) => Promise<void>
+    navigate: (
+      location: BuildNextOptions & { replace?: boolean },
+    ) => Promise<void>
+  }
 }
 
 // Detect if we're in the DOM
-const isServer = Boolean(
-  typeof window === 'undefined' || !window.document?.createElement,
-)
+const isServer =
+  typeof window === 'undefined' || !window.document?.createElement
 
 // This is the default history object if none is defined
 const createDefaultHistory = () =>
-  !isServer ? createBrowserHistory() : createMemoryHistory()
+  isServer ? createMemoryHistory() : createBrowserHistory()
+
+function getInitialRouterState(): RouterState {
+  return {
+    status: 'idle',
+    location: null!,
+    matches: [],
+    actions: {},
+    loaders: {},
+    lastUpdated: Date.now(),
+    isFetching: false,
+    isPreloading: false,
+  }
+}
 
 export function createRouter<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
@@ -299,9 +379,9 @@ export function createRouter<
   }
 
   let router: Router<TRouteConfig, TAllRouteInfo> = {
+    history,
     options: originalOptions,
     listeners: [],
-    removeActionQueue: [],
     // Resolved after construction
     basepath: '',
     routeTree: undefined!,
@@ -312,15 +392,10 @@ export function createRouter<
     navigationPromise: Promise.resolve(),
     resolveNavigation: () => {},
     matchCache: {},
-    state: {
-      status: 'idle',
-      location: null!,
-      matches: [],
-      actions: {},
-      loaderData: {} as any,
-      lastUpdated: Date.now(),
-      isFetching: false,
-      isPreloading: false,
+    state: getInitialRouterState(),
+    reset: () => {
+      router.state = getInitialRouterState()
+      router.notify()
     },
     startedLoadingAt: Date.now(),
     subscribe: (listener: Listener): (() => void) => {
@@ -346,11 +421,51 @@ export function createRouter<
       }
 
       cascadeLoaderData(router.state.matches)
-      router.listeners.forEach((listener) => listener())
+      router.listeners.forEach((listener) => listener(router))
+    },
+
+    dehydrateState: () => {
+      return {
+        ...pick(router.state, ['status', 'location', 'lastUpdated']),
+        matches: router.state.matches.map((match) =>
+          pick(match, [
+            'matchId',
+            'status',
+            'routeLoaderData',
+            'loaderData',
+            'isInvalid',
+            'invalidAt',
+          ]),
+        ),
+      }
+    },
+
+    hydrateState: (dehydratedState) => {
+      // Match the routes
+      const matches = router.matchRoutes(router.location.pathname, {
+        strictParseParams: true,
+      })
+
+      matches.forEach((match, index) => {
+        const dehydratedMatch = dehydratedState.matches[index]
+        invariant(
+          dehydratedMatch,
+          'Oh no! Dehydrated route matches did not match the active state of the router 😬',
+        )
+        Object.assign(match, dehydratedMatch)
+      })
+
+      router.loadMatches(matches)
+
+      router.state = {
+        ...router.state,
+        ...dehydratedState,
+        matches,
+      }
     },
 
     mount: () => {
-      const next = router.buildLocation({
+      const next = router.__.buildLocation({
         to: '.',
         search: true,
         hash: true,
@@ -359,15 +474,13 @@ export function createRouter<
       // 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()
+        router.__.commitLocation(next, true)
       }
 
-      const unsub = history.listen((event) => {
-        router.loadLocation(
-          router.parseLocation(event.location, router.location),
-        )
+      // router.load()
+
+      const unsub = router.history.listen((event) => {
+        router.load(router.__.parseLocation(event.location, router.location))
       })
 
       // addEventListener does not exist in React Native, but window does
@@ -380,17 +493,28 @@ export function createRouter<
 
       return () => {
         unsub()
-        // Be sure to unsubscribe if a new handler is set
-        window.removeEventListener('visibilitychange', router.onFocus)
-        window.removeEventListener('focus', router.onFocus)
+        if (!isServer && window.removeEventListener) {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('visibilitychange', router.onFocus)
+          window.removeEventListener('focus', router.onFocus)
+        }
       }
     },
 
     onFocus: () => {
-      router.loadLocation()
+      router.load()
     },
 
     update: (opts) => {
+      const newHistory = opts?.history !== router.history
+      if (!router.location || newHistory) {
+        if (opts?.history) {
+          router.history = opts.history
+        }
+        router.location = router.__.parseLocation(router.history.location)
+        router.state.location = router.location
+      }
+
       Object.assign(router.options, opts)
 
       const { basepath, routeConfig } = router.options
@@ -399,235 +523,12 @@ export function createRouter<
 
       if (routeConfig) {
         router.routesById = {} as any
-        router.routeTree = router.buildRouteTree(routeConfig)
+        router.routeTree = router.__.buildRouteTree(routeConfig)
       }
 
       return router as any
     },
 
-    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,
-      }
-    },
-
-    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
-    },
-
-    buildNext: (opts: BuildNextOptions) => {
-      const next = router.buildLocation(opts)
-
-      const matches = router.matchRoutes(next.pathname)
-
-      const __preSearchFilters = matches
-        .map((match) => match.options.preSearchFilters ?? [])
-        .flat()
-        .filter(Boolean)
-
-      const __postSearchFilters = matches
-        .map((match) => match.options.postSearchFilters ?? [])
-        .flat()
-        .filter(Boolean)
-
-      return router.buildLocation({
-        ...opts,
-        __preSearchFilters,
-        __postSearchFilters,
-      })
-    },
-
     cancelMatches: () => {
       ;[
         ...router.state.matches,
@@ -637,7 +538,7 @@ export function createRouter<
       })
     },
 
-    loadLocation: async (next?: Location) => {
+    load: async (next?: Location) => {
       const id = Math.random()
       router.startedLoadingAt = id
 
@@ -646,22 +547,11 @@ export function createRouter<
         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 = []
-
       // Cancel any pending matches
       router.cancelMatches()
 
       // Match the routes
-      const matches = router.matchRoutes(location.pathname, {
+      const matches = router.matchRoutes(router.location.pathname, {
         strictParseParams: true,
       })
 
@@ -706,6 +596,13 @@ export function createRouter<
           params: d.params,
           search: d.routeSearch,
         })
+
+        // // Clear actions
+        // if (d.action) {
+        //   d.action.current = undefined
+        //   d.action.submissions = []
+        // }
+
         // Clear idle error states when match leaves
         if (d.status === 'error' && !d.isFetching) {
           d.status = 'idle'
@@ -739,19 +636,24 @@ export function createRouter<
           params: d.params,
           search: d.search,
         })
+        delete router.matchCache[d.matchId]
       })
 
-      if (matches.some((d) => d.status === 'loading')) {
-        router.notify()
-        await Promise.all(
-          matches.map((d) => d.__.loaderPromise || Promise.resolve()),
-        )
-      }
+      // router.notify()
+
       if (router.startedLoadingAt !== id) {
         // Ignore side-effects of match loading
         return
       }
 
+      matches.forEach((match) => {
+        // Clear actions
+        if (match.action) {
+          match.action.current = undefined
+          match.action.submissions = []
+        }
+      })
+
       router.state = {
         ...router.state,
         location: router.location,
@@ -922,43 +824,17 @@ export function createRouter<
     },
 
     loadMatches: async (resolvedMatches, loaderOpts) => {
-      const now = Date.now()
-      const minMaxAge = loaderOpts?.preload
-        ? Math.max(loaderOpts?.maxAge, loaderOpts?.gcMaxAge)
-        : 0
-
       const matchPromises = resolvedMatches.map(async (match) => {
         // Validate the match (loads search params etc)
         match.__.validate()
-
-        // If this is a preload, add it to the preload cache
-        if (loaderOpts?.preload && minMaxAge > 0) {
-          // If the match is currently active, don't preload it
-          if (router.state.matches.find((d) => d.matchId === match.matchId)) {
-            return
-          }
-
-          router.matchCache[match.matchId] = {
-            gc: now + loaderOpts.gcMaxAge,
-            match,
-          }
-        }
-
-        // If the match is invalid, errored or idle, trigger it to load
-        if (
-          (match.status === 'success' && match.getIsInvalid()) ||
-          match.status === 'error' ||
-          match.status === 'idle'
-        ) {
-          const maxAge = loaderOpts?.preload ? loaderOpts?.maxAge : undefined
-
-          match.load({ maxAge })
-        }
+        match.load(loaderOpts)
 
         if (match.status === 'loading') {
           // If requested, start the pending timers
           if (loaderOpts?.withPending) match.__.startPending()
+        }
 
+        if (match.__.loadPromise) {
           // Wait for the first sign of activity from the match
           // This might be completion, error, or a pending state
           await match.__.loadPromise
@@ -986,7 +862,7 @@ export function createRouter<
     },
 
     reload: () =>
-      router._navigate({
+      router.__.navigate({
         fromCurrent: true,
         replace: true,
         search: true,
@@ -1024,11 +900,6 @@ export function createRouter<
       })
     },
 
-    _navigate: (location: BuildNextOptions & { replace?: boolean }) => {
-      const next = router.buildNext(location)
-      return router.commitLocation(next, location.replace)
-    },
-
     navigate: async ({ from, to = '.', search, hash, replace, params }) => {
       // If this link simply reloads the current route,
       // make sure it has a new key so it will trigger a data refresh
@@ -1050,7 +921,7 @@ export function createRouter<
         'Attempting to navigate to external url with router.navigate!',
       )
 
-      return router._navigate({
+      return router.__.navigate({
         from: fromString,
         to: toString,
         search,
@@ -1134,7 +1005,7 @@ export function createRouter<
           }
 
           // All is well? Navigate!)
-          router._navigate(nextOpts)
+          router.__.navigate(nextOpts)
         }
       }
 
@@ -1186,10 +1057,230 @@ export function createRouter<
         disabled,
       }
     },
-  }
+    buildNext: (opts: BuildNextOptions) => {
+      const next = router.__.buildLocation(opts)
+
+      const matches = router.matchRoutes(next.pathname)
+
+      const __preSearchFilters = matches
+        .map((match) => match.options.preSearchFilters ?? [])
+        .flat()
+        .filter(Boolean)
+
+      const __postSearchFilters = matches
+        .map((match) => match.options.postSearchFilters ?? [])
+        .flat()
+        .filter(Boolean)
+
+      return router.__.buildLocation({
+        ...opts,
+        __preSearchFilters,
+        __postSearchFilters,
+      })
+    },
 
-  router.location = router.parseLocation(history.location)
-  router.state.location = router.location
+    __: {
+      buildRouteTree: (rootRouteConfig: RouteConfig) => {
+        const recurseRoutes = (
+          routeConfigs: RouteConfig[],
+          parent?: Route<TAllRouteInfo, any>,
+        ): Route<TAllRouteInfo, any>[] => {
+          return routeConfigs.map((routeConfig) => {
+            const routeOptions = routeConfig.options
+            const route = createRoute(routeConfig, routeOptions, parent, router)
+            const existingRoute = (router.routesById as any)[route.routeId]
+
+            if (existingRoute) {
+              if (process.env.NODE_ENV !== 'production') {
+                console.warn(
+                  `Duplicate routes found with id: ${String(route.routeId)}`,
+                  router.routesById,
+                  route,
+                )
+              }
+              throw new Error()
+            }
+
+            ;(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.update(userOptions)
 
@@ -1202,3 +1293,16 @@ export function createRouter<
 function isCtrlEvent(e: MouseEvent) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
 }
+
+function cascadeLoaderData(matches: RouteMatch<any, any>[]) {
+  matches.forEach((match, index) => {
+    const parent = matches[index - 1]
+
+    if (parent) {
+      match.loaderData = replaceEqualDeep(match.loaderData, {
+        ...parent.loaderData,
+        ...match.routeLoaderData,
+      })
+    }
+  })
+}