@tanstack/react-router 0.0.1-beta.83 → 1.0.0

package/src/scroll-restoration.tsx

@@ -0,0 +1,230 @@
+import * as React from 'react'
+
+const useLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
+import { ParsedLocation } from './location'
+import { useRouter } from './RouterProvider'
+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',
+        )
+
+        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
+  },
+) {
+  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 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()
+}

package/src/searchParams.ts

@@ -0,0 +1,79 @@
+import { decode, encode } from './qss'
+import { AnySearchSchema } from './route'
+
+export const defaultParseSearch = parseSearchWith(JSON.parse)
+export const defaultStringifySearch = stringifySearchWith(
+  JSON.stringify,
+  JSON.parse,
+)
+
+export function parseSearchWith(parser: (str: string) => any) {
+  return (searchStr: string): AnySearchSchema => {
+    if (searchStr.substring(0, 1) === '?') {
+      searchStr = searchStr.substring(1)
+    }
+
+    let query: Record<string, unknown> = decode(searchStr)
+
+    // Try to parse any query params that might be json
+    for (let key in query) {
+      const value = query[key]
+      if (typeof value === 'string') {
+        try {
+          query[key] = parser(value)
+        } catch (err) {
+          //
+        }
+      }
+    }
+
+    return query
+  }
+}
+
+export function stringifySearchWith(
+  stringify: (search: any) => string,
+  parser?: (str: string) => any,
+) {
+  function stringifyValue(val: any) {
+    if (typeof val === 'object' && val !== null) {
+      try {
+        return stringify(val)
+      } catch (err) {
+        // silent
+      }
+    } else if (typeof val === 'string' && typeof parser === 'function') {
+      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>) => {
+    search = { ...search }
+
+    if (search) {
+      Object.keys(search).forEach((key) => {
+        const val = search[key]
+        if (typeof val === 'undefined' || val === undefined) {
+          delete search[key]
+        } else {
+          search[key] = stringifyValue(val)
+        }
+      })
+    }
+
+    const searchStr = encode(search as Record<string, string>).toString()
+
+    return searchStr ? `?${searchStr}` : ''
+  }
+}
+
+export type SearchSerializer = (searchObj: Record<string, any>) => string
+export type SearchParser = (searchStr: string) => Record<string, any>

package/src/useBlocker.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { ReactNode } from './route'
+import { useRouter } from './RouterProvider'
+import { BlockerFn } from '@tanstack/history'
+
+export function useBlocker(
+  blockerFn: BlockerFn,
+  condition: boolean | any = true,
+): void {
+  const { history } = useRouter()
+
+  React.useEffect(() => {
+    if (!condition) return
+    return history.block(blockerFn)
+  })
+}
+
+export function Block({ blocker, condition, children }: PromptProps) {
+  useBlocker(blocker, condition)
+  return (children ?? null) as ReactNode
+}
+
+export type PromptProps = {
+  blocker: BlockerFn
+  condition?: boolean | any
+  children?: ReactNode
+}

package/src/useNavigate.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react'
+import { useMatch } from './Matches'
+import { useRouter } from './RouterProvider'
+import { LinkOptions, NavigateOptions } from './link'
+import { AnyRoute } from './route'
+import { RoutePaths } from './routeInfo'
+import { RegisteredRouter } from './router'
+import { useLayoutEffect } from './utils'
+
+export function useNavigate<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+>(defaultOpts?: { from?: TDefaultFrom }) {
+  const { navigate } = useRouter()
+  const matchPathname = useMatch({
+    strict: false,
+    select: (s) => s.pathname,
+  })
+  return React.useCallback(
+    <
+      TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,
+      TTo extends string = '',
+      TMaskFrom extends RoutePaths<TRouteTree> = '/',
+      TMaskTo extends string = '',
+    >(
+      opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+    ) => {
+      return navigate({
+        from: opts?.to ? matchPathname : undefined,
+        ...defaultOpts,
+        ...(opts as any),
+      })
+    },
+    [],
+  )
+}
+
+// NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it
+// export function typedNavigate<
+//   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+//   TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+// >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {
+//   return navigate as <
+//     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,
+//     TTo extends string = '',
+//     TMaskFrom extends RoutePaths<TRouteTree> = '/',
+//     TMaskTo extends string = '',
+//   >(
+//     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+//   ) => Promise<void>
+// } //
+
+export function Navigate<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+>(props: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>): null {
+  const { navigate } = useRouter()
+  const match = useMatch({ strict: false })
+
+  React.useEffect(() => {
+    navigate({
+      from: props.to ? match.pathname : undefined,
+      ...props,
+    } as any)
+  }, [])
+
+  return null
+}
+
+export type UseLinkPropsOptions<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = ActiveLinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+export type LinkProps<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = ActiveLinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+    // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+    children?:
+      | React.ReactNode
+      | ((state: { isActive: boolean }) => React.ReactNode)
+  }
+
+export type ActiveLinkOptions<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = LinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
+  // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  activeProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+  // A function that returns additional props for the `inactive` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  inactiveProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+}

package/src/useParams.tsx

@@ -0,0 +1,25 @@
+import { AnyRoute } from './route'
+import { RouteIds, RouteById, AllParams } from './routeInfo'
+import { RegisteredRouter } from './router'
+import { last } from './utils'
+import { useRouterState } from './RouterProvider'
+import { StrictOrFrom } from './utils'
+
+export function useParams<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TDefaultSelected = AllParams<TRouteTree> &
+    RouteById<TRouteTree, TFrom>['types']['allParams'],
+  TSelected = TDefaultSelected,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (search: TDefaultSelected) => TSelected
+  },
+): TSelected {
+  return useRouterState({
+    select: (state: any) => {
+      const params = (last(state.matches) as any)?.params
+      return opts?.select ? opts.select(params) : params
+    },
+  })
+}

package/src/useSearch.tsx

@@ -0,0 +1,25 @@
+import { AnyRoute } from './route'
+import { RouteIds, RouteById } from './routeInfo'
+import { RegisteredRouter } from './router'
+import { RouteMatch } from './Matches'
+import { useMatch } from './Matches'
+import { StrictOrFrom } from './utils'
+
+export function useSearch<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TSearch = RouteById<TRouteTree, TFrom>['types']['fullSearchSchema'],
+  TSelected = TSearch,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (search: TSearch) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) => {
+      return opts?.select ? opts.select(match.search as TSearch) : match.search
+    },
+  })
+}