@tanstack/router-core 0.0.1-beta.16 → 0.0.1-beta.19

package/package.json

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

package/src/routeConfig.ts

@@ -70,7 +70,7 @@ export interface LoaderContext<
   params: TAllParams
   search: TFullSearchSchema
   signal?: AbortSignal
-  parentLoaderPromise?: Promise<TParentRouteLoaderData>
+  // parentLoaderPromise?: Promise<TParentRouteLoaderData>
 }
 
 export type ActionFn<TActionPayload = unknown, TActionResponse = unknown> = (
@@ -138,9 +138,6 @@ export type RouteOptions<
   // An asynchronous function made available to the route for performing asynchronous or mutative actions that
   // 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 component, whichever comes first.
-  useErrorBoundary?: boolean
   // This function is called
   // when moving from an inactive state to an active one. Likewise, when moving from
   // an active to an inactive state, the return function (if provided) is called.

package/src/routeInfo.ts

@@ -116,10 +116,10 @@ export interface RoutesInfoInner<
     any,
     any
   > = RouteInfo,
-  TRouteInfoById = {
+  TRouteInfoById = { '/': TRouteInfo } & {
     [TInfo in TRouteInfo as TInfo['id']]: TInfo
   },
-  TRouteInfoByFullPath = {
+  TRouteInfoByFullPath = { '/': TRouteInfo } & {
     [TInfo in TRouteInfo as TInfo['fullPath'] extends RootRouteId
       ? never
       : string extends TInfo['fullPath']

package/src/routeMatch.ts

@@ -6,8 +6,8 @@ import {
   DefaultAllRouteInfo,
   RouteInfo,
 } from './routeInfo'
-import { ActionState, Router } from './router'
-import { replaceEqualDeep, Timeout } from './utils'
+import { Router } from './router'
+import { replaceEqualDeep, warning } from './utils'
 
 export interface RouteMatch<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
@@ -201,8 +201,14 @@ export function createRouteMatch<
       }
     },
     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
@@ -240,15 +246,8 @@ export function createRouteMatch<
         routeMatch.__.dataPromise = Promise.resolve().then(async () => {
           try {
             if (routeMatch.options.loader) {
-              const data = await routeMatch.options.loader({
-                parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
-                params: routeMatch.params,
-                search: routeMatch.routeSearch,
-                signal: routeMatch.__.abortController.signal,
-              })
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loadPromise
-              }
+              const data = await router.loadMatchData(routeMatch)
+              await checkLatest()
 
               routeMatch.routeLoaderData = replaceEqualDeep(
                 routeMatch.routeLoaderData,
@@ -268,9 +267,7 @@ export function createRouteMatch<
 
             return routeMatch.routeLoaderData
           } catch (err) {
-            if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loadPromise
-            }
+            await checkLatest()
 
             if (process.env.NODE_ENV !== 'production') {
               console.error(err)
@@ -284,30 +281,26 @@ export function createRouteMatch<
           }
         })
 
+        const after = async () => {
+          await checkLatest()
+          routeMatch.isFetching = false
+          delete routeMatch.__.loadPromise
+          routeMatch.__.notify()
+        }
+
         try {
           await Promise.all([
             routeMatch.__.componentsPromise,
             routeMatch.__.dataPromise.catch(() => {}),
           ])
-          if (id !== routeMatch.__.latestId) {
-            return routeMatch.__.loadPromise
-          }
-        } finally {
-          if (id !== routeMatch.__.latestId) {
-            return routeMatch.__.loadPromise
-          }
-          routeMatch.isFetching = false
-          routeMatch.__.notify()
+          after()
+        } catch {
+          after()
         }
       })
 
       await routeMatch.__.loadPromise
-
-      if (id !== routeMatch.__.latestId) {
-        return routeMatch.__.loadPromise
-      }
-
-      delete routeMatch.__.loadPromise
+      await checkLatest()
     },
   }
 

package/src/router.ts

@@ -6,7 +6,6 @@ import {
   History,
   MemoryHistory,
 } from 'history'
-import React from 'react'
 import invariant from 'tiny-invariant'
 import { GetFrameworkGeneric } from './frameworks'
 
@@ -91,7 +90,6 @@ export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
   defaultPreloadMaxAge?: number
   defaultPreloadGcMaxAge?: number
   defaultPreloadDelay?: number
-  useErrorBoundary?: boolean
   defaultComponent?: GetFrameworkGeneric<'Component'>
   defaultErrorComponent?: GetFrameworkGeneric<'Component'>
   defaultPendingComponent?: GetFrameworkGeneric<'Component'>
@@ -100,6 +98,7 @@ export interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
   caseSensitive?: boolean
   routeConfig?: TRouteConfig
   basepath?: string
+  useServerData?: boolean
   createRouter?: (router: Router<any, any>) => void
   createRoute?: (opts: { route: AnyRoute; router: Router<any, any> }) => void
   loadComponent?: (
@@ -166,11 +165,11 @@ export interface Loader<
 }
 
 export interface LoaderState<
-  TFullSearchSchema = unknown,
-  TAllParams = unknown,
+  TFullSearchSchema extends AnySearchSchema = {},
+  TAllParams extends AnyPathParams = {},
 > {
   loadedAt: number
-  loaderContext: LoaderContext<TFullSearchSchema, TAllParams>
+  loaderContext: LoaderContext<AnyLoaderData, TFullSearchSchema, TAllParams>
 }
 
 export interface RouterState {
@@ -249,6 +248,13 @@ 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>,
@@ -257,7 +263,6 @@ export interface Router<
   // Computed in this.update()
   basepath: string
   // Internal:
-  allRouteInfo: TAllRouteInfo
   listeners: Listener[]
   location: Location
   navigateTimeout?: Timeout
@@ -300,6 +305,9 @@ export interface Router<
       | { preload: true; maxAge: number; gcMaxAge: number }
       | { 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
@@ -380,6 +388,9 @@ export function createRouter<
   }
 
   let router: Router<TRouteConfig, TAllRouteInfo> = {
+    types: undefined!,
+
+    // public api
     history,
     options: originalOptions,
     listeners: [],
@@ -388,7 +399,6 @@ export function createRouter<
     routeTree: undefined!,
     routesById: {} as any,
     location: undefined!,
-    allRouteInfo: undefined!,
     //
     navigationPromise: Promise.resolve(),
     resolveNavigation: () => {},
@@ -841,6 +851,12 @@ export function createRouter<
         match.__.validate()
         match.load(loaderOpts)
 
+        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
           await match.__.loadPromise
@@ -852,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