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

package/src/routeMatch.ts

@@ -1,6 +1,5 @@
 import { GetFrameworkGeneric } from './frameworks'
 import { Route } from './route'
-import { AnyPathParams } from './routeConfig'
 import {
   AnyAllRouteInfo,
   AnyRouteInfo,
@@ -8,7 +7,7 @@ import {
   RouteInfo,
 } from './routeInfo'
 import { Router } from './router'
-import { replaceEqualDeep, Timeout } from './utils'
+import { replaceEqualDeep } from './utils'
 
 export interface RouteMatch<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
@@ -16,7 +15,7 @@ export interface RouteMatch<
 > extends Route<TAllRouteInfo, TRouteInfo> {
   matchId: string
   pathname: string
-  params: TRouteInfo['params']
+  params: TRouteInfo['allParams']
   parentMatch?: RouteMatch
   childMatches: RouteMatch[]
   routeSearch: TRouteInfo['searchSchema']
@@ -29,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>
-    loaderPromise?: Promise<void>
-    elementsPromise?: Promise<void>
-    dataPromise?: Promise<void>
-    pendingTimeout?: Timeout
-    pendingMinTimeout?: Timeout
-    pendingMinPromise?: Promise<void>
+    componentsPromise?: Promise<void>
+    dataPromise?: Promise<TRouteInfo['routeLoaderData']>
     onExit?:
       | void
       | ((matchContext: {
@@ -54,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<
@@ -85,6 +74,7 @@ export function createRouteMatch<
   router: Router<any, any>,
   route: Route<TAllRouteInfo, TRouteInfo>,
   opts: {
+    parentMatch?: RouteMatch<any, any>
     matchId: string
     params: TRouteInfo['allParams']
     pathname: string
@@ -100,10 +90,10 @@ export function createRouteMatch<
     status: 'idle',
     routeLoaderData: {} as TRouteInfo['routeLoaderData'],
     loaderData: {} as TRouteInfo['loaderData'],
-    isPending: false,
     isFetching: false,
     isInvalid: false,
     invalidAt: Infinity,
+    // pendingActions: [],
     getIsInvalid: () => {
       const now = Date.now()
       return routeMatch.isInvalid || routeMatch.invalidAt < now
@@ -116,49 +106,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
-      },
-      // 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 +121,7 @@ export function createRouteMatch<
 
           let nextSearch = replaceEqualDeep(
             prevSearch,
-            validator?.(parentSearch),
+            validator?.(parentSearch) ?? {},
           )
 
           // Invalidate route matches when search param stability changes
@@ -188,6 +135,14 @@ export function createRouteMatch<
             ...parentSearch,
             ...nextSearch,
           })
+
+          componentTypes.map(async (type) => {
+            const component = routeMatch.options[type]
+
+            if (typeof routeMatch.__[type] !== 'function') {
+              routeMatch.__[type] = component
+            }
+          })
         } catch (err: any) {
           console.error(err)
           const error = new (Error as any)('Invalid search params found', {
@@ -203,7 +158,6 @@ export function createRouteMatch<
     },
     cancel: () => {
       routeMatch.__.abortController?.abort()
-      routeMatch.__.cancelPending()
     },
     invalidate: () => {
       routeMatch.isInvalid = true
@@ -211,7 +165,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) => {
@@ -243,12 +197,18 @@ export function createRouteMatch<
       ) {
         const maxAge = loaderOpts?.preload ? loaderOpts?.maxAge : undefined
 
-        routeMatch.fetch({ maxAge })
+        await routeMatch.fetch({ maxAge })
       }
     },
     fetch: async (opts) => {
-      const id = '' + Date.now() + Math.random()
-      routeMatch.__.latestId = id
+      const loadId = '' + Date.now() + Math.random()
+      routeMatch.__.latestId = loadId
+      const checkLatest = async () => {
+        if (loadId !== routeMatch.__.latestId) {
+          // warning(true, 'Data loader is out of date!')
+          return new Promise(() => {})
+        }
+      }
 
       // If the match was in an error state, set it
       // to a loading state again. Otherwise, keep it
@@ -266,103 +226,81 @@ export function createRouteMatch<
         routeMatch.isFetching = true
         routeMatch.__.resolve = resolve as () => void
 
-        const loaderPromise = (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
+        routeMatch.__.componentsPromise = (async () => {
+          // then run all component and data loaders in parallel
+          // For each component type, potentially load it asynchronously
 
-            await Promise.all(
-              elementTypes.map(async (type) => {
-                const routeElement = routeMatch.options[type]
+          await Promise.all(
+            componentTypes.map(async (type) => {
+              const component = routeMatch.options[type]
 
-                if (routeMatch.__[type]) {
-                  return
-                }
-
-                routeMatch.__[type] = await router.options.createElement!(
-                  routeElement,
-                )
-              }),
-            )
-          })()
-
-          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.__.loaderPromise
-                }
-
-                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) {
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loaderPromise
-              }
-
-              if (process.env.NODE_ENV !== 'production') {
-                console.error(err)
-              }
-              routeMatch.error = err
-              routeMatch.status = 'error'
-              routeMatch.updatedAt = Date.now()
-            }
-          })
-
+        routeMatch.__.dataPromise = Promise.resolve().then(async () => {
           try {
-            await Promise.all([
-              routeMatch.__.elementsPromise,
-              routeMatch.__.dataPromise,
-            ])
-            if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise
+            if (routeMatch.options.loader) {
+              const data = await router.loadMatchData(routeMatch)
+              await checkLatest()
+
+              routeMatch.routeLoaderData = replaceEqualDeep(
+                routeMatch.routeLoaderData,
+                data,
+              )
             }
 
-            if (routeMatch.__.pendingMinPromise) {
-              await routeMatch.__.pendingMinPromise
-              delete routeMatch.__.pendingMinPromise
+            routeMatch.error = undefined
+            routeMatch.status = 'success'
+            routeMatch.updatedAt = Date.now()
+            routeMatch.invalidAt =
+              routeMatch.updatedAt +
+              (opts?.maxAge ??
+                routeMatch.options.loaderMaxAge ??
+                router.options.defaultLoaderMaxAge ??
+                0)
+
+            return routeMatch.routeLoaderData
+          } catch (err) {
+            await checkLatest()
+
+            if (process.env.NODE_ENV !== 'production') {
+              console.error(err)
             }
-          } finally {
-            if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise
-            }
-            routeMatch.__.cancelPending()
-            routeMatch.isPending = false
-            routeMatch.isFetching = false
-            routeMatch.__.notify()
+
+            routeMatch.error = err
+            routeMatch.status = 'error'
+            routeMatch.updatedAt = Date.now()
+
+            throw err
           }
-        })()
+        })
 
-        routeMatch.__.loaderPromise = loaderPromise
-        await loaderPromise
+        const after = async () => {
+          await checkLatest()
+          routeMatch.isFetching = false
+          delete routeMatch.__.loadPromise
+          routeMatch.__.notify()
+        }
 
-        if (id !== routeMatch.__.latestId) {
-          return routeMatch.__.loaderPromise
+        try {
+          await Promise.all([
+            routeMatch.__.componentsPromise,
+            routeMatch.__.dataPromise.catch(() => {}),
+          ])
+          after()
+        } catch {
+          after()
         }
-        delete routeMatch.__.loaderPromise
       })
 
-      return await routeMatch.__.loadPromise
+      await routeMatch.__.loadPromise
+      await checkLatest()
     },
   }