@tanstack/react-router 0.0.1-beta.205 → 0.0.1-beta.207

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.205",
+  "version": "0.0.1-beta.207",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -40,11 +40,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@gisatcz/cross-package-react-context": "^0.2.0",
-    "@tanstack/react-router": "^0.0.1-beta.203",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.205"
+    "@tanstack/history": "0.0.1-beta.207"
   },
   "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,
@@ -528,7 +538,7 @@ export function RouterProvider<
         } = {},
         matches?: AnyRouteMatch[],
       ): ParsedLocation => {
-        const from = state.location
+        const from = latestLocationRef.current
         const fromPathname = dest.from ?? from.pathname
 
         let pathname = resolvePathWithBase(fromPathname, `${dest.to ?? ''}`)
@@ -697,7 +707,7 @@ export function RouterProvider<
     async (next: ParsedLocation & CommitLocationOptions) => {
       if (navigateTimeoutRef.current) clearTimeout(navigateTimeoutRef.current)
 
-      const isSameUrl = state.location.href === next.href
+      const isSameUrl = latestLocationRef.current.href === next.href
 
       // If the next urls are the same and we're not replacing,
       // do nothing
@@ -741,7 +751,7 @@ export function RouterProvider<
   )
 
   const buildAndCommitLocation = useStableCallback(
-    <TRouteTree extends AnyRoute>({
+    ({
       replace,
       resetScroll,
       ...rest
@@ -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
@@ -844,7 +857,7 @@ export function RouterProvider<
                 params: match.params,
                 preload: !!preload,
                 meta: parentMeta,
-                location: state.location,
+                location: state.location, // TODO: This might need to be latestLocationRef.current...?
               })) ?? ({} as any)
 
             const meta = {
@@ -864,7 +877,7 @@ export function RouterProvider<
       } catch (err) {
         if (isRedirect(err)) {
           if (!preload) navigate(err as any)
-          return
+          return matches
         }
 
         throw err
@@ -883,14 +896,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 +907,6 @@ export function RouterProvider<
             }
 
             const load = async () => {
-              let latestPromise
-
               try {
                 const componentsPromise = Promise.all(
                   componentTypes.map(async (type) => {
@@ -953,6 +956,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 +972,7 @@ export function RouterProvider<
             matches[index] = match = {
               ...match,
               isFetching: true,
-              fetchedAt,
+              fetchedAt: Date.now(),
               invalid: false,
             }
 
@@ -977,48 +989,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 +1032,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 +1044,7 @@ export function RouterProvider<
         }
 
         // Only apply the latest transition
-        if ((latestPromise = checkLatest())) {
+        if ((latestPromise = checkLatest(promise))) {
           return latestPromise
         }
 
@@ -1078,14 +1081,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 +1101,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 +1112,7 @@ export function RouterProvider<
       await loadMatches({
         matches,
         preload: true,
+        checkLatest: () => undefined,
       })
 
       return [last(matches)!, matches] as const
@@ -1158,21 +1154,21 @@ export function RouterProvider<
       const preloadDelay = userPreloadDelay ?? options.defaultPreloadDelay ?? 0
 
       // Compare path/hash for matches
-      const currentPathSplit = state.location.pathname.split('/')
+      const currentPathSplit = latestLocationRef.current.pathname.split('/')
       const nextPathSplit = next.pathname.split('/')
       const pathIsFuzzyEqual = nextPathSplit.every(
         (d, i) => d === currentPathSplit[i],
       )
       // Combine the matches based on user options
       const pathTest = activeOptions?.exact
-        ? state.location.pathname === next.pathname
+        ? latestLocationRef.current.pathname === next.pathname
         : pathIsFuzzyEqual
       const hashTest = activeOptions?.includeHash
-        ? state.location.hash === next.hash
+        ? latestLocationRef.current.hash === next.hash
         : true
       const searchTest =
         activeOptions?.includeSearch ?? true
-          ? partialDeepEqual(state.location.search, next.search)
+          ? partialDeepEqual(latestLocationRef.current.search, next.search)
           : true
 
       // The final "active" test
@@ -1252,13 +1248,20 @@ export function RouterProvider<
     },
   )
 
+  const latestLocationRef = React.useRef(state.location)
+
   React.useLayoutEffect(() => {
     const unsub = history.subscribe(() => {
+      latestLocationRef.current = parseLocation(latestLocationRef.current)
+
       React.startTransition(() => {
-        setState((s) => ({
-          ...s,
-          location: parseLocation(state.location),
-        }))
+        if (state.location !== latestLocationRef.current) {
+          try {
+            load()
+          } catch (err) {
+            console.error(err)
+          }
+        }
       })
     })
 
@@ -1282,14 +1285,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),
@@ -1309,7 +1310,9 @@ export function RouterProvider<
       return false
     }
 
-    const baseLocation = opts?.pending ? state.location : state.resolvedLocation
+    const baseLocation = opts?.pending
+      ? latestLocationRef.current
+      : state.resolvedLocation
 
     if (!baseLocation) {
       return false

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
 }

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>>
   }
 }