@tanstack/react-router 0.0.1-beta.234 → 0.0.1-beta.235

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.234",
+  "version": "0.0.1-beta.235",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.16.7",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.234"
+    "@tanstack/history": "0.0.1-beta.235"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
-import { useRouter, useRouterState } from './RouterProvider'
+import { useRouter } from './RouterProvider'
 import { ResolveRelativePath, ToOptions } from './link'
 import { AnyRoute, ReactNode, rootRouteId } from './route'
 import {
@@ -47,12 +47,10 @@ export interface RouteMatch<
 export type AnyRouteMatch = RouteMatch<any>
 
 export function Matches() {
-  const { routesById, state } = useRouter()
-  const { matches } = state
-
-  const locationKey = useRouterState().location.state.key
-
-  const route = routesById[rootRouteId]!
+  const router = useRouter()
+  const { matches } = router.state
+  const locationKey = router.state.location.state.key
+  const route = router.routesById[rootRouteId]!
 
   const errorComponent = React.useCallback(
     (props: any) => {
@@ -296,24 +294,20 @@ export function useMatch<
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TStrict extends boolean = true,
   TRouteMatchState = RouteMatch<TRouteTree, TFrom>,
-  TSelected = TRouteMatchState,
 >(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (match: TRouteMatchState) => TSelected
-  },
-): TStrict extends true ? TSelected : TSelected | undefined {
+  opts: StrictOrFrom<TFrom>,
+): TStrict extends true ? TRouteMatchState : TRouteMatchState | undefined {
+  const router = useRouter()
   const nearestMatch = React.useContext(matchesContext)[0]!
   const nearestMatchRouteId = nearestMatch?.routeId
 
-  const matchRouteId = useRouterState({
-    select: (state) => {
-      const match = opts?.from
-        ? state.matches.find((d) => d.routeId === opts?.from)
-        : state.matches.find((d) => d.id === nearestMatch.id)
+  const matchRouteId = (() => {
+    const match = opts?.from
+      ? router.state.matches.find((d) => d.routeId === opts?.from)
+      : router.state.matches.find((d) => d.id === nearestMatch.id)
 
-      return match!.routeId
-    },
-  })
+    return match!.routeId
+  })()
 
   if (opts?.strict ?? true) {
     invariant(
@@ -328,43 +322,32 @@ export function useMatch<
     )
   }
 
-  const matchSelection = useRouterState({
-    select: (state) => {
-      const match = opts?.from
-        ? state.matches.find((d) => d.routeId === opts?.from)
-        : state.matches.find((d) => d.id === nearestMatch.id)
-
-      invariant(
-        match,
-        `Could not find ${
-          opts?.from
-            ? `an active match from "${opts.from}"`
-            : 'a nearest match!'
-        }`,
-      )
+  const matchSelection = (() => {
+    const match = opts?.from
+      ? router.state.matches.find((d) => d.routeId === opts?.from)
+      : router.state.matches.find((d) => d.id === nearestMatch.id)
 
-      return opts?.select ? opts.select(match as any) : match
-    },
-  })
+    invariant(
+      match,
+      `Could not find ${
+        opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'
+      }`,
+    )
+
+    return match
+  })()
 
   return matchSelection as any
 }
 
 export const matchesContext = React.createContext<RouteMatch[]>(null!)
 
-export function useMatches<T = RouteMatch[]>(opts?: {
-  select?: (matches: RouteMatch[]) => T
-}): T {
+export function useMatches(): RouteMatch[] {
+  const router = useRouter()
   const contextMatches = React.useContext(matchesContext)
-
-  return useRouterState({
-    select: (state) => {
-      const matches = state.matches.slice(
-        state.matches.findIndex((d) => d.id === contextMatches[0]?.id),
-      )
-      return opts?.select ? opts.select(matches) : (matches as T)
-    },
-  })
+  return router.state.matches.slice(
+    router.state.matches.findIndex((d) => d.id === contextMatches[0]?.id),
+  )
 }
 
 export function useLoaderData<
@@ -375,15 +358,10 @@ export function useLoaderData<
     TRouteTree,
     TFrom
   >,
-  TSelected = TRouteMatch['loaderData'],
 >(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (match: TRouteMatch) => TSelected
-  },
-): TStrict extends true ? TSelected : TSelected | undefined {
-  const match = useMatch({ ...opts, select: undefined })!
-
-  return typeof opts.select === 'function'
-    ? opts.select(match?.loaderData)
-    : match?.loaderData
+  opts: StrictOrFrom<TFrom>,
+): TStrict extends true
+  ? TRouteMatch['loaderData']
+  : TRouteMatch['loaderData'] | undefined {
+  return useMatch(opts)?.loaderData
 }

package/src/RouterProvider.tsx

@@ -189,16 +189,6 @@ export function getRouteMatch<TRouteTree extends AnyRoute>(
   return [...state.pendingMatches, ...state.matches].find((d) => d.id === id)
 }
 
-export function useRouterState<
-  TSelected = RouterState<RegisteredRouter['routeTree']>,
->(opts?: {
-  select: (state: RouterState<RegisteredRouter['routeTree']>) => TSelected
-}): TSelected {
-  const { state } = useRouter()
-  // return useStore(router.__store, opts?.select as any)
-  return opts?.select ? opts.select(state) : (state as any)
-}
-
 export type RouterProps<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TDehydrated extends Record<string, any> = Record<string, any>,

package/src/route.ts

@@ -590,34 +590,22 @@ export class Route<
     // replaced by a framework specific implementation if necessary
   }
 
-  useMatch = <TSelected = TAllContext>(opts?: {
-    select?: (search: TAllContext) => TSelected
-  }): TSelected => {
-    return useMatch({ ...opts, from: this.id }) as any
+  useMatch = (): TAllContext => {
+    return useMatch({ from: this.id }) as any
   }
-  useRouteContext = <TSelected = TAllContext>(opts?: {
-    select?: (search: TAllContext) => TSelected
-  }): TSelected => {
+  useRouteContext = (): TAllContext => {
     return useMatch({
-      ...opts,
       from: this.id,
-      select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
-    } as any)
+    } as any).context
   }
-  useSearch = <TSelected = TFullSearchSchema>(opts?: {
-    select?: (search: TFullSearchSchema) => TSelected
-  }): TSelected => {
-    return useSearch({ ...opts, from: this.id } as any)
+  useSearch = (): TFullSearchSchema => {
+    return useSearch({ from: this.id } as any)
   }
-  useParams = <TSelected = TAllParams>(opts?: {
-    select?: (search: TAllParams) => TSelected
-  }): TSelected => {
-    return useParams({ ...opts, from: this.id } as any)
+  useParams = (): TAllParams => {
+    return useParams({ from: this.id } as any)
   }
-  useLoaderData = <TSelected = TLoaderData>(opts?: {
-    select?: (search: TLoaderData) => TSelected
-  }): TSelected => {
-    return useLoaderData({ ...opts, from: this.id } as any) as any
+  useLoaderData = (): TLoaderData => {
+    return useLoaderData({ from: this.id } as any) as any
   }
 }
 
@@ -768,21 +756,11 @@ export type RouteProps<
   TAllContext extends Record<string, any> = AnyContext,
   TLoaderData extends any = unknown,
 > = {
-  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
-  useLoaderData: <TSelected = TLoaderData>(opts?: {
-    select?: (search: TLoaderData) => TSelected
-  }) => TSelected
+  useMatch: () => TAllContext
+  useRouteContext: () => TAllContext
+  useSearch: () => TFullSearchSchema
+  useParams: () => TAllParams
+  useLoaderData: () => TLoaderData
 }
 
 export type ErrorRouteProps<

package/src/useParams.tsx

@@ -2,24 +2,14 @@ import { AnyRoute } from './route'
 import { RouteIds, RouteById, AllParams } from './routeInfo'
 import { RegisteredRouter } from './router'
 import { last } from './utils'
-import { useRouterState } from './RouterProvider'
+import { useRouter } 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
-    },
-  })
+  _opts: StrictOrFrom<TFrom>,
+): AllParams<TRouteTree> & RouteById<TRouteTree, TFrom>['types']['allParams'] {
+  return (last(useRouter().state.matches) as any)?.params
 }

