@tanstack/react-router 1.28.7 → 1.28.9

package/src/RouterProvider.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { flushSync } from 'react-dom'
 import { Matches } from './Matches'
 import { pick, useLayoutEffect } from './utils'
 import { useRouter } from './useRouter'
@@ -17,19 +18,13 @@ import type {
 
 import type { RouteMatch } from './Matches'
 
-const useTransition =
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  React.useTransition ||
-  (() => [
-    false,
-    (cb) => {
-      cb()
-    },
-  ])
-
 export interface CommitLocationOptions {
   replace?: boolean
   resetScroll?: boolean
+  viewTransition?: boolean
+  /**
+   * @deprecated All navigations use React transitions under the hood now
+   **/
   startTransition?: boolean
 }
 
@@ -111,37 +106,30 @@ function Transitioner() {
       pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),
   })
 
-  const [isTransitioning, startReactTransition] = useTransition()
+  const [isTransitioning, startReactTransition_] = React.useTransition()
+  // Track pending state changes
+  const hasPendingMatches = useRouterState({
+    select: (s) => s.matches.some((d) => d.status === 'pending'),
+  })
 
-  router.startReactTransition = startReactTransition
+  const previousIsLoading = usePrevious(routerState.isLoading)
 
-  React.useEffect(() => {
-    if (isTransitioning) {
-      router.__store.setState((s) => ({
-        ...s,
-        isTransitioning,
-      }))
-    }
-  }, [isTransitioning, router])
+  const isAnyPending =
+    routerState.isLoading || isTransitioning || hasPendingMatches
+  const previousIsAnyPending = usePrevious(isAnyPending)
+
+  router.startReactTransition = startReactTransition_
 
   const tryLoad = () => {
-    const apply = (cb: () => void) => {
-      if (!routerState.isTransitioning) {
-        startReactTransition(() => cb())
-      } else {
-        cb()
-      }
+    try {
+      router.load()
+    } catch (err) {
+      console.error(err)
     }
-
-    apply(() => {
-      try {
-        router.load()
-      } catch (err) {
-        console.error(err)
-      }
-    })
   }
 
+  // Subscribe to location changes
+  // and try to load the new location
   useLayoutEffect(() => {
     const unsub = router.history.subscribe(() => {
       router.latestLocation = router.parseLocation(router.latestLocation)
@@ -168,57 +156,72 @@ function Transitioner() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router, router.history])
 
+  // Try to load the initial location
   useLayoutEffect(() => {
     if (
-      (React.useTransition as any)
-        ? routerState.isTransitioning && !isTransitioning
-        : !routerState.isLoading &&
-          routerState.resolvedLocation !== routerState.location
+      window.__TSR_DEHYDRATED__ ||
+      (mountLoadForRouter.current.router === router &&
+        mountLoadForRouter.current.mounted)
     ) {
+      return
+    }
+    mountLoadForRouter.current = { router, mounted: true }
+    tryLoad()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router])
+
+  useLayoutEffect(() => {
+    // The router was loading and now it's not
+    if (previousIsLoading && !routerState.isLoading) {
+      const toLocation = router.state.location
+      const fromLocation = router.state.resolvedLocation
+      const pathChanged = fromLocation.href !== toLocation.href
+
+      router.emit({
+        type: 'onLoad',
+        fromLocation,
+        toLocation,
+        pathChanged,
+      })
+
+      // if (router.viewTransitionPromise) {
+      //   console.log('resolving view transition promise')
+      // }
+
+      // router.viewTransitionPromise?.resolve(true)
+    }
+  }, [previousIsLoading, router, routerState.isLoading])
+
+  useLayoutEffect(() => {
+    // The router was pending and now it's not
+    if (previousIsAnyPending && !isAnyPending) {
+      const toLocation = router.state.location
+      const fromLocation = router.state.resolvedLocation
+      const pathChanged = fromLocation.href !== toLocation.href
+
       router.emit({
         type: 'onResolved',
-        fromLocation: routerState.resolvedLocation,
-        toLocation: routerState.location,
-        pathChanged:
-          routerState.location.href !== routerState.resolvedLocation.href,
+        fromLocation,
+        toLocation,
+        pathChanged,
       })
 
+      router.__store.setState((s) => ({
+        ...s,
+        status: 'idle',
+        resolvedLocation: s.location,
+      }))
+
       if ((document as any).querySelector) {
-        if (routerState.location.hash !== '') {
-          const el = document.getElementById(routerState.location.hash)
+        if (router.state.location.hash !== '') {
+          const el = document.getElementById(router.state.location.hash)
           if (el) {
             el.scrollIntoView()
           }
         }
       }
-
-      router.__store.setState((s) => ({
-        ...s,
-        isTransitioning: false,
-        resolvedLocation: s.location,
-      }))
-    }
-  }, [
-    routerState.isTransitioning,
-    isTransitioning,
-    routerState.isLoading,
-    routerState.resolvedLocation,
-    routerState.location,
-    router,
-  ])
-
-  useLayoutEffect(() => {
-    if (
-      window.__TSR_DEHYDRATED__ ||
-      (mountLoadForRouter.current.router === router &&
-        mountLoadForRouter.current.mounted)
-    ) {
-      return
     }
-    mountLoadForRouter.current = { router, mounted: true }
-    tryLoad()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router])
+  }, [isAnyPending, previousIsAnyPending, router])
 
   return null
 }
@@ -241,3 +244,11 @@ export type RouterProps<
   router: Router<TRouteTree>
   context?: Partial<RouterOptions<TRouteTree, TDehydrated>['context']>
 }
