@tanstack/router-core/dist/cjs/scroll-restoration.cjs.map

Modern and scalable routing for React applications

{"version":3,"file":"scroll-restoration.cjs","names":[],"sources":["../../src/scroll-restoration.ts"],"sourcesContent":["import { isServer } from '@tanstack/router-core/isServer'\nimport { functionalUpdate } from './utils'\nimport type { AnyRouter } from './router'\nimport type { ParsedLocation } from './location'\nimport type { NonNullableUpdater } from './utils'\nimport type { HistoryLocation } from '@tanstack/history'\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\nfunction getSafeSessionStorage() {\n  try {\n    if (\n      typeof window !== 'undefined' &&\n      typeof window.sessionStorage === 'object'\n    ) {\n      return window.sessionStorage\n    }\n  } catch {\n    // silent\n  }\n  return undefined\n}\n\n/** SessionStorage key used to persist scroll restoration state. */\n/** SessionStorage key used to store scroll positions across navigations. */\n/** SessionStorage key used to store scroll positions across navigations. */\nexport const storageKey = 'tsr-scroll-restoration-v1_3'\n\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}\n\nfunction createScrollRestorationCache(): ScrollRestorationCache | null {\n  const safeSessionStorage = getSafeSessionStorage()\n  if (!safeSessionStorage) {\n    return null\n  }\n\n  const persistedState = safeSessionStorage.getItem(storageKey)\n  let state: ScrollRestorationByKey = persistedState\n    ? JSON.parse(persistedState)\n    : {}\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      state = functionalUpdate(updater, state) || state\n      try {\n        safeSessionStorage.setItem(storageKey, JSON.stringify(state))\n      } catch {\n        console.warn(\n          '[ts-router] Could not persist scroll restoration state to sessionStorage.',\n        )\n      }\n    },\n  }\n}\n\n/** In-memory handle to the persisted scroll restoration cache. */\nexport const scrollRestorationCache = createScrollRestorationCache()\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 */\n\n/**\n * Default scroll restoration cache key: location state key or full href.\n */\nexport const defaultGetScrollRestorationKey = (location: ParsedLocation) => {\n  return location.state.__TSR_key! || location.href\n}\n\n/** Best-effort nth-child CSS selector for a given element. */\nexport function getCssSelector(el: any): string {\n  const path = []\n  let parent: HTMLElement\n  while ((parent = el.parentNode)) {\n    path.push(\n      `${el.tagName}:nth-child(${Array.prototype.indexOf.call(parent.children, el) + 1})`,\n    )\n    el = parent\n  }\n  return `${path.reverse().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,\n  key,\n  behavior,\n  shouldScrollRestoration,\n  scrollToTopSelectors,\n  location,\n}: {\n  storageKey: string\n  key?: string\n  behavior?: ScrollToOptions['behavior']\n  shouldScrollRestoration?: boolean\n  scrollToTopSelectors?: Array<string | (() => Element | null | undefined)>\n  location?: HistoryLocation\n}) {\n  let byKey: ScrollRestorationByKey\n\n  try {\n    byKey = JSON.parse(sessionStorage.getItem(storageKey) || '{}')\n  } catch (error) {\n    console.error(error)\n    return\n  }\n\n  const resolvedKey = key || window.history.state?.__TSR_key\n  const elementEntries = byKey[resolvedKey]\n\n  //\n  ignoreScroll = true\n\n  //\n  scroll: {\n    // If we have a cached entry for this location state,\n    // we always need to prefer that over the hash scroll.\n    if (\n      shouldScrollRestoration &&\n      elementEntries &&\n      Object.keys(elementEntries).length > 0\n    ) {\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      break scroll\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 = (location ?? window.location).hash.split('#', 2)[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      break scroll\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    const scrollOptions = { top: 0, left: 0, behavior }\n    window.scrollTo(scrollOptions)\n    if (scrollToTopSelectors) {\n      for (const selector of scrollToTopSelectors) {\n        if (selector === 'window') continue\n        const element =\n          typeof selector === 'function'\n            ? selector()\n            : document.querySelector(selector)\n        if (element) element.scrollTo(scrollOptions)\n      }\n    }\n  }\n\n  //\n  ignoreScroll = false\n}\n\n/** Setup global listeners and hooks to support scroll restoration. */\n/** Setup global listeners and hooks to support scroll restoration. */\nexport function setupScrollRestoration(router: AnyRouter, force?: boolean) {\n  if (!scrollRestorationCache && !(isServer ?? router.isServer)) {\n    return\n  }\n  const shouldScrollRestoration =\n    force ?? router.options.scrollRestoration ?? false\n\n  if (shouldScrollRestoration) {\n    router.isScrollRestoring = true\n  }\n\n  if (\n    (isServer ?? router.isServer) ||\n    router.isScrollRestorationSetup ||\n    !scrollRestorationCache\n  ) {\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] ||= {} as ScrollRestorationByElement)\n\n      const elementEntry = (keyEntry[elementSelector] ||=\n        {} 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    if (typeof router.options.scrollRestoration === 'function') {\n      const shouldRestore = router.options.scrollRestoration({\n        location: router.latestLocation,\n      })\n      if (!shouldRestore) {\n        return\n      }\n    }\n\n    restoreScroll({\n      storageKey,\n      key: cacheKey,\n      behavior: router.options.scrollRestorationBehavior,\n      shouldScrollRestoration: router.isScrollRestoring,\n      scrollToTopSelectors: router.options.scrollToTopSelectors,\n      location: router.history.location,\n    })\n\n    if (router.isScrollRestoring) {\n      // Mark the location as having been seen\n      scrollRestorationCache.set((state) => {\n        state[cacheKey] ||= {} as ScrollRestorationByElement\n\n        return state\n      })\n    }\n  })\n}\n\n/**\n * @private\n * Handles hash-based scrolling after navigation completes.\n * To be used in framework-specific <Transitioner> components during the onResolved event.\n *\n * Provides hash scrolling for programmatic navigation when default browser handling is prevented.\n * @param router The router instance containing current location and state\n */\n/**\n * @private\n * Handles hash-based scrolling after navigation completes.\n * To be used in framework-specific Transitioners.\n */\nexport function handleHashScroll(router: AnyRouter) {\n  if (typeof document !== 'undefined' && (document as any).querySelector) {\n    const hashScrollIntoViewOptions =\n      router.state.location.state.__hashScrollIntoViewOptions ?? true\n\n    if (hashScrollIntoViewOptions && router.state.location.hash !== '') {\n      const el = document.getElementById(router.state.location.hash)\n      if (el) {\n        el.scrollIntoView(hashScrollIntoViewOptions)\n      }\n    }\n  }\n}\n"],"mappings":"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"}