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

package/src/Matches.tsx

@@ -1,105 +1,92 @@
 import * as React from 'react'
-import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
-import { ResolveRelativePath, ToOptions } from './link'
-import {
-  AnyRoute,
-  ReactNode,
-  RootSearchSchema,
-  StaticDataRouteOption,
-} from './route'
-import {
-  AllParams,
-  FullSearchSchema,
-  ParseRoute,
-  RouteById,
-  RouteByPath,
-  RouteIds,
-  RoutePaths,
-} from './routeInfo'
-import { AnyRouter, RegisteredRouter, RouterState } from './router'
-import {
+import { Transitioner } from './Transitioner'
+import { matchContext } from './matchContext'
+import { Match } from './Match'
+import { SafeFragment } from './SafeFragment'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type { ReactNode } from './route'
+import type {
+  AnyRouter,
   DeepPartial,
-  Expand,
+  MakeOptionalPathParams,
+  MakeOptionalSearchParams,
+  MakeRouteMatchUnion,
+  MaskOptions,
+  MatchRouteOptions,
   NoInfer,
-  StrictOrFrom,
-  isServer,
-  pick,
-} from './utils'
-import { CatchNotFound, DefaultGlobalNotFound, isNotFound } from './not-found'
-import { isRedirect } from './redirects'
-
-export const matchContext = React.createContext<string | undefined>(undefined)
-
-export interface RouteMatch<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
-  TReturnIntersection extends boolean = false,
-> {
-  id: string
-  routeId: TRouteId
-  pathname: string
-  params: TReturnIntersection extends false
-    ? RouteById<TRouteTree, TRouteId>['types']['allParams']
-    : Expand<Partial<AllParams<TRouteTree>>>
-  status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'
-  isFetching: boolean
-  showPending: boolean
-  error: unknown
-  paramsError: unknown
-  searchError: unknown
-  updatedAt: number
-  loadPromise?: Promise<void>
-  loaderData?: RouteById<TRouteTree, TRouteId>['types']['loaderData']
-  routeContext: RouteById<TRouteTree, TRouteId>['types']['routeContext']
-  context: RouteById<TRouteTree, TRouteId>['types']['allContext']
-  search: TReturnIntersection extends false
-    ? Exclude<
-        RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'],
-        RootSearchSchema
-      >
-    : Expand<
-        Partial<Omit<FullSearchSchema<TRouteTree>, keyof RootSearchSchema>>
-      >
-  fetchCount: number
-  abortController: AbortController
-  cause: 'preload' | 'enter' | 'stay'
-  loaderDeps: RouteById<TRouteTree, TRouteId>['types']['loaderDeps']
-  preload: boolean
-  invalid: boolean
-  pendingPromise?: Promise<void>
-  meta?: JSX.IntrinsicElements['meta'][]
-  links?: JSX.IntrinsicElements['link'][]
-  scripts?: JSX.IntrinsicElements['script'][]
-  headers?: Record<string, string>
-  globalNotFound?: boolean
-  staticData: StaticDataRouteOption
+  RegisteredRouter,
+  ResolveRelativePath,
+  ResolveRoute,
+  RouteByPath,
+  RouterState,
+  ToSubOptionsProps,
+} from '@tanstack/router-core'
+
+declare module '@tanstack/router-core' {
+  export interface RouteMatchExtensions {
+    meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>
+    links?: Array<React.JSX.IntrinsicElements['link'] | undefined>
+    scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
+    headScripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
+  }
 }
 
-export type AnyRouteMatch = RouteMatch<any, any>
-
 export function Matches() {
   const router = useRouter()
+
+  const pendingElement = router.options.defaultPendingComponent ? (
+    <router.options.defaultPendingComponent />
+  ) : null
+
+  // Do not render a root Suspense during SSR or hydrating from SSR
+  const ResolvedSuspense =
+    router.isServer || (typeof document !== 'undefined' && router.clientSsr)
+      ? SafeFragment
+      : React.Suspense
+
+  const inner = (
+    <ResolvedSuspense fallback={pendingElement}>
+      <Transitioner />
+      <MatchesInner />
+    </ResolvedSuspense>
+  )
+
+  return router.options.InnerWrap ? (
+    <router.options.InnerWrap>{inner}</router.options.InnerWrap>
+  ) : (
+    inner
+  )
+}
+
+function MatchesInner() {
   const matchId = useRouterState({
     select: (s) => {
-      return getRenderedMatches(s)[0]?.id
+      return s.matches[0]?.id
     },
   })
 
+  const resetKey = useRouterState({
+    select: (s) => s.loadedAt,
+  })
+
   return (
     <matchContext.Provider value={matchId}>
       <CatchBoundary
-        getResetKey={() => router.state.resolvedLocation.state?.key!}
+        getResetKey={() => resetKey}
         errorComponent={ErrorComponent}
         onCatch={(error) => {
           warning(
             false,
-            `The following error wasn't caught by any route! 👇 At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+            `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
           )
-          console.error(error)
+          warning(false, error.message || error.toString())
         }}
       >
         {matchId ? <Match matchId={matchId} /> : null}
@@ -108,326 +95,60 @@ export function Matches() {
   )
 }
 
-function SafeFragment(props: any) {
-  return <>{props.children}</>
-}
-
-export function Match({ matchId }: { matchId: string }) {
-  const router = useRouter()
-  const routeId = useRouterState({
-    select: (s) =>
-      getRenderedMatches(s).find((d) => d.id === matchId)?.routeId as string,
-  })
-
-  invariant(
-    routeId,
-    `Could not find routeId for matchId "${matchId}". Please file an issue!`,
-  )
-
-  const route = router.routesById[routeId]!
-
-  const PendingComponent = (route.options.pendingComponent ??
-    router.options.defaultPendingComponent) as any
-
-  const pendingElement = PendingComponent ? <PendingComponent /> : null
-
-  const routeErrorComponent =
-    route.options.errorComponent ??
-    router.options.defaultErrorComponent ??
-    ErrorComponent
-
-  const routeNotFoundComponent = route.isRoot
-    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
-      route.options.notFoundComponent ??
-      router.options.notFoundRoute?.options.component
-    : route.options.notFoundComponent
-
-  const ResolvedSuspenseBoundary =
-    route.options.wrapInSuspense ??
-    PendingComponent ??
-    route.options.component?.preload ??
-    route.options.pendingComponent?.preload ??
-    (route.options.errorComponent as any)?.preload
-      ? React.Suspense
-      : SafeFragment
-
-  const ResolvedCatchBoundary = routeErrorComponent
-    ? CatchBoundary
-    : SafeFragment
-
-  const ResolvedNotFoundBoundary = routeNotFoundComponent
-    ? CatchNotFound
-    : SafeFragment
-
-  return (
-    <matchContext.Provider value={matchId}>
-      <ResolvedSuspenseBoundary fallback={pendingElement}>
-        <ResolvedCatchBoundary
-          getResetKey={() => router.state.resolvedLocation.state?.key!}
-          errorComponent={routeErrorComponent}
-          onCatch={(error) => {
-            // Forward not found errors (we don't want to show the error component for these)
-            if (isNotFound(error)) throw error
-            warning(false, `Error in route match: ${matchId}`)
-            console.error(error)
-          }}
-        >
-          <ResolvedNotFoundBoundary
-            fallback={(error) => {
-              // If the current not found handler doesn't exist or it has a
-              // route ID which doesn't match the current route, rethrow the error
-              if (
-                !routeNotFoundComponent ||
-                (error.routeId && error.routeId !== routeId) ||
-                (!error.routeId && !route.isRoot)
-              )
-                throw error
-
-              return React.createElement(routeNotFoundComponent, error as any)
-            }}
-          >
-            <MatchInner matchId={matchId!} pendingElement={pendingElement} />
-          </ResolvedNotFoundBoundary>
-        </ResolvedCatchBoundary>
-      </ResolvedSuspenseBoundary>
-    </matchContext.Provider>
-  )
-}
+export type UseMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = ToSubOptionsProps<TRouter, TFrom, TTo> &
+  DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &
+  DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &
+  MaskOptions<TRouter, TMaskFrom, TMaskTo> &
+  MatchRouteOptions
 
-function MatchInner({
-  matchId,
-  pendingElement,
-}: {
-  matchId: string
-  pendingElement: any
-}): any {
+export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
   const router = useRouter()
-  const routeId = useRouterState({
-    select: (s) =>
-      getRenderedMatches(s).find((d) => d.id === matchId)?.routeId as string,
-  })
 
-  const route = router.routesById[routeId]!
-
-  const match = useRouterState({
-    select: (s) =>
-      pick(getRenderedMatches(s).find((d) => d.id === matchId)!, [
-        'status',
-        'error',
-        'showPending',
-        'loadPromise',
-      ]),
+  useRouterState({
+    select: (s) => [s.location.href, s.resolvedLocation?.href, s.status],
+    structuralSharing: true as any,
   })
 
-  const RouteErrorComponent =
-    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||
-    ErrorComponent
-
-  if (match.status === 'notFound') {
-    let error: unknown
-    if (isServerSideError(match.error)) {
-      const deserializeError =
-        router.options.errorSerializer?.deserialize ?? defaultDeserializeError
-
-      error = deserializeError(match.error.data)
-    } else {
-      error = match.error
-    }
-
-    invariant(isNotFound(error), 'Expected a notFound error')
-
-    return renderRouteNotFound(router, route, error)
-  }
-
-  if (match.status === 'redirected') {
-    // Redirects should be handled by the router transition. If we happen to
-    // encounter a redirect here, it's a bug. Let's warn, but render nothing.
-    invariant(isRedirect(match.error), 'Expected a redirect error')
-
-    warning(
-      false,
-      'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',
-    )
-
-    return null
-  }
-
-  if (match.status === 'error') {
-    // If we're on the server, we need to use React's new and super
-    // wonky api for throwing errors from a server side render inside
-    // of a suspense boundary. This is the only way to get
-    // renderToPipeableStream to not hang indefinitely.
-    // We'll serialize the error and rethrow it on the client.
-    if (isServer) {
-      return (
-        <RouteErrorComponent
-          error={match.error}
-          info={{
-            componentStack: '',
-          }}
-        />
-      )
-    }
-
-    if (isServerSideError(match.error)) {
-      const deserializeError =
-        router.options.errorSerializer?.deserialize ?? defaultDeserializeError
-      throw deserializeError(match.error.data)
-    } else {
-      throw match.error
-    }
-  }
-
-  if (match.status === 'pending') {
-    if (match.showPending) {
-      return pendingElement
-    }
-    throw match.loadPromise
-  }
-
-  if (match.status === 'success') {
-    let Comp = route.options.component ?? router.options.defaultComponent
-
-    if (Comp) {
-      return <Comp />
-    }
-
-    return <Outlet />
-  }
-
-  invariant(
-    false,
-    'Idle routeMatch status encountered during rendering! You should never see this. File an issue!',
-  )
-}
-
-export const Outlet = React.memo(function Outlet() {
-  const router = useRouter()
-  const matchId = React.useContext(matchContext)
-  const routeId = useRouterState({
-    select: (s) =>
-      getRenderedMatches(s).find((d) => d.id === matchId)?.routeId as string,
-  })
-
-  const route = router.routesById[routeId]!
-
-  const { parentGlobalNotFound } = useRouterState({
-    select: (s) => {
-      const matches = getRenderedMatches(s)
-      const parentMatch = matches.find((d) => d.id === matchId)
-      invariant(
-        parentMatch,
-        `Could not find parent match for matchId "${matchId}"`,
-      )
-      return {
-        parentGlobalNotFound: parentMatch.globalNotFound,
-      }
-    },
-  })
-
-  const childMatchId = useRouterState({
-    select: (s) => {
-      const matches = getRenderedMatches(s)
-      const index = matches.findIndex((d) => d.id === matchId)
-      return matches[index + 1]?.id
-    },
-  })
-
-  if (parentGlobalNotFound) {
-    return renderRouteNotFound(router, route, undefined)
-  }
-
-  if (!childMatchId) {
-    return null
-  }
-
-  return <Match matchId={childMatchId} />
-})
-
-function renderRouteNotFound(router: AnyRouter, route: AnyRoute, data: any) {
-  if (!route.options.notFoundComponent) {
-    if (router.options.defaultNotFoundComponent) {
-      return <router.options.defaultNotFoundComponent data={data} />
-    }
-
-    if (process.env.NODE_ENV === 'development') {
-      warning(
-        route.options.notFoundComponent,
-        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<div>Not Found<div>)`,
-      )
-    }
-
-    return <DefaultGlobalNotFound />
-  }
-
-  return <route.options.notFoundComponent data={data} />
-}
-
-export interface MatchRouteOptions {
-  pending?: boolean
-  caseSensitive?: boolean
-  includeSearch?: boolean
-  fuzzy?: boolean
-}
-
-export type UseMatchRouteOptions<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> = RoutePaths<TRouteTree>,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
-  TMaskTo extends string = '',
-  Options extends ToOptions<
-    TRouteTree,
-    TFrom,
-    TTo,
-    TMaskFrom,
-    TMaskTo
-  > = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
-  RelaxedOptions = Omit<Options, 'search' | 'params'> &
-    DeepPartial<Pick<Options, 'search' | 'params'>>,
-> = RelaxedOptions & MatchRouteOptions
-
-export function useMatchRoute<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
->() {
-  useRouterState({ select: (s) => [s.location, s.resolvedLocation] })
-  const { matchRoute } = useRouter()
-
   return React.useCallback(
     <
-      TFrom extends RoutePaths<TRouteTree> = RoutePaths<TRouteTree>,
-      TTo extends string = '',
-      TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
-      TMaskTo extends string = '',
-      TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,
+      const TFrom extends string = string,
+      const TTo extends string | undefined = undefined,
+      const TMaskFrom extends string = TFrom,
+      const TMaskTo extends string = '',
     >(
-      opts: UseMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
-    ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {
+      opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+    ): false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams'] => {
       const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
 
-      return matchRoute(rest as any, {
+      return router.matchRoute(rest as any, {
         pending,
         caseSensitive,
         fuzzy,
         includeSearch,
       })
     },
-    [],
+    [router],
   )
 }
 
 export type MakeMatchRouteOptions<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> = RoutePaths<TRouteTree>,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
   TMaskTo extends string = '',
-> = UseMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
+> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
   // 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,
+          TRouter['routeTree'],
           ResolveRelativePath<TFrom, NoInfer<TTo>>
         >['types']['allParams'],
       ) => ReactNode)
@@ -435,225 +156,95 @@ export type MakeMatchRouteOptions<
 }
 
 export function MatchRoute<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> = RoutePaths<TRouteTree>,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
-  TMaskTo extends string = '',
->(
-  props: MakeMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
-): any {
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {
   const matchRoute = useMatchRoute()
-  const params = matchRoute(props as any)
+  const params = matchRoute(props as any) as boolean
 
   if (typeof props.children === 'function') {
     return (props.children as any)(params)
   }
 
-  return !!params ? props.children : null
+  return params ? props.children : null
 }
 
-export function getRenderedMatches<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
->(state: RouterState<TRouteTree>) {
-  return state.pendingMatches?.some((d) => d.showPending)
-    ? state.pendingMatches
-    : state.matches
+export interface UseMatchesBaseOptions<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing,
+> {
+  select?: (
+    matches: Array<MakeRouteMatchUnion<TRouter>>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
 }
 
-export function useMatch<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TReturnIntersection extends boolean = false,
-  TRouteMatchState = RouteMatch<TRouteTree, TFrom, TReturnIntersection>,
-  TSelected = TRouteMatchState,
->(
-  opts: StrictOrFrom<TFrom, TReturnIntersection> & {
-    select?: (match: TRouteMatchState) => TSelected
-  },
-): TSelected {
-  const router = useRouter()
-  const nearestMatchId = React.useContext(matchContext)
-
-  const nearestMatchRouteId = getRenderedMatches(router.state).find(
-    (d) => d.id === nearestMatchId,
-  )?.routeId
-
-  const matchRouteId = (() => {
-    const matches = getRenderedMatches(router.state)
-    const match = opts?.from
-      ? matches.find((d) => d.routeId === opts?.from)
-      : matches.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 = getRenderedMatches(state).find((d) =>
-        opts?.from ? opts?.from === d.routeId : 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 UseMatchesResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected
 
 export function useMatches<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
-  TReturnIntersection extends boolean = false,
-  TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
-  T = TRouteMatch[],
->(opts?: {
-  select?: (matches: TRouteMatch[]) => T
-  experimental_returnIntersection?: TReturnIntersection
-}): T {
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected> {
   return useRouterState({
-    select: (state) => {
-      const matches = getRenderedMatches(state)
+    select: (state: RouterState<TRouter['routeTree']>) => {
+      const matches = state.matches
       return opts?.select
-        ? opts.select(matches as TRouteMatch[])
-        : (matches as T)
+        ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
+        : matches
     },
-  })
+    structuralSharing: opts?.structuralSharing,
+  } as any) as UseMatchesResult<TRouter, TSelected>
 }
 
 export function useParentMatches<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
-  TReturnIntersection extends boolean = false,
-  TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
-  T = TRouteMatch[],
->(opts?: {
-  select?: (matches: TRouteMatch[]) => T
-  experimental_returnIntersection?: TReturnIntersection
-}): T {
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected> {
   const contextMatchId = React.useContext(matchContext)
 
   return useMatches({
-    select: (matches) => {
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
       matches = matches.slice(
         0,
         matches.findIndex((d) => d.id === contextMatchId),
       )
-      return opts?.select
-        ? opts.select(matches as TRouteMatch[])
-        : (matches as T)
+      return opts?.select ? opts.select(matches) : matches
     },
-  })
+    structuralSharing: opts?.structuralSharing,
+  } as any)
 }
 
 export function useChildMatches<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
-  TReturnIntersection extends boolean = false,
-  TRouteMatch = RouteMatch<TRouteTree, TRouteId, TReturnIntersection>,
-  T = TRouteMatch[],
->(opts?: {
-  select?: (matches: TRouteMatch[]) => T
-  experimental_returnIntersection?: TReturnIntersection
-}): T {
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected> {
   const contextMatchId = React.useContext(matchContext)
 
   return useMatches({
-    select: (matches) => {
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
       matches = matches.slice(
         matches.findIndex((d) => d.id === contextMatchId) + 1,
       )
-      return opts?.select
-        ? opts.select(matches as TRouteMatch[])
-        : (matches as T)
+      return opts?.select ? opts.select(matches) : matches
     },
-  })
-}
-
-export function useLoaderDeps<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
-    TRouteTree,
-    TFrom
-  >,
-  TSelected = Required<TRouteMatch>['loaderDeps'],
->(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (match: TRouteMatch) => TSelected
-  },
-): TSelected {
-  return useMatch({
-    ...opts,
-    select: (s) => {
-      return typeof opts.select === 'function'
-        ? opts.select(s?.loaderDeps)
-        : s?.loaderDeps
-    },
-  })
-}
-
-export function useLoaderData<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
-    TRouteTree,
-    TFrom
-  >,
-  TSelected = Required<TRouteMatch>['loaderData'],
->(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (match: TRouteMatch) => TSelected
-  },
-): TSelected {
-  return useMatch({
-    ...opts,
-    select: (s) => {
-      return typeof opts.select === 'function'
-        ? opts.select(s?.loaderData)
-        : s?.loaderData
-    },
-  })
-}
-
-export function isServerSideError(error: unknown): error is {
-  __isServerError: true
-  data: Record<string, any>
-} {
-  if (!(typeof error === 'object' && error && 'data' in error)) return false
-  if (!('__isServerError' in error && error.__isServerError)) return false
-  if (!(typeof error.data === 'object' && error.data)) return false
-
-  return error.__isServerError === true
-}
-
-export function defaultDeserializeError(serializedData: Record<string, any>) {
-  if ('name' in serializedData && 'message' in serializedData) {
-    const error = new Error(serializedData.message)
-    error.name = serializedData.name
-    return error
-  }
-
-  return serializedData.data
+    structuralSharing: opts?.structuralSharing,
+  } as any)
 }