+
+function usePrevious<T>(value: T) {
+  const ref = React.useRef<T>(value)
+  React.useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}

package/src/link.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { flushSync } from 'react-dom'
 import { useMatch } from './Matches'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
@@ -168,8 +169,10 @@ export type NavigateOptions<
   // `replace` is a boolean that determines whether the navigation should replace the current history entry or push a new one.
   replace?: boolean
   resetScroll?: boolean
-  // If set to `true`, the link's underlying navigate() call will be wrapped in a `React.startTransition` call. Defaults to `true`.
+  /** @deprecated All navigations now use startTransition under the hood */
   startTransition?: boolean
+  // if set to `true`, the router will wrap the resulting navigation in a document.startViewTransition() call.
+  viewTransition?: boolean
 }
 
 export type ToOptions<
@@ -494,6 +497,7 @@ export function useLinkProps<
     strict: false,
     select: (s) => s.pathname,
   })
+  const [isTransitioning, setIsTransitioning] = React.useState(false)
 
   const {
     // custom props
@@ -511,6 +515,7 @@ export function useLinkProps<
     replace,
     startTransition,
     resetScroll,
+    viewTransition,
     // element props
     children,
     target,
@@ -602,17 +607,30 @@ export function useLinkProps<
     ) {
       e.preventDefault()
 
+      flushSync(() => {
+        setIsTransitioning(true)
+      })
+
+      const unsub = router.subscribe('onResolved', () => {
+        unsub()
+        setIsTransitioning(false)
+      })
+
       // All is well? Navigate!
-      router.commitLocation({ ...next, replace, resetScroll, startTransition })
+      router.commitLocation({
+        ...next,
+        replace,
+        resetScroll,
+        startTransition,
+        viewTransition,
+      })
     }
   }
 
   const doPreload = () => {
-    React.startTransition(() => {
-      router.preloadRoute(dest as any).catch((err) => {
-        console.warn(err)
-        console.warn(preloadWarning)
-      })
+    router.preloadRoute(dest as any).catch((err) => {
+      console.warn(err)
+      console.warn(preloadWarning)
     })
   }
 
@@ -707,6 +725,7 @@ export function useLinkProps<
       'aria-disabled': true,
     }),
     ...(isActive && { 'data-status': 'active', 'aria-current': 'page' }),
+    ...(isTransitioning && { 'data-transitioning': 'transitioning' }),
   }
 }
 
@@ -746,7 +765,10 @@ export type LinkProps<
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
   children?:
     | React.ReactNode
-    | ((state: { isActive: boolean }) => React.ReactNode)
+    | ((state: {
+        isActive: boolean
+        isTransitioning: boolean
+      }) => React.ReactNode)
 }
 
 type LinkComponentProps<TComp> = React.PropsWithoutRef<

package/src/router.ts

