@tanstack/react-router 1.31.22 → 1.31.24

package/src/Matches.tsx

@@ -8,6 +8,7 @@ import { createControlledPromise, pick } from './utils'
 import { CatchNotFound, DefaultGlobalNotFound, isNotFound } from './not-found'
 import { isRedirect } from './redirects'
 import { type AnyRouter, type RegisteredRouter } from './router'
+import { Transitioner } from './Transitioner'
 import type { ResolveRelativePath, ToOptions } from './link'
 import type { AnyRoute, ReactNode, StaticDataRouteOption } from './route'
 import type {
@@ -99,6 +100,25 @@ export type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>
 export function Matches() {
   const router = useRouter()
 
+  const pendingElement = router.options.defaultPendingComponent ? (
+    <router.options.defaultPendingComponent />
+  ) : null
+
+  const inner = (
+    <React.Suspense fallback={pendingElement}>
+      <Transitioner />
+      <MatchesInner />
+    </React.Suspense>
+  )
+
+  return router.options.InnerWrap ? (
+    <router.options.InnerWrap>{inner}</router.options.InnerWrap>
+  ) : (
+    inner
+  )
+}
+
+function MatchesInner() {
   const matchId = useRouterState({
     select: (s) => {
       return s.matches[0]?.id
@@ -109,7 +129,7 @@ export function Matches() {
     select: (s) => s.resolvedLocation.state.key!,
   })
 
-  const inner = (
+  return (
     <matchContext.Provider value={matchId}>
       <CatchBoundary
         getResetKey={() => resetKey}
@@ -126,12 +146,6 @@ export function Matches() {
       </CatchBoundary>
     </matchContext.Provider>
   )
-
-  return router.options.InnerWrap ? (
-    <router.options.InnerWrap>{inner}</router.options.InnerWrap>
-  ) : (
-    inner
-  )
 }
 
 function SafeFragment(props: any) {
@@ -221,13 +235,7 @@ export function Match({ matchId }: { matchId: string }) {
   )
 }
 
-function MatchInner({
-  matchId,
-  // pendingElement,
-}: {
-  matchId: string
-  // pendingElement: any
-}): any {
+function MatchInner({ matchId }: { matchId: string }): any {
   const router = useRouter()
   const routeId = useRouterState({
     select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,

package/src/RouterProvider.tsx

@@ -1,10 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import * as React from 'react'
-import { flushSync } from 'react-dom'
 import { Matches } from './Matches'
-import { pick, useLayoutEffect } from './utils'
-import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 import { getRouterContext } from './routerContext'
+import { Transitioner } from './Transitioner'
 import type { NavigateOptions, ToOptions } from './link'
 import type { ParsedLocation } from './location'
 import type { AnyRoute } from './route'
@@ -87,17 +85,8 @@ export function RouterContextProvider<
 
   const routerContext = getRouterContext()
 
-  const pendingElement = router.options.defaultPendingComponent ? (
-    <router.options.defaultPendingComponent />
-  ) : null
-
   const provider = (
-    <React.Suspense fallback={pendingElement}>
-      <routerContext.Provider value={router}>
-        {children}
-        <Transitioner />
-      </routerContext.Provider>
-    </React.Suspense>
+    <routerContext.Provider value={router}>{children}</routerContext.Provider>
   )
 
   if (router.options.Wrap) {
@@ -118,129 +107,6 @@ export function RouterProvider<
   )
 }
 
-function Transitioner() {
-  const router = useRouter()
-  const mountLoadForRouter = React.useRef({ router, mounted: false })
-  const routerState = useRouterState({
-    select: (s) =>
-      pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),
-  })
-
-  const [isTransitioning, startReactTransition_] = React.useTransition()
-  // Track pending state changes
-  const hasPendingMatches = useRouterState({
-    select: (s) => s.matches.some((d) => d.status === 'pending'),
-  })
-
-  const previousIsLoading = usePrevious(routerState.isLoading)
-
-  const isAnyPending =
-    routerState.isLoading || isTransitioning || hasPendingMatches
-  const previousIsAnyPending = usePrevious(isAnyPending)
-
-  router.startReactTransition = startReactTransition_
-
-  const tryLoad = async () => {
-    try {
-      await 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.load)
-
-    const nextLocation = router.buildLocation({
-      to: router.latestLocation.pathname,
-      search: true,
-      params: true,
-      hash: true,
-      state: true,
-    })
-
-    if (routerState.location.href !== nextLocation.href) {
-      router.commitLocation({ ...nextLocation, replace: true })
-    }
-
-    return () => {
-      unsub()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router, router.history])
-
-  // Try to load the initial location
-  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])
-
-  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,
-        toLocation,
-        pathChanged,
-      })
-
-      router.__store.setState((s) => ({
-        ...s,
-        status: 'idle',
-        resolvedLocation: s.location,
-      }))
-
-      if ((document as any).querySelector) {
-        if (router.state.location.hash !== '') {
-          const el = document.getElementById(router.state.location.hash)
-          if (el) {
-            el.scrollIntoView()
-          }
-        }
-      }
-    }
-  }, [isAnyPending, previousIsAnyPending, router])
-
-  return null
-}
-
 export function getRouteMatch<TRouteTree extends AnyRoute>(
   state: RouterState<TRouteTree>,
   id: string,
@@ -275,15 +141,3 @@ export type RouterProps<
     >['context']
   >
 }
