@tanstack/react-router 0.0.1-beta.16 → 0.0.1-beta.161

package/src/index.tsx

@@ -1,158 +1,223 @@
 import * as React from 'react'
-
-import { useSyncExternalStore } from 'use-sync-external-store/shim'
-
+import { NoInfer, useStore } from '@tanstack/react-store'
+import invariant from 'tiny-invariant'
+import warning from 'tiny-warning'
 import {
-  AnyRoute,
-  CheckId,
-  rootRouteId,
-  Router,
-  RouterState,
-  ToIdOption,
-} from '@tanstack/router-core'
-import {
-  warning,
+  functionalUpdate,
+  last,
+  pick,
+  MatchRouteOptions,
+  RegisteredRouter,
   RouterOptions,
+  Router,
   RouteMatch,
-  MatchRouteOptions,
-  RouteConfig,
-  AnyRouteConfig,
-  AnyAllRouteInfo,
-  DefaultAllRouteInfo,
-  functionalUpdate,
-  createRouter,
-  AnyRouteInfo,
-  AllRouteInfo,
-  RouteInfo,
-  ValidFromPath,
+  RouteByPath,
+  AnyRoute,
+  AnyRouteProps,
   LinkOptions,
-  RouteInfoByPath,
-  ResolveRelativePath,
-  NoInfer,
   ToOptions,
-  invariant,
+  ResolveRelativePath,
+  NavigateOptions,
+  ResolveFullPath,
+  ResolveId,
+  AnySearchSchema,
+  ParsePathParams,
+  MergeParamsFromParent,
+  RouteContext,
+  AnyContext,
+  UseLoaderResult,
+  ResolveFullSearchSchema,
+  Route,
+  RouteConstraints,
+  RoutePaths,
+  RoutesById,
+  RouteIds,
+  RouteById,
+  ParseRoute,
+  AllParams,
 } from '@tanstack/router-core'
 
-export * from '@tanstack/router-core'
-
-export { lazyWithPreload as lazy } from 'react-lazy-with-preload/lib/index'
-export type { PreloadableComponent as LazyComponent } from 'react-lazy-with-preload'
+//
 
-type SyncRouteComponent = (props?: {}) => React.ReactNode
-export type RouteComponent = SyncRouteComponent & {
-  preload?: () => Promise<{
-    default: SyncRouteComponent
-  }>
-}
+export * from '@tanstack/router-core'
+export { useStore }
 
 declare module '@tanstack/router-core' {
-  interface FrameworkGenerics {
-    Component: RouteComponent
+  interface RegisterRouteComponent<TProps extends Record<string, any>> {
+    RouteComponent: RouteComponent<TProps>
   }
 
-  interface Router<
-    TRouteConfig extends AnyRouteConfig = RouteConfig,
-    TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
-  > {
-    useState: () => RouterState
-    useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
-      routeId: TId,
-    ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-    useMatch: <
-      TId extends keyof TAllRouteInfo['routeInfoById'],
-      TStrict extends true | false = true,
-    >(
-      routeId: TId,
-      opts?: { strict?: TStrict },
-    ) => TStrict extends true
-      ? RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-      :
-          | RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-          | undefined
-    linkProps: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
-    Link: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement> &
-        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)
-        },
-    ) => JSX.Element
-    MatchRoute: <TTo extends string = '.'>(
-      props: ToOptions<TAllRouteInfo, '/', TTo> &
-        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?:
-            | React.ReactNode
-            | ((
-                params: RouteInfoByPath<
-                  TAllRouteInfo,
-                  ResolveRelativePath<'/', NoInfer<TTo>>
-                >['allParams'],
-              ) => React.ReactNode)
-        },
-    ) => JSX.Element
+  interface RegisterRouteErrorComponent<TProps extends Record<string, any>> {
+    RouteErrorComponent: RouteComponent<TProps>
   }
 
+  // Extend the Route class to have some React-Specific methods
   interface Route<
