@tanstack/react-router 1.114.13 → 1.114.15

package/dist/esm/scroll-restoration.d.ts

@@ -1,28 +1 @@
-import { AnyRouter, NonNullableUpdater, ParsedLocation } from '@tanstack/router-core';
-export type ScrollRestorationEntry = {
-    scrollX: number;
-    scrollY: number;
-};
-export type ScrollRestorationByElement = Record<string, ScrollRestorationEntry>;
-export type ScrollRestorationByKey = Record<string, ScrollRestorationByElement>;
-export type ScrollRestorationCache = {
-    state: ScrollRestorationByKey;
-    set: (updater: NonNullableUpdater<ScrollRestorationByKey>) => void;
-};
-export type ScrollRestorationOptions = {
-    getKey?: (location: ParsedLocation) => string;
-    scrollBehavior?: ScrollToOptions['behavior'];
-};
-export declare const storageKey = "tsr-scroll-restoration-v1_3";
-export declare const scrollRestorationCache: ScrollRestorationCache;
-/**
- * The default `getKey` function for `useScrollRestoration`.
- * It returns the `key` from the location state or the `href` of the location.
- *
- * The `location.href` is used as a fallback to support the use case where the location state is not available like the initial render.
- */
-export declare const defaultGetScrollRestorationKey: (location: ParsedLocation) => string;
-export declare function getCssSelector(el: any): string;
-export declare function restoreScroll(storageKey: string, key: string | undefined, behavior: ScrollToOptions['behavior'] | undefined, shouldScrollRestoration: boolean | undefined, scrollToTopSelectors: Array<string> | undefined): void;
-export declare function setupScrollRestoration(router: AnyRouter, force?: boolean): void;
 export declare function ScrollRestoration(): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/scroll-restoration.js

@@ -1,182 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { functionalUpdate } from "@tanstack/router-core";
+import { defaultGetScrollRestorationKey, restoreScroll, storageKey } from "@tanstack/router-core";
 import { useRouter } from "./useRouter.js";
 import { ScriptOnce } from "./ScriptOnce.js";
