@tanstack/router-core 0.0.1-beta.2 → 0.0.1-beta.21

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,
@@ -89,23 +90,23 @@ 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<'Component'>
+  defaultPendingComponent?: GetFrameworkGeneric<'Component'>
   defaultLoaderMaxAge?: number
   defaultLoaderGcMaxAge?: number
   caseSensitive?: boolean
   routeConfig?: TRouteConfig
   basepath?: string
+  useServerData?: boolean
   createRouter?: (router: Router<any, any>) => void
   createRoute?: (opts: { route: AnyRoute; router: Router<any, any> }) => void
-  createElement?: (
-    element: GetFrameworkGeneric<'SyncOrAsyncElement'>,
-  ) => Promise<GetFrameworkGeneric<'Element'>>
+  loadComponent?: (
+    component: GetFrameworkGeneric<'Component'>,
+  ) => Promise<GetFrameworkGeneric<'Component'>>
+  // renderComponent?: (
+  //   component: GetFrameworkGeneric<'Component'>,
+  // ) => GetFrameworkGeneric<'Element'>
 }
 
 export interface Action<
@@ -113,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<
@@ -127,6 +131,7 @@ export interface ActionState<
   submittedAt: number
   status: 'idle' | 'pending' | 'success' | 'error'
   submission: TPayload
+  isMulti: boolean
   data?: TResponse
   error?: unknown
 }
@@ -160,8 +165,8 @@ export interface Loader<
 }
 
 export interface LoaderState<
-  TFullSearchSchema = unknown,
-  TAllParams = unknown,
+  TFullSearchSchema extends AnySearchSchema = {},
+  TAllParams extends AnyPathParams = {},
 > {
   loadedAt: number
   loaderContext: LoaderContext<TFullSearchSchema, TAllParams>
@@ -172,9 +177,6 @@ export interface RouterState {
   location: Location
   matches: RouteMatch[]
   lastUpdated: number
-  loaderData: unknown
-  currentAction?: ActionState
-  latestAction?: ActionState
   actions: Record<string, Action>
   loaders: Record<string, Loader>
   pending?: PendingState
@@ -196,6 +198,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,10 +228,33 @@ 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>,
 > {
+  types: {
+    // Super secret internal stuff
+    RouteConfig: TRouteConfig
+    AllRouteInfo: TAllRouteInfo
+  }
+
+  // Public API
   history: BrowserHistory | MemoryHistory | HashHistory
   options: PickAsRequired<
     RouterOptions<TRouteConfig>,
@@ -237,7 +263,6 @@ export interface Router<
   // Computed in this.update()
   basepath: string
   // Internal:
-  allRouteInfo: TAllRouteInfo
   listeners: Listener[]
   location: Location
   navigateTimeout?: Timeout
@@ -246,10 +271,10 @@ 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
@@ -259,7 +284,7 @@ export interface Router<
 
   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 +301,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 +330,8 @@ export interface Router<
   >(
     opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
   ) => LinkInfo
+  dehydrateState: () => DehydratedRouterState
+  hydrateState: (state: DehydratedRouterState) => void
   __: {
     buildRouteTree: (
       routeConfig: RouteConfig,
@@ -320,13 +349,25 @@ export interface Router<
 }
 
 // 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,
@@ -347,30 +388,25 @@ export function createRouter<
   }
 
   let router: Router<TRouteConfig, TAllRouteInfo> = {
+    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) => {
@@ -383,22 +419,71 @@ 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))
     },
 
+    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)
+      })
+
+      matches.forEach((match) => match.__.validate())
+
+      router.state = {
+        ...router.state,
+        ...dehydratedState,
+        matches,
+      }
+    },
+
     mount: () => {
       const next = router.__.buildLocation({
         to: '.',
@@ -410,14 +495,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
@@ -430,17 +515,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
@@ -464,7 +560,7 @@ export function createRouter<
       })
     },
 
-    loadLocation: async (next?: Location) => {
+    load: async (next?: Location) => {
       const id = Math.random()
       router.startedLoadingAt = id
 
@@ -473,40 +569,36 @@ 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',
+        }
       }
 
       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
@@ -526,6 +618,10 @@ export function createRouter<
         }
       })
 
+      const entering = matches.filter((d) => {
+        return !previousMatches.find((dd) => dd.matchId === d.matchId)
+      })
+
       const now = Date.now()
 
       exiting.forEach((d) => {
@@ -533,6 +629,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'
@@ -557,10 +654,6 @@ export function createRouter<
         })
       })
 
-      const entering = matches.filter((d) => {
-        return !previousMatches.find((dd) => dd.matchId === d.matchId)
-      })
-
       entering.forEach((d) => {
         d.__.onExit = d.options.onMatch?.({
           params: d.params,
@@ -569,17 +662,19 @@ export function createRouter<
         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,
@@ -727,6 +822,7 @@ export function createRouter<
             existingMatches.find((d) => d.matchId === matchId) ||
             router.matchCache[matchId]?.match ||
             createRouteMatch(router, foundRoute, {
+              parentMatch,
               matchId,
               params,
               pathname: joinPaths([pathname, interpolatedPath]),
@@ -755,12 +851,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
         }
       })
@@ -770,6 +868,40 @@ 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,
+            },
+          }),
+        })
+
+        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
@@ -1012,12 +1144,6 @@ export function createRouter<
           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) {
@@ -1183,6 +1309,7 @@ export function createRouter<
             },
             {
               id,
+              ...next.state,
             },
           )
         } else {
@@ -1212,9 +1339,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
@@ -1226,3 +1350,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,
+      })
+    }
+  })
+}

package/src/utils.ts

@@ -155,3 +155,10 @@ export function functionalUpdate<TResult>(
 
   return updater
 }
+
+export function pick<T, K extends keyof T>(parent: T, keys: K[]): Pick<T, K> {
+  return keys.reduce((obj: any, key: K) => {
+    obj[key] = parent[key]
+    return obj
+  }, {} as any)
+}