@tanstack/react-router 0.0.1-beta.21 → 0.0.1-beta.211

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,34 @@
+import * as React from 'react'
+import { ReactNode } from './route'
+import { useRouter } from './RouterProvider'
+
+export function useBlocker(
+  message: string,
+  condition: boolean | any = true,
+): void {
+  const { history } = useRouter()
+
+  React.useEffect(() => {
+    if (!condition) return
+
+    let unblock = history.block((retry, cancel) => {
+      if (window.confirm(message)) {
+        unblock()
+        retry()
+      }
+    })
+
+    return unblock
+  })
+}
+
+export function Block({ message, condition, children }: PromptProps) {
+  useBlocker(message, condition)
+  return (children ?? null) as ReactNode
+}
+
+export type PromptProps = {
+  message: string
+  condition?: boolean | any
+  children?: ReactNode
+}

package/src/useNavigate.tsx

@@ -0,0 +1,109 @@
+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 match = useMatch({
+    strict: false,
+  })
+  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 ? match.pathname : undefined,
+        ...defaultOpts,
+        ...(opts as any),
+      })
+    },
+    [],
+  )
+}
+
+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 })
+
+  useLayoutEffect(() => {
+    navigate({
+      from: props.to ? match.pathname : undefined,
+      ...props,
+    } as any)
+  }, [])
+
+  return null
+}
+
+export type MakeLinkPropsOptions<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = LinkPropsOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+export type MakeLinkOptions<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = LinkPropsOptions<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 LinkPropsOptions<
+  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 './RouterProvider'
+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
+    },
+  })
+}

package/src/utils.ts