-const storageKey = "tsr-scroll-restoration-v1_3";
-let sessionsStorage = false;
-try {
-  sessionsStorage = typeof window !== "undefined" && typeof window.sessionStorage === "object";
-} catch {
-}
-const throttle = (fn, wait) => {
-  let timeout;
-  return (...args) => {
-    if (!timeout) {
-      timeout = setTimeout(() => {
-        fn(...args);
-        timeout = null;
-      }, wait);
-    }
-  };
-};
-const scrollRestorationCache = sessionsStorage ? (() => {
-  const state = JSON.parse(window.sessionStorage.getItem(storageKey) || "null") || {};
-  return {
-    state,
-    // This setter is simply to make sure that we set the sessionStorage right
-    // after the state is updated. It doesn't necessarily need to be a functional
-    // update.
-    set: (updater) => (scrollRestorationCache.state = // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    functionalUpdate(updater, scrollRestorationCache.state) || scrollRestorationCache.state, window.sessionStorage.setItem(
-      storageKey,
-      JSON.stringify(scrollRestorationCache.state)
-    ))
-  };
-})() : void 0;
-const defaultGetScrollRestorationKey = (location) => {
-  return location.state.key || location.href;
-};
-function getCssSelector(el) {
-  const path = [];
-  let parent;
-  while (parent = el.parentNode) {
-    path.unshift(
-      `${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`
-    );
-    el = parent;
-  }
-  return `${path.join(" > ")}`.toLowerCase();
-}
-let ignoreScroll = false;
-function restoreScroll(storageKey2, key, behavior, shouldScrollRestoration, scrollToTopSelectors) {
-  var _a;
-  let byKey;
-  try {
-    byKey = JSON.parse(sessionStorage.getItem(storageKey2) || "{}");
-  } catch (error) {
-    console.error(error);
-    return;
-  }
-  const resolvedKey = key || ((_a = window.history.state) == null ? void 0 : _a.key);
-  const elementEntries = byKey[resolvedKey];
-  ignoreScroll = true;
-  (() => {
-    if (shouldScrollRestoration && elementEntries) {
-      for (const elementSelector in elementEntries) {
-        const entry = elementEntries[elementSelector];
-        if (elementSelector === "window") {
-          window.scrollTo({
-            top: entry.scrollY,
-            left: entry.scrollX,
-            behavior
-          });
-        } else if (elementSelector) {
-          const element = document.querySelector(elementSelector);
-          if (element) {
-            element.scrollLeft = entry.scrollX;
-            element.scrollTop = entry.scrollY;
-          }
-        }
-      }
-      return;
-    }
-    const hash = window.location.hash.split("#")[1];
-    if (hash) {
-      const hashScrollIntoViewOptions = (window.history.state || {}).__hashScrollIntoViewOptions ?? true;
-      if (hashScrollIntoViewOptions) {
-        const el = document.getElementById(hash);
-        if (el) {
-          el.scrollIntoView(hashScrollIntoViewOptions);
-        }
-      }
-      return;
-    }
-    [
-      "window",
-      ...(scrollToTopSelectors == null ? void 0 : scrollToTopSelectors.filter((d) => d !== "window")) ?? []
-    ].forEach((selector) => {
-      const element = selector === "window" ? window : document.querySelector(selector);
-      if (element) {
-        element.scrollTo({
-          top: 0,
-          left: 0,
-          behavior
-        });
-      }
-    });
-  })();
-  ignoreScroll = false;
-}
-function setupScrollRestoration(router, force) {
-  const shouldScrollRestoration = force ?? router.options.scrollRestoration ?? false;
-  if (shouldScrollRestoration) {
-    router.isScrollRestoring = true;
-  }
-  if (typeof document === "undefined" || router.isScrollRestorationSetup) {
-    return;
-  }
-  router.isScrollRestorationSetup = true;
-  ignoreScroll = false;
-  const getKey = router.options.getScrollRestorationKey || defaultGetScrollRestorationKey;
-  window.history.scrollRestoration = "manual";
-  const onScroll = (event) => {
-    if (ignoreScroll || !router.isScrollRestoring) {
-      return;
-    }
-    let elementSelector = "";
-    if (event.target === document || event.target === window) {
-      elementSelector = "window";
-    } else {
-      const attrId = event.target.getAttribute(
-        "data-scroll-restoration-id"
-      );
-      if (attrId) {
-        elementSelector = `[data-scroll-restoration-id="${attrId}"]`;
-      } else {
-        elementSelector = getCssSelector(event.target);
-      }
-    }
-    const restoreKey = getKey(router.state.location);
-    scrollRestorationCache.set((state) => {
-      const keyEntry = state[restoreKey] = state[restoreKey] || {};
-      const elementEntry = keyEntry[elementSelector] = keyEntry[elementSelector] || {};
-      if (elementSelector === "window") {
-        elementEntry.scrollX = window.scrollX || 0;
-        elementEntry.scrollY = window.scrollY || 0;
-      } else if (elementSelector) {
-        const element = document.querySelector(elementSelector);
-        if (element) {
-          elementEntry.scrollX = element.scrollLeft || 0;
-          elementEntry.scrollY = element.scrollTop || 0;
-        }
-      }
-      return state;
-    });
-  };
-  if (typeof document !== "undefined") {
-    document.addEventListener("scroll", throttle(onScroll, 100), true);
-  }
-  router.subscribe("onRendered", (event) => {
-    const cacheKey = getKey(event.toLocation);
-    if (!router.resetNextScroll) {
-      router.resetNextScroll = true;
-      return;
-    }
-    restoreScroll(
-      storageKey,
-      cacheKey,
-      router.options.scrollRestorationBehavior || void 0,
-      router.isScrollRestoring || void 0,
-      router.options.scrollToTopSelectors || void 0
-    );
-    if (router.isScrollRestoring) {
-      scrollRestorationCache.set((state) => {
-        state[cacheKey] = state[cacheKey] || {};
-        return state;
-      });
-    }
-  });
-}
 function ScrollRestoration() {
   const router = useRouter();
   const getKey = router.options.getScrollRestorationKey || defaultGetScrollRestorationKey;
@@ -194,12 +19,6 @@ function ScrollRestoration() {
   );
 }
 export {
-  ScrollRestoration,
-  defaultGetScrollRestorationKey,
-  getCssSelector,
-  restoreScroll,
-  scrollRestorationCache,
-  setupScrollRestoration,
-  storageKey
+  ScrollRestoration
 };
 //# sourceMappingURL=scroll-restoration.js.map

