@tanstack/router-core 0.0.1-beta.1 → 0.0.1-beta.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.11",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -33,6 +33,7 @@
     "build/**",
     "src"
   ],
+  "sideEffects": false,
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"

package/src/qss.ts

@@ -30,6 +30,7 @@ function toValue(mix) {
   var str = decodeURIComponent(mix)
   if (str === 'false') return false
   if (str === 'true') return true
+  if (str.charAt(0) === '0') return str
   return +str * 0 === 0 ? +str : str
 }
 

package/src/route.ts

@@ -13,7 +13,6 @@ import {
   RouteInfo,
   RouteInfoByPath,
 } from './routeInfo'
-import { RouteMatch } from './routeMatch'
 import {
   Action,
   ActionState,
@@ -22,7 +21,7 @@ import {
   MatchRouteOptions,
   Router,
 } from './router'
-import { NoInfer, replaceEqualDeep } from './utils'
+import { NoInfer } from './utils'
 
 export interface AnyRoute extends Route<any, any> {}
 
@@ -96,10 +95,10 @@ export function createRoute<
     router.state.actions[id] ||
     (() => {
       router.state.actions[id] = {
-        pending: [],
+        submissions: [],
         submit: async <T, U>(
           submission: T,
-          actionOpts?: { invalidate?: boolean },
+          actionOpts?: { invalidate?: boolean; multi?: boolean },
         ) => {
           if (!route) {
             return
@@ -107,27 +106,27 @@ export function createRoute<
 
           const invalidate = actionOpts?.invalidate ?? true
 
+          if (!actionOpts?.multi) {
+            action.submissions = action.submissions.filter((d) => d.isMulti)
+          }
+
           const actionState: ActionState<T, U> = {
             submittedAt: Date.now(),
             status: 'pending',
             submission,
+            isMulti: !!actionOpts?.multi,
           }
 
           action.current = actionState
           action.latest = actionState
-          action.pending.push(actionState)
-
-          router.state = {
-            ...router.state,
-            currentAction: actionState,
-            latestAction: actionState,
-          }
+          action.submissions.push(actionState)
 
           router.notify()
 
           try {
             const res = await route.options.action?.(submission)
             actionState.data = res as U
+
             if (invalidate) {
               router.invalidateRoute({ to: '.', fromCurrent: true })
               await router.reload()
@@ -139,8 +138,6 @@ export function createRoute<
             actionState.error = err
             actionState.status = 'error'
           } finally {
-            action.pending = action.pending.filter((d) => d !== actionState)
-            router.removeActionQueue.push({ action, actionState })
             router.notify()
           }
         },
@@ -228,16 +225,3 @@ export function createRoute<
 
   return route
 }
-
-export 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/routeMatch.ts

@@ -1,13 +1,12 @@
 import { GetFrameworkGeneric } from './frameworks'
 import { Route } from './route'
-import { AnyPathParams } from './routeConfig'
 import {
   AnyAllRouteInfo,
   AnyRouteInfo,
   DefaultAllRouteInfo,
   RouteInfo,
 } from './routeInfo'
-import { Router } from './router'
+import { ActionState, Router } from './router'
 import { replaceEqualDeep, Timeout } from './utils'
 
 export interface RouteMatch<
@@ -37,7 +36,7 @@ export interface RouteMatch<
     catchElement?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
     pendingElement?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
     loadPromise?: Promise<void>
-    loaderPromise?: Promise<void>
+    loaderDataPromise?: Promise<void>
     elementsPromise?: Promise<void>
     dataPromise?: Promise<void>
     pendingTimeout?: Timeout
@@ -104,6 +103,7 @@ export function createRouteMatch<
     isFetching: false,
     isInvalid: false,
     invalidAt: Infinity,
+    // pendingActions: [],
     getIsInvalid: () => {
       const now = Date.now()
       return routeMatch.isInvalid || routeMatch.invalidAt < now
@@ -147,18 +147,6 @@ export function createRouteMatch<
         clearTimeout(routeMatch.__.pendingMinTimeout)
         delete routeMatch.__.pendingMinPromise
       },
-      // setParentMatch: (parentMatch?: RouteMatch) => {
-      //   routeMatch.parentMatch = parentMatch
-      // },
-      // addChildMatch: (childMatch: RouteMatch) => {
-      //   if (
-      //     routeMatch.childMatches.find((d) => d.matchId === childMatch.matchId)
-      //   ) {
-      //     return
-      //   }
-
-      //   routeMatch.childMatches.push(childMatch)
-      // },
       validate: () => {
         // Validate the search params and stabilize them
         const parentSearch =
@@ -174,7 +162,7 @@ export function createRouteMatch<
 
           let nextSearch = replaceEqualDeep(
             prevSearch,
-            validator?.(parentSearch),
+            validator?.(parentSearch) ?? {},
           )
 
           // Invalidate route matches when search param stability changes
@@ -188,6 +176,14 @@ export function createRouteMatch<
             ...parentSearch,
             ...nextSearch,
           })
+
+          elementTypes.map(async (type) => {
+            const routeElement = routeMatch.options[type]
+
+            if (typeof routeMatch.__[type] !== 'function') {
+              routeMatch.__[type] = routeElement
+            }
+          })
         } catch (err: any) {
           console.error(err)
           const error = new (Error as any)('Invalid search params found', {
@@ -243,7 +239,7 @@ export function createRouteMatch<
       ) {
         const maxAge = loaderOpts?.preload ? loaderOpts?.maxAge : undefined
 
-        routeMatch.fetch({ maxAge })
+        await routeMatch.fetch({ maxAge })
       }
     },
     fetch: async (opts) => {
@@ -266,7 +262,7 @@ export function createRouteMatch<
         routeMatch.isFetching = true
         routeMatch.__.resolve = resolve as () => void
 
-        const loaderPromise = (async () => {
+        routeMatch.__.loaderDataPromise = (async () => {
           // Load the elements and data in parallel
 
           routeMatch.__.elementsPromise = (async () => {
@@ -277,13 +273,11 @@ export function createRouteMatch<
               elementTypes.map(async (type) => {
                 const routeElement = routeMatch.options[type]
 
-                if (routeMatch.__[type]) {
-                  return
+                if (typeof routeMatch.__[type] === 'function') {
+                  routeMatch.__[type] = await router.options.createElement!(
+                    routeElement,
+                  )
                 }
-
-                routeMatch.__[type] = await router.options.createElement!(
-                  routeElement,
-                )
               }),
             )
           })()
@@ -297,7 +291,7 @@ export function createRouteMatch<
                   signal: routeMatch.__.abortController.signal,
                 })
                 if (id !== routeMatch.__.latestId) {
-                  return routeMatch.__.loaderPromise
+                  return routeMatch.__.loadPromise
                 }
 
                 routeMatch.routeLoaderData = replaceEqualDeep(
@@ -317,7 +311,7 @@ export function createRouteMatch<
                   0)
             } catch (err) {
               if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loaderPromise
+                return routeMatch.__.loadPromise
               }
 
               if (process.env.NODE_ENV !== 'production') {
@@ -335,7 +329,7 @@ export function createRouteMatch<
               routeMatch.__.dataPromise,
             ])
             if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise
+              return routeMatch.__.loadPromise
             }
 
             if (routeMatch.__.pendingMinPromise) {
@@ -344,7 +338,7 @@ export function createRouteMatch<
             }
           } finally {
             if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise
+              return routeMatch.__.loadPromise
             }
             routeMatch.__.cancelPending()
             routeMatch.isPending = false
@@ -353,16 +347,18 @@ export function createRouteMatch<
           }
         })()
 
