@tanstack/react-router 0.0.1-beta.20 → 0.0.1-beta.200

package/src/react.tsx

@@ -0,0 +1,1228 @@
+import * as React from 'react'
+import { NoInfer, useStore } from '@tanstack/react-store'
+import invariant from 'tiny-invariant'
+import warning from 'tiny-warning'
+import {
+  functionalUpdate,
+  last,
+  pick,
+  MatchRouteOptions,
+  RegisteredRouter,
+  RouterOptions,
+  Router,
+  RouteMatch,
+  RouteByPath,
+  AnyRoute,
+  AnyRouteProps,
+  LinkOptions,
+  ToOptions,
+  ResolveRelativePath,
+  NavigateOptions,
+  ResolveFullPath,
+  ResolveId,
+  AnySearchSchema,
+  ParsePathParams,
+  RouteContext,
+  AnyContext,
+  UseLoaderResult,
+  ResolveFullSearchSchema,
+  Route,
+  RouteConstraints,
+  RoutePaths,
+  RoutesById,
+  RouteIds,
+  RouteById,
+  ParseRoute,
+  AllParams,
+  rootRouteId,
+  AnyPathParams,
+  Expand,
+  ResolveAllParams,
+  DeepMergeAll,
+  IsAny,
+} from '@tanstack/router-core'
+
+const useLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
+declare module '@tanstack/router-core' {
+  interface RouterOptions<
+    TRouteTree extends AnyRoute,
+    TDehydrated extends Record<string, any>,
+  > {
+    Wrap?: React.ComponentType<{
+      children: React.ReactNode
+      dehydratedState?: TDehydrated
+    }>
+  }
+
+  interface RegisterRouteComponent<
+    TLoader = unknown,
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TAllContext extends Record<string, any> = AnyContext,
+  > {
+    RouteComponent: RouteComponent<
+      RouteProps<TLoader, TFullSearchSchema, TAllParams, TAllContext>
+    >
+  }
+
+  interface RegisterErrorRouteComponent<
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TAllContext extends Record<string, any> = AnyContext,
+  > {
+    ErrorRouteComponent: RouteComponent<
+      ErrorRouteProps<TFullSearchSchema, TAllParams, TAllContext>
+    >
+  }
+
+  interface RegisterPendingRouteComponent<
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TAllContext extends Record<string, any> = AnyContext,
+  > {
+    PendingRouteComponent: RouteComponent<
+      PendingRouteProps<TFullSearchSchema, TAllParams, TAllContext>
+    >
+  }
+
+  interface Route<
+    TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
+    TPath extends RouteConstraints['TPath'] = '/',
+    TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<
+      TParentRoute,
+      TPath
+    >,
+    TCustomId extends RouteConstraints['TCustomId'] = string,
+    TId extends RouteConstraints['TId'] = ResolveId<
+      TParentRoute,
+      TCustomId,
+      TPath
+    >,
+    TLoaderContext extends RouteConstraints['TLoaderContext'] = AnyContext,
+    TLoader = unknown,
+    TSearchSchema extends RouteConstraints['TSearchSchema'] = {},
+    TFullSearchSchema extends RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<
+      TParentRoute,
+      TSearchSchema
+    >,
+    TParams extends RouteConstraints['TParams'] = Expand<
+      Record<ParsePathParams<TPath>, string>
+    >,
+    TAllParams extends RouteConstraints['TAllParams'] = ResolveAllParams<
+      TParentRoute,
+      TParams
+    >,
+    TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
+    TAllContext extends RouteConstraints['TAllContext'] = Expand<
+      DeepMergeAll<
+        [
+          IsAny<TParentRoute['types']['context'], {}>,
+          TLoaderContext,
+          TRouteContext,
+        ]
+      >
+    >,
+    TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+    TChildren extends RouteConstraints['TChildren'] = unknown,
+    TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
+  > {
+    useMatch: <TSelected = TAllContext>(opts?: {
+      select?: (search: TAllContext) => TSelected
+    }) => TSelected
+    useLoader: <TSelected = TLoader>(opts?: {
+      select?: (search: TLoader) => TSelected
+    }) => UseLoaderResult<TSelected>
+    useRouteContext: <TSelected = TAllContext>(opts?: {
+      select?: (search: TAllContext) => TSelected
+    }) => TSelected
+    useSearch: <TSelected = TFullSearchSchema>(opts?: {
+      select?: (search: TFullSearchSchema) => TSelected
+    }) => TSelected
+    useParams: <TSelected = TAllParams>(opts?: {
+      select?: (search: TAllParams) => TSelected
+    }) => TSelected
+  }
+
+  interface RegisterRouteProps<
+    TLoader = unknown,
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TAllContext extends Record<string, any> = AnyContext,
+  > {
+    RouteProps: RouteProps<TLoader, TFullSearchSchema, TAllParams, TAllContext>
+  }
+
+  interface RegisterPendingRouteProps<
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TAllContext extends Record<string, any> = AnyContext,
+  > {
+    PendingRouteProps: PendingRouteProps<
+      TFullSearchSchema,
+      TAllParams,
+      TAllContext
+    >
+  }
+
+  interface RegisterErrorRouteProps<
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TAllContext extends Record<string, any> = AnyContext,
+  > {
+    ErrorRouteProps: ErrorRouteProps
+  }
+}
+
+export type RouteProps<
+  TLoader = unknown,
+  TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TAllContext extends Record<string, any> = AnyContext,
+> = {
+  useLoader: <TSelected = TLoader>(opts?: {
+    select?: (search: TLoader) => TSelected
+  }) => UseLoaderResult<TSelected>
+  useMatch: <TSelected = TAllContext>(opts?: {
+    select?: (search: TAllContext) => TSelected
+  }) => TSelected
+  useRouteContext: <TSelected = TAllContext>(opts?: {
+    select?: (search: TAllContext) => TSelected
+  }) => TSelected
+  useSearch: <TSelected = TFullSearchSchema>(opts?: {
+    select?: (search: TFullSearchSchema) => TSelected
+  }) => TSelected
+  useParams: <TSelected = TAllParams>(opts?: {
+    select?: (search: TAllParams) => TSelected
+  }) => TSelected
+}
+
+export type ErrorRouteProps<
+  TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TAllContext extends Record<string, any> = AnyContext,
+> = {
+  error: unknown
+  info: { componentStack: string }
+} & Omit<
+  RouteProps<unknown, TFullSearchSchema, TAllParams, TAllContext>,
+  'useLoader'
+>
+
+export type PendingRouteProps<
+  TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TAllContext extends Record<string, any> = AnyContext,
+> = Omit<
+  RouteProps<unknown, TFullSearchSchema, TAllParams, TAllContext>,
+  'useLoader'
+>
+
+Route.__onInit = (route) => {
+  Object.assign(route, {
+    useMatch: (opts = {}) => {
+      return useMatch({ ...opts, from: route.id }) as any
+    },
+    useLoader: (opts = {}) => {
+      return useLoader({ ...opts, from: route.id }) as any
+    },
+    useRouteContext: (opts: any = {}) => {
+      return useMatch({
+        ...opts,
+        from: route.id,
+        select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
+      } as any)
+    },
+    useSearch: (opts = {}) => {
+      return useSearch({ ...opts, from: route.id } as any)
+    },
+    useParams: (opts = {}) => {
+      return useParams({ ...opts, from: route.id } as any)
+    },
+  })
+}
+
+//
+
+type ReactNode = any
+
+export type SyncRouteComponent<TProps> =
+  | ((props: TProps) => ReactNode)
+  | React.LazyExoticComponent<(props: TProps) => ReactNode>
+
+export type AsyncRouteComponent<TProps> = SyncRouteComponent<TProps> & {
+  preload?: () => Promise<void>
+}
+
+export type ErrorRouteComponent = AsyncRouteComponent<ErrorRouteComponentProps>
+
+export type ErrorRouteComponentProps = {
+  error: Error
+  info: { componentStack: string }
+}
+
+export type AnyRouteComponent = RouteComponent<AnyRouteProps>
+
+export type RouteComponent<TProps> = AsyncRouteComponent<TProps>
+
+export function lazyRouteComponent<
+  T extends Record<string, any>,
+  TKey extends keyof T = 'default',
+>(
+  importer: () => Promise<T>,
+  exportName?: TKey,
+): T[TKey] extends (props: infer TProps) => any
+  ? AsyncRouteComponent<TProps>
+  : never {
+  let loadPromise: Promise<any>
+
+  const load = () => {
+    if (!loadPromise) {
+      loadPromise = importer()
+    }
+
+    return loadPromise
+  }
+
+  const lazyComp = React.lazy(async () => {
+    const moduleExports = await load()
+    const comp = moduleExports[exportName ?? 'default']
+    return {
+      default: comp,
+    }
+  })
+
+  ;(lazyComp as any).preload = load
+
+  return lazyComp as any
+}
+
+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>)
+  // If set to `true`, the link's underlying navigate() call will be wrapped in a `React.startTransition` call. Defaults to `true`.
+  startTransition?: boolean
+}
+
+export type MakeUseMatchRouteOptions<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = ToOptions<AnyRoute, TFrom, TTo, TMaskFrom, TMaskTo> & MatchRouteOptions
+
+export type MakeMatchRouteOptions<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
+  MatchRouteOptions & {
+    // 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?:
+      | ((
+          params?: RouteByPath<
+            TRouteTree,
+            ResolveRelativePath<TFrom, NoInfer<TTo>>
+          >['types']['allParams'],
+        ) => ReactNode)
+      | React.ReactNode
+  }
+
+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 PromptProps = {
+  message: string
+  condition?: boolean | any
+  children?: ReactNode
+}
+
+//
+
+export function useLinkProps<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+>(
+  options: MakeLinkPropsOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+): React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  const router = useRouter()
+
+  const {
+    // custom props
+    type,
+    children,
+    target,
+    activeProps = () => ({ className: 'active' }),
+    inactiveProps = () => ({}),
+    activeOptions,
+    disabled,
+    // fromCurrent,
+    hash,
+    search,
+    params,
+    to = '.',
+    state,
+    mask,
+    preload,
+    preloadDelay,
+    replace,
+    // element props
+    style,
+    className,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    ...rest
+  } = options
+
+  const linkInfo = router.buildLink(options as any)
+
+  if (linkInfo.type === 'external') {
+    const { href } = linkInfo
+    return { href }
+  }
+
+  const {
+    handleClick,
+    handleFocus,
+    handleEnter,
+    handleLeave,
+    handleTouchStart,
+    isActive,
+    next,
+  } = linkInfo
+
+  const handleReactClick = (e: Event) => {
+    if (options.startTransition ?? true) {
+      ;(React.startTransition || ((d) => d))(() => {
+        handleClick(e)
+      })
+    }
+  }
+
+  const composeHandlers =
+    (handlers: (undefined | ((e: any) => void))[]) =>
+    (e: React.SyntheticEvent) => {
+      if (e.persist) e.persist()
+      handlers.filter(Boolean).forEach((handler) => {
+        if (e.defaultPrevented) return
+        handler!(e)
+      })
+    }
+
+  // Get the active props
+  const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> = isActive
+    ? functionalUpdate(activeProps as any, {}) ?? {}
+    : {}
+
+  // Get the inactive props
+  const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
+    isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {}
+
+  return {
+    ...resolvedActiveProps,
+    ...resolvedInactiveProps,
+    ...rest,
+    href: disabled
+      ? undefined
+      : next.maskedLocation
+      ? next.maskedLocation.href
+      : next.href,
+    onClick: composeHandlers([onClick, handleReactClick]),
+    onFocus: composeHandlers([onFocus, handleFocus]),
+    onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
+    onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+    target,
+    style: {
+      ...style,
+      ...resolvedActiveProps.style,
+      ...resolvedInactiveProps.style,
+    },
+    className:
+      [
+        className,
+        resolvedActiveProps.className,
+        resolvedInactiveProps.className,
+      ]
+        .filter(Boolean)
+        .join(' ') || undefined,
+    ...(disabled
+      ? {
+          role: 'link',
+          'aria-disabled': true,
+        }
+      : undefined),
+    ['data-status']: isActive ? 'active' : undefined,
+  }
+}
+
+export interface LinkComponent<TProps extends Record<string, any> = {}> {
+  <
+    TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+    TFrom extends RoutePaths<TRouteTree> = '/',
+    TTo extends string = '',
+    TMaskFrom extends RoutePaths<TRouteTree> = '/',
+    TMaskTo extends string = '',
+  >(
+    props: MakeLinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
+      TProps &
+      React.RefAttributes<HTMLAnchorElement>,
+  ): ReactNode
+}
+
+export const Link: LinkComponent = React.forwardRef((props: any, ref) => {
+  const linkProps = useLinkProps(props)
+
+  return (
+    <a
+      {...{
+        ref: ref as any,
+        ...linkProps,
+        children:
+          typeof props.children === 'function'
+            ? props.children({
+                isActive: (linkProps as any)['data-status'] === 'active',
+              })
+            : props.children,
+      }}
+    />
+  )
+}) as any
+
+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 router = useRouter()
+
+  useLayoutEffect(() => {
+    router.navigate(props as any)
+  }, [])
+
+  return null
+}
+
+export const matchIdsContext = React.createContext<string[]>(null!)
+export const routerContext = React.createContext<RegisteredRouter>(null!)
+
+export type RouterProps<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDehydrated extends Record<string, any> = Record<string, any>,
+> = Omit<RouterOptions<TRouteTree, TDehydrated>, 'context'> & {
+  router: Router<TRouteTree>
+  context?: Partial<RouterOptions<TRouteTree, TDehydrated>['context']>
+}
+
+export function useRouterState<TSelected = RegisteredRouter['state']>(opts?: {
+  select: (state: RegisteredRouter['state']) => TSelected
+}): TSelected {
+  const router = useRouter()
+  return useStore(router.__store, opts?.select as any)
+}
+
+export function RouterProvider<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({ router, ...rest }: RouterProps<TRouteTree, TDehydrated>) {
+  router.update(rest)
+
+  React.useEffect(() => {
+    let unsub
+
+    React.startTransition(() => {
+      unsub = router.mount()
+    })
+
+    return unsub
+  }, [router])
+
+  const Wrap = router.options.Wrap || React.Fragment
+
+  return (
+    <Wrap>
+      <routerContext.Provider value={router as any}>
+        <Matches />
+      </routerContext.Provider>
+    </Wrap>
+  )
+}
+
+function Matches() {
+  const router = useRouter()
+
+  const matchIds = useRouterState({
+    select: (state) => {
+      return state.renderedMatchIds
+    },
+  })
+
+  const locationKey = useRouterState({
+    select: (d) => d.resolvedLocation.state?.key,
+  })
+
+  const route = router.getRoute(rootRouteId)
+
+  const errorComponent = React.useCallback(
+    (props: any) => {
+      return React.createElement(ErrorComponent, {
+        ...props,
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams,
+      })
+    },
+    [route],
+  )
+
+  return (
+    <matchIdsContext.Provider value={[undefined!, ...matchIds]}>
+      <CatchBoundary
+        resetKey={locationKey}
+        errorComponent={errorComponent}
+        onCatch={() => {
+          warning(
+            false,
+            `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`,
+          )
+        }}
+      >
+        <Outlet />
+      </CatchBoundary>
+    </matchIdsContext.Provider>
+  )
+}
+
+export function useRouter(): RegisteredRouter {
+  const value = React.useContext(routerContext)
+  warning(value, 'useRouter must be used inside a <Router> component!')
+  return value
+}
+
+export function useMatches<T = RouteMatch[]>(opts?: {
+  select?: (matches: RouteMatch[]) => T
+}): T {
+  const matchIds = React.useContext(matchIdsContext)
+
+  return useRouterState({
+    select: (state) => {
+      const matches = state.renderedMatches.slice(
+        state.renderedMatches.findIndex((d) => d.id === matchIds[0]),
+      )
+      return opts?.select ? opts.select(matches) : (matches as T)
+    },
+  })
+}
+
+type StrictOrFrom<TFrom> =
+  | {
+      from: TFrom
+      strict?: true
+    }
+  | {
+      from?: never
+      strict: false
+    }
+
+export function useMatch<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteMatchState = RouteMatch<TRouteTree, TFrom>,
+  TSelected = TRouteMatchState,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatchState) => TSelected
+  },
+): TStrict extends true ? TRouteMatchState : TRouteMatchState | undefined {
+  const router = useRouter()
+  const nearestMatchId = React.useContext(matchIdsContext)[0]!
+  const nearestMatchRouteId = router.getRouteMatch(nearestMatchId)?.routeId
+
+  const matchRouteId = useRouterState({
+    select: (state) => {
+      const match = opts?.from
+        ? state.renderedMatches.find((d) => d.routeId === opts?.from)
+        : state.renderedMatches.find((d) => d.id === nearestMatchId)
+
+      return match!.routeId
+    },
+  })
+
+  if (opts?.strict ?? true) {
+    invariant(
+      nearestMatchRouteId == matchRouteId,
+      `useMatch("${
+        matchRouteId as string
+      }") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${
+        matchRouteId as string
+      }", { strict: false })' or 'useRoute("${
+        matchRouteId as string
+      }")' instead?`,
+    )
+  }
+
+  const matchSelection = useRouterState({
+    select: (state) => {
+      const match = opts?.from
+        ? state.renderedMatches.find((d) => d.routeId === opts?.from)
+        : state.renderedMatches.find((d) => d.id === nearestMatchId)
+
+      invariant(
+        match,
+        `Could not find ${
+          opts?.from
+            ? `an active match from "${opts.from}"`
+            : 'a nearest match!'
+        }`,
+      )
+
+      return opts?.select ? opts.select(match as any) : match
+    },
+  })
+
+  return matchSelection as any
+}
+
+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 useLoader<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TLoader = RouteById<TRouteTree, TFrom>['types']['loader'],
+  TSelected = TLoader,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (search: TLoader) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) =>
+      opts?.select
+        ? opts?.select(match.loaderData as TLoader)
+        : match.loaderData,
+  })
+}
+
+export function useRouterContext<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TContext = RouteById<TRouteTree, TFrom>['types']['context'],
+  TSelected = TContext,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (search: TContext) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) =>
+      opts?.select ? opts.select(match.context as TContext) : match.context,
+  })
+}
+
+export function useRouteContext<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteContext = RouteById<TRouteTree, TFrom>['types']['context'],
+  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 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
+    },
+  })
+}
+
+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.renderedMatches) as any)?.params
+      return opts?.select ? opts.select(params) : params
+    },
+  })
+}
+
+export function useNavigate<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+>(defaultOpts?: { from?: TDefaultFrom }) {
+  const router = useRouter()
+  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 router.navigate({ ...defaultOpts, ...(opts as any) })
+    },
+    [],
+  )
+}
+
+export function useMatchRoute<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+>() {
+  const router = useRouter()
+
+  return React.useCallback(
+    <
+      TFrom extends RoutePaths<TRouteTree> = '/',
+      TTo extends string = '',
+      TMaskFrom extends RoutePaths<TRouteTree> = '/',
+      TMaskTo extends string = '',
+      TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,
+    >(
+      opts: MakeUseMatchRouteOptions<
+        TRouteTree,
+        TFrom,
+        TTo,
+        TMaskFrom,
+        TMaskTo
+      >,
+    ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {
+      const { pending, caseSensitive, ...rest } = opts
+
+      return router.matchRoute(rest as any, {
+        pending,
+        caseSensitive,
+      })
+    },
+    [],
+  )
+}
+
+export function MatchRoute<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+>(
+  props: MakeMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+): any {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute(props as any)
+
+  if (typeof props.children === 'function') {
+    return (props.children as any)(params)
+  }
+
+  return !!params ? props.children : null
+}
+
+export function Outlet() {
+  const matchIds = React.useContext(matchIdsContext).slice(1)
+
+  if (!matchIds[0]) {
+    return null
+  }
+
+  return <Match matchIds={matchIds} />
+}
+
+const defaultPending = () => null
+
+function Match({ matchIds }: { matchIds: string[] }) {
+  const router = useRouter()
+  const matchId = matchIds[0]!
+  const routeId = router.getRouteMatch(matchId)!.routeId
+  const route = router.getRoute(routeId)
+  const locationKey = useRouterState({
+    select: (s) => s.resolvedLocation.state?.key,
+  })
+
+  const PendingComponent = (route.options.pendingComponent ??
+    router.options.defaultPendingComponent ??
+    defaultPending) as any
+
+  const routeErrorComponent =
+    route.options.errorComponent ??
+    router.options.defaultErrorComponent ??
+    ErrorComponent
+
+  const ResolvedSuspenseBoundary =
+    route.options.wrapInSuspense ?? !route.isRoot
+      ? React.Suspense
+      : SafeFragment
+
+  const ResolvedCatchBoundary = !!routeErrorComponent
+    ? CatchBoundary
+    : SafeFragment
+
+  const errorComponent = React.useCallback(
+    (props: any) => {
+      return React.createElement(routeErrorComponent, {
+        ...props,
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams,
+      })
+    },
+    [route],
+  )
+
+  return (
+    <matchIdsContext.Provider value={matchIds}>
+      <ResolvedSuspenseBoundary
+        fallback={React.createElement(PendingComponent, {
+          useMatch: route.useMatch,
+          useRouteContext: route.useRouteContext,
+          useSearch: route.useSearch,
+          useParams: route.useParams,
+        })}
+      >
+        <ResolvedCatchBoundary
+          resetKey={locationKey}
+          errorComponent={errorComponent}
+          onCatch={() => {
+            warning(false, `Error in route match: ${matchId}`)
+          }}
+        >
+          <MatchInner matchId={matchId} PendingComponent={PendingComponent} />
+        </ResolvedCatchBoundary>
+      </ResolvedSuspenseBoundary>
+    </matchIdsContext.Provider>
+  )
+}
+
+function MatchInner({
+  matchId,
+  PendingComponent,
+}: {
+  matchId: string
+  PendingComponent: any
+}): any {
+  const router = useRouter()
+
+  const match = useRouterState({
+    select: (d) => {
+      const match = d.matchesById[matchId]
+      return pick(match!, ['status', 'loadPromise', 'routeId', 'error'])
+    },
+  })
+
+  const route = router.getRoute(match.routeId)
+
+  if (match.status === 'error') {
+    throw match.error
+  }
+
+  if (match.status === 'pending') {
+    return React.createElement(PendingComponent, {
+      useLoader: route.useLoader,
+      useMatch: route.useMatch,
+      useRouteContext: route.useRouteContext,
+      useSearch: route.useSearch,
+      useParams: route.useParams,
+    })
+  }
+
+  if (match.status === 'success') {
+    let comp = route.options.component ?? router.options.defaultComponent
+
+    if (comp) {
+      return React.createElement(comp, {
+        useLoader: route.useLoader,
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext as any,
+        useSearch: route.useSearch,
+        useParams: route.useParams as any,
+      } as any)
+    }
+
+    return <Outlet />
+  }
+
+  invariant(
+    false,
+    'Idle routeMatch status encountered during rendering! You should never see this. File an issue!',
+  )
+}
+
+function SafeFragment(props: any) {
+  return <>{props.children}</>
+}
+
+export function useInjectHtml() {
+  const router = useRouter()
+
+  return React.useCallback(
+    (html: string | (() => Promise<string> | string)) => {
+      router.injectHtml(html)
+    },
+    [],
+  )
+}
+
+export function useDehydrate() {
+  const router = useRouter()
+
+  return React.useCallback(function dehydrate<T>(
+    key: any,
+    data: T | (() => Promise<T> | T),
+  ) {
+    return router.dehydrateData(key, data)
+  },
+  [])
+}
+
+export function useHydrate() {
+  const router = useRouter()
+
+  return function hydrate<T = unknown>(key: any) {
+    return router.hydrateData(key) as T
+  }
+}
+
+// This is the messiest thing ever... I'm either seriously tired (likely) or
+// there has to be a better way to reset error boundaries when the
+// router's location key changes.
+
+export function CatchBoundary(props: {
+  resetKey: string
+  children: any
+  errorComponent?: any
+  onCatch: (error: any) => void
+}) {
+  const errorComponent = props.errorComponent ?? ErrorComponent
+
+  return (
+    <CatchBoundaryImpl
+      resetKey={props.resetKey}
+      onCatch={props.onCatch}
+      children={({ error }) => {
+        if (error) {
+          return React.createElement(errorComponent, {
+            error,
+          })
+        }
+
+        return props.children
+      }}
+    />
+  )
+}
+
+export class CatchBoundaryImpl extends React.Component<{
+  resetKey: string
+  children: (props: { error: any; reset: () => void }) => any
+  onCatch?: (error: any) => void
+}> {
+  state = { error: null } as any
+  static getDerivedStateFromError(error: any) {
+    return { error }
+  }
+  componentDidUpdate(
+    prevProps: Readonly<{
+      resetKey: string
+      children: (props: { error: any; reset: () => void }) => any
+      onCatch?: ((error: any, info: any) => void) | undefined
+    }>,
+    prevState: any,
+  ): void {
+    if (prevState.error && prevProps.resetKey !== this.props.resetKey) {
+      this.setState({ error: null })
+    }
+  }
+  componentDidCatch(error: any) {
+    this.props.onCatch?.(error)
+  }
+  render() {
+    return this.props.children(this.state)
+  }
+}
+
+export function ErrorComponent({ error }: { error: any }) {
+  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')
+
+  return (
+    <div style={{ padding: '.5rem', maxWidth: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
+        <strong style={{ fontSize: '1rem' }}>Something went wrong!</strong>
+        <button
+          style={{
+            appearance: 'none',
+            fontSize: '.6em',
+            border: '1px solid currentColor',
+            padding: '.1rem .2rem',
+            fontWeight: 'bold',
+            borderRadius: '.25rem',
+          }}
+          onClick={() => setShow((d) => !d)}
+        >
+          {show ? 'Hide Error' : 'Show Error'}
+        </button>
+      </div>
+      <div style={{ height: '.25rem' }} />
+      {show ? (
+        <div>
+          <pre
+            style={{
+              fontSize: '.7em',
+              border: '1px solid red',
+              borderRadius: '.25rem',
+              padding: '.3rem',
+              color: 'red',
+              overflow: 'auto',
+            }}
+          >
+            {error.message ? <code>{error.message}</code> : null}
+          </pre>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export function useBlocker(
+  message: string,
+  condition: boolean | any = true,
+): void {
+  const router = useRouter()
+
+  React.useEffect(() => {
+    if (!condition) return
+
+    let unblock = router.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 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
+}