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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.163",
+  "version": "0.0.1-beta.164",
   "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.163",
-    "@tanstack/react-store": "0.0.1-beta.163"
+    "@tanstack/router-core": "0.0.1-beta.164",
+    "@tanstack/react-store": "0.0.1-beta.164"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/scroll-restoration.tsx

@@ -1,163 +1,27 @@
 import * as React from 'react'
-import { ParsedLocation, useRouter } from '.'
+import {
+  ScrollRestorationOptions,
+  restoreScrollPositions,
+  watchScrollPositions,
+} from '@tanstack/router-core'
+import { 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() {
+export function useScrollRestoration(options?: ScrollRestorationOptions) {
   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()
-    }
+    return watchScrollPositions(router, options)
   }, [])
 
   useLayoutEffect(() => {
-    if (pathDidChangeRef.current) {
-      pathDidChangeRef.current = false
-      restoreScrollPositions()
-    }
+    restoreScrollPositions(router, options)
   })
+}
 
+export function ScrollRestoration(props: ScrollRestorationOptions) {
+  useScrollRestoration(props)
   return null
 }