@tanstack/react-router 0.0.1-beta.161 → 0.0.1-beta.163

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.161",
+  "version": "0.0.1-beta.163",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -43,8 +43,8 @@
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
     "@gisatcz/cross-package-react-context": "^0.2.0",
-    "@tanstack/router-core": "0.0.1-beta.161",
-    "@tanstack/react-store": "0.0.1-beta.161"
+    "@tanstack/router-core": "0.0.1-beta.163",
+    "@tanstack/react-store": "0.0.1-beta.163"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/index.tsx

@@ -40,6 +40,8 @@ import {
 //
 
 export * from '@tanstack/router-core'
+export * from './scroll-restoration'
+
 export { useStore }
 
 declare module '@tanstack/router-core' {
@@ -76,14 +78,14 @@ declare module '@tanstack/router-core' {
       string
     >,
     TAllParams extends RouteConstraints['TAllParams'] = MergeParamsFromParent<
-      TParentRoute['__types']['allParams'],
+      TParentRoute['types']['allParams'],
       TParams
     >,
-    TParentContext extends RouteConstraints['TParentContext'] = TParentRoute['__types']['routeContext'],
-    TAllParentContext extends RouteConstraints['TAllParentContext'] = TParentRoute['__types']['context'],
+    TParentContext extends RouteConstraints['TParentContext'] = TParentRoute['types']['routeContext'],
+    TAllParentContext extends RouteConstraints['TAllParentContext'] = TParentRoute['types']['context'],
     TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
     TAllContext extends RouteConstraints['TAllContext'] = MergeParamsFromParent<
-      TParentRoute['__types']['context'],
+      TParentRoute['types']['context'],
       TRouteContext
     >,
     TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
@@ -246,7 +248,7 @@ export type MakeMatchRouteOptions<
           params?: RouteByPath<
             RegisteredRouter['routeTree'],
             ResolveRelativePath<TFrom, NoInfer<TTo>>
-          >['__types']['allParams'],
+          >['types']['allParams'],
         ) => ReactNode)
       | React.ReactNode
   }
@@ -612,10 +614,7 @@ export type RouteFromIdOrRoute<T> = T extends ParseRoute<
 export function useLoader<
   TFrom extends RouteIds<RegisteredRouter['routeTree']>,
   TStrict extends boolean = true,