-    TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-    TRouteInfo extends AnyRouteInfo = RouteInfo,
+    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
+    >,
+    TLoader = unknown,
+    TSearchSchema extends RouteConstraints['TSearchSchema'] = {},
+    TFullSearchSchema extends RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<
+      TParentRoute,
+      TSearchSchema
+    >,
+    TParams extends RouteConstraints['TParams'] = Record<
+      ParsePathParams<TPath>,
+      string
+    >,
+    TAllParams extends RouteConstraints['TAllParams'] = MergeParamsFromParent<
+      TParentRoute['__types']['allParams'],
+      TParams
+    >,
+    TParentContext extends RouteConstraints['TParentContext'] = TParentRoute['__types']['routeContext'],
+    TAllParentContext extends RouteConstraints['TAllParentContext'] = TParentRoute['__types']['context'],
+    TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
+    TAllContext extends RouteConstraints['TAllContext'] = MergeParamsFromParent<
+      TParentRoute['__types']['context'],
+      TRouteContext
+    >,
+    TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+    TChildren extends RouteConstraints['TChildren'] = unknown,
+    TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
   > {
-    useRoute: <
-      TTo extends string = '.',
-      TResolved extends string = ResolveRelativePath<
-        TRouteInfo['id'],
-        NoInfer<TTo>
-      >,
-    >(
-      routeId: CheckId<
-        TAllRouteInfo,
-        TResolved,
-        ToIdOption<TAllRouteInfo, TRouteInfo['id'], TTo>
-      >,
-      opts?: { strict?: boolean },
-    ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TResolved]>
-    linkProps: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
-    Link: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement> &
-        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)
-        },
-    ) => JSX.Element
-    MatchRoute: <TTo extends string = '.'>(
-      props: ToOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        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?:
-            | React.ReactNode
-            | ((
-                params: RouteInfoByPath<
-                  TAllRouteInfo,
-                  ResolveRelativePath<TRouteInfo['fullPath'], NoInfer<TTo>>
-                >['allParams'],
-              ) => React.ReactNode)
-        },
-    ) => JSX.Element
+    useMatch: <TStrict extends boolean = true, TSelected = TAllContext>(opts?: {
+      strict?: TStrict
+      select?: (search: TAllContext) => TSelected
+    }) => TStrict extends true ? TSelected : TSelected | undefined
+    useLoader: <TStrict extends boolean = true, TSelected = TLoader>(opts?: {
+      strict?: TStrict
+      select?: (search: TLoader) => TSelected
+    }) => TStrict extends true
+      ? UseLoaderResult<TSelected>
+      : UseLoaderResult<TSelected> | undefined
+    useContext: <
+      TStrict extends boolean = true,
+      TSelected = TAllContext,
+    >(opts?: {
+      strict?: TStrict
+      select?: (search: TAllContext) => TSelected
+    }) => TStrict extends true ? TSelected : TSelected | undefined
+    useRouteContext: <
+      TStrict extends boolean = true,
+      TSelected = TRouteContext,
+    >(opts?: {
+      strict?: TStrict
+      select?: (search: TRouteContext) => TSelected
+    }) => TStrict extends true ? TSelected : TSelected | undefined
+    useSearch: <
+      TStrict extends boolean = true,
+      TSelected = TFullSearchSchema,
+    >(opts?: {
+      strict?: TStrict
+      select?: (search: TFullSearchSchema) => TSelected
+    }) => TStrict extends true ? TSelected : TSelected | undefined
+    useParams: <TStrict extends boolean = true, TSelected = TAllParams>(opts?: {
+      strict?: TStrict
+      select?: (search: TAllParams) => TSelected
+    }) => TStrict extends true ? TSelected : TSelected | undefined
+  }
+}
+
+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
+    },
+    useContext: (opts: any = {}) => {
+      return useMatch({
+        ...opts,
+        from: route.id,
+        select: (d: any) => opts?.select?.(d.context) ?? d.context,
+      } as any)
+    },
+    useRouteContext: (opts: any = {}) => {
+      return useMatch({
+        ...opts,
+        from: route.id,
+        select: (d: any) => opts?.select?.(d.routeContext) ?? d.routeContext,
+      } 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 RouteErrorComponent = AsyncRouteComponent<RouteErrorComponentProps>
+
+export type RouteErrorComponentProps = {
+  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
 }
 
-type LinkPropsOptions<
-  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
-  TTo extends string = '.',
-> = LinkOptions<TAllRouteInfo, TFrom, TTo> & {
+export type LinkPropsOptions<
+  TFrom extends RoutePaths<RegisteredRouter['routeTree']> = '/',
+  TTo extends string = '',
+> = LinkOptions<RegisteredRouter['routeTree'], TFrom, TTo> & {
   // 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>
@@ -161,438 +226,853 @@ type LinkPropsOptions<
   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<
+  TFrom extends RoutePaths<RegisteredRouter['routeTree']> = '/',
+  TTo extends string = '',
+> = ToOptions<RegisteredRouter['routeTree'], TFrom, TTo> & MatchRouteOptions
+
+export type MakeMatchRouteOptions<
+  TFrom extends RoutePaths<RegisteredRouter['routeTree']> = '/',
+  TTo extends string = '',
+> = ToOptions<RegisteredRouter['routeTree'], TFrom, TTo> &
+  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<
+            RegisteredRouter['routeTree'],
+            ResolveRelativePath<TFrom, NoInfer<TTo>>
+          >['__types']['allParams'],
+        ) => ReactNode)
+      | React.ReactNode
+  }
+
+export type MakeLinkPropsOptions<
+  TFrom extends string = '/',
+  TTo extends string = '',
+> = LinkPropsOptions<TFrom, TTo> & React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+export type MakeLinkOptions<
+  TFrom extends RoutePaths<RegisteredRouter['routeTree']> = '/',
+  TTo extends string = '',
+> = LinkPropsOptions<TFrom, TTo> &
+  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
-  when?: boolean | any
-  children?: React.ReactNode
+  condition?: boolean | any
+  children?: ReactNode
 }
 
 //
 