@@ -53,6 +53,7 @@ import type {
   RoutesByPath,
 } from './routeInfo'
 import type {
+  ControlledPromise,
   NonNullableUpdater,
   PickAsRequired,
   Timeout,
@@ -129,6 +130,7 @@ export interface RouterOptions<
   defaultStaleTime?: number
   defaultPreloadStaleTime?: number
   defaultPreloadGcTime?: number
+  defaultViewTransition?: boolean
   notFoundMode?: 'root' | 'fuzzy'
   defaultGcTime?: number
   caseSensitive?: boolean
@@ -270,11 +272,13 @@ export class Router<
     Math.random() * 10000000,
   )}`
   resetNextScroll = true
+  shouldViewTransition?: true = undefined
   navigateTimeout: Timeout | null = null
   latestLoadPromise: Promise<void> = Promise.resolve()
   subscribers = new Set<RouterListener<RouterEvent>>()
   injectedHtml: Array<InjectedHtmlEntry> = []
   dehydratedData?: TDehydrated
+  viewTransitionPromise?: ControlledPromise<true>
 
   // Must build in constructor
   __store!: Store<RouterState<TRouteTree>>
@@ -388,10 +392,6 @@ export class Router<
         onUpdate: () => {
           this.__store.state = {
             ...this.state,
-            status:
-              this.state.isTransitioning || this.state.isLoading
-                ? 'pending'
-                : 'idle',
             cachedMatches: this.state.cachedMatches.filter(
               (d) => !['redirected'].includes(d.status),
             ),
@@ -1063,6 +1063,7 @@ export class Router<
 
   commitLocation = async ({
     startTransition,
+    viewTransition,
     ...next
   }: ParsedLocation & CommitLocationOptions) => {
     if (this.navigateTimeout) clearTimeout(this.navigateTimeout)
@@ -1103,18 +1104,14 @@ export class Router<
         }
       }
 
-      const apply = () => {
-        this.history[next.replace ? 'replace' : 'push'](
-          nextHistory.href,
-          nextHistory.state,
-        )
+      if (viewTransition) {
+        this.shouldViewTransition = true
       }
 
-      if (startTransition ?? true) {
-        this.startReactTransition(apply)
-      } else {
-        apply()
-      }
+      this.history[next.replace ? 'replace' : 'push'](
+        nextHistory.href,
+        nextHistory.state,
+      )
     }
 
     this.resetNextScroll = next.resetScroll ?? true
@@ -1638,7 +1635,8 @@ export class Router<
     this.latestLoadPromise = promise
 
     let latestPromise: Promise<void> | undefined | null
-    ;(async () => {
+
+    this.startReactTransition(async () => {
       try {
         const next = this.latestLocation
         const prevLocation = this.state.resolvedLocation
@@ -1667,6 +1665,7 @@ export class Router<
           // If a cached moved to pendingMatches, remove it from cachedMatches
           this.__store.setState((s) => ({
             ...s,
+            status: 'pending',
             isLoading: true,
             location: next,
             pendingMatches,
@@ -1717,50 +1716,65 @@ export class Router<
           pendingMatches.find((d) => d.id === match.id),
         )
 
-        // Commit the pending matches. If a previous match was
-        // removed, place it in the cachedMatches
-        this.__store.batch(() => {
-          this.__store.setState((s) => ({
-            ...s,
-            isLoading: false,
-            matches: s.pendingMatches!,
-            pendingMatches: undefined,
-            cachedMatches: [
-              ...s.cachedMatches,
-              ...exitingMatches.filter((d) => d.status !== 'error'),
-            ],
-            statusCode:
-              redirect?.statusCode || notFound
-                ? 404
-                : s.matches.some((d) => d.status === 'error')
-                  ? 500
-                  : 200,
-            redirect,
-          }))
-          this.cleanCache()
-        })
+        // Determine if we should start a view transition from the navigation
+        // or from the router default
+        const shouldViewTransition =
+          this.shouldViewTransition ?? this.options.defaultViewTransition
+
+        // Reset the view transition flag
+        delete this.shouldViewTransition
+
+        const apply = () => {
+          // this.viewTransitionPromise = createControlledPromise<true>()
+
+          // Commit the pending matches. If a previous match was
+          // removed, place it in the cachedMatches
+          this.__store.batch(() => {
+            this.__store.setState((s) => ({
+              ...s,
+              isLoading: false,
+              matches: s.pendingMatches!,
+              pendingMatches: undefined,
+              cachedMatches: [
+                ...s.cachedMatches,
+                ...exitingMatches.filter((d) => d.status !== 'error'),
+              ],
+              statusCode:
+                redirect?.statusCode || notFound
+                  ? 404
+                  : s.matches.some((d) => d.status === 'error')
+                    ? 500
+                    : 200,
+              redirect,
+            }))
+            this.cleanCache()
+          })
 
-        //
-        ;(
-          [
-            [exitingMatches, 'onLeave'],
-            [enteringMatches, 'onEnter'],
-            [stayingMatches, 'onStay'],
-          ] as const
-        ).forEach(([matches, hook]) => {
-          matches.forEach((match) => {
-            this.looseRoutesById[match.routeId]!.options[hook]?.(match)
+          //
+          ;(
+            [
+              [exitingMatches, 'onLeave'],
+              [enteringMatches, 'onEnter'],
+              [stayingMatches, 'onStay'],
+            ] as const
+          ).forEach(([matches, hook]) => {
+            matches.forEach((match) => {
+              this.looseRoutesById[match.routeId]!.options[hook]?.(match)
+            })
           })
-        })
 
-        this.emit({
-          type: 'onLoad',
-          fromLocation: prevLocation,
-          toLocation: next,
-          pathChanged: pathDidChange,
-        })
+          resolveLoad()
+
+          // return this.viewTransitionPromise
+        }
 
-        resolveLoad()
+        // Attempt to start a view transition (or just apply the changes if we can't)
+        ;(shouldViewTransition && typeof document !== 'undefined'
+          ? document
+          : undefined
+        )
+          // @ts-expect-error
+          ?.startViewTransition?.(apply) || apply()
       } catch (err) {
         // Only apply the latest transition
         if ((latestPromise = this.checkLatest(promise))) {
@@ -1771,7 +1785,7 @@ export class Router<
 
         rejectLoad(err)
       }
-    })()
+    })
 
     return this.latestLoadPromise
   }