@tanstack/react-router 1.20.0 → 1.20.3-alpha.1

package/src/routerContext.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react'
-import { Router } from './router'
+import type { AnyRouter } from '@tanstack/router-core'
 
-let routerContext = React.createContext<Router<any>>(null!)
+declare global {
+  interface Window {
+    __TSR_ROUTER_CONTEXT__?: React.Context<AnyRouter>
+  }
+}
+
+const routerContext = React.createContext<AnyRouter>(null!)
 
 export function getRouterContext() {
   if (typeof document === 'undefined') {

package/src/scroll-restoration.tsx

@@ -1,230 +1,29 @@
-import * as React from 'react'
-
-const useLayoutEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
-
-import { ParsedLocation } from './location'
+import {
+  defaultGetScrollRestorationKey,
+  restoreScroll,
+  storageKey,
+} from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { NonNullableUpdater, functionalUpdate } from './utils'
-
-const windowKey = 'window'
-const delimiter = '___'
-
-let weakScrolledElements = new WeakSet<any>()
-
-type CacheValue = Record<string, { scrollX: number; scrollY: number }>
-type CacheState = {
-  cached: CacheValue
-  next: CacheValue
-}
-
-type Cache = {
-  state: CacheState
-  set: (updater: NonNullableUpdater<CacheState>) => void
-}
-
-const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage
-
-let cache: Cache = sessionsStorage
-  ? (() => {
-      const storageKey = 'tsr-scroll-restoration-v2'
-
-      const state: CacheState = JSON.parse(
-        window.sessionStorage.getItem(storageKey) || 'null',
-      ) || { cached: {}, next: {} }
-
-      return {
-        state,
-        set: (updater) => {
-          cache.state = functionalUpdate(updater, cache.state)
-          window.sessionStorage.setItem(storageKey, JSON.stringify(cache.state))
-        },
-      }
-    })()
-  : (undefined as any)
-
-export type ScrollRestorationOptions = {
-  getKey?: (location: ParsedLocation) => string
-}
-
-const defaultGetKey = (location: ParsedLocation) => location.state.key!
-
-export function useScrollRestoration(options?: ScrollRestorationOptions) {
-  const router = useRouter()
-
-  useLayoutEffect(() => {
-    const getKey = options?.getKey || defaultGetKey
-
-    const { history } = window
-    if (history.scrollRestoration) {
-      history.scrollRestoration = 'manual'
-    }
-
-    const onScroll = (event: 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 as Element).getAttribute(
-          'data-scroll-restoration-id',
-        )
+import { ScriptOnce } from './ScriptOnce'
 
-        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,
-            },
-          },
-        }))
-      }
-    }
-
-    if (typeof document !== 'undefined') {
-      document.addEventListener('scroll', onScroll, true)
-    }
-
-    const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', (event) => {
-      if (event.pathChanged) {
-        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?.scrollLeft || 0
-            entry.scrollY = 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 unsubOnResolved = router.subscribe('onResolved', (event) => {
-      if (event.pathChanged) {
-        if (!router.resetNextScroll) {
-          return
-        }
-
-        router.resetNextScroll = true
-
-        const getKey = options?.getKey || defaultGetKey
-
-        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(entry.scrollX, entry.scrollY)
-            } else if (elementSelector) {
-              const element = document.querySelector(elementSelector)
-              if (element) {
-                element.scrollLeft = entry.scrollX
-                element.scrollTop = entry.scrollY
-              }
-            }
-          }
-        }
-
-        if (!windowRestored) {
-          window.scrollTo(0, 0)
-        }
-
-        cache.set((c) => ({ ...c, next: {} }))
-        weakScrolledElements = new WeakSet<any>()
-      }
-    })
-
-    return () => {
-      document.removeEventListener('scroll', onScroll)
-      unsubOnBeforeLoad()
-      unsubOnResolved()
-    }
-  }, [])
-}
-
-export function ScrollRestoration(props: ScrollRestorationOptions) {
-  useScrollRestoration(props)
-  return null
-}
-
-export function useElementScrollRestoration(
-  options: (
-    | {
-        id: string
-        getElement?: () => Element | undefined | null
-      }
-    | {
-        id?: string
-        getElement: () => Element | undefined | null
-      }
-  ) & {
-    getKey?: (location: ParsedLocation) => string
-  },
-) {
+export function ScrollRestoration() {
   const router = useRouter()
-  const getKey = options?.getKey || defaultGetKey
-
-  let elementSelector = ''
-
-  if (options.id) {
-    elementSelector = `[data-scroll-restoration-id="${options.id}"]`
-  } else {
-    const element = options.getElement?.()
-    if (!element) {
-      return
-    }
-    elementSelector = getCssSelector(element)
+  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
   }
 
-  const restoreKey = getKey(router.latestLocation)
-  const cacheKey = [restoreKey, elementSelector].join(delimiter)
-  return cache.state.cached[cacheKey]
-}
-
-function getCssSelector(el: any): string {
-  let path = [],
-    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()
+  return (
+    <ScriptOnce
+      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}
+      log={false}
+    />
+  )
 }

