@tanstack/router-core 0.0.1-beta.3 → 0.0.1-beta.30

package/src/router.ts

@@ -23,7 +23,7 @@ import {
   matchPathname,
   resolvePath,
 } from './path'
-import { AnyRoute, cascadeLoaderData, createRoute, Route } from './route'
+import { AnyRoute, createRoute, Route } from './route'
 import {
   AnyLoaderData,
   AnyPathParams,
@@ -45,6 +45,7 @@ import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
   functionalUpdate,
   last,
+  pick,
   PickAsRequired,
   PickRequired,
   replaceEqualDeep,
@@ -52,6 +53,22 @@ import {
   Updater,
 } from './utils'
 
+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 {}
 
 export interface Location<
@@ -80,7 +97,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 +109,27 @@ 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'>>
+  // renderComponent?: (
+  //   component: GetFrameworkGeneric<'Component'>,
+  // ) => GetFrameworkGeneric<'Element'>
 }
 
 export interface Action<
@@ -113,10 +137,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 +154,7 @@ export interface ActionState<
   submittedAt: number
   status: 'idle' | 'pending' | 'success' | 'error'
   submission: TPayload
+  isMulti: boolean
   data?: TResponse
   error?: unknown
 }
@@ -160,21 +188,21 @@ 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 RouterState<
+  TSearchObj extends AnySearchSchema = {},
+  TState extends LocationState = LocationState,
+> {
   status: 'idle' | 'loading'
-  location: Location
+  location: Location<TSearchObj, TState>
   matches: RouteMatch[]
   lastUpdated: number
-  loaderData: unknown
-  currentAction?: ActionState
-  latestAction?: ActionState
   actions: Record<string, Action>
   loaders: Record<string, Loader>
   pending?: PendingState
@@ -187,7 +215,7 @@ export interface PendingState {
   matches: RouteMatch[]
 }
 
-type Listener = (router: Router<any, any>) => void
+type Listener = (router: Router<any, any, any>) => void
 
 export type ListenerFn = () => void
 
@@ -196,6 +224,7 @@ export interface BuildNextOptions {
   params?: true | Updater<Record<string, any>>
   search?: true | Updater<unknown>
   hash?: true | Updater<string>
+  state?: LocationState
   key?: string
   from?: string
   fromCurrent?: boolean
@@ -225,41 +254,79 @@ type LinkCurrentTargetElement = {
   preloadTimeout?: null | ReturnType<typeof setTimeout>
 }
 
+export interface DehydratedRouterState
+  extends Pick<
+    RouterState,
+    'status' | 'location' | 'lastUpdated' | 'location'
+  > {
+  matches: DehydratedRouteMatch[]
+}
+
+export interface DehydratedRouter<TRouterContext = unknown> {
+  location: Router['location']
+  state: DehydratedRouterState
+  context: TRouterContext
+}
+
+interface DehydratedRouteMatch
+  extends Pick<
+    RouteMatch<any, any>,
+    | 'matchId'
+    | 'status'
+    | 'routeLoaderData'
+    | 'loaderData'
+    | '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()
   basepath: string
   // Internal:
-  allRouteInfo: TAllRouteInfo
   listeners: Listener[]
-  location: Location
+  location: Location<TAllRouteInfo['fullSearchSchema']>
   navigateTimeout?: Timeout
   nextAction?: 'push' | 'replace'
-  state: RouterState
+  state: RouterState<TAllRouteInfo['fullSearchSchema']>
   routeTree: Route<TAllRouteInfo, RouteInfo>
   routesById: RoutesById<TAllRouteInfo>
-  navigationPromise: Promise<void>
-  removeActionQueue: { action: Action; actionState: ActionState }[]
+  navigationPromise?: Promise<void>
   startedLoadingAt: number
   resolveNavigation: () => void
   subscribe: (listener: Listener) => () => void
+  reset: () => void
   notify: () => void
   mount: () => () => void
   onFocus: () => void
-  update: <TRouteConfig extends RouteConfig = RouteConfig>(
-    opts?: RouterOptions<TRouteConfig>,
-  ) => Router<TRouteConfig>
+  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>
+  load: (next?: Location) => Promise<void>
   matchCache: Record<string, MatchCacheEntry>
   cleanMatchCache: () => void
   getRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
@@ -276,11 +343,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
@@ -303,6 +372,8 @@ export interface Router<
   >(
     opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
   ) => LinkInfo
+  dehydrate: () => DehydratedRouter<TRouterContext>
+  hydrate: (dehydratedRouter: DehydratedRouter<TRouterContext>) => void
   __: {
     buildRouteTree: (
       routeConfig: RouteConfig,
@@ -327,12 +398,26 @@ const isServer =
 const createDefaultHistory = () =>
   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,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
+  TRouterContext = unknown,
 >(
-  userOptions?: RouterOptions<TRouteConfig>,
-): Router<TRouteConfig, TAllRouteInfo> {
+  userOptions?: RouterOptions<TRouteConfig, TRouterContext>,
+): Router<TRouteConfig, TAllRouteInfo, TRouterContext> {
   const history = userOptions?.history || createDefaultHistory()
 
   const originalOptions = {
@@ -340,36 +425,31 @@ export function createRouter<
     defaultLoaderMaxAge: 0,
     defaultPreloadMaxAge: 2000,
     defaultPreloadDelay: 50,
+    context: undefined!,
     ...userOptions,
     stringifySearch: userOptions?.stringifySearch ?? defaultStringifySearch,
     parseSearch: userOptions?.parseSearch ?? defaultParseSearch,
   }
 
-  let router: Router<TRouteConfig, TAllRouteInfo> = {
+  let router: Router<TRouteConfig, TAllRouteInfo, TRouterContext> = {
+    types: undefined!,
+
+    // public api
     history,
     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,
+    state: getInitialRouterState(),
+    reset: () => {
+      router.state = getInitialRouterState()
+      router.notify()
     },
     startedLoadingAt: Date.now(),
     subscribe: (listener: Listener): (() => void) => {
@@ -382,22 +462,86 @@ export function createRouter<
       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),
-        ),
+      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, [
+            'status',
+            'location',
+            'lastUpdated',
+            'location',
+          ]),
+          matches: router.state.matches.map((match) =>
+            pick(match, [
+              'matchId',
+              '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
+
+      // 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 😬',
+        )
+        Object.assign(match, dehydratedMatch)
+      })
+
+      matches.forEach((match) => match.__.validate())
+
+      router.state = {
+        ...router.state,
+        ...dehydratedState,
+        matches,
+      }
+    },
+
     mount: () => {
       const next = router.__.buildLocation({
         to: '.',
@@ -409,14 +553,14 @@ export function createRouter<
       // to the current location. Otherwise, load the current location.
       if (next.href !== router.location.href) {
         router.__.commitLocation(next, true)
-      } else {
-        router.loadLocation()
       }
 
-      const unsub = history.listen((event) => {
-        router.loadLocation(
-          router.__.parseLocation(event.location, router.location),
-        )
+      if (!router.state.matches.length) {
+        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
@@ -429,17 +573,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
@@ -463,7 +618,7 @@ export function createRouter<
       })
     },
 
-    loadLocation: async (next?: Location) => {
+    load: async (next?: Location) => {
       const id = Math.random()
       router.startedLoadingAt = id
 
@@ -472,40 +627,53 @@ 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,
       })
 
-      router.state = {
-        ...router.state,
-        pending: {
+      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',
+          status: 'loading',
+        }
+      }
+
+      // 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) {
+        if (err?.then) {
+          await new Promise(() => {})
+        }
+        throw err
       }
 
       router.notify()
 
       // Load the matches
-      await router.loadMatches(matches, {
-        withPending: true,
-      })
+      await router.loadMatches(matches)
 
       if (router.startedLoadingAt !== id) {
         // Ignore side-effects of match loading
@@ -525,6 +693,10 @@ export function createRouter<
         }
       })
 
+      const entering = matches.filter((d) => {
+        return !previousMatches.find((dd) => dd.matchId === d.matchId)
+      })
+
       const now = Date.now()
 
       exiting.forEach((d) => {
@@ -532,6 +704,7 @@ export function createRouter<
           params: d.params,
           search: d.routeSearch,
         })
+
         // Clear idle error states when match leaves
         if (d.status === 'error' && !d.isFetching) {
           d.status = 'idle'
@@ -556,29 +729,27 @@ export function createRouter<
         })
       })
 
-      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,
         })
         delete router.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) {
         // 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,
@@ -726,9 +897,10 @@ export function createRouter<
             existingMatches.find((d) => d.matchId === matchId) ||
             router.matchCache[matchId]?.match ||
             createRouteMatch(router, foundRoute, {
+              parentMatch,
               matchId,
               params,
-              pathname: joinPaths([pathname, interpolatedPath]),
+              pathname: joinPaths([router.basepath, interpolatedPath]),
             })
 
           matches.push(match)
@@ -754,12 +926,14 @@ export function createRouter<
         match.__.validate()
         match.load(loaderOpts)
 
-        if (match.status === 'loading') {
-          // If requested, start the pending timers
-          if (loaderOpts?.withPending) match.__.startPending()
+        const search = match.search as { __data?: any }
+
+        if (search.__data && search.__data.matchId !== match.matchId) {
+          return
+        }
 
+        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
         }
       })
@@ -769,6 +943,50 @@ export function createRouter<
       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.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
@@ -1006,17 +1224,11 @@ export function createRouter<
       buildRouteTree: (rootRouteConfig: RouteConfig) => {
         const recurseRoutes = (
           routeConfigs: RouteConfig[],
-          parent?: Route<TAllRouteInfo, any>,
-        ): Route<TAllRouteInfo, any>[] => {
+          parent?: Route<TAllRouteInfo, any, any>,
+        ): Route<TAllRouteInfo, any, 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) {
@@ -1182,6 +1394,7 @@ export function createRouter<
             },
             {
               id,
+              ...next.state,
             },
           )
         } else {
@@ -1203,6 +1416,7 @@ export function createRouter<
           router.resolveNavigation = () => {
             previousNavigationResolve()
             resolve()
+            delete router.navigationPromise
           }
         })
 
@@ -1211,9 +1425,6 @@ export function createRouter<
     },
   }
 
-  router.location = router.__.parseLocation(history.location)
-  router.state.location = router.location
-
   router.update(userOptions)
 
   // Allow frameworks to hook into the router creation
@@ -1225,3 +1436,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,
+      })
+    }
+  })
+}