@tanstack/react-router 1.98.0 → 1.98.3

package/src/ScrollRestoration.tsx

@@ -0,0 +1,65 @@
+import { useRouter } from './useRouter'
+import {
+  defaultGetScrollRestorationKey,
+  getCssSelector,
+  scrollRestorationCache,
+  setupScrollRestoration,
+} from './scroll-restoration'
+import type { ScrollRestorationOptions } from './scroll-restoration'
+import type { ParsedLocation } from '@tanstack/router-core'
+
+function useScrollRestoration() {
+  const router = useRouter()
+  setupScrollRestoration(router, true)
+}
+
+/**
+ * @deprecated use createRouter's `scrollRestoration` option instead
+ */
+export function ScrollRestoration(_props: ScrollRestorationOptions) {
+  useScrollRestoration()
+
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      "The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead.",
+    )
+  }
+
+  return null
+}
+
+export function useElementScrollRestoration(
+  options: (
+    | {
+        id: string
+        getElement?: () => Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+) {
+  useScrollRestoration()
+
+  const router = useRouter()
+  const getKey = options.getKey || defaultGetScrollRestorationKey
+
+  let elementSelector = ''
+
+  if (options.id) {
+    elementSelector = `[data-scroll-restoration-id="${options.id}"]`
+  } else {
+    const element = options.getElement?.()
+    if (!element) {
+      return
+    }
+    elementSelector = getCssSelector(element)
+  }
+
+  const restoreKey = getKey(router.latestLocation)
+  const byKey = scrollRestorationCache.state[restoreKey]
+  return byKey?.[elementSelector]
+}

package/src/Transitioner.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { trimPathRight } from '@tanstack/router-core'
+import { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core'
 import { useLayoutEffect, usePrevious } from './utils'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
@@ -87,17 +87,9 @@ export function Transitioner() {
   useLayoutEffect(() => {
     // The router was loading and now it's not
     if (previousIsLoading && !isLoading) {
-      const toLocation = router.state.location
-      const fromLocation = router.state.resolvedLocation
-      const pathChanged = fromLocation.pathname !== toLocation.pathname
-      const hrefChanged = fromLocation.href !== toLocation.href
-
       router.emit({
         type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches
-        fromLocation,
-        toLocation,
-        pathChanged,
-        hrefChanged,
+        ...getLocationChangeInfo(router.state),
       })
     }
   }, [previousIsLoading, router, isLoading])
@@ -105,17 +97,9 @@ export function Transitioner() {
   useLayoutEffect(() => {
     // emit onBeforeRouteMount
     if (previousIsPagePending && !isPagePending) {
-      const toLocation = router.state.location
-      const fromLocation = router.state.resolvedLocation
-      const pathChanged = fromLocation.pathname !== toLocation.pathname
-      const hrefChanged = fromLocation.href !== toLocation.href
-
       router.emit({
         type: 'onBeforeRouteMount',
-        fromLocation,
-        toLocation,
-        pathChanged,
-        hrefChanged,
+        ...getLocationChangeInfo(router.state),
       })
     }
   }, [isPagePending, previousIsPagePending, router])
@@ -123,17 +107,9 @@ export function Transitioner() {
   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.pathname !== toLocation.pathname
-      const hrefChanged = fromLocation.href !== toLocation.href
-
       router.emit({
         type: 'onResolved',
-        fromLocation,
-        toLocation,
-        pathChanged,
-        hrefChanged,
+        ...getLocationChangeInfo(router.state),
       })
 
       router.__store.setState((s) => ({
@@ -141,18 +117,6 @@ export function Transitioner() {
         status: 'idle',
         resolvedLocation: s.location,
       }))
-
-      if (typeof document !== 'undefined' && (document as any).querySelector) {
-        const hashScrollIntoViewOptions =
-          router.state.location.state.__hashScrollIntoViewOptions ?? true
-
-        if (hashScrollIntoViewOptions && router.state.location.hash !== '') {
-          const el = document.getElementById(router.state.location.hash)
-          if (el) {
-            el.scrollIntoView(hashScrollIntoViewOptions)
-          }
-        }
-      }
     }
   }, [isAnyPending, previousIsAnyPending, router])
 

package/src/index.tsx

@@ -317,11 +317,9 @@ export type {
 } from './RouterProvider'
 
 export {
-  useScrollRestoration,
   useElementScrollRestoration,
   ScrollRestoration,
-} from './scroll-restoration'
-export type { ScrollRestorationOptions } from './scroll-restoration'
+} from './ScrollRestoration'
 
 export type { UseBlockerOpts, ShouldBlockFn } from './useBlocker'
 export { useBlocker, Block } from './useBlocker'

package/src/router.ts

@@ -12,6 +12,7 @@ import {
   defaultParseSearch,
   defaultStringifySearch,
   functionalUpdate,
+  getLocationChangeInfo,
   interpolatePath,
   joinPaths,
   last,
@@ -27,6 +28,8 @@ import {
 } from '@tanstack/router-core'
 import { isRedirect, isResolvedRedirect } from './redirects'
 import { isNotFound } from './not-found'
+
+import { setupScrollRestoration } from './scroll-restoration'
 import type * as React from 'react'
 import type {
   HistoryLocation,
@@ -454,6 +457,15 @@ export interface RouterOptions<
   >
 
   defaultRemountDeps?: (opts: MakeRemountDepsOptionsUnion<TRouteTree>) => any
+
+  /**
+   * If `false`, scroll restoration will be disabled
+   *
+   * @default true
+   */
+  scrollRestoration?: boolean
+  getScrollRestorationKey?: (location: ParsedLocation) => string
+  scrollRestorationBehavior?: ScrollBehavior
 }
 
 export interface RouterErrorSerializer<TSerializedError> {
@@ -473,7 +485,7 @@ export interface RouterState<
   pendingMatches?: Array<TRouteMatch>
   cachedMatches: Array<TRouteMatch>
   location: ParsedLocation<FullSearchSchema<TRouteTree>>
-  resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
+  resolvedLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>
   statusCode: number
   redirect?: ResolvedRedirect
 }
@@ -566,46 +578,37 @@ function validateSearch(validateSearch: AnyValidator, input: unknown): unknown {
   return {}
 }
 
+type NavigationEventInfo = {
+  fromLocation?: ParsedLocation
+  toLocation: ParsedLocation
+  pathChanged: boolean
+  hrefChanged: boolean
+  hashChanged: boolean
+}
+
 export type RouterEvents = {
   onBeforeNavigate: {
     type: 'onBeforeNavigate'
-    fromLocation: ParsedLocation
-    toLocation: ParsedLocation
-    pathChanged: boolean
-    hrefChanged: boolean
-  }
+  } & NavigationEventInfo
   onBeforeLoad: {
     type: 'onBeforeLoad'
-    fromLocation: ParsedLocation
-    toLocation: ParsedLocation
-    pathChanged: boolean
-    hrefChanged: boolean
-  }
+  } & NavigationEventInfo
   onLoad: {
     type: 'onLoad'
-    fromLocation: ParsedLocation
-    toLocation: ParsedLocation
-    pathChanged: boolean
-    hrefChanged: boolean
-  }
+  } & NavigationEventInfo
   onResolved: {
     type: 'onResolved'
-    fromLocation: ParsedLocation
-    toLocation: ParsedLocation
-    pathChanged: boolean
-    hrefChanged: boolean
-  }
+  } & NavigationEventInfo
   onBeforeRouteMount: {
     type: 'onBeforeRouteMount'
-    fromLocation: ParsedLocation
-    toLocation: ParsedLocation
-    pathChanged: boolean
-    hrefChanged: boolean
-  }
+  } & NavigationEventInfo
   onInjectedHtml: {
     type: 'onInjectedHtml'
     promise: Promise<string>
   }