-
-function usePrevious<T>(value: T): T {
-  const ref = React.useRef<T>(value)
-
-  if (ref.current !== value) {
-    const prevValue = ref.current
-    ref.current = value
-    return prevValue
-  } else {
-    return ref.current
-  }
-}

package/src/Transitioner.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react'
+import { pick, useLayoutEffect, usePrevious } from './utils'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+
+export function Transitioner() {
+  const router = useRouter()
+  const mountLoadForRouter = React.useRef({ router, mounted: false })
+  const routerState = useRouterState({
+    select: (s) =>
+      pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),
+  })
+
+  const [isTransitioning, startReactTransition_] = React.useTransition()
+  // Track pending state changes
+  const hasPendingMatches = useRouterState({
+    select: (s) => s.matches.some((d) => d.status === 'pending'),
+  })
+
+  const previousIsLoading = usePrevious(routerState.isLoading)
+
+  const isAnyPending =
+    routerState.isLoading || isTransitioning || hasPendingMatches
+  const previousIsAnyPending = usePrevious(isAnyPending)
+
+  router.startReactTransition = startReactTransition_
+
+  const tryLoad = async () => {
+    try {
+      await 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.load)
+
+    const nextLocation = router.buildLocation({
+      to: router.latestLocation.pathname,
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+    })
+
+    if (routerState.location.href !== nextLocation.href) {
+      router.commitLocation({ ...nextLocation, replace: true })
+    }
+
+    return () => {
+      unsub()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router, router.history])
+
+  // Try to load the initial location
+  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])
+
+  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,
+        toLocation,
+        pathChanged,
+      })
+
+      router.__store.setState((s) => ({
+        ...s,
+        status: 'idle',
+        resolvedLocation: s.location,
+      }))
+
+      if ((document as any).querySelector) {
+        if (router.state.location.hash !== '') {
+          const el = document.getElementById(router.state.location.hash)
+          if (el) {
+            el.scrollIntoView()
+          }
+        }
+      }
+    }
+  }, [isAnyPending, previousIsAnyPending, router])
+
+  return null
+}

package/src/utils.ts

@@ -352,3 +352,15 @@ export function removeLayoutSegments(routePath: string): string {
   const newSegments = segments.filter((segment) => !segment.startsWith('_'))
   return newSegments.join('/')
 }
+
+export function usePrevious<T>(value: T): T {
+  const ref = React.useRef<T>(value)
+
+  if (ref.current !== value) {
+    const prevValue = ref.current
+    ref.current = value
+    return prevValue
+  } else {
+    return ref.current
+  }
+}