-        routeMatch.__.loaderPromise = loaderPromise
-        await loaderPromise
+        await routeMatch.__.loaderDataPromise
 
         if (id !== routeMatch.__.latestId) {
-          return routeMatch.__.loaderPromise
+          return routeMatch.__.loadPromise
         }
-        delete routeMatch.__.loaderPromise
+
+        delete routeMatch.__.loaderDataPromise
       })
 
-      return await routeMatch.__.loadPromise
+      await routeMatch.__.loadPromise
+
+      delete routeMatch.__.loadPromise
     },
   }
 

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,
@@ -104,9 +105,7 @@ export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
   createRouter?: (router: Router<any, any>) => void
   createRoute?: (opts: { route: AnyRoute; router: Router<any, any> }) => void
   createElement?: (
-    element:
-      | GetFrameworkGeneric<'Element'>
-      | (() => Promise<GetFrameworkGeneric<'Element'>>),
+    element: GetFrameworkGeneric<'SyncOrAsyncElement'>,
   ) => Promise<GetFrameworkGeneric<'Element'>>
 }
 
@@ -115,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<
@@ -129,6 +131,7 @@ export interface ActionState<
   submittedAt: number
   status: 'idle' | 'pending' | 'success' | 'error'
   submission: TPayload
+  isMulti: boolean
   data?: TResponse
   error?: unknown
 }
@@ -174,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
@@ -189,7 +189,7 @@ export interface PendingState {
   matches: RouteMatch[]
 }
 
-type Listener = () => void
+type Listener = (router: Router<any, any>) => void
 
 export type ListenerFn = () => void
 
@@ -227,6 +227,22 @@ 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>,
@@ -248,10 +264,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
@@ -261,7 +277,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']>(
@@ -305,6 +321,8 @@ export interface Router<
   >(
     opts: LinkOptions<TAllRouteInfo, TFrom, TTo>,
   ) => LinkInfo
+  dehydrateState: () => DehydratedRouterState
+  hydrateState: (state: DehydratedRouterState) => void
   __: {
     buildRouteTree: (
       routeConfig: RouteConfig,
@@ -322,13 +340,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,
@@ -352,7 +382,6 @@ export function createRouter<
     history,
     options: originalOptions,
     listeners: [],
-    removeActionQueue: [],
     // Resolved after construction
     basepath: '',
     routeTree: undefined!,
@@ -363,16 +392,10 @@ export function createRouter<
     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) => {
@@ -398,7 +421,47 @@ 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: () => {
@@ -412,14 +475,12 @@ 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),
-        )
+      // 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
@@ -432,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
@@ -466,7 +538,7 @@ export function createRouter<
       })
     },
 
-    loadLocation: async (next?: Location) => {
+    load: async (next?: Location) => {
       const id = Math.random()
       router.startedLoadingAt = id
 
@@ -475,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,
       })
 
@@ -528,6 +589,10 @@ export function createRouter<
         }
       })
 
+      const entering = matches.filter((d) => {
+        return !previousMatches.find((dd) => dd.matchId === d.matchId)
+      })
+
       const now = Date.now()
 
       exiting.forEach((d) => {
@@ -535,6 +600,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'
@@ -559,10 +625,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,
@@ -571,17 +633,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,
@@ -760,7 +824,9 @@ export function createRouter<
         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
@@ -1014,12 +1080,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) {
@@ -1214,9 +1274,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
@@ -1228,3 +1285,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,
+      })
+    }
+  })
+}