+  onRendered: {
+    type: 'onRendered'
+  } & NavigationEventInfo
 }
 
 export type RouterEvent = RouterEvents[keyof RouterEvents]
@@ -667,6 +670,8 @@ export class Router<
   isViewTransitionTypesSupported?: boolean = undefined
   subscribers = new Set<RouterListener<RouterEvent>>()
   viewTransitionPromise?: ControlledPromise<true>
+  isScrollRestoring = false
+  isScrollRestorationSetup = false
 
   // Must build in constructor
   __store!: Store<RouterState<TRouteTree>>
@@ -803,6 +808,8 @@ export class Router<
           }
         },
       })
+
+      setupScrollRestoration(this)
     }
 
     if (
@@ -1881,8 +1888,6 @@ export class Router<
         try {
           const next = this.latestLocation
           const prevLocation = this.state.resolvedLocation
-          const hrefChanged = prevLocation.href !== next.href
-          const pathChanged = prevLocation.pathname !== next.pathname
 
           // Cancel any pending matches
           this.cancelMatches()
@@ -1914,19 +1919,19 @@ export class Router<
           if (!this.state.redirect) {
             this.emit({
               type: 'onBeforeNavigate',
-              fromLocation: prevLocation,
-              toLocation: next,
-              pathChanged,
-              hrefChanged,
+              ...getLocationChangeInfo({
+                resolvedLocation: prevLocation,
+                location: next,
+              }),
             })
           }
 
           this.emit({
             type: 'onBeforeLoad',
-            fromLocation: prevLocation,
-            toLocation: next,
-            pathChanged,
-            hrefChanged,
+            ...getLocationChangeInfo({
+              resolvedLocation: prevLocation,
+              location: next,
+            }),
           })
 
           await this.loadMatches({
@@ -2903,7 +2908,7 @@ export class Router<
 
     const baseLocation = pending
       ? this.latestLocation
-      : this.state.resolvedLocation
+      : this.state.resolvedLocation || this.state.location
 
     const match = matchPathname(this.basepath, baseLocation.pathname, {
       ...opts,
@@ -3041,7 +3046,7 @@ export function getInitialRouterState(
     isLoading: false,
     isTransitioning: false,
     status: 'idle',
-    resolvedLocation: { ...location },
+    resolvedLocation: undefined,
     location,
     matches: [],
     pendingMatches: [],