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

package/src/useNavigate.tsx

@@ -1,75 +1,55 @@
 import * as React from 'react'
-import { useMatch } from './Matches'
 import { useRouter } from './useRouter'
-import { LinkOptions, NavigateOptions } from './link'
-import { AnyRoute } from './route'
-import { RoutePaths, RoutePathsAutoComplete } from './routeInfo'
-import { RegisteredRouter } from './router'
-
-export type UseNavigateResult<TDefaultFrom extends string> = <
-  TTo extends string,
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = TDefaultFrom,
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string = '',
->({
-  from,
-  ...rest
-}: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>
+import type {
+  AnyRouter,
+  FromPathOption,
+  NavigateOptions,
+  RegisteredRouter,
+  UseNavigateResult,
+} from '@tanstack/router-core'
 
 export function useNavigate<
+  TRouter extends AnyRouter = RegisteredRouter,
   TDefaultFrom extends string = string,
 >(_defaultOpts?: {
-  from?: RoutePathsAutoComplete<RegisteredRouter['routeTree'], TDefaultFrom>
-}) {
+  from?: FromPathOption<TRouter, TDefaultFrom>
+}): UseNavigateResult<TDefaultFrom> {
   const { navigate } = useRouter()
 
-  const matchPathname = useMatch({
-    strict: false,
-    select: (s) => s.pathname,
-  })
-
-  const result: UseNavigateResult<TDefaultFrom> = ({ from, ...rest }) => {
-    return navigate({
-      from: rest?.to ? matchPathname : undefined,
-      ...(rest as any),
-    })
-  }
-
-  return React.useCallback(result, [])
+  return React.useCallback(
+    (options: NavigateOptions) => {
+      return navigate({
+        from: _defaultOpts?.from,
+        ...options,
+      })
+    },
+    [_defaultOpts?.from, navigate],
+  ) as UseNavigateResult<TDefaultFrom>
 }
 
-// NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it
-// 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> | string = string,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string = '',
->(props: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>): null {
-  const { navigate } = useRouter()
-  const match = useMatch({ strict: false })
-
+  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: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
+  const router = useRouter()
+
+  const previousPropsRef = React.useRef<NavigateOptions<
+    TRouter,
+    TFrom,
+    TTo,
+    TMaskFrom,
+    TMaskTo
+  > | null>(null)
   React.useEffect(() => {
-    navigate({
-      from: props.to ? match.pathname : undefined,
-      ...props,
-    } as any)
-  }, [])
-
+    if (previousPropsRef.current !== props) {
+      router.navigate({
+        ...props,
+      })
+      previousPropsRef.current = props
+    }
+  }, [router, props])
   return null
 }

package/src/useParams.tsx

@@ -1,28 +1,93 @@
-import { AnyRoute } from './route'
-import { RouteIds, RouteById, AllParams } from './routeInfo'
-import { RegisteredRouter } from './router'
-import { Expand, last } from './utils'
-import { useRouterState } from './useRouterState'
-import { StrictOrFrom } from './utils'
-import { getRenderedMatches } from './Matches'
+import { useMatch } from './useMatch'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseParams,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseParamsResult,
+} from '@tanstack/router-core'
+
+export interface UseParamsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing,
+> {
+  select?: (
+    params: ResolveUseParams<TRouter, TFrom, TStrict>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+  shouldThrow?: TThrow
+}
+
+export type UseParamsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseParamsBaseOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    TThrow,
+    TSelected,
+    TStructuralSharing
+  > &
+  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseParamsRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseParamsBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected,
+    TStructuralSharing
+  > &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+) => UseParamsResult<TRouter, TFrom, true, TSelected>
 
 export function useParams<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TReturnIntersection extends boolean = false,
-  TParams = TReturnIntersection extends false
-    ? RouteById<TRouteTree, TFrom>['types']['allParams']
-    : Expand<Partial<AllParams<TRouteTree>>>,
-  TSelected = TParams,
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
 >(
-  opts: StrictOrFrom<TFrom, TReturnIntersection> & {
-    select?: (params: TParams) => TSelected
-  },
-): TSelected {
-  return useRouterState({
-    select: (state: any) => {
-      const params = (last(getRenderedMatches(state)) as any)?.params
-      return opts?.select ? opts.select(params) : params
+  opts: UseParamsOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected,
+    TStructuralSharing
+  >,
+): ThrowOrOptional<
+  UseParamsResult<TRouter, TFrom, TStrict, TSelected>,
+  TThrow
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    structuralSharing: opts.structuralSharing,
+    select: (match: any) => {
+      return opts.select ? opts.select(match.params) : match.params
     },
-  })
+  }) as any
 }

package/src/useRouteContext.ts

@@ -1,24 +1,30 @@
-import { useMatch, RouteMatch } from './Matches'
-import { AnyRoute } from './route'
-import { RouteIds, RouteById } from './routeInfo'
-import { RegisteredRouter } from './router'
-import { StrictOrFrom } from './utils'
+import { useMatch } from './useMatch'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  UseRouteContextBaseOptions,
+  UseRouteContextOptions,
+  UseRouteContextResult,
+} from '@tanstack/router-core'
+
+export type UseRouteContextRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseRouteContextBaseOptions<TRouter, TFrom, true, TSelected>,
+) => UseRouteContextResult<TRouter, TFrom, true, TSelected>
 
 export function useRouteContext<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],
