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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.235",
+  "version": "0.0.1-beta.237",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -40,9 +40,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
+    "@tanstack/react-store": "^0.2.1",
+    "@tanstack/store": "^0.1.3",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.235"
+    "@tanstack/history": "0.0.1-beta.237"
   },
   "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 } from './RouterProvider'
+import { useRouter, useRouterState } from './RouterProvider'
 import { ResolveRelativePath, ToOptions } from './link'
 import { AnyRoute, ReactNode, rootRouteId } from './route'
 import {
@@ -48,8 +48,11 @@ export type AnyRouteMatch = RouteMatch<any>
 
 export function Matches() {
   const router = useRouter()
-  const { matches } = router.state
-  const locationKey = router.state.location.state.key
+  const routerState = useRouterState()
+  const matches = routerState.pendingMatches?.some((d) => d.showPending)
+    ? routerState.pendingMatches
+    : routerState.matches
+  const locationKey = router.latestLocation.state.key
   const route = router.routesById[rootRouteId]!
 
   const errorComponent = React.useCallback(
@@ -294,20 +297,28 @@ export function useMatch<
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TStrict extends boolean = true,
   TRouteMatchState = RouteMatch<TRouteTree, TFrom>,
+  TSelected = TRouteMatchState,
 >(
-  opts: StrictOrFrom<TFrom>,
-): TStrict extends true ? TRouteMatchState : TRouteMatchState | undefined {
-  const router = useRouter()
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatchState) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
   const nearestMatch = React.useContext(matchesContext)[0]!
   const nearestMatchRouteId = nearestMatch?.routeId
 
-  const matchRouteId = (() => {
-    const match = opts?.from
-      ? router.state.matches.find((d) => d.routeId === opts?.from)
-      : router.state.matches.find((d) => d.id === nearestMatch.id)
+  const matchRouteId = useRouterState({
+    select: (state) => {
+      const matches = state.pendingMatches?.some((d) => d.showPending)
+        ? state.pendingMatches
+        : state.matches
+
+      const match = opts?.from
+        ? matches.find((d) => d.routeId === opts?.from)
+        : matches.find((d) => d.id === nearestMatch.id)
 
-    return match!.routeId
-  })()
+      return match!.routeId
+    },
+  })
 
   if (opts?.strict ?? true) {
     invariant(
@@ -322,32 +333,51 @@ export function useMatch<
     )
   }
 
-  const matchSelection = (() => {
-    const match = opts?.from
-      ? router.state.matches.find((d) => d.routeId === opts?.from)
-      : router.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 = useRouterState({
+    select: (state) => {
+      const matches = state.pendingMatches?.some((d) => d.showPending)
+        ? state.pendingMatches
+        : state.matches
+
+      const match = opts?.from
+        ? matches.find((d) => d.routeId === opts?.from)
+        : matches.find((d) => d.id === nearestMatch.id)
+
+      invariant(
+        match,
+        `Could not find ${
+          opts?.from
+            ? `an active match from "${opts.from}"`
+            : 'a nearest match!'
+        }`,
+      )
 
-    return match
-  })()
+      return opts?.select ? opts.select(match as any) : match
+    },
+  })
 
   return matchSelection as any
 }
 
 export const matchesContext = React.createContext<RouteMatch[]>(null!)
 
-export function useMatches(): RouteMatch[] {
-  const router = useRouter()
+export function useMatches<T = RouteMatch[]>(opts?: {
+  select?: (matches: RouteMatch[]) => T
+}): T {
   const contextMatches = React.useContext(matchesContext)
-  return router.state.matches.slice(
-    router.state.matches.findIndex((d) => d.id === contextMatches[0]?.id),
-  )
+
+  return useRouterState({
+    select: (state) => {
+      let matches = state.pendingMatches?.some((d) => d.showPending)
+        ? state.pendingMatches
+        : state.matches
+
+      matches = matches.slice(
+        matches.findIndex((d) => d.id === contextMatches[0]?.id),
+      )
+      return opts?.select ? opts.select(matches) : (matches as T)
+    },
+  })
 }
 
 export function useLoaderData<
@@ -358,10 +388,15 @@ export function useLoaderData<
     TRouteTree,
     TFrom
   >,
+  TSelected = TRouteMatch['loaderData'],
 >(
-  opts: StrictOrFrom<TFrom>,
-): TStrict extends true
-  ? TRouteMatch['loaderData']
-  : TRouteMatch['loaderData'] | undefined {
-  return useMatch(opts)?.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
 }

package/src/RouterProvider.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import warning from 'tiny-warning'
+import { useStore } from '@tanstack/react-store'
 import { Matches } from './Matches'
 import {
   LinkInfo,
@@ -18,7 +19,7 @@ import {
   RouterOptions,
   RouterState,
 } from './router'
-import { NoInfer, PickAsRequired, useLayoutEffect } from './utils'
+import { NoInfer, PickAsRequired, pick, useLayoutEffect } from './utils'
 import { MatchRouteOptions } from './Matches'
 import { RouteMatch } from './Matches'
 
@@ -86,7 +87,11 @@ export function RouterProvider<
     },
   } as any)
 
-  const inner = <RouterProviderInner<TRouteTree, TDehydrated> router={router} />
+  const inner = (
+    <routerContext.Provider value={router}>
+      <RouterProviderInner<TRouteTree, TDehydrated> router={router} />
+    </routerContext.Provider>
+  )
 
   if (router.options.Wrap) {
     return <router.options.Wrap>{inner}</router.options.Wrap>
@@ -99,27 +104,44 @@ function RouterProviderInner<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TDehydrated extends Record<string, any> = Record<string, any>,
 >({ router }: RouterProps<TRouteTree, TDehydrated>) {
-  const [preState, setState] = React.useState(() => router.state)
-  const [isTransitioning, startReactTransition] = React.useTransition()
-  const isAnyTransitioning =
-    isTransitioning || preState.matches.some((d) => d.status === 'pending')
-
-  const state = React.useMemo<RouterState<TRouteTree>>(
-    () => ({
-      ...preState,
-      status: isAnyTransitioning ? 'pending' : 'idle',
-      location: isTransitioning ? router.latestLocation : preState.location,
-      pendingMatches: router.pendingMatches,
-    }),
-    [preState, isTransitioning],
+  return (
+    <>
+      <Matches />
+      <Transitioner />
+    </>
   )
+}
+
+function Transitioner() {
+  const router = useRouter()
+  const routerState = useRouterState({
+    select: (s) =>
+      pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),
+  })
+
+  const [isTransitioning, startReactTransition] = React.useTransition()
 
-  router.setState = setState
-  router.state = state
   router.startReactTransition = startReactTransition
 
+  React.useEffect(() => {
+    if (isTransitioning) {
+      router.__store.setState((s) => ({
+        ...s,
+        isTransitioning,
+      }))
+    }
+  }, [isTransitioning])
+
   const tryLoad = () => {
-    startReactTransition(() => {
+    const apply = (cb: () => void) => {
+      if (!routerState.isTransitioning) {
+        startReactTransition(() => cb())
+      } else {
+        cb()
+      }
+    }
+
+    apply(() => {
       try {
         router.load()
       } catch (err) {
@@ -131,7 +153,7 @@ function RouterProviderInner<
   useLayoutEffect(() => {
     const unsub = router.history.subscribe(() => {
       router.latestLocation = router.parseLocation(router.latestLocation)
-      if (state.location !== router.latestLocation) {
+      if (routerState.location !== router.latestLocation) {
         tryLoad()
       }
     })
@@ -143,7 +165,7 @@ function RouterProviderInner<
       state: true,
     })
 
-    if (state.location.href !== nextLocation.href) {
+    if (routerState.location.href !== nextLocation.href) {
       router.commitLocation({ ...nextLocation, replace: true })
     }
 
@@ -153,21 +175,28 @@ function RouterProviderInner<
   }, [router.history])
 
   useLayoutEffect(() => {
-    if (!isTransitioning && state.resolvedLocation !== state.location) {
+    if (
+      !isTransitioning &&
+      !routerState.isLoading &&
+      routerState.resolvedLocation !== routerState.location
+    ) {
+      console.log('onResolved', routerState.location)
       router.emit({
         type: 'onResolved',
-        fromLocation: state.resolvedLocation,
-        toLocation: state.location,
-        pathChanged: state.location!.href !== state.resolvedLocation?.href,
+        fromLocation: routerState.resolvedLocation,
+        toLocation: routerState.location,
+        pathChanged:
+          routerState.location!.href !== routerState.resolvedLocation?.href,
       })
       router.pendingMatches = []
 
-      setState((s) => ({
+      router.__store.setState((s) => ({
         ...s,
+        isTransitioning: false,
         resolvedLocation: s.location,
       }))
     }
-  })
+  }, [isTransitioning, routerState.isLoading])
 
   useLayoutEffect(() => {
     if (!window.__TSR_DEHYDRATED__) {
@@ -175,18 +204,25 @@ function RouterProviderInner<
     }
   }, [])
 
-  return (
-    <routerContext.Provider value={router}>
-      <Matches />
-    </routerContext.Provider>
-  )
+  return null
 }
 
 export function getRouteMatch<TRouteTree extends AnyRoute>(
   state: RouterState<TRouteTree>,
   id: string,
 ): undefined | RouteMatch<TRouteTree> {
-  return [...state.pendingMatches, ...state.matches].find((d) => d.id === id)
+  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 router = useRouter()
+  return useStore(router.__store, opts?.select as any)
 }
 
 export type RouterProps<

package/src/route.ts

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

package/src/router.ts

@@ -5,6 +5,7 @@ import {
   createBrowserHistory,
   createMemoryHistory,
 } from '@tanstack/history'
+import { Store } from '@tanstack/store'
 
 //
 
@@ -29,7 +30,6 @@ import {
   functionalUpdate,
   last,
   pick,
-  PickAsPartial,
 } from './utils'
 import {
   ErrorRouteComponent,
@@ -134,8 +134,10 @@ export interface RouterOptions<
 
 export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
   status: 'pending' | 'idle'
+  isLoading: boolean
+  isTransitioning: boolean
   matches: RouteMatch<TRouteTree>[]
-  pendingMatches: RouteMatch<TRouteTree>[]
+  pendingMatches?: RouteMatch<TRouteTree>[]
   location: ParsedLocation<FullSearchSchema<TRouteTree>>
   resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
   lastUpdated: number
@@ -236,7 +238,7 @@ export class Router<
   dehydratedData?: TDehydrated
 
   // Must build in constructor
-  state!: RouterState<TRouteTree>
+  __store!: Store<RouterState<TRouteTree>>
   options!: PickAsRequired<
     RouterOptions<TRouteTree, TDehydrated>,
     'stringifySearch' | 'parseSearch' | 'context'
@@ -265,11 +267,6 @@ export class Router<
   // by the router provider once rendered. We provide these so that the
   // router can be used in a non-react environment if necessary
   startReactTransition: (fn: () => void) => void = (fn) => fn()
-  setState: (updater: NonNullableUpdater<RouterState<TRouteTree>>) => void = (
-    updater,
-  ) => {
-    this.state = functionalUpdate(updater, this.state)
-  }
 
   update = (newOptions: RouterConstructorOptions<TRouteTree, TDehydrated>) => {
     this.options = {
@@ -296,11 +293,25 @@ export class Router<
       this.buildRouteTree()
     }
 
-    if (!this.state) {
-      this.state = getInitialRouterState(this.latestLocation)
+    if (!this.__store) {
+      this.__store = new Store(getInitialRouterState(this.latestLocation), {
+        onUpdate: () => {
+          this.__store.state = {
+            ...this.state,
+            status:
+              this.state.isTransitioning || this.state.isLoading
+                ? 'pending'
+                : 'idle',
+          }
+        },
+      })
     }
   }
 
+  get state() {
+    return this.__store.state
+  }
+
   buildRouteTree = () => {
     this.routesById = {} as RoutesById<TRouteTree>
     this.routesByPath = {} as RoutesByPath<TRouteTree>
@@ -654,7 +665,7 @@ export class Router<
   }
 
   cancelMatches = () => {
-    this.state.matches.forEach((match) => {
+    this.state.pendingMatches?.forEach((match) => {
       this.cancelMatch(match.id)
     })
   }
@@ -948,6 +959,15 @@ export class Router<
     let latestPromise
     let firstBadMatchIndex: number | undefined
 
+    const updatePendingMatch = (match: AnyRouteMatch) => {
+      this.__store.setState((s) => ({
+        ...s,
+        pendingMatches: s.pendingMatches?.map((d) =>
+          d.id === match.id ? match : d,
+        ),
+      }))
+    }
+
     // Check each match middleware to see if the route can be accessed
     try {
       for (let [index, match] of matches.entries()) {
@@ -1149,13 +1169,12 @@ export class Router<
           }
 
           if (!preload) {
-            this.setState((s) => ({
-              ...s,
-              matches: s.matches.map((d) => (d.id === match.id ? match : d)),
-            }))
+            updatePendingMatch(match)
           }
 
           let didShowPending = false
+          const pendingMinMs =
+            route.options.pendingMinMs ?? this.options.defaultPendingMinMs
 
           await new Promise<void>(async (resolve) => {
             // If the route has a pending component and a pendingMs option,
@@ -1170,12 +1189,7 @@ export class Router<
                   showPending: true,
                 }
 
-                this.setState((s) => ({
-                  ...s,
-                  matches: s.matches.map((d) =>
-                    d.id === match.id ? match : d,
-                  ),
-                }))
+                updatePendingMatch(match)
                 resolve()
               })
             }
@@ -1184,9 +1198,6 @@ export class Router<
               const loaderData = await loadPromise
               if ((latestPromise = checkLatest())) return await latestPromise
 
-              const pendingMinMs =
-                route.options.pendingMinMs ?? this.options.defaultPendingMinMs
-
               if (didShowPending && pendingMinMs) {
                 await new Promise((r) => setTimeout(r, pendingMinMs))
               }
@@ -1220,13 +1231,22 @@ export class Router<
                 isFetching: false,
                 updatedAt: Date.now(),
               }
+            } finally {
+              // If we showed the pending component, that means
+              // we already moved the pendingMatches to the matches
+              // state, so we need to update that specific match
+              if (didShowPending && pendingMinMs && match.showPending) {
+                this.__store.setState((s) => ({
+                  ...s,
+                  matches: s.matches?.map((d) =>
+                    d.id === match.id ? match : d,
+                  ),
+                }))
+              }
             }
 
             if (!preload) {
-              this.setState((s) => ({
-                ...s,
-                matches: s.matches.map((d) => (d.id === match.id ? match : d)),
-              }))
+              updatePendingMatch(match)
             }
 
             resolve()
@@ -1262,7 +1282,7 @@ export class Router<
       })
 
       // Match the routes
-      let matches: RouteMatch<any, any>[] = this.matchRoutes(
+      let pendingMatches: RouteMatch<any, any>[] = this.matchRoutes(
         next.pathname,
         next.search,
         {
@@ -1270,23 +1290,21 @@ export class Router<
         },
       )
 
-      this.pendingMatches = matches
-
       const previousMatches = this.state.matches
 
       // Ingest the new matches
-      this.setState((s) => ({
+      this.__store.setState((s) => ({
         ...s,
-        // status: 'pending',
+        isLoading: true,
         location: next,
-        matches,
+        pendingMatches,
       }))
 
       try {
         try {
           // Load the matches
           await this.loadMatches({
-            matches,
+            matches: pendingMatches,
             checkLatest: () => this.checkLatest(promise),
             invalidate: opts?.invalidate,
           })
@@ -1310,12 +1328,12 @@ export class Router<
           this.pendingMatches.includes(id),
         )
 
-        // setState((s) => ({
-        //   ...s,
-        //   status: 'idle',
-        //   resolvedLocation: s.location,
-        //   matches,
-        // }))
+        this.__store.setState((s) => ({
+          ...s,
+          isLoading: false,
+          matches: pendingMatches,
+          pendingMatches: undefined,
+        }))
 
         //
         ;(
@@ -1517,8 +1535,6 @@ export class Router<
       ? this.latestLocation
       : this.state.resolvedLocation
 
-    // const baseLocation = state.resolvedLocation
-
     if (!baseLocation) {
       return false
     }
@@ -1633,7 +1649,7 @@ export class Router<
       return match
     })
 
-    this.setState((s) => {
+    this.__store.setState((s) => {
       return {
         ...s,
         matches: matches as any,
@@ -1672,6 +1688,8 @@ export function getInitialRouterState(
   location: ParsedLocation,
 ): RouterState<any> {
   return {
+    isLoading: false,
+    isTransitioning: false,
     status: 'idle',
     resolvedLocation: location,
     location,