package/dist/esm/scroll-restoration.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-restoration.js","sources":["../../src/scroll-restoration.tsx"],"sourcesContent":["import { functionalUpdate } from '@tanstack/router-core'\nimport { useRouter } from './useRouter'\nimport { ScriptOnce } from './ScriptOnce'\nimport type {\n  AnyRouter,\n  NonNullableUpdater,\n  ParsedLocation,\n} from '@tanstack/router-core'\n\nexport type ScrollRestorationEntry = { scrollX: number; scrollY: number }\n\nexport type ScrollRestorationByElement = Record<string, ScrollRestorationEntry>\n\nexport type ScrollRestorationByKey = Record<string, ScrollRestorationByElement>\n\nexport type ScrollRestorationCache = {\n  state: ScrollRestorationByKey\n  set: (updater: NonNullableUpdater<ScrollRestorationByKey>) => void\n}\nexport type ScrollRestorationOptions = {\n  getKey?: (location: ParsedLocation) => string\n  scrollBehavior?: ScrollToOptions['behavior']\n}\n\nexport const storageKey = 'tsr-scroll-restoration-v1_3'\nlet sessionsStorage = false\ntry {\n  sessionsStorage =\n    typeof window !== 'undefined' && typeof window.sessionStorage === 'object'\n} catch {}\nconst throttle = (fn: (...args: Array<any>) => void, wait: number) => {\n  let timeout: any\n  return (...args: Array<any>) => {\n    if (!timeout) {\n      timeout = setTimeout(() => {\n        fn(...args)\n        timeout = null\n      }, wait)\n    }\n  }\n}\nexport const scrollRestorationCache: ScrollRestorationCache = sessionsStorage\n  ? (() => {\n      const state: ScrollRestorationByKey =\n        JSON.parse(window.sessionStorage.getItem(storageKey) || 'null') || {}\n\n      return {\n        state,\n        // This setter is simply to make sure that we set the sessionStorage right\n        // after the state is updated. It doesn't necessarily need to be a functional\n        // update.\n        set: (updater) => (\n          (scrollRestorationCache.state =\n            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n            functionalUpdate(updater, scrollRestorationCache.state) ||\n            scrollRestorationCache.state),\n          window.sessionStorage.setItem(\n            storageKey,\n            JSON.stringify(scrollRestorationCache.state),\n          )\n        ),\n      }\n    })()\n  : (undefined as any)\n/**\n * The default `getKey` function for `useScrollRestoration`.\n * It returns the `key` from the location state or the `href` of the location.\n *\n * The `location.href` is used as a fallback to support the use case where the location state is not available like the initial render.\n */\n\nexport const defaultGetScrollRestorationKey = (location: ParsedLocation) => {\n  return location.state.key! || location.href\n}\n\nexport function getCssSelector(el: any): string {\n  const path = []\n  let parent\n  while ((parent = el.parentNode)) {\n    path.unshift(\n      `${el.tagName}:nth-child(${([].indexOf as any).call(parent.children, el) + 1})`,\n    )\n    el = parent\n  }\n  return `${path.join(' > ')}`.toLowerCase()\n}\n\nlet ignoreScroll = false\n\n// NOTE: This function must remain pure and not use any outside variables\n// unless they are passed in as arguments. Why? Because we need to be able to\n// toString() it into a script tag to execute as early as possible in the browser\n// during SSR. Additionally, we also call it from within the router lifecycle\nexport function restoreScroll(\n  storageKey: string,\n  key: string | undefined,\n  behavior: ScrollToOptions['behavior'] | undefined,\n  shouldScrollRestoration: boolean | undefined,\n  scrollToTopSelectors: Array<string> | undefined,\n) {\n  let byKey: ScrollRestorationByKey\n\n  try {\n    byKey = JSON.parse(sessionStorage.getItem(storageKey) || '{}')\n  } catch (error: any) {\n    console.error(error)\n    return\n  }\n\n  const resolvedKey = key || window.history.state?.key\n  const elementEntries = byKey[resolvedKey]\n\n  //\n  ignoreScroll = true\n\n  //\n  ;(() => {\n    // If we have a cached entry for this location state,\n    // we always need to prefer that over the hash scroll.\n    if (shouldScrollRestoration && elementEntries) {\n      for (const elementSelector in elementEntries) {\n        const entry = elementEntries[elementSelector]!\n        if (elementSelector === 'window') {\n          window.scrollTo({\n            top: entry.scrollY,\n            left: entry.scrollX,\n            behavior,\n          })\n        } else if (elementSelector) {\n          const element = document.querySelector(elementSelector)\n          if (element) {\n            element.scrollLeft = entry.scrollX\n            element.scrollTop = entry.scrollY\n          }\n        }\n      }\n\n      return\n    }\n\n    // If we don't have a cached entry for the hash,\n    // Which means we've never seen this location before,\n    // we need to check if there is a hash in the URL.\n    // If there is, we need to scroll it's ID into view.\n    const hash = window.location.hash.split('#')[1]\n\n    if (hash) {\n      const hashScrollIntoViewOptions =\n        (window.history.state || {}).__hashScrollIntoViewOptions ?? true\n\n      if (hashScrollIntoViewOptions) {\n        const el = document.getElementById(hash)\n        if (el) {\n          el.scrollIntoView(hashScrollIntoViewOptions)\n        }\n      }\n\n      return\n    }\n\n    // If there is no cached entry for the hash and there is no hash in the URL,\n    // we need to scroll to the top of the page for every scrollToTop element\n    ;[\n      'window',\n      ...(scrollToTopSelectors?.filter((d) => d !== 'window') ?? []),\n    ].forEach((selector) => {\n      const element =\n        selector === 'window' ? window : document.querySelector(selector)\n      if (element) {\n        element.scrollTo({\n          top: 0,\n          left: 0,\n          behavior,\n        })\n      }\n    })\n  })()\n\n  //\n  ignoreScroll = false\n}\n\nexport function setupScrollRestoration(router: AnyRouter, force?: boolean) {\n  const shouldScrollRestoration =\n    force ?? router.options.scrollRestoration ?? false\n\n  if (shouldScrollRestoration) {\n    router.isScrollRestoring = true\n  }\n\n  if (typeof document === 'undefined' || router.isScrollRestorationSetup) {\n    return\n  }\n\n  router.isScrollRestorationSetup = true\n\n  //\n  ignoreScroll = false\n\n  const getKey =\n    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey\n\n  window.history.scrollRestoration = 'manual'\n\n  // // Create a MutationObserver to monitor DOM changes\n  // const mutationObserver = new MutationObserver(() => {\n  //   ;ignoreScroll = true\n  //   requestAnimationFrame(() => {\n  //     ;ignoreScroll = false\n\n  //     // Attempt to restore scroll position on each dom\n  //     // mutation until the user scrolls. We do this\n  //     // because dynamic content may come in at different\n  //     // ticks after the initial render and we want to\n  //     // keep up with that content as much as possible.\n  //     // As soon as the user scrolls, we no longer need\n  //     // to attempt router.\n  //     // console.log('mutation observer restoreScroll')\n  //     restoreScroll(\n  //       storageKey,\n  //       getKey(router.state.location),\n  //       router.options.scrollRestorationBehavior,\n  //     )\n  //   })\n  // })\n\n  // const observeDom = () => {\n  //   // Observe changes to the entire document\n  //   mutationObserver.observe(document, {\n  //     childList: true, // Detect added or removed child nodes\n  //     subtree: true, // Monitor all descendants\n  //     characterData: true, // Detect text content changes\n  //   })\n  // }\n\n  // const unobserveDom = () => {\n  //   mutationObserver.disconnect()\n  // }\n\n  // observeDom()\n\n  const onScroll = (event: Event) => {\n    // unobserveDom()\n\n    if (ignoreScroll || !router.isScrollRestoring) {\n      return\n    }\n\n    let elementSelector = ''\n\n    if (event.target === document || event.target === window) {\n      elementSelector = 'window'\n    } else {\n      const attrId = (event.target as Element).getAttribute(\n        'data-scroll-restoration-id',\n      )\n\n      if (attrId) {\n        elementSelector = `[data-scroll-restoration-id=\"${attrId}\"]`\n      } else {\n        elementSelector = getCssSelector(event.target)\n      }\n    }\n\n    const restoreKey = getKey(router.state.location)\n\n    scrollRestorationCache.set((state) => {\n      const keyEntry = (state[restoreKey] =\n        state[restoreKey] || ({} as ScrollRestorationByElement))\n\n      const elementEntry = (keyEntry[elementSelector] =\n        keyEntry[elementSelector] || ({} as ScrollRestorationEntry))\n\n      if (elementSelector === 'window') {\n        elementEntry.scrollX = window.scrollX || 0\n        elementEntry.scrollY = window.scrollY || 0\n      } else if (elementSelector) {\n        const element = document.querySelector(elementSelector)\n        if (element) {\n          elementEntry.scrollX = element.scrollLeft || 0\n          elementEntry.scrollY = element.scrollTop || 0\n        }\n      }\n\n      return state\n    })\n  }\n\n  // Throttle the scroll event to avoid excessive updates\n  if (typeof document !== 'undefined') {\n    document.addEventListener('scroll', throttle(onScroll, 100), true)\n  }\n\n  router.subscribe('onRendered', (event) => {\n    // unobserveDom()\n\n    const cacheKey = getKey(event.toLocation)\n\n    // If the user doesn't want to restore the scroll position,\n    // we don't need to do anything.\n    if (!router.resetNextScroll) {\n      router.resetNextScroll = true\n      return\n    }\n\n    restoreScroll(\n      storageKey,\n      cacheKey,\n      router.options.scrollRestorationBehavior || undefined,\n      router.isScrollRestoring || undefined,\n      router.options.scrollToTopSelectors || undefined,\n    )\n\n    if (router.isScrollRestoring) {\n      // Mark the location as having been seen\n      scrollRestorationCache.set((state) => {\n        state[cacheKey] = state[cacheKey] || ({} as ScrollRestorationByElement)\n\n        return state\n      })\n    }\n  })\n}\n\nexport function ScrollRestoration() {\n  const router = useRouter()\n  const getKey =\n    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey\n  const userKey = getKey(router.latestLocation)\n  const resolvedKey =\n    userKey !== defaultGetScrollRestorationKey(router.latestLocation)\n      ? userKey\n      : null\n\n  if (!router.isScrollRestoring || !router.isServer) {\n    return null\n  }\n\n  return (\n    <ScriptOnce\n      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}\n      log={false}\n    />\n  )\n}\n"],"names":["storageKey"],"mappings":";;;;AAwBO,MAAM,aAAa;AAC1B,IAAI,kBAAkB;AACtB,IAAI;AACF,oBACE,OAAO,WAAW,eAAe,OAAO,OAAO,mBAAmB;AACtE,QAAQ;AAAC;AACT,MAAM,WAAW,CAAC,IAAmC,SAAiB;AAChE,MAAA;AACJ,SAAO,IAAI,SAAqB;AAC9B,QAAI,CAAC,SAAS;AACZ,gBAAU,WAAW,MAAM;AACzB,WAAG,GAAG,IAAI;AACA,kBAAA;AAAA,SACT,IAAI;AAAA,IAAA;AAAA,EAEX;AACF;AACa,MAAA,yBAAiD,mBACzD,MAAM;AACC,QAAA,QACJ,KAAK,MAAM,OAAO,eAAe,QAAQ,UAAU,KAAK,MAAM,KAAK,CAAC;AAE/D,SAAA;AAAA,IACL;AAAA;AAAA;AAAA;AAAA,IAIA,KAAK,CAAC,aACH,uBAAuB;AAAA,IAEtB,iBAAiB,SAAS,uBAAuB,KAAK,KACtD,uBAAuB,OACzB,OAAO,eAAe;AAAA,MACpB;AAAA,MACA,KAAK,UAAU,uBAAuB,KAAK;AAAA,IAC7C;AAAA,EAEJ;AACF,OACC;AAQQ,MAAA,iCAAiC,CAAC,aAA6B;AACnE,SAAA,SAAS,MAAM,OAAQ,SAAS;AACzC;AAEO,SAAS,eAAe,IAAiB;AAC9C,QAAM,OAAO,CAAC;AACV,MAAA;AACI,SAAA,SAAS,GAAG,YAAa;AAC1B,SAAA;AAAA,MACH,GAAG,GAAG,OAAO,cAAe,CAAA,EAAG,QAAgB,KAAK,OAAO,UAAU,EAAE,IAAI,CAAC;AAAA,IAC9E;AACK,SAAA;AAAA,EAAA;AAEP,SAAO,GAAG,KAAK,KAAK,KAAK,CAAC,GAAG,YAAY;AAC3C;AAEA,IAAI,eAAe;AAMZ,SAAS,cACdA,aACA,KACA,UACA,yBACA,sBACA;;AACI,MAAA;AAEA,MAAA;AACF,YAAQ,KAAK,MAAM,eAAe,QAAQA,WAAU,KAAK,IAAI;AAAA,WACtD,OAAY;AACnB,YAAQ,MAAM,KAAK;AACnB;AAAA,EAAA;AAGF,QAAM,cAAc,SAAO,YAAO,QAAQ,UAAf,mBAAsB;AAC3C,QAAA,iBAAiB,MAAM,WAAW;AAGzB,iBAAA;AAGd,GAAC,MAAM;AAGN,QAAI,2BAA2B,gBAAgB;AAC7C,iBAAW,mBAAmB,gBAAgB;AACtC,cAAA,QAAQ,eAAe,eAAe;AAC5C,YAAI,oBAAoB,UAAU;AAChC,iBAAO,SAAS;AAAA,YACd,KAAK,MAAM;AAAA,YACX,MAAM,MAAM;AAAA,YACZ;AAAA,UAAA,CACD;AAAA,mBACQ,iBAAiB;AACpB,gBAAA,UAAU,SAAS,cAAc,eAAe;AACtD,cAAI,SAAS;AACX,oBAAQ,aAAa,MAAM;AAC3B,oBAAQ,YAAY,MAAM;AAAA,UAAA;AAAA,QAC5B;AAAA,MACF;AAGF;AAAA,IAAA;AAOF,UAAM,OAAO,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,CAAC;AAE9C,QAAI,MAAM;AACR,YAAM,6BACH,OAAO,QAAQ,SAAS,CAAA,GAAI,+BAA+B;AAE9D,UAAI,2BAA2B;AACvB,cAAA,KAAK,SAAS,eAAe,IAAI;AACvC,YAAI,IAAI;AACN,aAAG,eAAe,yBAAyB;AAAA,QAAA;AAAA,MAC7C;AAGF;AAAA,IAAA;AAKD;AAAA,MACC;AAAA,MACA,IAAI,6DAAsB,OAAO,CAAC,MAAM,MAAM,cAAa,CAAA;AAAA,IAAC,EAC5D,QAAQ,CAAC,aAAa;AACtB,YAAM,UACJ,aAAa,WAAW,SAAS,SAAS,cAAc,QAAQ;AAClE,UAAI,SAAS;AACX,gBAAQ,SAAS;AAAA,UACf,KAAK;AAAA,UACL,MAAM;AAAA,UACN;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA,GACA;AAGY,iBAAA;AACjB;AAEgB,SAAA,uBAAuB,QAAmB,OAAiB;AACzE,QAAM,0BACJ,SAAS,OAAO,QAAQ,qBAAqB;AAE/C,MAAI,yBAAyB;AAC3B,WAAO,oBAAoB;AAAA,EAAA;AAG7B,MAAI,OAAO,aAAa,eAAe,OAAO,0BAA0B;AACtE;AAAA,EAAA;AAGF,SAAO,2BAA2B;AAGnB,iBAAA;AAET,QAAA,SACJ,OAAO,QAAQ,2BAA2B;AAE5C,SAAO,QAAQ,oBAAoB;AAuC7B,QAAA,WAAW,CAAC,UAAiB;AAG7B,QAAA,gBAAgB,CAAC,OAAO,mBAAmB;AAC7C;AAAA,IAAA;AAGF,QAAI,kBAAkB;AAEtB,QAAI,MAAM,WAAW,YAAY,MAAM,WAAW,QAAQ;AACtC,wBAAA;AAAA,IAAA,OACb;AACC,YAAA,SAAU,MAAM,OAAmB;AAAA,QACvC;AAAA,MACF;AAEA,UAAI,QAAQ;AACV,0BAAkB,gCAAgC,MAAM;AAAA,MAAA,OACnD;AACa,0BAAA,eAAe,MAAM,MAAM;AAAA,MAAA;AAAA,IAC/C;AAGF,UAAM,aAAa,OAAO,OAAO,MAAM,QAAQ;AAExB,2BAAA,IAAI,CAAC,UAAU;AACpC,YAAM,WAAY,MAAM,UAAU,IAChC,MAAM,UAAU,KAAM,CAAC;AAEzB,YAAM,eAAgB,SAAS,eAAe,IAC5C,SAAS,eAAe,KAAM,CAAC;AAEjC,UAAI,oBAAoB,UAAU;AACnB,qBAAA,UAAU,OAAO,WAAW;AAC5B,qBAAA,UAAU,OAAO,WAAW;AAAA,iBAChC,iBAAiB;AACpB,cAAA,UAAU,SAAS,cAAc,eAAe;AACtD,YAAI,SAAS;AACE,uBAAA,UAAU,QAAQ,cAAc;AAChC,uBAAA,UAAU,QAAQ,aAAa;AAAA,QAAA;AAAA,MAC9C;AAGK,aAAA;AAAA,IAAA,CACR;AAAA,EACH;AAGI,MAAA,OAAO,aAAa,aAAa;AACnC,aAAS,iBAAiB,UAAU,SAAS,UAAU,GAAG,GAAG,IAAI;AAAA,EAAA;AAG5D,SAAA,UAAU,cAAc,CAAC,UAAU;AAGlC,UAAA,WAAW,OAAO,MAAM,UAAU;AAIpC,QAAA,CAAC,OAAO,iBAAiB;AAC3B,aAAO,kBAAkB;AACzB;AAAA,IAAA;AAGF;AAAA,MACE;AAAA,MACA;AAAA,MACA,OAAO,QAAQ,6BAA6B;AAAA,MAC5C,OAAO,qBAAqB;AAAA,MAC5B,OAAO,QAAQ,wBAAwB;AAAA,IACzC;AAEA,QAAI,OAAO,mBAAmB;AAEL,6BAAA,IAAI,CAAC,UAAU;AACpC,cAAM,QAAQ,IAAI,MAAM,QAAQ,KAAM,CAAC;AAEhC,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAAA,EACH,CACD;AACH;AAEO,SAAS,oBAAoB;AAClC,QAAM,SAAS,UAAU;AACnB,QAAA,SACJ,OAAO,QAAQ,2BAA2B;AACtC,QAAA,UAAU,OAAO,OAAO,cAAc;AAC5C,QAAM,cACJ,YAAY,+BAA+B,OAAO,cAAc,IAC5D,UACA;AAEN,MAAI,CAAC,OAAO,qBAAqB,CAAC,OAAO,UAAU;AAC1C,WAAA;AAAA,EAAA;AAIP,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU,IAAI,cAAc,SAAU,CAAA,KAAK,KAAK,UAAU,UAAU,CAAC,IAAI,KAAK,UAAU,WAAW,CAAC;AAAA,MACpG,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;"}
+{"version":3,"file":"scroll-restoration.js","sources":["../../src/scroll-restoration.tsx"],"sourcesContent":["import {\n  defaultGetScrollRestorationKey,\n  restoreScroll,\n  storageKey,\n} from '@tanstack/router-core'\nimport { useRouter } from './useRouter'\nimport { ScriptOnce } from './ScriptOnce'\n\nexport function ScrollRestoration() {\n  const router = useRouter()\n  const getKey =\n    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey\n  const userKey = getKey(router.latestLocation)\n  const resolvedKey =\n    userKey !== defaultGetScrollRestorationKey(router.latestLocation)\n      ? userKey\n      : null\n\n  if (!router.isScrollRestoring || !router.isServer) {\n    return null\n  }\n\n  return (\n    <ScriptOnce\n      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}\n      log={false}\n    />\n  )\n}\n"],"names":[],"mappings":";;;;AAQO,SAAS,oBAAoB;AAClC,QAAM,SAAS,UAAU;AACnB,QAAA,SACJ,OAAO,QAAQ,2BAA2B;AACtC,QAAA,UAAU,OAAO,OAAO,cAAc;AAC5C,QAAM,cACJ,YAAY,+BAA+B,OAAO,cAAc,IAC5D,UACA;AAEN,MAAI,CAAC,OAAO,qBAAqB,CAAC,OAAO,UAAU;AAC1C,WAAA;AAAA,EAAA;AAIP,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU,IAAI,cAAc,SAAU,CAAA,KAAK,KAAK,UAAU,UAAU,CAAC,IAAI,KAAK,UAAU,WAAW,CAAC;AAAA,MACpG,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.114.13",
+  "version": "1.114.15",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.114.12",
-    "@tanstack/router-core": "1.114.12"
+    "@tanstack/router-core": "1.114.15"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/ScrollRestoration.tsx

@@ -1,12 +1,15 @@
-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'
+} from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import type {
+  ParsedLocation,
+  ScrollRestorationEntry,
+  ScrollRestorationOptions,
+} from '@tanstack/router-core'
 
 function useScrollRestoration() {
   const router = useRouter()
@@ -32,16 +35,16 @@ export function useElementScrollRestoration(
   options: (
     | {
         id: string
-        getElement?: () => Element | undefined | null
+        getElement?: () => Window | Element | undefined | null
       }
     | {
         id?: string
-        getElement: () => Element | undefined | null
+        getElement: () => Window | Element | undefined | null
       }
   ) & {
     getKey?: (location: ParsedLocation) => string
   },
-) {
+): ScrollRestorationEntry | undefined {
   useScrollRestoration()
 
   const router = useRouter()
@@ -56,7 +59,8 @@ export function useElementScrollRestoration(
     if (!element) {
       return
     }
-    elementSelector = getCssSelector(element)
+    elementSelector =
+      element instanceof Window ? 'window' : getCssSelector(element)
   }
 
   const restoreKey = getKey(router.latestLocation)

package/src/router.ts

@@ -25,12 +25,12 @@ import {
   replaceEqualDeep,
   resolvePath,
   rootRouteId,
+  setupScrollRestoration,
   trimPath,
   trimPathLeft,
   trimPathRight,
 } from '@tanstack/router-core'
 
-import { setupScrollRestoration } from './scroll-restoration'
 import type * as React from 'react'
 import type { HistoryLocation, RouterHistory } from '@tanstack/history'
 

package/src/scroll-restoration.tsx

@@ -1,326 +1,10 @@
-import { functionalUpdate } from '@tanstack/router-core'
+import {
+  defaultGetScrollRestorationKey,
+  restoreScroll,
+  storageKey,
+} from '@tanstack/router-core'
 import { useRouter } from './useRouter'
 import { ScriptOnce } from './ScriptOnce'
-import type {
-  AnyRouter,
-  NonNullableUpdater,
-  ParsedLocation,
-} from '@tanstack/router-core'
-
-export type ScrollRestorationEntry = { scrollX: number; scrollY: number }
-
-export type ScrollRestorationByElement = Record<string, ScrollRestorationEntry>
-
-export type ScrollRestorationByKey = Record<string, ScrollRestorationByElement>
-
-export type ScrollRestorationCache = {
-  state: ScrollRestorationByKey
-  set: (updater: NonNullableUpdater<ScrollRestorationByKey>) => void
-}
-export type ScrollRestorationOptions = {
-  getKey?: (location: ParsedLocation) => string
-  scrollBehavior?: ScrollToOptions['behavior']
-}
-
-export const storageKey = 'tsr-scroll-restoration-v1_3'
-let sessionsStorage = false
-try {
-  sessionsStorage =
-    typeof window !== 'undefined' && typeof window.sessionStorage === 'object'
-} catch {}
-const throttle = (fn: (...args: Array<any>) => void, wait: number) => {
-  let timeout: any
-  return (...args: Array<any>) => {
-    if (!timeout) {
-      timeout = setTimeout(() => {
-        fn(...args)
-        timeout = null
-      }, wait)
-    }
-  }
-}
-export const scrollRestorationCache: ScrollRestorationCache = sessionsStorage
-  ? (() => {
-      const state: ScrollRestorationByKey =
-        JSON.parse(window.sessionStorage.getItem(storageKey) || 'null') || {}
-
-      return {
-        state,
-        // This setter is simply to make sure that we set the sessionStorage right
-        // after the state is updated. It doesn't necessarily need to be a functional
-        // update.
-        set: (updater) => (
-          (scrollRestorationCache.state =
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            functionalUpdate(updater, scrollRestorationCache.state) ||
-            scrollRestorationCache.state),
-          window.sessionStorage.setItem(
-            storageKey,
-            JSON.stringify(scrollRestorationCache.state),
-          )
-        ),
-      }
-    })()
-  : (undefined as any)
-/**
- * The default `getKey` function for `useScrollRestoration`.
- * It returns the `key` from the location state or the `href` of the location.
- *
- * The `location.href` is used as a fallback to support the use case where the location state is not available like the initial render.
- */
-
-export const defaultGetScrollRestorationKey = (location: ParsedLocation) => {
-  return location.state.key! || location.href
-}
-
-export function getCssSelector(el: any): string {
-  const path = []
-  let 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()
-}
-
-let ignoreScroll = false
-
-// NOTE: This function must remain pure and not use any outside variables
-// unless they are passed in as arguments. Why? Because we need to be able to
-// toString() it into a script tag to execute as early as possible in the browser
-// during SSR. Additionally, we also call it from within the router lifecycle
-export function restoreScroll(
-  storageKey: string,
-  key: string | undefined,
-  behavior: ScrollToOptions['behavior'] | undefined,
-  shouldScrollRestoration: boolean | undefined,
-  scrollToTopSelectors: Array<string> | undefined,
-) {
-  let byKey: ScrollRestorationByKey
-
-  try {
-    byKey = JSON.parse(sessionStorage.getItem(storageKey) || '{}')
-  } catch (error: any) {
-    console.error(error)
-    return
-  }
-
-  const resolvedKey = key || window.history.state?.key
-  const elementEntries = byKey[resolvedKey]
-
-  //
-  ignoreScroll = true
-
-  //
-  ;(() => {
-    // If we have a cached entry for this location state,
-    // we always need to prefer that over the hash scroll.
-    if (shouldScrollRestoration && elementEntries) {
-      for (const elementSelector in elementEntries) {
-        const entry = elementEntries[elementSelector]!
-        if (elementSelector === 'window') {
-          window.scrollTo({
-            top: entry.scrollY,
-            left: entry.scrollX,
-            behavior,
-          })
-        } else if (elementSelector) {
-          const element = document.querySelector(elementSelector)
-          if (element) {
-            element.scrollLeft = entry.scrollX
-            element.scrollTop = entry.scrollY
-          }
-        }
-      }
-
-      return
-    }
-
-    // If we don't have a cached entry for the hash,
-    // Which means we've never seen this location before,
-    // we need to check if there is a hash in the URL.
-    // If there is, we need to scroll it's ID into view.
-    const hash = window.location.hash.split('#')[1]
-
-    if (hash) {
-      const hashScrollIntoViewOptions =
-        (window.history.state || {}).__hashScrollIntoViewOptions ?? true
-
-      if (hashScrollIntoViewOptions) {
-        const el = document.getElementById(hash)
-        if (el) {
-          el.scrollIntoView(hashScrollIntoViewOptions)
-        }
-      }
-
-      return
-    }
-
-    // If there is no cached entry for the hash and there is no hash in the URL,
-    // we need to scroll to the top of the page for every scrollToTop element
-    ;[
-      'window',
-      ...(scrollToTopSelectors?.filter((d) => d !== 'window') ?? []),
-    ].forEach((selector) => {
-      const element =
-        selector === 'window' ? window : document.querySelector(selector)
-      if (element) {
-        element.scrollTo({
-          top: 0,
-          left: 0,
-          behavior,
-        })
-      }
-    })
-  })()
-
-  //
-  ignoreScroll = false
-}
-
-export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
-  const shouldScrollRestoration =
-    force ?? router.options.scrollRestoration ?? false
-
-  if (shouldScrollRestoration) {
-    router.isScrollRestoring = true
-  }
-
-  if (typeof document === 'undefined' || router.isScrollRestorationSetup) {
-    return
-  }
-
-  router.isScrollRestorationSetup = true
-
-  //
-  ignoreScroll = false
-
-  const getKey =
-    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
-
-  window.history.scrollRestoration = 'manual'
-
-  // // Create a MutationObserver to monitor DOM changes
-  // const mutationObserver = new MutationObserver(() => {
-  //   ;ignoreScroll = true
-  //   requestAnimationFrame(() => {
-  //     ;ignoreScroll = false
-
-  //     // Attempt to restore scroll position on each dom
-  //     // mutation until the user scrolls. We do this
-  //     // because dynamic content may come in at different
-  //     // ticks after the initial render and we want to
-  //     // keep up with that content as much as possible.
-  //     // As soon as the user scrolls, we no longer need
-  //     // to attempt router.
-  //     // console.log('mutation observer restoreScroll')
-  //     restoreScroll(
-  //       storageKey,
-  //       getKey(router.state.location),
-  //       router.options.scrollRestorationBehavior,
-  //     )
-  //   })
-  // })
-
-  // const observeDom = () => {
-  //   // Observe changes to the entire document
-  //   mutationObserver.observe(document, {
-  //     childList: true, // Detect added or removed child nodes
-  //     subtree: true, // Monitor all descendants
-  //     characterData: true, // Detect text content changes
-  //   })
-  // }
-
-  // const unobserveDom = () => {
-  //   mutationObserver.disconnect()
-  // }
-
-  // observeDom()
-
-  const onScroll = (event: Event) => {
-    // unobserveDom()
-
-    if (ignoreScroll || !router.isScrollRestoring) {
-      return
-    }
-
-    let elementSelector = ''
-
-    if (event.target === document || event.target === window) {
-      elementSelector = 'window'
-    } else {
-      const attrId = (event.target as Element).getAttribute(
-        'data-scroll-restoration-id',
-      )
-
-      if (attrId) {
-        elementSelector = `[data-scroll-restoration-id="${attrId}"]`
-      } else {
-        elementSelector = getCssSelector(event.target)
-      }
-    }
-
-    const restoreKey = getKey(router.state.location)
-
-    scrollRestorationCache.set((state) => {
-      const keyEntry = (state[restoreKey] =
-        state[restoreKey] || ({} as ScrollRestorationByElement))
-
-      const elementEntry = (keyEntry[elementSelector] =
-        keyEntry[elementSelector] || ({} as ScrollRestorationEntry))
-
-      if (elementSelector === 'window') {
-        elementEntry.scrollX = window.scrollX || 0
-        elementEntry.scrollY = window.scrollY || 0
-      } else if (elementSelector) {
-        const element = document.querySelector(elementSelector)
-        if (element) {
-          elementEntry.scrollX = element.scrollLeft || 0
-          elementEntry.scrollY = element.scrollTop || 0
-        }
-      }
-
-      return state
-    })
-  }
-
-  // Throttle the scroll event to avoid excessive updates
-  if (typeof document !== 'undefined') {
-    document.addEventListener('scroll', throttle(onScroll, 100), true)
-  }
-
-  router.subscribe('onRendered', (event) => {
-    // unobserveDom()
-
-    const cacheKey = getKey(event.toLocation)
-
-    // If the user doesn't want to restore the scroll position,
-    // we don't need to do anything.
-    if (!router.resetNextScroll) {
-      router.resetNextScroll = true
-      return
-    }
-
-    restoreScroll(
-      storageKey,
-      cacheKey,
-      router.options.scrollRestorationBehavior || undefined,
-      router.isScrollRestoring || undefined,
-      router.options.scrollToTopSelectors || undefined,
-    )
-
-    if (router.isScrollRestoring) {
-      // Mark the location as having been seen
-      scrollRestorationCache.set((state) => {
-        state[cacheKey] = state[cacheKey] || ({} as ScrollRestorationByElement)
-
-        return state
-      })
-    }
-  })
-}
 
 export function ScrollRestoration() {
   const router = useRouter()