@benjavicente/router-core 1.168.9

package/src/scroll-restoration-inline.ts

@@ -0,0 +1,81 @@
+export default function (options: {
+  storageKey: string
+  key?: string
+  behavior?: ScrollToOptions['behavior']
+  shouldScrollRestoration?: boolean
+}) {
+  let byKey
+
+  try {
+    byKey = JSON.parse(sessionStorage.getItem(options.storageKey) || '{}')
+  } catch (error) {
+    console.error(error)
+    return
+  }
+
+  const resolvedKey = options.key || window.history.state?.__TSR_key
+  const elementEntries = resolvedKey ? byKey[resolvedKey] : undefined
+
+  if (
+    options.shouldScrollRestoration &&
+    elementEntries &&
+    typeof elementEntries === 'object' &&
+    Object.keys(elementEntries).length > 0
+  ) {
+    for (const elementSelector in elementEntries) {
+      const entry = elementEntries[elementSelector]
+
+      if (!entry || typeof entry !== 'object') {
+        continue
+      }
+
+      const scrollX = entry.scrollX
+      const scrollY = entry.scrollY
+
+      if (!Number.isFinite(scrollX) || !Number.isFinite(scrollY)) {
+        continue
+      }
+
+      if (elementSelector === 'window') {
+        window.scrollTo({
+          top: scrollY,
+          left: scrollX,
+          behavior: options.behavior,
+        })
+      } else if (elementSelector) {
+        let element
+
+        try {
+          element = document.querySelector(elementSelector)
+        } catch {
+          continue
+        }
+
+        if (element) {
+          element.scrollLeft = scrollX
+          element.scrollTop = scrollY
+        }
+      }
+    }
+
+    return
+  }
+
+  const hash = window.location.hash.split('#', 2)[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: options.behavior })
+}

package/src/scroll-restoration-script/client.ts

@@ -0,0 +1,5 @@
+import type { AnyRouter } from '../router'
+
+export function getScrollRestorationScriptForRouter(_router: AnyRouter) {
+  return null
+}

package/src/scroll-restoration-script/server.ts

@@ -0,0 +1,64 @@
+import minifiedScrollRestorationScript from '../scroll-restoration-inline?script-string'
+import {
+  defaultGetScrollRestorationKey,
+  storageKey,
+} from '../scroll-restoration'
+import { escapeHtml } from '../utils'
+import type { AnyRouter } from '../router'
+
+type InlineScrollRestorationScriptOptions = {
+  storageKey: string
+  key?: string
+  behavior?: ScrollToOptions['behavior']
+  shouldScrollRestoration?: boolean
+}
+
+const defaultInlineScrollRestorationScript = `(${minifiedScrollRestorationScript})(${escapeHtml(
+  JSON.stringify({
+    storageKey,
+    shouldScrollRestoration: true,
+  } satisfies InlineScrollRestorationScriptOptions),
+)})`
+
+function getScrollRestorationScript(
+  options: InlineScrollRestorationScriptOptions,
+) {
+  if (
+    options.storageKey === storageKey &&
+    options.shouldScrollRestoration === true &&
+    options.key === undefined &&
+    options.behavior === undefined
+  ) {
+    return defaultInlineScrollRestorationScript
+  }
+
+  return `(${minifiedScrollRestorationScript})(${escapeHtml(JSON.stringify(options))})`
+}
+
+export function getScrollRestorationScriptForRouter(router: AnyRouter) {
+  if (
+    typeof router.options.scrollRestoration === 'function' &&
+    !router.options.scrollRestoration({ location: router.latestLocation })
+  ) {
+    return null
+  }
+
+  const getKey = router.options.getScrollRestorationKey
+  if (!getKey) {
+    return defaultInlineScrollRestorationScript
+  }
+
+  const location = router.latestLocation
+  const userKey = getKey(location)
+  const defaultKey = defaultGetScrollRestorationKey(location)
+
+  if (userKey === defaultKey) {
+    return defaultInlineScrollRestorationScript
+  }
+
+  return getScrollRestorationScript({
+    storageKey,
+    shouldScrollRestoration: true,
+    key: userKey,
+  })
+}

