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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.162",
+  "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.162",
-    "@tanstack/react-store": "0.0.1-beta.162"
+    "@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' {

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
+}