-const matchesContext = React.createContext<RouteMatch[]>(null!)
-const routerContext = React.createContext<{ router: Router<any, any> }>(null!)
+export function useLinkProps<
+  TFrom extends string = '/',
+  TTo extends string = '',
+>(
+  options: MakeLinkPropsOptions<TFrom, TTo>,
+): React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  const router = useRouter()
 
-// Detect if we're in the DOM
-const isDOM = Boolean(
-  typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement,
-)
+  const {
+    // custom props
+    type,
+    children,
+    target,
+    activeProps = () => ({ className: 'active' }),
+    inactiveProps = () => ({}),
+    activeOptions,
+    disabled,
+    // fromCurrent,
+    hash,
+    search,
+    params,
+    to = '.',
+    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 useLayoutEffect = isDOM ? React.useLayoutEffect : React.useEffect
+  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)
+      })
+    }
 
-export type MatchesProviderProps = {
-  value: RouteMatch[]
-  children: React.ReactNode
+  // 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.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 function MatchesProvider(props: MatchesProviderProps) {
-  return <matchesContext.Provider {...props} />
+export interface LinkComponent<TProps extends Record<string, any> = {}> {
+  <
+    TFrom extends RoutePaths<RegisteredRouter['routeTree']> = '/',
+    TTo extends string = '',
+  >(
+    props: MakeLinkOptions<TFrom, TTo> &
+      TProps &
+      React.RefAttributes<HTMLAnchorElement>,
+  ): ReactNode
 }
 
-const useRouterSubscription = (router: Router<any, any>) => {
-  useSyncExternalStore(
-    (cb) => router.subscribe(() => cb()),
-    () => router.state,
-    () => router.state,
+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<
+  TFrom extends RoutePaths<RegisteredRouter['routeTree']> = '/',
+  TTo extends string = '',
+>(props: NavigateOptions<RegisteredRouter['routeTree'], TFrom, TTo>): null {
+  const router = useRouter()
+
+  React.useLayoutEffect(() => {
+    router.navigate(props as any)
+  }, [])
+
+  return null
 }
 
-export function createReactRouter<
-  TRouteConfig extends AnyRouteConfig = RouteConfig,
->(opts: RouterOptions<TRouteConfig>): Router<TRouteConfig> {
-  const makeRouteExt = (
-    route: AnyRoute,
-    router: Router<any, any>,
-  ): Pick<AnyRoute, 'useRoute' | 'linkProps' | 'Link' | 'MatchRoute'> => {
-    return {
-      useRoute: (subRouteId = '.' as any) => {
-        const resolvedRouteId = router.resolvePath(
-          route.routeId,
-          subRouteId as string,
-        )
-        const resolvedRoute = router.getRoute(resolvedRouteId)
-        useRouterSubscription(router)
-        invariant(
-          resolvedRoute,
-          `Could not find a route for route "${
-            resolvedRouteId as string
-          }"! Did you forget to add it to your route config?`,
-        )
-        return resolvedRoute
-      },
-      linkProps: (options) => {
-        const {
-          // custom props
-          type,
-          children,
-          target,
-          activeProps = () => ({ className: 'active' }),
-          inactiveProps = () => ({}),
-          activeOptions,
-          disabled,
-          // fromCurrent,
-          hash,
-          search,
-          params,
-          to,
-          preload,
-          preloadDelay,
-          preloadMaxAge,
-          replace,
-          // element props
-          style,
-          className,
-          onClick,
-          onFocus,
-          onMouseEnter,
-          onMouseLeave,
-          onTouchStart,
-          onTouchEnd,
-          ...rest
-        } = options
-
-        const linkInfo = route.buildLink(options)
-
-        if (linkInfo.type === 'external') {
-          const { href } = linkInfo
-          return { href }
-        }
+export const matchIdsContext = React.createContext<string[]>(null!)
+export const routerContext = React.createContext<RegisteredRouter>(null!)
 
-        const {
-          handleClick,
-          handleFocus,
-          handleEnter,
-          handleLeave,
-          isActive,
-          next,
-        } = linkInfo
-
-        const reactHandleClick = (e: Event) => {
-          React.startTransition(() => {
-            handleClick(e)
-          })
-        }
+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']>
+}
 
-        const composeHandlers =
-          (handlers: (undefined | ((e: any) => void))[]) =>
-          (e: React.SyntheticEvent) => {
-            e.persist()
-            handlers.forEach((handler) => {
-              if (handler) handler(e)
-            })
-          }
-
-        // Get the active props
-        const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> =
-          isActive ? functionalUpdate(activeProps, {}) ?? {} : {}
-
-        // Get the inactive props
-        const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
-          isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {}
-
-        return {
-          ...resolvedActiveProps,
-          ...resolvedInactiveProps,
-          ...rest,
-          href: disabled ? undefined : next.href,
-          onClick: composeHandlers([reactHandleClick, onClick]),
-          onFocus: composeHandlers([handleFocus, onFocus]),
-          onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
-          onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
-          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,
-        }
-      },
-      Link: React.forwardRef((props: any, ref) => {
-        const linkProps = route.linkProps(props)
-
-        useRouterSubscription(router)
-
-        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,
-      MatchRoute: (opts) => {
-        const { pending, caseSensitive, children, ...rest } = opts
-
-        const params = route.matchRoute(rest as any, {
-          pending,
-          caseSensitive,
-        })
-
-        if (!params) {
-          return null
-        }
+export function useRouterState<TSelected = RegisteredRouter['state']>(opts?: {
+  select: (state: RegisteredRouter['state']) => TSelected
+}): TSelected {
+  const router = useRouter()
+  return useStore(router.__store, opts?.select)
+}
 
-        return typeof opts.children === 'function'
-          ? opts.children(params as any)
-          : (opts.children 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)
 
-  const coreRouter = createRouter<TRouteConfig>({
-    ...opts,
-    createRouter: (router) => {
-      const routerExt: Pick<Router<any, any>, 'useMatch' | 'useState'> = {
-        useState: () => {
-          useRouterSubscription(router)
-          return router.state
-        },
-        useMatch: (routeId, opts) => {
-          useRouterSubscription(router)
-
-          invariant(
-            routeId !== rootRouteId,
-            `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
-          )
+  React.useEffect(() => {
+    let unsub
+
+    React.startTransition(() => {
+      unsub = router.mount()
+    })
+
+    return unsub
+  }, [router])
+
+  const Wrap = router.options.Wrap || React.Fragment
+
+  return (
+    <React.Suspense fallback={null}>
+      <Wrap>
+        <routerContext.Provider value={router as any}>
+          <Matches />
+        </routerContext.Provider>
+      </Wrap>
+    </React.Suspense>
+  )
+}
 
-          const runtimeMatch = useMatches()?.[0]!
-          const match = router.state.matches.find((d) => d.routeId === routeId)
-
-          if (opts?.strict ?? true) {
-            invariant(
-              match,
-              `Could not find an active match for "${routeId as string}"!`,
-            )
-
-            invariant(
-              runtimeMatch.routeId == match?.routeId,
-              `useMatch('${
-                match?.routeId as string
-              }') is being called in a component that is meant to render the '${
-                runtimeMatch.routeId
-              }' route. Did you mean to 'useMatch(${
-                match?.routeId as string
-              }, { strict: false })' or 'useRoute(${
-                match?.routeId as string
-              })' instead?`,
-            )
-          }
-
-          return match as any
-        },
+function Matches() {
+  const router = useRouter()
+
+  const matchIds = useRouterState({
+    select: (state) => {
+      const hasPendingComponent = state.pendingMatches.some((d) => {
+        const route = router.getRoute(d.routeId as any)
+        return !!route?.options.pendingComponent
+      })
+
+      if (hasPendingComponent) {
+        return state.pendingMatchIds
       }
 
-      const routeExt = makeRouteExt(router.getRoute('/'), router)
+      return state.matchIds
+    },
+  })
+
+  return (
+    <matchIdsContext.Provider value={[undefined!, ...matchIds]}>
+      <CatchBoundary
+        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
+}
 
-      Object.assign(router, routerExt, routeExt)
+export function useMatches<T = RouteMatch[]>(opts?: {
+  select?: (matches: RouteMatch[]) => T
+}): T {
+  const matchIds = React.useContext(matchIdsContext)
+
+  return useRouterState({
+    select: (state) => {
+      const matches = state.matches.slice(
+        state.matches.findIndex((d) => d.id === matchIds[0]),
+      )
+      return (opts?.select?.(matches) ?? matches) as T
     },
-    createRoute: ({ router, route }) => {
-      const routeExt = makeRouteExt(route, router)
+  })
+}
+
+export function useMatch<
+  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TStrict extends boolean = true,
+  TRouteMatchState = RouteMatch<
+    RegisteredRouter['routeTree'],
+    RouteById<RegisteredRouter['routeTree'], TFrom>
+  >,
+  TSelected = TRouteMatchState,
+>(opts?: {
+  from: TFrom
+  strict?: TStrict
+  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 matches = state.matches
+      const match = opts?.from
+        ? matches.find((d) => d.routeId === opts?.from)
+        : matches.find((d) => d.id === nearestMatchId)
 
-      Object.assign(route, routeExt)
+      return match!.routeId
     },
-    loadComponent: async (component) => {
-      if (component.preload && typeof document !== 'undefined') {
-        component.preload()
-        // return await component.preload()
-      }
+  })
+
+  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?`,
+    )
+  }
 
-      return component as any
+  const match = useRouterState({
+    select: (state) => {
+      const matches = state.matches
+      const match = opts?.from
+        ? matches.find((d) => d.routeId === opts?.from)
+        : matches.find((d) => d.id === nearestMatchId)
+
+      invariant(
+        match,
+        `Could not find ${
+          opts?.from
+            ? `an active match from "${opts.from}"`
+            : 'a nearest match!'
+        }`,
+      )
+
+      return (opts?.select?.(match as any) ?? match) as TSelected
     },
   })
 
-  return coreRouter as any
+  return match as any
 }
 
-export type RouterProps<
-  TRouteConfig extends AnyRouteConfig = RouteConfig,
-  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-> = RouterOptions<TRouteConfig> & {
-  router: Router<TRouteConfig, TAllRouteInfo>
-  // Children will default to `<Outlet />` if not provided
-  children?: React.ReactNode
+export type RouteFromIdOrRoute<T> = T extends ParseRoute<
+  RegisteredRouter['routeTree']
+>
+  ? T
+  : T extends RouteIds<RegisteredRouter['routeTree']>
+  ? RoutesById<RegisteredRouter['routeTree']>[T]
+  : T extends string
+  ? RouteIds<RegisteredRouter['routeTree']>
+  : never
+
+export function useLoader<
+  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TStrict extends boolean = true,
+  TLoader = RouteById<
+    RegisteredRouter['routeTree'],
+    TFrom
+  >['__types']['loader'],
+  TSelected = TLoader,
+>(opts?: {
+  from: TFrom
+  strict?: TStrict
+  select?: (search: TLoader) => TSelected
+}): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) =>
+      (opts?.select?.(match.loaderData as TLoader) ??
+        match.loaderData) as TSelected,
+  })
 }
 
-export function RouterProvider<
-  TRouteConfig extends AnyRouteConfig = RouteConfig,
-  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
->({ children, router, ...rest }: RouterProps<TRouteConfig, TAllRouteInfo>) {
-  router.update(rest)
+export function useRouterContext<
+  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TStrict extends boolean = true,
+  TContext = RouteById<
+    RegisteredRouter['routeTree'],
+    TFrom
+  >['__types']['context'],
+  TSelected = TContext,
+>(opts?: {
+  from: TFrom
+  strict?: TStrict
+  select?: (search: TContext) => TSelected
+}): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) =>
+      (opts?.select?.(match.context as TContext) ?? match.context) as TSelected,
+  })
+}
 
-  useRouterSubscription(router)
-  React.useEffect(() => {
-    return router.mount()
-  }, [router])
+export function useRouteContext<
+  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TStrict extends boolean = true,
+  TRouteContext = RouteById<
+    RegisteredRouter['routeTree'],
+    TFrom
+  >['__types']['routeContext'],
+  TSelected = TRouteContext,
+>(opts?: {
+  from: TFrom
+  strict?: TStrict
+  select?: (search: TRouteContext) => TSelected
+}): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) =>
+      (opts?.select?.(match.routeContext as TRouteContext) ??
+        match.routeContext) as TSelected,
+  })
+}
 
-  return (
-    <routerContext.Provider value={{ router }}>
-      <MatchesProvider value={router.state.matches}>
-        {children ?? <Outlet />}
-      </MatchesProvider>
-    </routerContext.Provider>
+export function useSearch<
+  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TStrict extends boolean = true,
+  TSearch = RouteById<
+    RegisteredRouter['routeTree'],
+    TFrom
+  >['__types']['fullSearchSchema'],
+  TSelected = TSearch,
+>(opts?: {
+  from: TFrom
+  strict?: TStrict
+  select?: (search: TSearch) => TSelected
+}): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) => {
+      return (opts?.select?.(match.search as TSearch) ??
+        match.search) as TSelected
+    },
+  })
+}
+
+export function useParams<
+  TFrom extends RouteIds<RegisteredRouter['routeTree']> = '/',
+  TDefaultSelected = AllParams<RegisteredRouter['routeTree']> &
+    RouteById<RegisteredRouter['routeTree'], TFrom>['__types']['allParams'],
+  TSelected = TDefaultSelected,
+>(opts?: {
+  from: TFrom
+  select?: (search: TDefaultSelected) => TSelected
+}): TSelected {
+  return useRouterState({
+    select: (state: any) => {
+      const params = (last(state.matches) as any)?.params
+      return (opts?.select?.(params) ?? params) as TSelected
+    },
+  })
+}
+
+export function useNavigate<
+  TDefaultFrom extends RoutePaths<RegisteredRouter['routeTree']> = '/',
+>(defaultOpts?: { from?: TDefaultFrom }) {
+  const router = useRouter()
+  return React.useCallback(
+    <
+      TFrom extends RoutePaths<RegisteredRouter['routeTree']> = TDefaultFrom,
+      TTo extends string = '',
+    >(
+      opts?: NavigateOptions<RegisteredRouter['routeTree'], TFrom, TTo>,
+    ) => {
+      return router.navigate({ ...defaultOpts, ...(opts as any) })
+    },
+    [],
   )
 }
 
-export function useRouter(): Router {
-  const value = React.useContext(routerContext)
-  warning(!value, 'useRouter must be used inside a <Router> component!')
+export function useMatchRoute() {
+  const router = useRouter()
 
-  useRouterSubscription(value.router)
+  return React.useCallback(
+    <TFrom extends string = '/', TTo extends string = ''>(
+      opts: MakeUseMatchRouteOptions<TFrom, TTo>,
+    ) => {
+      const { pending, caseSensitive, ...rest } = opts
 
-  return value.router as Router
+      return router.matchRoute(rest as any, {
+        pending,
+        caseSensitive,
+      })
+    },
+    [],
+  )
 }
 
-export function useMatches(): RouteMatch[] {
-  return React.useContext(matchesContext)
+export function MatchRoute<TFrom extends string = '/', TTo extends string = ''>(
+  props: MakeMatchRouteOptions<TFrom, TTo>,
+): any {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute(props)
+
+  if (typeof props.children === 'function') {
+    return (props.children as any)(params)
+  }
+
+  return !!params ? props.children : null
 }
 
 export function Outlet() {
-  const router = useRouter()
-  const matches = useMatches().slice(1)
-  const match = matches[0]
-
-  const defaultPending = React.useCallback(() => null, [])
+  const matchIds = React.useContext(matchIdsContext).slice(1)
 
-  if (!match) {
+  if (!matchIds[0]) {
     return null
   }
 
-  const PendingComponent = (match.__.pendingComponent ??
+  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 PendingComponent = (route.options.pendingComponent ??
     router.options.defaultPendingComponent ??
     defaultPending) as any
 
   const errorComponent =
-    match.__.errorComponent ?? router.options.defaultErrorComponent
+    route.options.errorComponent ??
+    router.options.defaultErrorComponent ??
+    ErrorComponent
+
+  const ResolvedSuspenseBoundary =
+    route.options.wrapInSuspense ?? !route.isRoot
+      ? React.Suspense
+      : SafeFragment
+
+  const ResolvedCatchBoundary = !!errorComponent ? CatchBoundary : SafeFragment
 
   return (
-    <MatchesProvider value={matches}>
-      <React.Suspense fallback={<PendingComponent />}>
-        <CatchBoundary errorComponent={errorComponent}>
-          {
-            ((): React.ReactNode => {
-              if (match.status === 'error') {
-                throw match.error
-              }
-
-              if (match.status === 'success') {
-                return React.createElement(
-                  (match.__.component as any) ??
-                    router.options.defaultComponent ??
-                    Outlet,
-                )
-              }
-
-              if (match.__.loadPromise) {
-                console.log(match.matchId, 'suspend')
-                throw match.__.loadPromise
-              }
-
-              invariant(false, 'This should never happen!')
-            })() as JSX.Element
-          }
-        </CatchBoundary>
-      </React.Suspense>
-    </MatchesProvider>
+    <matchIdsContext.Provider value={matchIds}>
+      <ResolvedSuspenseBoundary
+        fallback={React.createElement(PendingComponent, {
+          useLoader: route.useLoader,
+          useMatch: route.useMatch,
+          useContext: route.useContext,
+          useRouteContext: route.useRouteContext,
+          useSearch: route.useSearch,
+          useParams: route.useParams,
+        })}
+      >
+        <ResolvedCatchBoundary
+          key={route.id}
+          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,
+      useContext: route.useContext,
+      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,
+        useContext: route.useContext as any,
+        useRouteContext: route.useRouteContext as any,
+        useSearch: route.useSearch,
+        useParams: route.useParams 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.
+
 class CatchBoundary extends React.Component<{
   children: any
   errorComponent: any
+  onCatch: (error: any, info: any) => void
 }> {
   state = {
     error: false,
+    info: undefined,
   }
   componentDidCatch(error: any, info: any) {
-    console.error(error)
-
+    this.props.onCatch(error, info)
     this.setState({
       error,
       info,
     })
   }
   render() {
-    const errorComponent = this.props.errorComponent ?? DefaultErrorBoundary
+    return (
+      <CatchBoundaryInner
+        {...this.props}
+        errorState={this.state}
+        reset={() => this.setState({})}
+      />
+    )
+  }
+}
+
+function CatchBoundaryInner(props: {
+  children: any
+  errorComponent: any
+  errorState: { error: unknown; info: any }
+  reset: () => void
+}) {
+  const locationKey = useRouterState({
+    select: (d) => d.resolvedLocation.key,
+  })
+
+  const [activeErrorState, setActiveErrorState] = React.useState(
+    props.errorState,
+  )
+  const errorComponent = props.errorComponent ?? ErrorComponent
+  const prevKeyRef = React.useRef('' as any)
 
-    if (this.state.error) {
-      return React.createElement(errorComponent, this.state)
+  React.useEffect(() => {
+    if (activeErrorState) {
+      if (locationKey !== prevKeyRef.current) {
+        setActiveErrorState({} as any)
+      }
     }
 
-    return this.props.children
+    prevKeyRef.current = locationKey
+  }, [activeErrorState, locationKey])
+
+  React.useEffect(() => {
+    if (props.errorState.error) {
+      setActiveErrorState(props.errorState)
+    }
+    // props.reset()
+  }, [props.errorState.error])
+
+  if (props.errorState.error && activeErrorState.error) {
+    return React.createElement(errorComponent, activeErrorState)
   }
+
+  return props.children
 }
 
-export function DefaultErrorBoundary({ error }: { error: any }) {
+export function ErrorComponent({ error }: { error: any }) {
+  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')
+
   return (
     <div style={{ padding: '.5rem', maxWidth: '100%' }}>
-      <strong style={{ fontSize: '1.2rem' }}>Something went wrong!</strong>
-      <div style={{ height: '.5rem' }} />
-      <div>
-        <pre>
-          {error.message ? (
-            <code
-              style={{
-                fontSize: '.7em',
-                border: '1px solid red',
-                borderRadius: '.25rem',
-                padding: '.5rem',
-                color: 'red',
-              }}
-            >
-              {error.message}
-            </code>
-          ) : null}
-        </pre>
+      <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 usePrompt(message: string, when: boolean | any): void {
+export function useBlocker(
+  message: string,
+  condition: boolean | any = true,
+): void {
   const router = useRouter()
 
   React.useEffect(() => {
-    if (!when) return
+    if (!condition) return
 
-    let unblock = router.history.block((transition) => {
+    let unblock = router.history.block((retry, cancel) => {
       if (window.confirm(message)) {
         unblock()
-        transition.retry()
-      } else {
-        router.location.pathname = window.location.pathname
+        retry()
       }
     })
 
     return unblock
-  }, [when, location, message])
+  })
 }
 
-export function Prompt({ message, when, children }: PromptProps) {
-  usePrompt(message, when ?? true)
-  return (children ?? null) as React.ReactNode
+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
 }