@tanstack/react-router 0.0.1-beta.209 → 0.0.1-beta.210

package/src/index.tsx

@@ -2,19 +2,28 @@
 export * from '@tanstack/history'
 export { default as invariant } from 'tiny-invariant'
 export { default as warning } from 'tiny-warning'
+// export * from './awaited
+// export * from './defer'
+export * from './CatchBoundary'
+export * from './fileRoute'
+export * from './history'
+export * from './index'
+// export * from './injectHtml'
+export * from './lazyRouteComponent'
 export * from './link'
+export * from './location'
+export * from './Matches'
 export * from './path'
 export * from './qss'
+export * from './redirects'
 export * from './route'
-export * from './fileRoute'
 export * from './routeInfo'
 export * from './router'
-export * from './searchParams'
-export * from './utils'
-export * from './react'
-export * from './history'
-export * from './RouteMatch'
-export * from './redirects'
-export * from './location'
 export * from './RouterProvider'
 // export * from './scroll-restoration'
+export * from './searchParams'
+export * from './useBlocker'
+export * from './useNavigate'
+export * from './useParams'
+export * from './useSearch'
+export * from './utils'

package/src/injectHtml.ts

@@ -0,0 +1,28 @@
+// export function useInjectHtml() {
+//   const { } = useRouter()
+//   return React.useCallback(
+//     (html: string | (() => Promise<string> | string)) => {
+//       router.injectHtml(html)
+//     },
+//     [],
+//   )
+// }
+// export function useDehydrate() {
+//   const { } = useRouter()
+//   return React.useCallback(function dehydrate<T>(
+//     key: any,
+//     data: T | (() => Promise<T> | T),
+//   ) {
+//     return router.dehydrateData(key, data)
+//   },
+//   [])
+// }
+// export function useHydrate() {
+//   const { } = 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.

package/src/lazyRouteComponent.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { AsyncRouteComponent } from './route'
+
+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
+}

package/src/{link.ts → link.tsx}

@@ -1,5 +1,9 @@
+import * as React from 'react'
+import { useMatch } from './Matches'
+import { useRouter } from './RouterProvider'
 import { Trim } from './fileRoute'
-import { AnyRoute } from './route'
+import { LocationState, ParsedLocation } from './location'
+import { AnyRoute, ReactNode } from './route'
 import {
   AllParams,
   FullSearchSchema,
@@ -8,8 +12,7 @@ import {
   RoutePaths,
 } from './routeInfo'
 import { RegisteredRouter } from './router'
-import { LocationState } from './location'
-import { ParsedLocation } from './location'
+import { MakeLinkOptions, MakeLinkPropsOptions } from './useNavigate'
 import {
   Expand,
   NoInfer,
@@ -17,6 +20,7 @@ import {
   PickRequired,
   UnionToIntersection,
   Updater,
+  functionalUpdate,
 } from './utils'
 
 export type LinkInfo =
@@ -136,6 +140,8 @@ export type NavigateOptions<
   // `replace` is a boolean that determines whether the navigation should replace the current history entry or push a new one.
   replace?: boolean
   resetScroll?: boolean
+  // 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 ToOptions<
@@ -345,3 +351,157 @@ export type ResolveRelativePath<TFrom, TTo = '.'> = TFrom extends string
       : CleanPath<Join<['/', ...Split<TFrom>, ...Split<TTo>]>>
     : never
   : never
+
+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 { buildLink } = useRouter()
+  const match = useMatch({
+    strict: false,
+  })
+
+  const {
+    // custom props
+    type,
+    children,
+    target,
+    activeProps = () => ({ className: 'active' }),
+    inactiveProps = () => ({}),
+    activeOptions,
+    disabled,
+    hash,
+    search,
+    params,
+    to,
+    state,
+    mask,
+    preload,
+    preloadDelay,
+    replace,
+    startTransition,
+    // element props
+    style,
+    className,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    ...rest
+  } = options
+
+  const linkInfo = buildLink({
+    from: options.to ? match.pathname : undefined,
+    ...options,
+  } as any)
+
+  if (linkInfo.type === 'external') {
+    const { href } = linkInfo
+    return { href }
+  }
+
+  const {
+    handleClick,
+    handleFocus,
+    handleEnter,
+    handleLeave,
+    handleTouchStart,
+    isActive,
+    next,
+  } = linkInfo
+
+  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, handleClick]),
+    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

package/src/location.ts

@@ -11,4 +11,5 @@ export interface ParsedLocation<TSearchObj extends AnySearchSchema = {}> {
   maskedLocation?: ParsedLocation<TSearchObj>
   unmaskOnReload?: boolean
 }
+
 export interface LocationState {}

package/src/route.ts

@@ -1,35 +1,35 @@
+import { HistoryLocation } from '@tanstack/history'
+import * as React from 'react'
 import invariant from 'tiny-invariant'
-import { RoutePaths } from './routeInfo'
+import { useMatch } from './Matches'
+import { AnyRouteMatch } from './RouterProvider'
+import { NavigateOptions, ParsePathParams, ToSubOptions } from './link'
+import { ParsedLocation } from './location'
 import { joinPaths, trimPath } from './path'