package/src/scroll-restoration.ts

@@ -0,0 +1,357 @@
+import { isServer } from '@benjavicente/router-core/isServer'
+import { functionalUpdate, isPlainObject } from './utils'
+import type { AnyRouter } from './router'
+import type { ParsedLocation } from './location'
+import type { NonNullableUpdater } from './utils'
+
+export type ScrollRestorationEntry = { scrollX: number; scrollY: number }
+
+type ScrollRestorationByElement = Record<string, ScrollRestorationEntry>
+
+type ScrollRestorationByKey = Record<string, ScrollRestorationByElement>
+
+type ScrollRestorationCache = {
+  readonly state: ScrollRestorationByKey
+  set: (updater: NonNullableUpdater<ScrollRestorationByKey>) => void
+  persist: () => void
+}
+
+export type ScrollRestorationOptions = {
+  getKey?: (location: ParsedLocation) => string
+  scrollBehavior?: ScrollToOptions['behavior']
+}
+
+function getSafeSessionStorage() {
+  try {
+    return typeof window !== 'undefined' &&
+      typeof window.sessionStorage === 'object'
+      ? window.sessionStorage
+      : undefined
+  } catch {
+    // silent
+    return undefined
+  }
+}
+
+// SessionStorage key used to store scroll positions across navigations.
+export const storageKey = 'tsr-scroll-restoration-v1_3'
+
+function createScrollRestorationCache(): ScrollRestorationCache | null {
+  const safeSessionStorage = getSafeSessionStorage()
+  if (!safeSessionStorage) {
+    return null
+  }
+
+  let state: ScrollRestorationByKey = {}
+
+  try {
+    const parsed = JSON.parse(safeSessionStorage.getItem(storageKey) || '{}')
+    if (isPlainObject(parsed)) {
+      state = parsed as ScrollRestorationByKey
+    }
+  } catch {
+    // ignore invalid session storage payloads
+  }
+
+  const persist = () => {
+    try {
+      safeSessionStorage.setItem(storageKey, JSON.stringify(state))
+    } catch {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(
+          '[ts-router] Could not persist scroll restoration state to sessionStorage.',
+        )
+      }
+    }
+  }
+
+  return {
+    get state() {
+      return state
+    },
+    set: (updater) => {
+      state = functionalUpdate(updater, state) || state
+    },
+    persist,
+  }
+}
+
+export const scrollRestorationCache = createScrollRestorationCache()
+
+/**
+ * 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.__TSR_key! || location.href
+}
+
+function getCssSelector(el: any): string {
+  const path = []
+  let parent: HTMLElement
+  while ((parent = el.parentNode)) {
+    path.push(
+      `${el.tagName}:nth-child(${Array.prototype.indexOf.call(parent.children, el) + 1})`,
+    )
+    el = parent
+  }
+  return `${path.reverse().join(' > ')}`.toLowerCase()
+}
+
+export function getElementScrollRestorationEntry(
+  router: AnyRouter,
+  options: (
+    | {
+        id: string
+        getElement?: () => Window | Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Window | Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+): ScrollRestorationEntry | undefined {
+  const getKey = options.getKey || defaultGetScrollRestorationKey
+  const restoreKey = getKey(router.latestLocation)
+
+  if (options.id) {
+    return scrollRestorationCache?.state[restoreKey]?.[
+      `[${scrollRestorationIdAttribute}="${options.id}"]`
+    ]
+  }
+
+  const element = options.getElement?.()
+  if (!element) {
+    return
+  }
+
+  return scrollRestorationCache?.state[restoreKey]?.[
+    element instanceof Window ? windowScrollTarget : getCssSelector(element)
+  ]
+}
+
+let ignoreScroll = false
+const windowScrollTarget = 'window'
+const scrollRestorationIdAttribute = 'data-scroll-restoration-id'
+type ScrollTarget = typeof windowScrollTarget | Element
+
+export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
+  if (!scrollRestorationCache && !(isServer ?? router.isServer)) {
+    return
+  }
+
+  const cache = scrollRestorationCache
+
+  const shouldScrollRestoration =
+    force ?? router.options.scrollRestoration ?? false
+
+  if (shouldScrollRestoration) {
+    router.isScrollRestoring = true
+  }
+
+  if (
+    (isServer ?? router.isServer) ||
+    router.isScrollRestorationSetup ||
+    !cache
+  ) {
+    return
+  }
+
+  router.isScrollRestorationSetup = true
+  ignoreScroll = false
+
+  const getKey =
+    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
+  const trackedScrollEntries = new Map<ScrollTarget, ScrollRestorationEntry>()
+
+  window.history.scrollRestoration = 'manual'
+
+  const onScroll = (event: Event) => {
+    if (ignoreScroll || !router.isScrollRestoring) {
+      return
+    }
+
+    if (event.target === document || event.target === window) {
+      trackedScrollEntries.set(windowScrollTarget, {
+        scrollX: window.scrollX || 0,
+        scrollY: window.scrollY || 0,
+      })
+    } else {
+      const target = event.target as Element
+      trackedScrollEntries.set(target, {
+        scrollX: target.scrollLeft || 0,
+        scrollY: target.scrollTop || 0,
+      })
+    }
+  }
+
+  // Snapshot the current page's tracked scroll targets before navigation or unload.
+  const snapshotCurrentScrollTargets = (restoreKey?: string) => {
+    if (
+      !router.isScrollRestoring ||
+      !restoreKey ||
+      trackedScrollEntries.size === 0 ||
+      !cache
+    ) {
+      return
+    }
+
+    const keyEntry = (cache.state[restoreKey] ||=
+      {} as ScrollRestorationByElement)
+
+    for (const [target, position] of trackedScrollEntries) {
+      let selector: string | undefined
+
+      if (target === windowScrollTarget) {
+        selector = windowScrollTarget
+      } else if (target.isConnected) {
+        const attrId = target.getAttribute(scrollRestorationIdAttribute)
+        selector = attrId
+          ? `[${scrollRestorationIdAttribute}="${attrId}"]`
+          : getCssSelector(target)
+      }
+
+      if (!selector) {
+        continue
+      }
+
+      keyEntry[selector] = position
+    }
+  }
+
+  document.addEventListener('scroll', onScroll, true)
+  router.subscribe('onBeforeLoad', (event) => {
+    snapshotCurrentScrollTargets(
+      event.fromLocation ? getKey(event.fromLocation) : undefined,
+    )
+    trackedScrollEntries.clear()
+  })
+  window.addEventListener('pagehide', () => {
+    snapshotCurrentScrollTargets(
+      getKey(
+        router.stores.resolvedLocation.state ?? router.stores.location.state,
+      ),
+    )
+    cache.persist()
+  })
+
+  // Restore destination scroll after the new route has rendered.
+  router.subscribe('onRendered', (event) => {
+    const cacheKey = getKey(event.toLocation)
+    const behavior = router.options.scrollRestorationBehavior
+    const scrollToTopSelectors = router.options.scrollToTopSelectors
+    trackedScrollEntries.clear()
+
+    if (!router.resetNextScroll) {
+      router.resetNextScroll = true
+      return
+    }
+
+    if (
+      typeof router.options.scrollRestoration === 'function' &&
+      !router.options.scrollRestoration({ location: router.latestLocation })
+    ) {
+      return
+    }
+
+    ignoreScroll = true
+
+    try {
+      const elementEntries = router.isScrollRestoring
+        ? cache.state[cacheKey]
+        : undefined
+      let restored = false
+
+      if (elementEntries) {
+        for (const elementSelector in elementEntries) {
+          const entry = elementEntries[elementSelector]
+
+          if (!isPlainObject(entry)) {
+            continue
+          }
+
+          const { scrollX, scrollY } = entry as {
+            scrollX?: unknown
+            scrollY?: unknown
+          }
+
+          if (!Number.isFinite(scrollX) || !Number.isFinite(scrollY)) {
+            continue
+          }
+
+          if (elementSelector === windowScrollTarget) {
+            window.scrollTo({
+              top: scrollY as number,
+              left: scrollX as number,
+              behavior,
+            })
+            restored = true
+          } else if (elementSelector) {
+            let element
+
+            try {
+              element = document.querySelector(elementSelector)
+            } catch {
+              continue
+            }
+
+            if (element) {
+              element.scrollLeft = scrollX as number
+              element.scrollTop = scrollY as number
+              restored = true
+            }
+          }
+        }
+      }
+
+      if (!restored) {
+        const hash = router.history.location.hash.slice(1)
+
+        if (hash) {
+          const hashScrollIntoViewOptions =
+            window.history.state?.__hashScrollIntoViewOptions ?? true
+
+          if (hashScrollIntoViewOptions) {
+            const el = document.getElementById(hash)
+            if (el) {
+              el.scrollIntoView(hashScrollIntoViewOptions)
+            }
+          }
+        } else {
+          const scrollOptions = {
+            top: 0,
+            left: 0,
+            behavior,
+          }
+
+          window.scrollTo(scrollOptions)
+          if (scrollToTopSelectors) {
+            for (const selector of scrollToTopSelectors) {
+              if (selector === windowScrollTarget) continue
+              const element =
+                typeof selector === 'function'
+                  ? selector()
+                  : document.querySelector(selector)
+              if (element) {
+                element.scrollTo(scrollOptions)
+              }
+            }
+          }
+        }
+      }
+    } finally {
+      ignoreScroll = false
+    }
+
+    if (router.isScrollRestoring) {
+      cache.set((state) => {
+        state[cacheKey] ||= {} as ScrollRestorationByElement
+        return state
+      })
+    }
+  })
+}

package/src/searchMiddleware.ts

@@ -0,0 +1,76 @@
+import { deepEqual } from './utils'
+import type { NoInfer, PickOptional } from './utils'
+import type { SearchMiddleware } from './route'
+import type { IsRequiredParams } from './link'
+
+/**
+ * Retain specified search params across navigations.
+ *
+ * If `keys` is `true`, retain all current params. Otherwise, copy only the
+ * listed keys from the current search into the next search.
+ *
+ * @param keys `true` to retain all, or a list of keys to retain.
+ * @returns A search middleware suitable for route `search.middlewares`.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/retainSearchParamsFunction
+ */
+export function retainSearchParams<TSearchSchema extends object>(
+  keys: Array<keyof TSearchSchema> | true,
+): SearchMiddleware<TSearchSchema> {
+  return ({ search, next }) => {
+    const result = next(search)
+    if (keys === true) {
+      return { ...search, ...result }
+    }
+    const copy = { ...result }
+    // add missing keys from search to copy
+    keys.forEach((key) => {
+      if (!(key in copy)) {
+        copy[key] = search[key]
+      }
+    })
+    return copy
+  }
+}
+
+/**
+ * Remove optional or default-valued search params from navigations.
+ *
+ * - Pass `true` (only if there are no required search params) to strip all.
+ * - Pass an array to always remove those optional keys.
+ * - Pass an object of default values; keys equal (deeply) to the defaults are removed.
+ *
+ * @returns A search middleware suitable for route `search.middlewares`.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/stripSearchParamsFunction
+ */
+export function stripSearchParams<
+  TSearchSchema,
+  TOptionalProps = PickOptional<NoInfer<TSearchSchema>>,
+  const TValues =
+    | Partial<NoInfer<TOptionalProps>>
+    | Array<keyof TOptionalProps>,
+  const TInput = IsRequiredParams<TSearchSchema> extends never
+    ? TValues | true
+    : TValues,
+>(input: NoInfer<TInput>): SearchMiddleware<TSearchSchema> {
+  return ({ search, next }) => {
+    if (input === true) {
+      return {}
+    }
+    const result = next(search) as Record<string, unknown>
+    const newResult = { ...result }
+    if (Array.isArray(input)) {
+      input.forEach((key) => {
+        delete newResult[key]
+      })
+    } else {
+      Object.entries(input as Record<string, unknown>).forEach(
+        ([key, value]) => {
+          if (deepEqual(result[key], value)) {
+            delete newResult[key]
+          }
+        },
+      )
+    }
+    return newResult as any
+  }
+}

