@tanstack/react-router 0.0.1-beta.206 → 0.0.1-beta.208

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.206",
+  "version": "0.0.1-beta.208",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.16.7",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.206"
+    "@tanstack/history": "0.0.1-beta.208"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/RouterProvider.tsx

@@ -134,6 +134,10 @@ export type RouterContext<
 
 export const routerContext = React.createContext<RouterContext<any>>(null!)
 
+if (typeof document !== 'undefined') {
+  window.__TSR_ROUTER_CONTEXT__ = routerContext as any
+}
+
 export function getInitialRouterState(
   location: ParsedLocation,
 ): RouterState<any> {
@@ -175,6 +179,14 @@ export function RouterProvider<
 
   const navigateTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
 
+  const latestLoadPromiseRef = React.useRef<Promise<void>>(Promise.resolve())
+
+  const checkLatest = (promise: Promise<void>): undefined | Promise<void> => {
+    return latestLoadPromiseRef.current !== promise
+      ? latestLoadPromiseRef.current
+      : undefined
+  }
+
   const parseLocation = useStableCallback(
     (
       previousLocation?: ParsedLocation,
@@ -346,8 +358,6 @@ export function RouterProvider<
     [routesByPath],
   )
 
-  const latestLoadPromiseRef = React.useRef<Promise<void>>(Promise.resolve())
-
   const matchRoutes = useStableCallback(
     <TRouteTree extends AnyRoute>(
       pathname: string,
@@ -786,12 +796,15 @@ export function RouterProvider<
 
   const loadMatches = useStableCallback(
     async ({
+      checkLatest,
       matches,
       preload,
     }: {
+      checkLatest: () => Promise<void> | undefined
       matches: AnyRouteMatch[]
       preload?: boolean
-    }) => {
+    }): Promise<RouteMatch[]> => {
+      let latestPromise
       let firstBadMatchIndex: number | undefined
 
       // Check each match middleware to see if the route can be accessed
@@ -845,6 +858,7 @@ export function RouterProvider<
                 preload: !!preload,
                 meta: parentMeta,
                 location: state.location, // TODO: This might need to be latestLocationRef.current...?
+                navigate: (opts) => navigate({ ...opts, from: match.pathname }),
               })) ?? ({} as any)
 
             const meta = {
@@ -864,7 +878,7 @@ export function RouterProvider<
       } catch (err) {
         if (isRedirect(err)) {
           if (!preload) navigate(err as any)
-          return
+          return matches
         }
 
         throw err
@@ -883,14 +897,6 @@ export function RouterProvider<
               return getRouteMatch(state, match.id)?.loadPromise
             }
 
-            const fetchedAt = Date.now()
-            const checkLatest = () => {
-              const latest = getRouteMatch(state, match.id)
-              return latest && latest.fetchedAt !== fetchedAt
-                ? latest.loadPromise
-                : undefined
-            }
-
             const handleIfRedirect = (err: any) => {
               if (isRedirect(err)) {
                 if (!preload) {
@@ -902,8 +908,6 @@ export function RouterProvider<
             }
 
             const load = async () => {
-              let latestPromise
-
               try {
                 const componentsPromise = Promise.all(
                   componentTypes.map(async (type) => {
@@ -922,6 +926,9 @@ export function RouterProvider<
                   parentMatchPromise,
                   abortController: match.abortController,
                   meta: match.meta,
+                  location: state.location,
+                  navigate: (opts) =>
+                    navigate({ ...opts, from: match.pathname }),
                 })
 
                 await Promise.all([componentsPromise, loaderPromise])
@@ -953,6 +960,15 @@ export function RouterProvider<
                   updatedAt: Date.now(),
                 }
               }
+
+              if (!preload) {
+                setState((s) => ({
+                  ...s,
+                  matches: s.matches.map((d) =>
+                    d.id === match.id ? match : d,
+                  ),
+                }))
+              }
             }
 
             let loadPromise: Promise<void> | undefined
@@ -960,7 +976,7 @@ export function RouterProvider<
             matches[index] = match = {
               ...match,
               isFetching: true,
-              fetchedAt,
+              fetchedAt: Date.now(),
               invalid: false,
             }
 
@@ -977,48 +993,38 @@ export function RouterProvider<
       })
 
       await Promise.all(matchPromises)
+      return matches
     },
   )
 
