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

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.236",
   "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.234"
+    "@tanstack/history": "0.0.1-beta.236"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -47,11 +47,12 @@ export interface RouteMatch<
 export type AnyRouteMatch = RouteMatch<any>
 
 export function Matches() {
-  const { routesById, state } = useRouter()
-  const { matches } = state
-
+  const { routesById } = useRouter()
+  const routerState = useRouterState()
+  const matches = routerState.pendingMatches?.some((d) => d.showPending)
+    ? routerState.pendingMatches
+    : routerState.matches
   const locationKey = useRouterState().location.state.key
-
   const route = routesById[rootRouteId]!
 
   const errorComponent = React.useCallback(
@@ -307,9 +308,13 @@ export function useMatch<
 
   const matchRouteId = useRouterState({
     select: (state) => {
+      const matches = state.pendingMatches?.some((d) => d.showPending)
+        ? state.pendingMatches
+        : state.matches
+
       const match = opts?.from
-        ? state.matches.find((d) => d.routeId === opts?.from)
-        : state.matches.find((d) => d.id === nearestMatch.id)
+        ? matches.find((d) => d.routeId === opts?.from)
+        : matches.find((d) => d.id === nearestMatch.id)
 
       return match!.routeId
     },
@@ -330,9 +335,13 @@ export function useMatch<
 
   const matchSelection = useRouterState({
     select: (state) => {
+      const matches = state.pendingMatches?.some((d) => d.showPending)
+        ? state.pendingMatches
+        : state.matches
+
       const match = opts?.from
-        ? state.matches.find((d) => d.routeId === opts?.from)
-        : state.matches.find((d) => d.id === nearestMatch.id)
+        ? matches.find((d) => d.routeId === opts?.from)
+        : matches.find((d) => d.id === nearestMatch.id)
 
       invariant(
         match,
@@ -359,8 +368,12 @@ export function useMatches<T = RouteMatch[]>(opts?: {
 
   return useRouterState({
     select: (state) => {
-      const matches = state.matches.slice(
-        state.matches.findIndex((d) => d.id === contextMatches[0]?.id),
+      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)
     },

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,
@@ -99,39 +100,33 @@ 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],
-  )
 
-  router.setState = setState
-  router.state = state
   router.startReactTransition = startReactTransition
 
+  React.useEffect(() => {
+    if (isTransitioning) {
+      router.__store.setState((s) => ({
+        ...s,
+        isTransitioning,
+      }))
+    }
+  }, [isTransitioning])
+
   const tryLoad = () => {
-    startReactTransition(() => {
-      try {
-        router.load()
-      } catch (err) {
-        console.error(err)
-      }
-    })
+    // startReactTransition(() => {
+    try {
+      router.load()
+    } catch (err) {
+      console.error(err)
+    }
+    // })
   }
 
   useLayoutEffect(() => {
     const unsub = router.history.subscribe(() => {
       router.latestLocation = router.parseLocation(router.latestLocation)
-      if (state.location !== router.latestLocation) {
+      if (router.state.location !== router.latestLocation) {
         tryLoad()
       }
     })
@@ -143,7 +138,7 @@ function RouterProviderInner<
       state: true,
     })
 
-    if (state.location.href !== nextLocation.href) {
+    if (router.state.location.href !== nextLocation.href) {
       router.commitLocation({ ...nextLocation, replace: true })
     }
 
@@ -153,21 +148,26 @@ function RouterProviderInner<
   }, [router.history])
 
   useLayoutEffect(() => {
-    if (!isTransitioning && state.resolvedLocation !== state.location) {
+    if (
+      !isTransitioning &&
+      router.state.resolvedLocation !== router.state.location
+    ) {
       router.emit({
         type: 'onResolved',
-        fromLocation: state.resolvedLocation,
-        toLocation: state.location,
-        pathChanged: state.location!.href !== state.resolvedLocation?.href,
+        fromLocation: router.state.resolvedLocation,
+        toLocation: router.state.location,
+        pathChanged:
+          router.state.location!.href !== router.state.resolvedLocation?.href,
       })
       router.pendingMatches = []
 
-      setState((s) => ({
+      router.__store.setState((s) => ({
         ...s,
+        isTransitioning: false,
         resolvedLocation: s.location,
       }))
     }
-  })
+  }, [isTransitioning])
 
   useLayoutEffect(() => {
     if (!window.__TSR_DEHYDRATED__) {
@@ -186,7 +186,9 @@ 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<
@@ -194,9 +196,8 @@ export function useRouterState<
 >(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)
+  const router = useRouter()
+  return useStore(router.__store, opts?.select as any)
 }
 
 export type RouterProps<

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,