package/src/searchParams.ts

@@ -0,0 +1,90 @@
+import { decode, encode } from './qss'
+import type { AnySchema } from './validators'
+
+/** Default `parseSearch` that strips leading '?' and JSON-parses values. */
+export const defaultParseSearch = parseSearchWith(JSON.parse)
+/** Default `stringifySearch` using JSON.stringify for complex values. */
+export const defaultStringifySearch = stringifySearchWith(
+  JSON.stringify,
+  JSON.parse,
+)
+
+/**
+ * Build a `parseSearch` function using a provided JSON-like parser.
+ *
+ * The returned function strips a leading `?`, decodes values, and attempts to
+ * JSON-parse string values using the given `parser`.
+ *
+ * @param parser Function to parse a string value (e.g. `JSON.parse`).
+ * @returns A `parseSearch` function compatible with `Router` options.
+ * @link https://tanstack.com/router/latest/docs/framework/react/guide/custom-search-param-serialization
+ */
+export function parseSearchWith(parser: (str: string) => any) {
+  return (searchStr: string): AnySchema => {
+    if (searchStr[0] === '?') {
+      searchStr = searchStr.substring(1)
+    }
+
+    const query: Record<string, unknown> = decode(searchStr)
+
+    // Try to parse any query params that might be json
+    for (const key in query) {
+      const value = query[key]
+      if (typeof value === 'string') {
+        try {
+          query[key] = parser(value)
+        } catch (_err) {
+          // silent
+        }
+      }
+    }
+
+    return query
+  }
+}
+
+/**
+ * Build a `stringifySearch` function using a provided serializer.
+ *
+ * Non-primitive values are serialized with `stringify`. If a `parser` is
+ * supplied, string values that are parseable are re-serialized to ensure
+ * symmetry with `parseSearch`.
+ *
+ * @param stringify Function to serialize a value (e.g. `JSON.stringify`).
+ * @param parser Optional parser to detect parseable strings.
+ * @returns A `stringifySearch` function compatible with `Router` options.
+ * @link https://tanstack.com/router/latest/docs/framework/react/guide/custom-search-param-serialization
+ */
+export function stringifySearchWith(
+  stringify: (search: any) => string,
+  parser?: (str: string) => any,
+) {
+  const hasParser = typeof parser === 'function'
+  function stringifyValue(val: any) {
+    if (typeof val === 'object' && val !== null) {
+      try {
+        return stringify(val)
+      } catch (_err) {
+        // silent
+      }
+    } else if (hasParser && typeof val === 'string') {
+      try {
+        // Check if it's a valid parseable string.
+        // If it is, then stringify it again.
+        parser(val)
+        return stringify(val)
+      } catch (_err) {
+        // silent
+      }
+    }
+    return val
+  }
+
+  return (search: Record<string, any>) => {
+    const searchStr = encode(search, stringifyValue)
+    return searchStr ? `?${searchStr}` : ''
+  }
+}
+
+export type SearchSerializer = (searchObj: Record<string, any>) => string
+export type SearchParser = (searchStr: string) => Record<string, any>

package/src/ssr/client.ts

@@ -0,0 +1,6 @@
+export { mergeHeaders } from './headers'
+export { json } from './json'
+export type { JsonResponse } from './json'
+export { hydrate } from './ssr-client'
+export * from './ssr-client'
+export type { TsrSsrGlobal, DehydratedMatch, DehydratedRouter } from './types'

package/src/ssr/constants.ts

@@ -0,0 +1,3 @@
+export const GLOBAL_TSR = '$_TSR'
+export declare const GLOBAL_SEROVAL: '$R'
+export const TSR_SCRIPT_BARRIER_ID = '$tsr-stream-barrier'