@@ -0,0 +1,337 @@
+import * as React from 'react'
+import { useMatch } from './Matches'
+import { RouteMatch } from './RouterProvider'
+import { AnyRoute } from './route'
+import { ParseRoute, RouteIds, RoutesById, RouteById } from './routeInfo'
+import { RegisteredRouter } from './router'
+
+export type NoInfer<T> = [T][T extends any ? 0 : never]
+export type IsAny<T, Y, N = T> = 1 extends 0 & T ? Y : N
+export type IsAnyBoolean<T> = 1 extends 0 & T ? true : false
+export type IsKnown<T, Y, N> = unknown extends T ? N : Y
+export type PickAsRequired<T, K extends keyof T> = Omit<T, K> &
+  Required<Pick<T, K>>
+export type PickAsPartial<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>
+export type PickUnsafe<T, K> = K extends keyof T ? Pick<T, K> : never
+export type PickExtra<T, K> = {
+  [TKey in keyof K as string extends TKey
+    ? never
+    : TKey extends keyof T
+    ? never
+    : TKey]: K[TKey]
+}
+
+export type PickRequired<T> = {
+  [K in keyof T as undefined extends T[K] ? never : K]: T[K]
+}
+
+// export type Expand<T> = T
+export type Expand<T> = T extends object
+  ? T extends infer O
+    ? { [K in keyof O]: O[K] }
+    : never
+  : T
+
+export type UnionToIntersection<U> = (
+  U extends any ? (k: U) => void : never
+) extends (k: infer I) => any
+  ? I
+  : never
+
+// type Compute<T> = { [K in keyof T]: T[K] } | never
+
+// type AllKeys<T> = T extends any ? keyof T : never
+
+// export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
+//   {
+//     [K in Keys]: T[Keys]
+//   } & {
+//     [K in AllKeys<T>]?: T extends any
+//       ? K extends keyof T
+//         ? T[K]
+//         : never
+//       : never
+//   }
+// >
+
+export type Assign<Left, Right> = Omit<Left, keyof Right> & Right
+
+export type AssignAll<T extends any[]> = T extends [infer Left, ...infer Right]
+  ? Right extends any[]
+    ? Assign<Left, AssignAll<Right>>
+    : Left
+  : {}
+
+// // Sample types to merge
+// type TypeA = {
+//   shared: string
+//   onlyInA: string
+//   nested: {
+//     shared: string
+//     aProp: string
+//   }
+//   array: string[]
+// }
+
+// type TypeB = {
+//   shared: number
+//   onlyInB: number
+//   nested: {
+//     shared: number
+//     bProp: number
+//   }
+//   array: number[]
+// }
+
+// type TypeC = {
+//   shared: boolean
+//   onlyInC: boolean
+//   nested: {
+//     shared: boolean
+//     cProp: boolean
+//   }
+//   array: boolean[]
+// }
+
+// type Test = Expand<Assign<TypeA, TypeB>>
+
+// // Using DeepMerge to merge TypeA and TypeB
+// type MergedType = Expand<AssignAll<[TypeA, TypeB, TypeC]>>
+
+export type Values<O> = O[ValueKeys<O>]
+export type ValueKeys<O> = Extract<keyof O, PropertyKey>
+
+export type DeepAwaited<T> = T extends Promise<infer A>
+  ? DeepAwaited<A>
+  : T extends Record<infer A, Promise<infer B>>
+  ? { [K in A]: DeepAwaited<B> }
+  : T
+
+export type PathParamMask<TRoutePath extends string> =
+  TRoutePath extends `${infer L}/$${infer C}/${infer R}`
+    ? PathParamMask<`${L}/${string}/${R}`>
+    : TRoutePath extends `${infer L}/$${infer C}`
+    ? PathParamMask<`${L}/${string}`>
+    : TRoutePath
+
+export type Timeout = ReturnType<typeof setTimeout>
+
+export type Updater<TPrevious, TResult = TPrevious> =
+  | TResult
+  | ((prev?: TPrevious) => TResult)
+
+export type NonNullableUpdater<TPrevious, TResult = TPrevious> =
+  | TResult
+  | ((prev: TPrevious) => TResult)
+
+export type PickExtract<T, U> = {
+  [K in keyof T as T[K] extends U ? K : never]: T[K]
+}
+
+export type PickExclude<T, U> = {
+  [K in keyof T as T[K] extends U ? never : K]: T[K]
+}
+
+//
+
+export const isServer = typeof document === 'undefined'
+
+export function last<T>(arr: T[]) {
+  return arr[arr.length - 1]
+}
+
+function isFunction(d: any): d is Function {
+  return typeof d === 'function'
+}
+
+export function functionalUpdate<TResult>(
+  updater: Updater<TResult> | NonNullableUpdater<TResult>,
+  previous: TResult,
+): TResult {
+  if (isFunction(updater)) {
+    return updater(previous as TResult)
+  }
+
+  return updater
+}
+
+export function pick<T, K extends keyof T>(parent: T, keys: K[]): Pick<T, K> {
+  return keys.reduce((obj: any, key: K) => {
+    obj[key] = parent[key]
+    return obj
+  }, {} as any)
+}
+
+/**
+ * This function returns `a` if `b` is deeply equal.
+ * If not, it will replace any deeply equal children of `b` with those of `a`.
+ * This can be used for structural sharing between immutable JSON values for example.
+ * Do not use this with signals
+ */
+export function replaceEqualDeep<T>(prev: any, _next: T): T {
+  if (prev === _next) {
+    return prev
+  }
+
+  const next = _next as any
+
+  const array = Array.isArray(prev) && Array.isArray(next)
+
+  if (array || (isPlainObject(prev) && isPlainObject(next))) {
+    const prevSize = array ? prev.length : Object.keys(prev).length
+    const nextItems = array ? next : Object.keys(next)
+    const nextSize = nextItems.length
+    const copy: any = array ? [] : {}
+
+    let equalItems = 0
+
+    for (let i = 0; i < nextSize; i++) {
+      const key = array ? i : nextItems[i]
+      copy[key] = replaceEqualDeep(prev[key], next[key])
+      if (copy[key] === prev[key]) {
+        equalItems++
+      }
+    }
+
+    return prevSize === nextSize && equalItems === prevSize ? prev : copy
+  }
+
+  return next
+}
+
+// Copied from: https://github.com/jonschlinkert/is-plain-object
+export function isPlainObject(o: any) {
+  if (!hasObjectPrototype(o)) {
+    return false
+  }
+
+  // If has modified constructor
+  const ctor = o.constructor
+  if (typeof ctor === 'undefined') {
+    return true
+  }
+
+  // If has modified prototype
+  const prot = ctor.prototype
+  if (!hasObjectPrototype(prot)) {
+    return false
+  }
+
+  // If constructor does not have an Object-specific method
+  if (!prot.hasOwnProperty('isPrototypeOf')) {
+    return false
+  }
+
+  // Most likely a plain Object
+  return true
+}
+
+function hasObjectPrototype(o: any) {
+  return Object.prototype.toString.call(o) === '[object Object]'
+}
+
+export function partialDeepEqual(a: any, b: any): boolean {
+  if (a === b) {
+    return true
+  }
+
+  if (typeof a !== typeof b) {
+    return false
+  }
+
+  if (isPlainObject(a) && isPlainObject(b)) {
+    return !Object.keys(b).some((key) => !partialDeepEqual(a[key], b[key]))
+  }
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return !(
+      a.length !== b.length ||
+      a.some((item, index) => !partialDeepEqual(item, b[index]))
+    )
+  }
+
+  return false
+}
+
+export function useStableCallback<T extends (...args: any[]) => any>(fn: T): T {
+  const fnRef = React.useRef(fn)
+  fnRef.current = fn
+
+  const ref = React.useRef((...args: any[]) => fnRef.current(...args))
+  return ref.current as T
+}
+
+export function shallow<T>(objA: T, objB: T) {
+  if (Object.is(objA, objB)) {
+    return true
+  }
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false
+  }
+
+  const keysA = Object.keys(objA)
+  if (keysA.length !== Object.keys(objB).length) {
+    return false
+  }
+
+  for (let i = 0; i < keysA.length; i++) {
+    if (
+      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
+      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+export type StrictOrFrom<TFrom> =
+  | {
+      from: TFrom
+      strict?: true
+    }
+  | {
+      from?: never
+      strict: false
+    }
+
+export type RouteFromIdOrRoute<
+  T,
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+> = T extends ParseRoute<TRouteTree>
+  ? T
+  : T extends RouteIds<TRouteTree>
+  ? RoutesById<TRouteTree>[T]
+  : T extends string
+  ? RouteIds<TRouteTree>
+  : never
+
+export function useRouteContext<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],
+  TSelected = TRouteContext,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (search: TRouteContext) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) =>
+      opts?.select
+        ? opts.select(match.context as TRouteContext)
+        : match.context,
+  })
+}
+
+export const useLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect