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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.11",
+  "version": "0.0.1-beta.14",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",

package/src/frameworks.ts

@@ -3,8 +3,7 @@ export interface FrameworkGenerics {
   // and are extended by framework adapters, but cannot be
   // pre-defined as constraints:
   //
-  // Element: any
-  // SyncOrAsyncElement?: any
+  // Component: any
 }
 
 export type GetFrameworkGeneric<U> = U extends keyof FrameworkGenerics

package/src/index.ts

@@ -7,7 +7,6 @@ export {
 export { default as invariant } from 'tiny-invariant'
 
 export * from './frameworks'
-export * from './index'
 export * from './link'
 export * from './path'
 export * from './qss'

package/src/routeConfig.ts

@@ -108,18 +108,12 @@ export type RouteOptions<
   // Filter functions that can manipulate search params *after* they are passed to links and navigate
   // calls that match this route.
   postSearchFilters?: SearchFilter<TFullSearchSchema>[]
-  // The duration to wait during `loader` execution before showing the `pendingElement`
-  pendingMs?: number
-  // _If the `pendingElement` is shown_, the minimum duration for which it will be visible.
-  pendingMinMs?: number
-  // The content to be rendered when the route is matched. If no element is provided, defaults to `<Outlet />`
-  element?: GetFrameworkGeneric<'SyncOrAsyncElement'> // , NoInfer<TLoaderData>>
-  // The content to be rendered when `loader` encounters an error
-  errorElement?: GetFrameworkGeneric<'SyncOrAsyncElement'> // , NoInfer<TLoaderData>>
-  // The content to be rendered when rendering encounters an error
-  catchElement?: GetFrameworkGeneric<'SyncOrAsyncElement'> // , NoInfer<TLoaderData>>
-  // The content to be rendered when the duration of `loader` execution surpasses the `pendingMs` duration
-  pendingElement?: GetFrameworkGeneric<'SyncOrAsyncElement'> //, NoInfer<TLoaderData>>
+  // The content to be rendered when the route is matched. If no component is provided, defaults to `<Outlet />`
+  component?: GetFrameworkGeneric<'Component'> // , NoInfer<TLoaderData>>
+  // The content to be rendered when the route encounters an error
+  errorComponent?: GetFrameworkGeneric<'Component'> // , NoInfer<TLoaderData>>
+  // If supported by your framework, the content to be rendered as the fallback content until the route is ready to render
+  pendingComponent?: GetFrameworkGeneric<'Component'> //, NoInfer<TLoaderData>>
   // An asynchronous function responsible for preparing or fetching data for the route before it is rendered
   loader?: LoaderFn<TRouteLoaderData, TFullSearchSchema, TAllParams>
   // The max age to consider loader data fresh (not-stale) for this route in milliseconds from the time of fetch
@@ -132,7 +126,7 @@ export type RouteOptions<
   // might invalidate the route's data.
   action?: ActionFn<TActionPayload, TActionResponse>
   // Set this to true to rethrow errors up the component tree to either the nearest error boundary or
-  // route with error element, whichever comes first.
+  // route with error component, whichever comes first.
   useErrorBoundary?: boolean
   // This function is called
   // when moving from an inactive state to an active one. Likewise, when moving from

package/src/routeMatch.ts

@@ -28,20 +28,14 @@ export interface RouteMatch<
   loaderData: TRouteInfo['loaderData']
   routeLoaderData: TRouteInfo['routeLoaderData']
   isFetching: boolean
-  isPending: boolean
   invalidAt: number
   __: {
-    element?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
-    errorElement?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
-    catchElement?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
-    pendingElement?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
+    component?: GetFrameworkGeneric<'Component'> // , TRouteInfo['loaderData']>
+    errorComponent?: GetFrameworkGeneric<'Component'> // , TRouteInfo['loaderData']>
+    pendingComponent?: GetFrameworkGeneric<'Component'> // , TRouteInfo['loaderData']>
     loadPromise?: Promise<void>
-    loaderDataPromise?: Promise<void>
-    elementsPromise?: Promise<void>
+    componentsPromise?: Promise<void>
     dataPromise?: Promise<void>
-    pendingTimeout?: Timeout
-    pendingMinTimeout?: Timeout
-    pendingMinPromise?: Promise<void>
     onExit?:
       | void
       | ((matchContext: {
@@ -53,28 +47,24 @@ export interface RouteMatch<
     // setParentMatch: (parentMatch: RouteMatch) => void
     // addChildMatch: (childMatch: RouteMatch) => void
     validate: () => void
-    startPending: () => void
-    cancelPending: () => void
     notify: () => void
     resolve: () => void
   }
   cancel: () => void
   load: (
-    loaderOpts?: { withPending?: boolean } & (
+    loaderOpts?:
       | { preload: true; maxAge: number; gcMaxAge: number }
-      | { preload?: false; maxAge?: never; gcMaxAge?: never }
-    ),
+      | { preload?: false; maxAge?: never; gcMaxAge?: never },
   ) => Promise<TRouteInfo['routeLoaderData']>
   fetch: (opts?: { maxAge?: number }) => Promise<TRouteInfo['routeLoaderData']>
   invalidate: () => void
   hasLoaders: () => boolean
 }
 
-const elementTypes = [
-  'element',
-  'errorElement',
-  'catchElement',
-  'pendingElement',
+const componentTypes = [
+  'component',
+  'errorComponent',
+  'pendingComponent',
 ] as const
 
 export function createRouteMatch<
@@ -99,7 +89,6 @@ export function createRouteMatch<
     status: 'idle',
     routeLoaderData: {} as TRouteInfo['routeLoaderData'],
     loaderData: {} as TRouteInfo['loaderData'],
-    isPending: false,
     isFetching: false,
     isInvalid: false,
     invalidAt: Infinity,
@@ -116,37 +105,6 @@ export function createRouteMatch<
         routeMatch.__.resolve()
         routeMatch.router.notify()
       },
-      startPending: () => {
-        const pendingMs =
-          routeMatch.options.pendingMs ?? router.options.defaultPendingMs
-        const pendingMinMs =
-          routeMatch.options.pendingMinMs ?? router.options.defaultPendingMinMs
-
-        if (
-          routeMatch.__.pendingTimeout ||
-          routeMatch.status !== 'loading' ||
-          typeof pendingMs === 'undefined'
-        ) {
-          return
-        }
-
-        routeMatch.__.pendingTimeout = setTimeout(() => {
-          routeMatch.isPending = true
-          routeMatch.__.resolve()
-          if (typeof pendingMinMs !== 'undefined') {
-            routeMatch.__.pendingMinPromise = new Promise(
-              (r) =>
-                (routeMatch.__.pendingMinTimeout = setTimeout(r, pendingMinMs)),
-            )
-          }
-        }, pendingMs)
-      },
-      cancelPending: () => {
-        routeMatch.isPending = false
-        clearTimeout(routeMatch.__.pendingTimeout)
-        clearTimeout(routeMatch.__.pendingMinTimeout)
-        delete routeMatch.__.pendingMinPromise
-      },
       validate: () => {
         // Validate the search params and stabilize them
         const parentSearch =
@@ -177,11 +135,11 @@ export function createRouteMatch<
             ...nextSearch,
           })
 
-          elementTypes.map(async (type) => {
-            const routeElement = routeMatch.options[type]
+          componentTypes.map(async (type) => {
+            const component = routeMatch.options[type]
 
             if (typeof routeMatch.__[type] !== 'function') {
-              routeMatch.__[type] = routeElement
+              routeMatch.__[type] = component
             }
           })
         } catch (err: any) {
@@ -199,7 +157,6 @@ export function createRouteMatch<
     },
     cancel: () => {
       routeMatch.__.abortController?.abort()
-      routeMatch.__.cancelPending()
     },
     invalidate: () => {
       routeMatch.isInvalid = true
@@ -207,7 +164,7 @@ export function createRouteMatch<
     hasLoaders: () => {
       return !!(
         route.options.loader ||
-        elementTypes.some((d) => typeof route.options[d] === 'function')
+        componentTypes.some((d) => route.options[d]?.preload)
       )
     },
     load: async (loaderOpts) => {
@@ -262,102 +219,87 @@ export function createRouteMatch<
         routeMatch.isFetching = true
         routeMatch.__.resolve = resolve as () => void
 
-        routeMatch.__.loaderDataPromise = (async () => {
-          // Load the elements and data in parallel
-
-          routeMatch.__.elementsPromise = (async () => {
-            // then run all element and data loaders in parallel
-            // For each element type, potentially load it asynchronously
-
-            await Promise.all(
-              elementTypes.map(async (type) => {
-                const routeElement = routeMatch.options[type]
-
-                if (typeof routeMatch.__[type] === 'function') {
-                  routeMatch.__[type] = await router.options.createElement!(
-                    routeElement,
-                  )
-                }
-              }),
-            )
-          })()
+        routeMatch.__.componentsPromise = (async () => {
+          // then run all component and data loaders in parallel
+          // For each component type, potentially load it asynchronously
 
-          routeMatch.__.dataPromise = Promise.resolve().then(async () => {
-            try {
-              if (routeMatch.options.loader) {
-                const data = await routeMatch.options.loader({
-                  params: routeMatch.params,
-                  search: routeMatch.routeSearch,
-                  signal: routeMatch.__.abortController.signal,
-                })
-                if (id !== routeMatch.__.latestId) {
-                  return routeMatch.__.loadPromise
-                }
+          await Promise.all(
+            componentTypes.map(async (type) => {
+              const component = routeMatch.options[type]
 
-                routeMatch.routeLoaderData = replaceEqualDeep(
-                  routeMatch.routeLoaderData,
-                  data,
+              if (routeMatch.__[type]?.preload) {
+                routeMatch.__[type] = await router.options.loadComponent!(
+                  component,
                 )
               }
+            }),
+          )
+        })()
 
-              routeMatch.error = undefined
-              routeMatch.status = 'success'
-              routeMatch.updatedAt = Date.now()
-              routeMatch.invalidAt =
-                routeMatch.updatedAt +
-                (opts?.maxAge ??
-                  routeMatch.options.loaderMaxAge ??
-                  router.options.defaultLoaderMaxAge ??
-                  0)
-            } catch (err) {
+        routeMatch.__.dataPromise = Promise.resolve().then(async () => {
+          try {
+            if (routeMatch.options.loader) {
+              const data = await routeMatch.options.loader({
+                params: routeMatch.params,
+                search: routeMatch.routeSearch,
+                signal: routeMatch.__.abortController.signal,
+              })
               if (id !== routeMatch.__.latestId) {
                 return routeMatch.__.loadPromise
               }
 
-              if (process.env.NODE_ENV !== 'production') {
-                console.error(err)
-              }
-              routeMatch.error = err
-              routeMatch.status = 'error'
-              routeMatch.updatedAt = Date.now()
+              routeMatch.routeLoaderData = replaceEqualDeep(
+                routeMatch.routeLoaderData,
+                data,
+              )
             }
-          })
 
-          try {
-            await Promise.all([
-              routeMatch.__.elementsPromise,
-              routeMatch.__.dataPromise,
-            ])
+            routeMatch.error = undefined
+            routeMatch.status = 'success'
+            routeMatch.updatedAt = Date.now()
+            routeMatch.invalidAt =
+              routeMatch.updatedAt +
+              (opts?.maxAge ??
+                routeMatch.options.loaderMaxAge ??
+                router.options.defaultLoaderMaxAge ??
+                0)
+          } catch (err) {
             if (id !== routeMatch.__.latestId) {
               return routeMatch.__.loadPromise
             }
 
-            if (routeMatch.__.pendingMinPromise) {
-              await routeMatch.__.pendingMinPromise
-              delete routeMatch.__.pendingMinPromise
+            if (process.env.NODE_ENV !== 'production') {
+              console.error(err)
             }
-          } finally {
-            if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loadPromise
-            }
-            routeMatch.__.cancelPending()
-            routeMatch.isPending = false
-            routeMatch.isFetching = false
-            routeMatch.__.notify()
+            routeMatch.error = err
+            routeMatch.status = 'error'
+            routeMatch.updatedAt = Date.now()
           }
-        })()
+        })
 
-        await routeMatch.__.loaderDataPromise
-
-        if (id !== routeMatch.__.latestId) {
-          return routeMatch.__.loadPromise
+        try {
+          await Promise.all([
+            routeMatch.__.componentsPromise,
+            routeMatch.__.dataPromise,
+          ])
+          if (id !== routeMatch.__.latestId) {
+            return routeMatch.__.loadPromise
+          }
+        } finally {
+          if (id !== routeMatch.__.latestId) {
+            return routeMatch.__.loadPromise
+          }
+          routeMatch.isFetching = false
+          routeMatch.__.notify()
         }
-
-        delete routeMatch.__.loaderDataPromise
       })
 
       await routeMatch.__.loadPromise
 
+      if (id !== routeMatch.__.latestId) {
+        return routeMatch.__.loadPromise
+      }
+
       delete routeMatch.__.loadPromise
     },
   }

package/src/router.ts

@@ -6,6 +6,7 @@ import {
   History,
   MemoryHistory,
 } from 'history'
+import React from 'react'
 import invariant from 'tiny-invariant'
 import { GetFrameworkGeneric } from './frameworks'
 
@@ -91,12 +92,9 @@ export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
   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
@@ -104,9 +102,12 @@ 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'>>
+  loadComponent?: (
+    component: GetFrameworkGeneric<'Component'>,
+  ) => Promise<GetFrameworkGeneric<'Component'>>
+  // renderComponent?: (
+  //   component: GetFrameworkGeneric<'Component'>,
+  // ) => GetFrameworkGeneric<'Element'>
 }
 
 export interface Action<
@@ -294,10 +295,9 @@ 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>
   invalidateRoute: (opts: MatchLocation) => void
   reload: () => Promise<void>
@@ -408,16 +408,25 @@ 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)
@@ -455,7 +464,7 @@ export function createRouter<
         Object.assign(match, dehydratedMatch)
       })
 
-      router.loadMatches(matches)
+      matches.forEach((match) => match.__.validate())
 
       router.state = {
         ...router.state,
@@ -477,7 +486,9 @@ export function createRouter<
         router.__.commitLocation(next, true)
       }
 
-      // router.load()
+      if (!router.state.matches.length) {
+        router.load()
+      }
 
       const unsub = router.history.listen((event) => {
         router.load(router.__.parseLocation(event.location, router.location))
@@ -555,21 +566,28 @@ export function createRouter<
         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
@@ -821,14 +839,8 @@ export function createRouter<
         match.__.validate()
         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
         }
       })