-  const load = useStableCallback<LoadFn>(async (opts) => {
+  const load = useStableCallback<LoadFn>(async () => {
     const promise = new Promise<void>(async (resolve, reject) => {
+      const next = latestLocationRef.current
       const prevLocation = state.resolvedLocation
-      const pathDidChange = !!(
-        opts?.next && prevLocation!.href !== opts.next.href
-      )
-
+      const pathDidChange = !!(next && prevLocation!.href !== next.href)
       let latestPromise: Promise<void> | undefined | null
 
-      const checkLatest = (): undefined | Promise<void> | null => {
-        return latestLoadPromiseRef.current !== promise
-          ? latestLoadPromiseRef.current
-          : undefined
-      }
-
       // Cancel any pending matches
       cancelMatches(state)
 
       router.emit({
         type: 'onBeforeLoad',
         from: prevLocation,
-        to: opts?.next ?? state.location,
+        to: next ?? state.location,
         pathChanged: pathDidChange,
       })
 
-      if (opts?.next) {
-        // Ingest the new location
-        setState((s) => ({
-          ...s,
-          location: opts.next! as any,
-        }))
-      }
+      // Ingest the new location
+      setState((s) => ({
+        ...s,
+        location: next,
+      }))
 
       // Match the routes
-      const matches: RouteMatch<any, any>[] = matchRoutes(
-        state.location.pathname,
-        state.location.search,
+      let matches: RouteMatch<any, any>[] = matchRoutes(
+        next.pathname,
+        next.search,
         {
-          throwOnError: opts?.throwOnError,
           debug: true,
         },
       )
@@ -1030,10 +1036,11 @@ export function RouterProvider<
       }))
 
       try {
-        // Load the matches
         try {
+          // Load the matches
           await loadMatches({
             matches,
+            checkLatest: () => checkLatest(promise),
           })
         } catch (err) {
           // swallow this error, since we'll display the
@@ -1041,7 +1048,7 @@ export function RouterProvider<
         }
 
         // Only apply the latest transition
-        if ((latestPromise = checkLatest())) {
+        if ((latestPromise = checkLatest(promise))) {
           return latestPromise
         }
 
@@ -1078,14 +1085,14 @@ export function RouterProvider<
         router.emit({
           type: 'onLoad',
           from: prevLocation,
-          to: state.location,
+          to: next,
           pathChanged: pathDidChange,
         })
 
         resolve()
       } catch (err) {
         // Only apply the latest transition
-        if ((latestPromise = checkLatest())) {
+        if ((latestPromise = checkLatest(promise))) {
           return latestPromise
         }
 
@@ -1098,14 +1105,6 @@ export function RouterProvider<
     return latestLoadPromiseRef.current
   })
 
-  const safeLoad = React.useCallback(async () => {
-    try {
-      return load()
-    } catch (err) {
-      // Don't do anything
-    }
-  }, [])
-
   const preloadRoute = useStableCallback(
     async (navigateOpts: BuildNextOptions = state.location) => {
       let next = buildLocation(navigateOpts)
@@ -1117,6 +1116,7 @@ export function RouterProvider<
       await loadMatches({
         matches,
         preload: true,
+        checkLatest: () => undefined,
       })
 
       return [last(matches)!, matches] as const
@@ -1259,10 +1259,13 @@ export function RouterProvider<
       latestLocationRef.current = parseLocation(latestLocationRef.current)
 
       React.startTransition(() => {
-        setState((s) => ({
-          ...s,
-          location: latestLocationRef.current,
-        }))
+        if (state.location !== latestLocationRef.current) {
+          try {
+            load()
+          } catch (err) {
+            console.error(err)
+          }
+        }
       })
     })
 
@@ -1286,14 +1289,12 @@ export function RouterProvider<
 
   if (initialLoad.current) {
     initialLoad.current = false
-    safeLoad()
-  }
-
-  React.useLayoutEffect(() => {
-    if (state.resolvedLocation !== state.location) {
-      safeLoad()
+    try {
+      load()
+    } catch (err) {
+      console.error(err)
     }
-  }, [state.location])
+  }
 
   const isFetching = React.useMemo(
     () => [...state.matches, ...state.pendingMatches].some((d) => d.isFetching),

package/src/react.tsx

@@ -404,7 +404,8 @@ export type RouterProps<
 export function useRouter<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
 >(): RouterContext<TRouteTree> {
-  const value = React.useContext(routerContext)
+  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext
+  const value = React.useContext(resolvedContext)
   warning(value, 'useRouter must be used inside a <RouterProvider> component!')
   return value as any
 }
@@ -597,6 +598,20 @@ export function useNavigate<
   )
 }
 
+export function typedNavigate<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+>(navigate: (opts: NavigateOptions<any>) => Promise<void>) {
+  return navigate as <
+    TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,
+    TTo extends string = '',
+    TMaskFrom extends RoutePaths<TRouteTree> = '/',
+    TMaskTo extends string = '',
+  >(
+    opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  ) => Promise<void>
+}
+
 export function useMatchRoute<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
 >() {

package/src/route.ts

@@ -11,7 +11,7 @@ import {
   UnionToIntersection,
   Assign,
 } from './utils'
-import { ParsePathParams, ToSubOptions } from './link'
+import { NavigateOptions, ParsePathParams, ToSubOptions } from './link'
 import {
   ErrorRouteComponent,
   PendingRouteComponent,
@@ -154,6 +154,7 @@ type BeforeLoadFn<
   params: TAllParams
   meta: TParentRoute['types']['allMeta']
   location: ParsedLocation
+  navigate: (opts: NavigateOptions<AnyRoute>) => Promise<void>
 }) => Promise<TRouteMeta> | TRouteMeta | void
 
 export type UpdatableRouteOptions<
@@ -265,6 +266,8 @@ export interface LoadFnContext<
   params: TAllParams
   search: TFullSearchSchema
   meta: Expand<Assign<TAllContext, TRouteMeta>>
+  location: ParsedLocation<TFullSearchSchema>
+  navigate: (opts: NavigateOptions<AnyRoute>) => Promise<void>
 }
 
 export type SearchFilter<T, U = T> = (prev: T) => U

package/src/router.ts

@@ -21,12 +21,14 @@ import { RouteMatch } from './RouteMatch'
 import { ParsedLocation } from './location'
 import { LocationState } from './location'
 import { SearchSerializer, SearchParser } from './searchParams'
+import { RouterContext } from './RouterProvider'
 
 //
 
 declare global {
   interface Window {
     __TSR_DEHYDRATED__?: HydrationCtx
+    __TSR_ROUTER_CONTEXT__?: React.Context<RouterContext<any>>
   }
 }