-  TSelected = TRouteContext,
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TSelected = unknown,
 >(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (search: TRouteContext) => TSelected
-  },
-): TSelected {
+  opts: UseRouteContextOptions<TRouter, TFrom, TStrict, TSelected>,
+): UseRouteContextResult<TRouter, TFrom, TStrict, TSelected> {
   return useMatch({
     ...(opts as any),
-    select: (match: RouteMatch) =>
-      opts?.select
-        ? opts.select(match.context as TRouteContext)
-        : match.context,
-  })
+    select: (match) =>
+      opts.select ? opts.select(match.context) : match.context,
+  }) as UseRouteContextResult<TRouter, TFrom, TStrict, TSelected>
 }

package/src/useRouter.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react'
 import warning from 'tiny-warning'
-import { AnyRoute } from './route'
-import { RegisteredRouter, Router } from './router'
 import { getRouterContext } from './routerContext'
+import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
 
-export function useRouter<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
->(opts?: { warn?: boolean }): Router<TRouteTree> {
+export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
+  warn?: boolean
+}): TRouter {
   const value = React.useContext(getRouterContext())
   warning(
     !((opts?.warn ?? true) && !value),

package/src/useRouterState.tsx

@@ -1,17 +1,59 @@
 import { useStore } from '@tanstack/react-store'
-import { AnyRoute } from './route'
-import { RegisteredRouter, Router, RouterState } from './router'
+import { useRef } from 'react'
+import { replaceEqualDeep } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterState,
+} from '@tanstack/router-core'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+
+export type UseRouterStateOptions<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing,
+> = {
+  router?: TRouter
+  select?: (
+    state: RouterState<TRouter['routeTree']>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+} & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseRouterStateResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected
 
 export function useRouterState<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TSelected = RouterState<TRouteTree>,
->(opts?: {
-  router?: Router<TRouteTree>
-  select: (state: RouterState<RegisteredRouter['routeTree']>) => TSelected
-}): TSelected {
-  const contextRouter = useRouter<TRouteTree>({
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseRouterStateOptions<TRouter, TSelected, TStructuralSharing>,
+): UseRouterStateResult<TRouter, TSelected> {
+  const contextRouter = useRouter<TRouter>({
     warn: opts?.router === undefined,
   })
-  return useStore((opts?.router || contextRouter).__store, opts?.select as any)
+  const router = opts?.router || contextRouter
+  const previousResult =
+    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(undefined)
+
+  return useStore(router.__store, (state) => {
+    if (opts?.select) {
+      if (opts.structuralSharing ?? router.options.defaultStructuralSharing) {
+        const newSlice = replaceEqualDeep(
+          previousResult.current,
+          opts.select(state),
+        )
+        previousResult.current = newSlice
+        return newSlice
+      }
+      return opts.select(state)
+    }
+    return state
+  }) as UseRouterStateResult<TRouter, TSelected>
 }

package/src/useSearch.tsx

@@ -1,30 +1,93 @@
-import { AnyRoute, RootSearchSchema } from './route'
-import { RouteIds, RouteById, FullSearchSchema } from './routeInfo'
-import { RegisteredRouter } from './router'
-import { RouteMatch } from './Matches'
-import { useMatch } from './Matches'
-import { Expand, StrictOrFrom } from './utils'
+import { useMatch } from './useMatch'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseSearch,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseSearchResult,
+} from '@tanstack/router-core'
+
+export interface UseSearchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing,
+> {
+  select?: (
+    state: ResolveUseSearch<TRouter, TFrom, TStrict>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+  shouldThrow?: TThrow
+}
+
+export type UseSearchOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseSearchBaseOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    TThrow,
+    TSelected,
+    TStructuralSharing
+  > &
+  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseSearchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseSearchBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected,
+    TStructuralSharing
+  > &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+) => UseSearchResult<TRouter, TFrom, true, TSelected>
 
 export function useSearch<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TReturnIntersection extends boolean = false,
-  TSearch = TReturnIntersection extends false
-    ? Exclude<
-        RouteById<TRouteTree, TFrom>['types']['fullSearchSchema'],
-        RootSearchSchema
-      >
-    : Partial<Omit<FullSearchSchema<TRouteTree>, keyof RootSearchSchema>>,
-  TSelected = TSearch,
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
 >(
-  opts: StrictOrFrom<TFrom, TReturnIntersection> & {
-    select?: (search: TSearch) => TSelected
-  },
-): TSelected {
+  opts: UseSearchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected,
+    TStructuralSharing
+  >,
+): ThrowOrOptional<
+  UseSearchResult<TRouter, TFrom, TStrict, TSelected>,
+  TThrow
+> {
   return useMatch({
-    ...opts,
-    select: (match: RouteMatch) => {
-      return opts?.select ? opts.select(match.search as TSearch) : match.search
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    structuralSharing: opts.structuralSharing,
+    select: (match: any) => {
+      return opts.select ? opts.select(match.search) : match.search
     },
-  })
+  }) as any
 }