package/src/serializer.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react'
+
+declare module '@tanstack/router-core' {
+  export interface SerializerExtensions {
+    ReadableStream: React.JSX.Element
+  }
+}

package/src/structuralSharing.ts

@@ -0,0 +1,47 @@
+import type {
+  AnyRouter,
+  Constrain,
+  OptionalStructuralSharing,
+  ValidateJSON,
+} from '@tanstack/router-core'
+
+export type DefaultStructuralSharingEnabled<TRouter extends AnyRouter> =
+  boolean extends TRouter['options']['defaultStructuralSharing']
+    ? // for now, default to false.
+      // TODO in V2: default to true
+      false
+    : NonNullable<TRouter['options']['defaultStructuralSharing']>
+
+export interface RequiredStructuralSharing<TStructuralSharing, TConstraint> {
+  readonly structuralSharing: Constrain<TStructuralSharing, TConstraint>
+}
+
+export type StructuralSharingOption<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing,
+> = unknown extends TSelected
+  ? OptionalStructuralSharing<TStructuralSharing, boolean>
+  : unknown extends TRouter['routeTree']
+    ? OptionalStructuralSharing<TStructuralSharing, boolean>
+    : TSelected extends ValidateJSON<TSelected>
+      ? OptionalStructuralSharing<TStructuralSharing, boolean>
+      : DefaultStructuralSharingEnabled<TRouter> extends true
+        ? RequiredStructuralSharing<TStructuralSharing, false>
+        : OptionalStructuralSharing<TStructuralSharing, false>
+
+export type StructuralSharingEnabled<
+  TRouter extends AnyRouter,
+  TStructuralSharing,
+> = boolean extends TStructuralSharing
+  ? DefaultStructuralSharingEnabled<TRouter>
+  : TStructuralSharing
+
+export type ValidateSelected<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing,
+> =
+  StructuralSharingEnabled<TRouter, TStructuralSharing> extends true
+    ? ValidateJSON<TSelected>
+    : TSelected

package/src/typePrimitives.ts

@@ -0,0 +1,84 @@
+import type {
+  AnyRouter,
+  Constrain,
+  InferFrom,
+  InferMaskFrom,
+  InferMaskTo,
+  InferSelected,
+  InferShouldThrow,
+  InferStrict,
+  InferTo,
+  RegisteredRouter,
+} from '@tanstack/router-core'
+import type { LinkComponentProps } from './link'
+import type { UseParamsOptions } from './useParams'
+import type { UseSearchOptions } from './useSearch'
+
+export type ValidateLinkOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TOptions = unknown,
+  TDefaultFrom extends string = string,
+  TComp = 'a',
+> = Constrain<
+  TOptions,
+  LinkComponentProps<
+    TComp,
+    TRouter,
+    InferFrom<TOptions, TDefaultFrom>,
+    InferTo<TOptions>,
+    InferMaskFrom<TOptions>,
+    InferMaskTo<TOptions>
+  >
+>
+
+/**
+ * @internal
+ */
+export type InferStructuralSharing<TOptions> = TOptions extends {
+  structuralSharing: infer TStructuralSharing
+}
+  ? TStructuralSharing
+  : unknown
+
+export type ValidateUseSearchOptions<
+  TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+> = Constrain<
+  TOptions,
+  UseSearchOptions<
+    TRouter,
+    InferFrom<TOptions>,
+    InferStrict<TOptions>,
+    InferShouldThrow<TOptions>,
+    InferSelected<TOptions>,
+    InferStructuralSharing<TOptions>
+  >
+>
+
+export type ValidateUseParamsOptions<
+  TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+> = Constrain<
+  TOptions,
+  UseParamsOptions<
+    TRouter,
+    InferFrom<TOptions>,
+    InferStrict<TOptions>,
+    InferShouldThrow<TOptions>,
+    InferSelected<TOptions>,
+    InferSelected<TOptions>
+  >
+>
+export type ValidateLinkOptionsArray<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TOptions extends ReadonlyArray<any> = ReadonlyArray<unknown>,
+  TDefaultFrom extends string = string,
+  TComp = 'a',
+> = {
+  [K in keyof TOptions]: ValidateLinkOptions<
+    TRouter,
+    TOptions[K],
+    TDefaultFrom,
+    TComp
+  >
+}