@tanstack/react-router 1.98.0 → 1.98.3

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

@@ -1,19 +1,29 @@
-import { ParsedLocation } from '@tanstack/router-core';
+import { AnyRouter } from './router.js';
+import { 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 function useScrollRestoration(options?: ScrollRestorationOptions): void;
-export declare function ScrollRestoration(props: ScrollRestorationOptions): null;
-export declare function useElementScrollRestoration(options: ({
-    id: string;
-    getElement?: () => Element | undefined | null;
-} | {
-    id?: string;
-    getElement: () => Element | undefined | null;
-}) & {
-    getKey?: (location: ParsedLocation) => string;
-}): {
-    scrollX: number;
-    scrollY: number;
-} | undefined;
+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, behavior?: ScrollToOptions['behavior'], shouldScrollRestoration?: boolean): 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,174 +1,192 @@
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { functionalUpdate } from "@tanstack/router-core";
 import { useRouter } from "./useRouter.js";
-const useLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-const windowKey = "window";
-const delimiter = "___";
-let weakScrolledElements = /* @__PURE__ */ new WeakSet();
+import { ScriptOnce } from "./ScriptOnce.js";
+const storageKey = "tsr-scroll-restoration-v1_3";
 const sessionsStorage = typeof window !== "undefined" && window.sessionStorage;