+import { RoutePaths } from './routeInfo'
 import { AnyRouter } from './router'
-import { AnyRouteMatch } from './RouteMatch'
+import { useParams } from './useParams'
+import { useSearch } from './useSearch'
 import {
+  Assign,
   Expand,
   IsAny,
   NoInfer,
   PickRequired,
   UnionToIntersection,
-  Assign,
 } from './utils'
-import { NavigateOptions, ParsePathParams, ToSubOptions } from './link'
-import {
-  ErrorRouteComponent,
-  PendingRouteComponent,
-  RouteComponent,
-  RouteProps,
-  useMatch,
-  useParams,
-  useSearch,
-} from './react'
-import { HistoryLocation } from '@tanstack/history'
-import { ParsedLocation } from './location'
+import { BuildLocationFn, NavigateFn } from './RouterProvider'
 
 export const rootRouteId = '__root__' as const
 export type RootRouteId = typeof rootRouteId
 export type AnyPathParams = {}
+
 export type AnySearchSchema = {}
+
 export type AnyContext = {}
+
 export interface RouteContext {}
+
 export interface RouteMeta {}
 
 export type PreloadableObj = { preload?: () => Promise<void> }
@@ -155,7 +155,8 @@ type BeforeLoadFn<
   params: TAllParams
   context: TParentRoute['types']['allContext']
   location: ParsedLocation
-  navigate: (opts: NavigateOptions<AnyRoute>) => Promise<void>
+  navigate: NavigateFn<AnyRoute>
+  buildLocation: BuildLocationFn<AnyRoute>
 }) => Promise<TRouteContext> | TRouteContext | void
 
 export type UpdatableRouteOptions<
@@ -714,3 +715,72 @@ export function createRouteMask<
 ): RouteMask<TRouteTree> {
   return opts as any
 }
+
+export type RouteProps<
+  TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TAllContext extends Record<string, any> = AnyContext,
+> = {
+  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 }
+} & RouteProps<TFullSearchSchema, TAllParams, TAllContext>
+
+export type PendingRouteProps<
+  TFullSearchSchema extends Record<string, any> = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TAllContext extends Record<string, any> = AnyContext,
+> = RouteProps<TFullSearchSchema, TAllParams, TAllContext>
+//
+
+export 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 RouteComponent<
+  TFullSearchSchema extends Record<string, any>,
+  TAllParams extends AnyPathParams,
+  TAllContext extends Record<string, any>,
+> = AsyncRouteComponent<RouteProps<TFullSearchSchema, TAllParams, TAllContext>>
+
+export type ErrorRouteComponent<
+  TFullSearchSchema extends Record<string, any>,
+  TAllParams extends AnyPathParams,
+  TAllContext extends Record<string, any>,
+> = AsyncRouteComponent<
+  ErrorRouteProps<TFullSearchSchema, TAllParams, TAllContext>
+>
+
+export type PendingRouteComponent<
+  TFullSearchSchema extends Record<string, any>,
+  TAllParams extends AnyPathParams,
+  TAllContext extends Record<string, any>,
+> = AsyncRouteComponent<
+  PendingRouteProps<TFullSearchSchema, TAllParams, TAllContext>
+>
+
+export type AnyRouteComponent = RouteComponent<any, any, any>

package/src/router.ts

@@ -16,8 +16,8 @@ import {
   ErrorRouteComponent,
   PendingRouteComponent,
   RouteComponent,
-} from './react'
-import { RouteMatch } from './RouteMatch'
+} from './route'
+import { RouteMatch } from './RouterProvider'
 import { ParsedLocation } from './location'
 import { LocationState } from './location'
 import { SearchSerializer, SearchParser } from './searchParams'
@@ -93,12 +93,11 @@ export interface RouterOptions<
 }
 
 export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
-  status: 'idle' | 'pending'
-  isFetching: boolean
+  status: 'pending' | 'idle'
   matches: RouteMatch<TRouteTree>[]
   pendingMatches: RouteMatch<TRouteTree>[]
   location: ParsedLocation<FullSearchSchema<TRouteTree>>
-  resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
+  resolvedLocation: undefined | ParsedLocation<FullSearchSchema<TRouteTree>>
   lastUpdated: number
 }
 
@@ -149,13 +148,13 @@ export const componentTypes = [
 export type RouterEvents = {
   onBeforeLoad: {
     type: 'onBeforeLoad'
-    from: ParsedLocation
+    from: undefined | ParsedLocation
     to: ParsedLocation
     pathChanged: boolean
   }
   onLoad: {
     type: 'onLoad'
-    from: ParsedLocation
+    from: undefined | ParsedLocation
     to: ParsedLocation
     pathChanged: boolean
   }

package/src/searchParams.ts

@@ -74,5 +74,6 @@ export function stringifySearchWith(
     return searchStr ? `?${searchStr}` : ''
   }
 }
+
 export type SearchSerializer = (searchObj: Record<string, any>) => string
 export type SearchParser = (searchStr: string) => Record<string, any>

package/src/useBlocker.tsx

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

package/src/useNavigate.tsx

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

package/src/useParams.tsx

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

package/src/useSearch.tsx

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