@tanstack/router-core 0.0.1-beta.163 → 0.0.1-beta.165

package/build/umd/index.development.js

@@ -1911,6 +1911,125 @@
       };
     }
 
+    const windowKey = 'window';
+    const delimiter = '___';
+    let weakScrolledElementsByRestoreKey = {};
+    let cache;
+    let pathDidChange = false;
+    const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
+    const defaultGetKey = location => location.key;
+    function watchScrollPositions(router, opts) {
+      const getKey = opts?.getKey || defaultGetKey;
+      if (sessionsStorage) {
+        if (!cache) {
+          cache = (() => {
+            const storageKey = 'tsr-scroll-restoration-v1';
+            const current = JSON.parse(window.sessionStorage.getItem(storageKey) || '{}');
+            return {
+              current,
+              set: (key, value) => {
+                current[key] = value;
+                window.sessionStorage.setItem(storageKey, JSON.stringify(cache));
+              }
+            };
+          })();
+        }
+      }
+      const {
+        history
+      } = window;
+      if (history.scrollRestoration) {
+        history.scrollRestoration = 'manual';
+      }
+      const onScroll = 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 => {
+        let path = [],
+          parent;
+        while (parent = el.parentNode) {
+          path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
+          el = parent;
+        }
+        return `${path.join(' > ')}`.toLowerCase();
+      };
+      const onPathWillChange = from => {
+        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 = () => {
+        pathDidChange = 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();
+      };
+    }
+    function restoreScrollPositions(router, opts) {
+      if (pathDidChange) {
+        const getKey = opts?.getKey || defaultGetKey;
+        pathDidChange = false;
+        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);
+        }
+      }
+    }
+
     exports.FileRoute = FileRoute;
     exports.PathParamError = PathParamError;
     exports.RootRoute = RootRoute;
@@ -1944,12 +2063,14 @@
     exports.redirect = redirect;
     exports.replaceEqualDeep = replaceEqualDeep;
     exports.resolvePath = resolvePath;
+    exports.restoreScrollPositions = restoreScrollPositions;
     exports.rootRouteId = rootRouteId;
     exports.stringifySearchWith = stringifySearchWith;
     exports.trimPath = trimPath;
     exports.trimPathLeft = trimPathLeft;
     exports.trimPathRight = trimPathRight;
     exports.warning = warning;
+    exports.watchScrollPositions = watchScrollPositions;
 
     Object.defineProperty(exports, '__esModule', { value: true });