-  TLoader = RouteById<
-    RegisteredRouter['routeTree'],
-    TFrom
-  >['__types']['loader'],
+  TLoader = RouteById<RegisteredRouter['routeTree'], TFrom>['types']['loader'],
   TSelected = TLoader,
 >(opts?: {
   from: TFrom
@@ -636,7 +635,7 @@ export function useRouterContext<
   TContext = RouteById<
     RegisteredRouter['routeTree'],
     TFrom
-  >['__types']['context'],
+  >['types']['context'],
   TSelected = TContext,
 >(opts?: {
   from: TFrom
@@ -656,7 +655,7 @@ export function useRouteContext<
   TRouteContext = RouteById<
     RegisteredRouter['routeTree'],
     TFrom
-  >['__types']['routeContext'],
+  >['types']['routeContext'],
   TSelected = TRouteContext,
 >(opts?: {
   from: TFrom
@@ -677,7 +676,7 @@ export function useSearch<
   TSearch = RouteById<
     RegisteredRouter['routeTree'],
     TFrom
-  >['__types']['fullSearchSchema'],
+  >['types']['fullSearchSchema'],
   TSelected = TSearch,
 >(opts?: {
   from: TFrom
@@ -696,7 +695,7 @@ export function useSearch<
 export function useParams<
   TFrom extends RouteIds<RegisteredRouter['routeTree']> = '/',
   TDefaultSelected = AllParams<RegisteredRouter['routeTree']> &
-    RouteById<RegisteredRouter['routeTree'], TFrom>['__types']['allParams'],
+    RouteById<RegisteredRouter['routeTree'], TFrom>['types']['allParams'],
   TSelected = TDefaultSelected,
 >(opts?: {
   from: TFrom

package/src/scroll-restoration.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+import { ParsedLocation, useRouter } from '.'
+
+const useLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
+const windowKey = 'window'
+const delimiter = '___'
+
+let weakScrolledElementsByRestoreKey: Record<string, WeakSet<any>> = {}
+
+const cache = (() => {
+  if (typeof window === 'undefined') {
+    return {
+      set: () => {},
+      get: () => {},
+    } as never
+  }
+
+  const storageKey = 'tsr-scroll-restoration-v1'
+
+  let cache = JSON.parse(window.sessionStorage.getItem(storageKey) || '{}')
+
+  return {
+    current: cache,
+    set: (key: string, value: any) => {
+      cache[key] = value
+      window.sessionStorage.setItem(storageKey, JSON.stringify(cache))
+    },
+  }
+})()
+
+export function ScrollRestoration() {
+  const router = useRouter()
+  const getKey = (location: ParsedLocation) => location.key as string
+
+  const pathDidChangeRef = React.useRef(false)
+
+  const restoreScrollPositions = () => {
+    const restoreKey = getKey(router.state.location)
+    let windowRestored = false
+
+    for (const cacheKey in cache.current) {
+      const entry = cache.current[cacheKey]!
+      const [key, elementSelector] = cacheKey.split(delimiter)
+      if (key === restoreKey) {
+        if (elementSelector === windowKey) {
+          windowRestored = true
+          window.scrollTo(entry.scrollX, entry.scrollY)
+        } else if (elementSelector) {
+          const element = document.querySelector(elementSelector)
+          if (element) {
+            element.scrollLeft = entry.scrollX
+            element.scrollTop = entry.scrollY
+          }
+        }
+      }
+    }
+
+    if (!windowRestored) {
+      window.scrollTo(0, 0)
+    }
+  }
+
+  useLayoutEffect(() => {
+    const { history } = window
+    if (history.scrollRestoration) {
+      history.scrollRestoration = 'manual'
+    }
+
+    const onScroll = (event: Event) => {
+      const restoreKey = getKey(router.state.resolvedLocation)
+
+      if (!weakScrolledElementsByRestoreKey[restoreKey]) {
+        weakScrolledElementsByRestoreKey[restoreKey] = new WeakSet()
+      }
+
+      const set = weakScrolledElementsByRestoreKey[restoreKey]!
+
+      if (set.has(event.target)) return
+      set.add(event.target)
+
+      const cacheKey = [
+        restoreKey,
+        event.target === document || event.target === window
+          ? windowKey
+          : getCssSelector(event.target),
+      ].join(delimiter)
+
+      if (!cache.current[cacheKey]) {
+        cache.set(cacheKey, {
+          scrollX: NaN,
+          scrollY: NaN,
+        })
+      }
+    }
+
+    const getCssSelector = (el: any): string => {
+      let path = [],
+        parent
+      while ((parent = el.parentNode)) {
+        path.unshift(
+          `${el.tagName}:nth-child(${
+            ([].indexOf as any).call(parent.children, el) + 1
+          })`,
+        )
+        el = parent
+      }
+      return `${path.join(' > ')}`.toLowerCase()
+    }
+
+    const onPathWillChange = (from: ParsedLocation) => {
+      const restoreKey = getKey(from)
+      for (const cacheKey in cache.current) {
+        const entry = cache.current[cacheKey]!
+        const [key, elementSelector] = cacheKey.split(delimiter)
+        if (restoreKey === key) {
+          if (elementSelector === windowKey) {
+            entry.scrollX = window.scrollX || 0
+            entry.scrollY = window.scrollY || 0
+          } else if (elementSelector) {
+            const element = document.querySelector(elementSelector)
+            entry.scrollX = element?.scrollLeft || 0
+            entry.scrollY = element?.scrollTop || 0
+          }
+
+          cache.set(cacheKey, entry)
+        }
+      }
+    }
+
+    const onPathChange = () => {
+      pathDidChangeRef.current = true
+    }
+
+    if (typeof document !== 'undefined') {
+      document.addEventListener('scroll', onScroll, true)
+    }
+
+    const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', (event) => {
+      if (event.pathChanged) onPathWillChange(event.from)
+    })
+
+    const unsubOnLoad = router.subscribe('onLoad', (event) => {
+      if (event.pathChanged) onPathChange()
+    })
+
+    return () => {
+      document.removeEventListener('scroll', onScroll)
+      unsubOnBeforeLoad()
+      unsubOnLoad()
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    if (pathDidChangeRef.current) {
+      pathDidChangeRef.current = false
+      restoreScrollPositions()
+    }
+  })
+
+  return null
+}