-const cache = sessionsStorage ? (() => {
-  const storageKey = "tsr-scroll-restoration-v2";
-  const state = JSON.parse(
-    window.sessionStorage.getItem(storageKey) || "null"
-  ) || { cached: {}, next: {} };
+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,
-    set: (updater) => {
-      cache.state = functionalUpdate(updater, cache.state);
-      window.sessionStorage.setItem(storageKey, JSON.stringify(cache.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 defaultGetKey = (location) => {
+const defaultGetScrollRestorationKey = (location) => {
   return location.state.key || location.href;
 };
-function useScrollRestoration(options) {
-  const router = useRouter();
-  useLayoutEffect(() => {
-    const getKey = (options == null ? void 0 : options.getKey) || defaultGetKey;
-    const { history } = window;
-    history.scrollRestoration = "manual";
-    const onScroll = (event) => {
-      if (weakScrolledElements.has(event.target)) return;
-      weakScrolledElements.add(event.target);
-      let elementSelector = "";
-      if (event.target === document || event.target === window) {
-        elementSelector = windowKey;
-      } else {
-        const attrId = event.target.getAttribute(
-          "data-scroll-restoration-id"
-        );
-        if (attrId) {
-          elementSelector = `[data-scroll-restoration-id="${attrId}"]`;
-        } else {
-          elementSelector = getCssSelector(event.target);
-        }
-      }
-      if (!cache.state.next[elementSelector]) {
-        cache.set((c) => ({
-          ...c,
-          next: {
-            ...c.next,
-            [elementSelector]: {
-              scrollX: NaN,
-              scrollY: NaN
-            }
+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) {
+  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;
           }
-        }));
+        }
       }
-    };
-    if (typeof document !== "undefined") {
-      document.addEventListener("scroll", onScroll, true);
+      return;
     }
-    const unsubOnBeforeLoad = router.subscribe("onBeforeLoad", (event) => {
-      if (event.hrefChanged) {
-        const restoreKey = getKey(event.fromLocation);
-        for (const elementSelector in cache.state.next) {
-          const entry = cache.state.next[elementSelector];
-          if (elementSelector === windowKey) {
-            entry.scrollX = window.scrollX || 0;
-            entry.scrollY = window.scrollY || 0;
-          } else if (elementSelector) {
-            const element = document.querySelector(elementSelector);
-            entry.scrollX = (element == null ? void 0 : element.scrollLeft) || 0;
-            entry.scrollY = (element == null ? void 0 : element.scrollTop) || 0;
-          }
-          cache.set((c) => {
-            const next = { ...c.next };
-            delete next[elementSelector];
-            return {
-              ...c,
-              next,
-              cached: {
-                ...c.cached,
-                [[restoreKey, elementSelector].join(delimiter)]: entry
-              }
-            };
-          });
+    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.scrollTo({
+      top: 0,
+      left: 0,
+      behavior
     });
-    const unsubOnBeforeRouteMount = router.subscribe(
-      "onBeforeRouteMount",
-      (event) => {
-        if (event.hrefChanged) {
-          if (!router.resetNextScroll) {
-            return;
-          }
-          router.resetNextScroll = true;
-          const restoreKey = getKey(event.toLocation);
-          let windowRestored = false;
-          for (const cacheKey in cache.state.cached) {
-            const entry = cache.state.cached[cacheKey];
-            const [key, elementSelector] = cacheKey.split(delimiter);
-            if (key === restoreKey) {
-              if (elementSelector === windowKey) {
-                windowRestored = true;
-                window.scrollTo({
-                  top: entry.scrollY,
-                  left: entry.scrollX,
-                  behavior: options == null ? void 0 : options.scrollBehavior
-                });
-              } else if (elementSelector) {
-                const element = document.querySelector(elementSelector);
-                if (element) {
-                  element.scrollLeft = entry.scrollX;
-                  element.scrollTop = entry.scrollY;
-                }
-              }
-            }
-          }
-          if (!windowRestored) {
-            window.scrollTo(0, 0);
-          }
-          cache.set((c) => ({ ...c, next: {} }));
-          weakScrolledElements = /* @__PURE__ */ new WeakSet();
-        }
-      }
-    );
-    return () => {
-      document.removeEventListener("scroll", onScroll);
-      unsubOnBeforeLoad();
-      unsubOnBeforeRouteMount();
-    };
-  }, [options == null ? void 0 : options.getKey, options == null ? void 0 : options.scrollBehavior, router]);
-}
-function ScrollRestoration(props) {
-  useScrollRestoration(props);
-  return null;
+  })();
+  ignoreScroll = false;
 }
-function useElementScrollRestoration(options) {
-  var _a;
-  const router = useRouter();
-  const getKey = options.getKey || defaultGetKey;
-  let elementSelector = "";
-  if (options.id) {
-    elementSelector = `[data-scroll-restoration-id="${options.id}"]`;
-  } else {
-    const element = (_a = options.getElement) == null ? void 0 : _a.call(options);
-    if (!element) {
+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;
     }
-    elementSelector = getCssSelector(element);
+    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);
   }
-  const restoreKey = getKey(router.latestLocation);
-  const cacheKey = [restoreKey, elementSelector].join(delimiter);
-  return cache.state.cached[cacheKey];
-}
-function getCssSelector(el) {
-  const path = [];
-  let parent;
-  while (parent = el.parentNode) {
-    path.unshift(
-      `${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`
+  router.subscribe("onRendered", (event) => {
+    const cacheKey = getKey(event.toLocation);
+    if (!router.resetNextScroll) {
+      router.resetNextScroll = true;
+      return;
+    }
+    restoreScroll(
+      storageKey,
+      cacheKey,
+      router.options.scrollRestorationBehavior,
+      router.isScrollRestoring
     );
-    el = parent;
+    if (router.isScrollRestoring) {
+      scrollRestorationCache.set((state) => {
+        state[cacheKey] = state[cacheKey] || {};
+        return state;
+      });
+    }
+  });
+}
+function ScrollRestoration() {
+  const router = useRouter();
+  const getKey = router.options.getScrollRestorationKey || defaultGetScrollRestorationKey;
+  const userKey = getKey(router.latestLocation);
+  const resolvedKey = userKey !== defaultGetScrollRestorationKey(router.latestLocation) ? userKey : null;
+  if (!router.isScrollRestoring || !router.isServer) {
+    return null;
   }
-  return `${path.join(" > ")}`.toLowerCase();
+  return /* @__PURE__ */ jsx(
+    ScriptOnce,
+    {
+      children: `(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`,
+      log: false
+    }
+  );
 }
 export {
   ScrollRestoration,
-  useElementScrollRestoration,
-  useScrollRestoration
+  defaultGetScrollRestorationKey,
+  getCssSelector,
+  restoreScroll,
+  scrollRestorationCache,
+  setupScrollRestoration,
+  storageKey
 };
 //# 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 * as React from 'react'\nimport { functionalUpdate } from '@tanstack/router-core'\nimport { useRouter } from './useRouter'\nimport type { NonNullableUpdater, ParsedLocation } from '@tanstack/router-core'\n\nconst useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\nconst windowKey = 'window'\nconst delimiter = '___'\n\nlet weakScrolledElements = new WeakSet<any>()\n\ntype CacheValue = Record<string, { scrollX: number; scrollY: number }>\ntype CacheState = {\n  cached: CacheValue\n  next: CacheValue\n}\n\ntype Cache = {\n  state: CacheState\n  set: (updater: NonNullableUpdater<CacheState>) => void\n}\n\nconst sessionsStorage = typeof window !== 'undefined' && window.sessionStorage\n\nconst cache: Cache = sessionsStorage\n  ? (() => {\n      const storageKey = 'tsr-scroll-restoration-v2'\n\n      const state: CacheState = JSON.parse(\n        window.sessionStorage.getItem(storageKey) || 'null',\n      ) || { cached: {}, next: {} }\n\n      return {\n        state,\n        set: (updater) => {\n          cache.state = functionalUpdate(updater, cache.state)\n          window.sessionStorage.setItem(storageKey, JSON.stringify(cache.state))\n        },\n      }\n    })()\n  : (undefined as any)\n\nexport type ScrollRestorationOptions = {\n  getKey?: (location: ParsedLocation) => string\n  scrollBehavior?: ScrollToOptions['behavior']\n}\n\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 */\nconst defaultGetKey = (location: ParsedLocation) => {\n  return location.state.key! || location.href\n}\n\nexport function useScrollRestoration(options?: ScrollRestorationOptions) {\n  const router = useRouter()\n\n  useLayoutEffect(() => {\n    const getKey = options?.getKey || defaultGetKey\n\n    const { history } = window\n    history.scrollRestoration = 'manual'\n\n    const onScroll = (event: Event) => {\n      if (weakScrolledElements.has(event.target)) return\n      weakScrolledElements.add(event.target)\n\n      let elementSelector = ''\n\n      if (event.target === document || event.target === window) {\n        elementSelector = windowKey\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      if (!cache.state.next[elementSelector]) {\n        cache.set((c) => ({\n          ...c,\n          next: {\n            ...c.next,\n            [elementSelector]: {\n              scrollX: NaN,\n              scrollY: NaN,\n            },\n          },\n        }))\n      }\n    }\n\n    if (typeof document !== 'undefined') {\n      document.addEventListener('scroll', onScroll, true)\n    }\n\n    const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', (event) => {\n      if (event.hrefChanged) {\n        const restoreKey = getKey(event.fromLocation)\n        for (const elementSelector in cache.state.next) {\n          const entry = cache.state.next[elementSelector]!\n          if (elementSelector === windowKey) {\n            entry.scrollX = window.scrollX || 0\n            entry.scrollY = window.scrollY || 0\n          } else if (elementSelector) {\n            const element = document.querySelector(elementSelector)\n            entry.scrollX = element?.scrollLeft || 0\n            entry.scrollY = element?.scrollTop || 0\n          }\n\n          cache.set((c) => {\n            const next = { ...c.next }\n            delete next[elementSelector]\n\n            return {\n              ...c,\n              next,\n              cached: {\n                ...c.cached,\n                [[restoreKey, elementSelector].join(delimiter)]: entry,\n              },\n            }\n          })\n        }\n      }\n    })\n\n    const unsubOnBeforeRouteMount = router.subscribe(\n      'onBeforeRouteMount',\n      (event) => {\n        if (event.hrefChanged) {\n          if (!router.resetNextScroll) {\n            return\n          }\n\n          router.resetNextScroll = true\n\n          const restoreKey = getKey(event.toLocation)\n          let windowRestored = false\n\n          for (const cacheKey in cache.state.cached) {\n            const entry = cache.state.cached[cacheKey]!\n            const [key, elementSelector] = cacheKey.split(delimiter)\n            if (key === restoreKey) {\n              if (elementSelector === windowKey) {\n                windowRestored = true\n                window.scrollTo({\n                  top: entry.scrollY,\n                  left: entry.scrollX,\n                  behavior: options?.scrollBehavior,\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\n          if (!windowRestored) {\n            window.scrollTo(0, 0)\n          }\n\n          cache.set((c) => ({ ...c, next: {} }))\n          weakScrolledElements = new WeakSet<any>()\n        }\n      },\n    )\n\n    return () => {\n      document.removeEventListener('scroll', onScroll)\n      unsubOnBeforeLoad()\n      unsubOnBeforeRouteMount()\n    }\n  }, [options?.getKey, options?.scrollBehavior, router])\n}\n\nexport function ScrollRestoration(props: ScrollRestorationOptions) {\n  useScrollRestoration(props)\n  return null\n}\n\nexport function useElementScrollRestoration(\n  options: (\n    | {\n        id: string\n        getElement?: () => Element | undefined | null\n      }\n    | {\n        id?: string\n        getElement: () => Element | undefined | null\n      }\n  ) & {\n    getKey?: (location: ParsedLocation) => string\n  },\n) {\n  const router = useRouter()\n  const getKey = options.getKey || defaultGetKey\n\n  let elementSelector = ''\n\n  if (options.id) {\n    elementSelector = `[data-scroll-restoration-id=\"${options.id}\"]`\n  } else {\n    const element = options.getElement?.()\n    if (!element) {\n      return\n    }\n    elementSelector = getCssSelector(element)\n  }\n\n  const restoreKey = getKey(router.latestLocation)\n  const cacheKey = [restoreKey, elementSelector].join(delimiter)\n  return cache.state.cached[cacheKey]\n}\n\nfunction getCssSelector(el: any): string {\n  const path = []\n  let parent\n  while ((parent = el.parentNode)) {\n    path.unshift(\n      `${el.tagName}:nth-child(${\n        ([].indexOf as any).call(parent.children, el) + 1\n      })`,\n    )\n    el = parent\n  }\n  return `${path.join(' > ')}`.toLowerCase()\n}\n"],"names":[],"mappings":"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"}
+{"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 { AnyRouter } from './router'\nimport type { NonNullableUpdater, ParsedLocation } 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'\nconst sessionsStorage = typeof window !== 'undefined' && window.sessionStorage\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,\n  behavior?: ScrollToOptions['behavior'],\n  shouldScrollRestoration?: boolean,\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.\n    window.scrollTo({\n      top: 0,\n      left: 0,\n      behavior,\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,\n      router.isScrollRestoring,\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":";;;;AAqBO,MAAM,aAAa;AAC1B,MAAM,kBAAkB,OAAO,WAAW,eAAe,OAAO;AAChE,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;;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;AAKF,WAAO,SAAS;AAAA,MACd,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IAAA,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;AAAA,MACf,OAAO;AAAA,IACT;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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.98.0",
+  "version": "1.98.3",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,8 +53,8 @@
     "jsesc": "^3.1.0",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.98.0",
-    "@tanstack/router-core": "^1.98.0"
+    "@tanstack/history": "1.98.1",
+    "@tanstack/router-core": "^1.98.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Match.tsx

@@ -5,6 +5,7 @@ import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
 import {
   createControlledPromise,
+  getLocationChangeInfo,
   pick,
   rootRouteId,
 } from '@tanstack/router-core'
@@ -16,6 +17,8 @@ import { isRedirect } from './redirects'
 import { matchContext } from './matchContext'
 import { SafeFragment } from './SafeFragment'
 import { renderRouteNotFound } from './renderRouteNotFound'
+import { ScrollRestoration } from './scroll-restoration'
+import type { ParsedLocation } from '@tanstack/router-core'
 import type { AnyRoute } from './route'
 
 export const Match = React.memo(function MatchImpl({
@@ -72,41 +75,88 @@ export const Match = React.memo(function MatchImpl({
     select: (s) => s.loadedAt,
   })
 
+  const parentRouteId = useRouterState({
+    select: (s) => {
+      const index = s.matches.findIndex((d) => d.id === matchId)
+      return s.matches[index - 1]?.routeId as string
+    },
+  })
+
   return (
-    <matchContext.Provider value={matchId}>
-      <ResolvedSuspenseBoundary fallback={pendingElement}>
-        <ResolvedCatchBoundary
-          getResetKey={() => resetKey}
-          errorComponent={routeErrorComponent || ErrorComponent}
-          onCatch={(error, errorInfo) => {
-            // Forward not found errors (we don't want to show the error component for these)
-            if (isNotFound(error)) throw error
-            warning(false, `Error in route match: ${matchId}`)
-            routeOnCatch?.(error, errorInfo)
-          }}
-        >
-          <ResolvedNotFoundBoundary
-            fallback={(error) => {
-              // If the current not found handler doesn't exist or it has a
-              // route ID which doesn't match the current route, rethrow the error
-              if (
-                !routeNotFoundComponent ||
-                (error.routeId && error.routeId !== routeId) ||
-                (!error.routeId && !route.isRoot)
-              )
-                throw error
-
-              return React.createElement(routeNotFoundComponent, error as any)
+    <>
+      <matchContext.Provider value={matchId}>
+        <ResolvedSuspenseBoundary fallback={pendingElement}>
+          <ResolvedCatchBoundary
+            getResetKey={() => resetKey}
+            errorComponent={routeErrorComponent || ErrorComponent}
+            onCatch={(error, errorInfo) => {
+              // Forward not found errors (we don't want to show the error component for these)
+              if (isNotFound(error)) throw error
+              warning(false, `Error in route match: ${matchId}`)
+              routeOnCatch?.(error, errorInfo)
             }}
           >
-            <MatchInner matchId={matchId} />
-          </ResolvedNotFoundBoundary>
-        </ResolvedCatchBoundary>
-      </ResolvedSuspenseBoundary>
-    </matchContext.Provider>
+            <ResolvedNotFoundBoundary
+              fallback={(error) => {
+                // If the current not found handler doesn't exist or it has a
+                // route ID which doesn't match the current route, rethrow the error
+                if (
+                  !routeNotFoundComponent ||
+                  (error.routeId && error.routeId !== routeId) ||
+                  (!error.routeId && !route.isRoot)
+                )
+                  throw error
+
+                return React.createElement(routeNotFoundComponent, error as any)
+              }}
+            >
+              <MatchInner matchId={matchId} />
+            </ResolvedNotFoundBoundary>
+          </ResolvedCatchBoundary>
+        </ResolvedSuspenseBoundary>
+      </matchContext.Provider>
+      {parentRouteId === rootRouteId ? (
+        <>
+          <OnRendered />
+          <ScrollRestoration />
+        </>
+      ) : null}
+    </>
   )
 })
 
+// On Rendered can't happen above the root layout because it actually
+// renders a dummy dom element to track the rendered state of the app.
+// We render a script tag with a key that changes based on the current
+// location state.key. Also, because it's below the root layout, it
+// allows us to fire onRendered events even after a hydration mismatch
+// error that occurred above the root layout (like bad head/link tags,
+// which is common).
+function OnRendered() {
+  const router = useRouter()
+
+  const prevLocationRef = React.useRef<undefined | ParsedLocation<{}>>(
+    undefined,
+  )
+
+  return (
+    <script
+      key={router.state.resolvedLocation?.state.key}
+      suppressHydrationWarning
+      ref={(el) => {
+        if (el) {
+          router.emit({
+            type: 'onRendered',
+            ...getLocationChangeInfo(router.state),
+          })
+        } else {
+          prevLocationRef.current = router.state.resolvedLocation
+        }
+      }}
+    />
+  )
+}
+
 export const MatchInner = React.memo(function MatchInnerImpl({
   matchId,
 }: {
@@ -150,25 +200,6 @@ export const MatchInner = React.memo(function MatchInnerImpl({
     return <Outlet />
   }, [key, route.options.component, router.options.defaultComponent])
 
-  // function useChangedDiff(value: any) {
-  //   const ref = React.useRef(value)
-  //   const changed = ref.current !== value
-  //   if (changed) {
-  //     console.log(
-  //       'Changed:',
-  //       value,
-  //       Object.fromEntries(
-  //         Object.entries(value).filter(
-  //           ([key, val]) => val !== ref.current[key],
-  //         ),
-  //       ),
-  //     )
-  //   }
-  //   ref.current = value
-  // }
-
-  // useChangedDiff(match)
-
   const RouteErrorComponent =
     (route.options.errorComponent ?? router.options.defaultErrorComponent) ||
     ErrorComponent

package/src/Matches.tsx

@@ -199,7 +199,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
   const router = useRouter()
 
   useRouterState({
-    select: (s) => [s.location.href, s.resolvedLocation.href, s.status],
+    select: (s) => [s.location.href, s.resolvedLocation?.href, s.status],
     structuralSharing: true as any,
   })
 

package/src/ScriptOnce.tsx

@@ -22,7 +22,7 @@ export function ScriptOnce({
             ? `console.info(\`Injected From Server:
 ${jsesc(children.toString(), { quotes: 'backtick' })}\`)`
             : '',
-          'if (typeof __TSR__ !== "undefined") __TSR__.cleanScripts()',
+          'if (typeof __TSR_SSR__ !== "undefined") __TSR_SSR__.cleanScripts()',
         ]
           .filter(Boolean)
           .join('\n'),