package/src/useSearch.tsx

@@ -10,16 +10,8 @@ export function useSearch<
   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
-    },
-  })
+  opts: StrictOrFrom<TFrom>,
+): TStrict extends true ? TSearch : TSearch | undefined {
+  return useMatch(opts).search
 }

package/src/utils.ts

@@ -18,8 +18,8 @@ export type PickExtra<T, K> = {
   [TKey in keyof K as string extends TKey
     ? never
     : TKey extends keyof T
-    ? never
-    : TKey]: K[TKey]
+      ? never
+      : TKey]: K[TKey]
 }
 
 export type PickRequired<T> = {
@@ -105,15 +105,15 @@ export type ValueKeys<O> = Extract<keyof O, PropertyKey>
 export type DeepAwaited<T> = T extends Promise<infer A>
   ? DeepAwaited<A>
   : T extends Record<infer A, Promise<infer B>>
-  ? { [K in A]: DeepAwaited<B> }
-  : T
+    ? { [K in A]: DeepAwaited<B> }
+    : T
 
 export type PathParamMask<TRoutePath extends string> =
   TRoutePath extends `${infer L}/$${infer C}/${infer R}`
     ? PathParamMask<`${L}/${string}/${R}`>
     : TRoutePath extends `${infer L}/$${infer C}`
-    ? PathParamMask<`${L}/${string}`>
-    : TRoutePath
+      ? PathParamMask<`${L}/${string}`>
+      : TRoutePath
 
 export type Timeout = ReturnType<typeof setTimeout>
 
@@ -314,10 +314,10 @@ export type RouteFromIdOrRoute<
 > = T extends ParseRoute<TRouteTree>
   ? T
   : T extends RouteIds<TRouteTree>
-  ? RoutesById<TRouteTree>[T]
-  : T extends string
-  ? RouteIds<TRouteTree>
-  : never
+    ? RoutesById<TRouteTree>[T]
+    : T extends string
+      ? RouteIds<TRouteTree>
+      : never
 
 export function useRouteContext<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
@@ -326,17 +326,9 @@ export function useRouteContext<
   TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],
   TSelected = TRouteContext,
 >(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (search: TRouteContext) => TSelected
-  },
+  opts: StrictOrFrom<TFrom>,
 ): TStrict extends true ? TSelected : TSelected | undefined {
-  return useMatch({
-    ...(opts as any),
-    select: (match: RouteMatch) =>
-      opts?.select
-        ? opts.select(match.context as TRouteContext)
-        : match.context,
-  })
+  return useMatch(opts).context
 }
 
 export const useLayoutEffect =