@tanstack/solid-router 1.167.4 → 1.168.0

package/src/Match.tsx

@@ -11,10 +11,9 @@ import {
 import { isServer } from '@tanstack/router-core/isServer'
 import { Dynamic } from 'solid-js/web'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import { CatchNotFound } from './not-found'
-import { matchContext } from './matchContext'
+import { nearestMatchContext } from './matchContext'
 import { SafeFragment } from './SafeFragment'
 import { renderRouteNotFound } from './renderRouteNotFound'
 import { ScrollRestoration } from './scroll-restoration'
@@ -22,136 +21,162 @@ import type { AnyRoute, RootRouteOptions } from '@tanstack/router-core'
 
 export const Match = (props: { matchId: string }) => {
   const router = useRouter()
-  const matchState = useRouterState({
-    select: (s) => {
-      const match = s.matches.find((d) => d.id === props.matchId)
-
-      // During navigation transitions, matches can be temporarily removed
-      // Return null to avoid errors - the component will handle this gracefully
-      if (!match) {
-        return null
-      }
 
-      return {
-        routeId: match.routeId,
-        ssr: match.ssr,
-        _displayPending: match._displayPending,
-      }
-    },
+  const match = Solid.createMemo(() => {
+    const id = props.matchId
+    if (!id) return undefined
+    return router.stores.activeMatchStoresById.get(id)?.state
   })
 
-  // If match doesn't exist yet, return null (component is being unmounted or not ready)
-  if (!matchState()) return null
+  const rawMatchState = Solid.createMemo(() => {
+    const currentMatch = match()
+    if (!currentMatch) {
+      return null
+    }
 
-  const route: () => AnyRoute = () => router.routesById[matchState()!.routeId]
+    const routeId = currentMatch.routeId as string
+    const parentRouteId = (router.routesById[routeId] as AnyRoute)?.parentRoute
+      ?.id
 
-  const resolvePendingComponent = () =>
-    route().options.pendingComponent ?? router.options.defaultPendingComponent
+    return {
+      matchId: currentMatch.id,
+      routeId,
+      ssr: currentMatch.ssr,
+      _displayPending: currentMatch._displayPending,
+      parentRouteId: parentRouteId as string | undefined,
+    }
+  })
 
-  const routeErrorComponent = () =>
-    route().options.errorComponent ?? router.options.defaultErrorComponent
+  const hasPendingMatch = Solid.createMemo(() => {
+    const currentRouteId = rawMatchState()?.routeId
+    return currentRouteId
+      ? Boolean(router.stores.pendingRouteIds.state[currentRouteId])
+      : false
+  })
+  const nearestMatch = {
+    matchId: () => rawMatchState()?.matchId,
+    routeId: () => rawMatchState()?.routeId,
+    match,
+    hasPending: hasPendingMatch,
+  }
 
-  const routeOnCatch = () =>
-    route().options.onCatch ?? router.options.defaultOnCatch
+  return (
+    <Solid.Show when={rawMatchState()}>
+      {(currentMatchState) => {
+        const route: () => AnyRoute = () =>
+          router.routesById[currentMatchState().routeId]
 
-  const routeNotFoundComponent = () =>
-    route().isRoot
-      ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
-        (route().options.notFoundComponent ??
-        router.options.notFoundRoute?.options.component)
-      : route().options.notFoundComponent
+        const resolvePendingComponent = () =>
+          route().options.pendingComponent ??
+          router.options.defaultPendingComponent
 
-  const resolvedNoSsr =
-    matchState()!.ssr === false || matchState()!.ssr === 'data-only'
+        const routeErrorComponent = () =>
+          route().options.errorComponent ?? router.options.defaultErrorComponent
 
-  const ResolvedSuspenseBoundary = () => Solid.Suspense
+        const routeOnCatch = () =>
+          route().options.onCatch ?? router.options.defaultOnCatch
 
-  const ResolvedCatchBoundary = () =>
-    routeErrorComponent() ? CatchBoundary : SafeFragment
+        const routeNotFoundComponent = () =>
+          route().isRoot
+            ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
+              (route().options.notFoundComponent ??
+              router.options.notFoundRoute?.options.component)
+            : route().options.notFoundComponent
 
-  const ResolvedNotFoundBoundary = () =>
-    routeNotFoundComponent() ? CatchNotFound : SafeFragment
+        const resolvedNoSsr =
+          currentMatchState().ssr === false ||
+          currentMatchState().ssr === 'data-only'
 
-  const resetKey = useRouterState({
-    select: (s) => s.loadedAt,
-  })
+        const ResolvedSuspenseBoundary = () => Solid.Suspense
 
-  const parentRouteId = useRouterState({
-    select: (s) => {
-      const index = s.matches.findIndex((d) => d.id === props.matchId)
-      return s.matches[index - 1]?.routeId as string
-    },
-  })
+        const ResolvedCatchBoundary = () =>
+          routeErrorComponent() ? CatchBoundary : SafeFragment
 
-  const ShellComponent = route().isRoot
-    ? ((route().options as RootRouteOptions).shellComponent ?? SafeFragment)
-    : SafeFragment
+        const ResolvedNotFoundBoundary = () =>
+          routeNotFoundComponent() ? CatchNotFound : SafeFragment
 
-  return (
-    <ShellComponent>
-      <matchContext.Provider value={() => props.matchId}>
-        <Dynamic
-          component={ResolvedSuspenseBoundary()}
-          fallback={
-            // Don't show fallback on server when using no-ssr mode to avoid hydration mismatch
-            (isServer ?? router.isServer) || resolvedNoSsr ? undefined : (
-              <Dynamic component={resolvePendingComponent()} />
-            )
-          }
-        >
-          <Dynamic
-            component={ResolvedCatchBoundary()}
-            getResetKey={() => resetKey()}
-            errorComponent={routeErrorComponent() || ErrorComponent}
-            onCatch={(error: Error) => {
-              // Forward not found errors (we don't want to show the error component for these)
-              if (isNotFound(error)) throw error
-              warning(false, `Error in route match: ${matchState()!.routeId}`)
-              routeOnCatch()?.(error)
-            }}
-          >
-            <Dynamic
-              component={ResolvedNotFoundBoundary()}
-              fallback={(error: any) => {
-                // If the current not found handler doesn't exist or it has a
-                // route ID which doesn't match the current route, rethrow the error
-                if (
-                  !routeNotFoundComponent() ||
-                  (error.routeId && error.routeId !== matchState()!.routeId) ||
-                  (!error.routeId && !route().isRoot)
-                )
-                  throw error
+        const ShellComponent = route().isRoot
+          ? ((route().options as RootRouteOptions).shellComponent ??
+            SafeFragment)
+          : SafeFragment
 
-                return (
-                  <Dynamic component={routeNotFoundComponent()} {...error} />
-                )
-              }}
-            >
-              <Solid.Switch>
-                <Solid.Match when={resolvedNoSsr}>
-                  <Solid.Show
-                    when={!(isServer ?? router.isServer)}
-                    fallback={<Dynamic component={resolvePendingComponent()} />}
+        return (
+          <ShellComponent>
+            <nearestMatchContext.Provider value={nearestMatch}>
+              <Dynamic
+                component={ResolvedSuspenseBoundary()}
+                fallback={
+                  // Don't show fallback on server when using no-ssr mode to avoid hydration mismatch
+                  (isServer ?? router.isServer) && resolvedNoSsr ? undefined : (
+                    <Dynamic component={resolvePendingComponent()} />
+                  )
+                }
+              >
+                <Dynamic
+                  component={ResolvedCatchBoundary()}
+                  getResetKey={() => router.stores.loadedAt.state}
+                  errorComponent={routeErrorComponent() || ErrorComponent}
+                  onCatch={(error: Error) => {
+                    // Forward not found errors (we don't want to show the error component for these)
+                    if (isNotFound(error)) throw error
+                    warning(
+                      false,
+                      `Error in route match: ${currentMatchState().routeId}`,
+                    )
+                    routeOnCatch()?.(error)
+                  }}
+                >
+                  <Dynamic
+                    component={ResolvedNotFoundBoundary()}
+                    fallback={(error: any) => {
+                      // If the current not found handler doesn't exist or it has a
+                      // route ID which doesn't match the current route, rethrow the error
+                      if (
+                        !routeNotFoundComponent() ||
+                        (error.routeId &&
+                          error.routeId !== currentMatchState().routeId) ||
+                        (!error.routeId && !route().isRoot)
+                      )
+                        throw error
+
+                      return (
+                        <Dynamic
+                          component={routeNotFoundComponent()}
+                          {...error}
+                        />
+                      )
+                    }}
                   >
-                    <MatchInner matchId={props.matchId} />
-                  </Solid.Show>
-                </Solid.Match>
-                <Solid.Match when={!resolvedNoSsr}>
-                  <MatchInner matchId={props.matchId} />
-                </Solid.Match>
-              </Solid.Switch>
-            </Dynamic>
-          </Dynamic>
-        </Dynamic>
-      </matchContext.Provider>
-
-      {parentRouteId() === rootRouteId ? (
-        <>
-          <OnRendered />
-          <ScrollRestoration />
-        </>
-      ) : null}
-    </ShellComponent>
+                    <Solid.Switch>
+                      <Solid.Match when={resolvedNoSsr}>
+                        <Solid.Show
+                          when={!(isServer ?? router.isServer)}
+                          fallback={
+                            <Dynamic component={resolvePendingComponent()} />
+                          }
+                        >
+                          <MatchInner />
+                        </Solid.Show>
+                      </Solid.Match>
+                      <Solid.Match when={!resolvedNoSsr}>
+                        <MatchInner />
+                      </Solid.Match>
+                    </Solid.Switch>
+                  </Dynamic>
+                </Dynamic>
+              </Dynamic>
+            </nearestMatchContext.Provider>
+
+            {currentMatchState().parentRouteId === rootRouteId ? (
+              <>
+                <OnRendered />
+                <ScrollRestoration />
+              </>
+            ) : null}
+          </ShellComponent>
+        )
+      }}
+    </Solid.Show>
   )
 }
 
@@ -165,223 +190,244 @@ export const Match = (props: { matchId: string }) => {
 function OnRendered() {
   const router = useRouter()
 
-  const location = useRouterState({
-    select: (s) => {
-      return s.resolvedLocation?.state.__TSR_key
-    },
-  })
+  const location = Solid.createMemo(
+    () => router.stores.resolvedLocation.state?.state.__TSR_key,
+  )
   Solid.createEffect(
     Solid.on([location], () => {
       router.emit({
         type: 'onRendered',
-        ...getLocationChangeInfo(router.state),
+        ...getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        ),
       })
     }),
   )
   return null
 }
 
-export const MatchInner = (props: { matchId: string }): any => {
+export const MatchInner = (): any => {
   const router = useRouter()
+  const match = Solid.useContext(nearestMatchContext).match
 
-  const matchState = useRouterState({
-    select: (s) => {
-      const match = s.matches.find((d) => d.id === props.matchId)
+  const rawMatchState = Solid.createMemo(() => {
+    const currentMatch = match()
+    if (!currentMatch) {
+      return null
+    }
 
-      // During navigation transitions, matches can be temporarily removed
-      if (!match) {
-        return null
-      }
+    const routeId = currentMatch.routeId as string
+
+    const remountFn =
+      (router.routesById[routeId] as AnyRoute).options.remountDeps ??
+      router.options.defaultRemountDeps
+    const remountDeps = remountFn?.({
+      routeId,
+      loaderDeps: currentMatch.loaderDeps,
+      params: currentMatch._strictParams,
+      search: currentMatch._strictSearch,
+    })
+    const key = remountDeps ? JSON.stringify(remountDeps) : undefined
+
+    return {
+      key,
+      routeId,
+      match: {
+        id: currentMatch.id,
+        status: currentMatch.status,
+        error: currentMatch.error,
+        _forcePending: currentMatch._forcePending ?? false,
+        _displayPending: currentMatch._displayPending ?? false,
+      },
+    }
+  })
 
-      const routeId = match.routeId as string
+  return (
+    <Solid.Show when={rawMatchState()}>
+      {(currentMatchState) => {
+        const route = () => router.routesById[currentMatchState().routeId]!
 
-      const remountFn =
-        (router.routesById[routeId] as AnyRoute).options.remountDeps ??
-        router.options.defaultRemountDeps
-      const remountDeps = remountFn?.({
-        routeId,
-        loaderDeps: match.loaderDeps,
-        params: match._strictParams,
-        search: match._strictSearch,
-      })
-      const key = remountDeps ? JSON.stringify(remountDeps) : undefined
-
-      return {
-        key,
-        routeId,
-        match: {
-          id: match.id,
-          status: match.status,
-          error: match.error,
-          _forcePending: match._forcePending,
-          _displayPending: match._displayPending,
-        },
-      }
-    },
-  })
+        const currentMatch = () => currentMatchState().match
 
-  if (!matchState()) return null
+        const componentKey = () =>
+          currentMatchState().key ?? currentMatchState().match.id
+
+        const out = () => {
+          const Comp =
+            route().options.component ?? router.options.defaultComponent
+          if (Comp) {
+            return <Comp />
+          }
+          return <Outlet />
+        }
+
+        const keyedOut = () => (
+          <Solid.Show when={componentKey()} keyed>
+            {(_key) => out()}
+          </Solid.Show>
+        )
 
-  const route = () => router.routesById[matchState()!.routeId]!
+        return (
+          <Solid.Switch>
+            <Solid.Match when={currentMatch()._displayPending}>
+              {(_) => {
+                const [displayPendingResult] = Solid.createResource(
+                  () =>
+                    router.getMatch(currentMatch().id)?._nonReactive
+                      .displayPendingPromise,
+                )
 
-  const match = () => matchState()!.match
+                return <>{displayPendingResult()}</>
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch()._forcePending}>
+              {(_) => {
+                const [minPendingResult] = Solid.createResource(
+                  () =>
+                    router.getMatch(currentMatch().id)?._nonReactive
+                      .minPendingPromise,
+                )
 
-  const componentKey = () => matchState()!.key ?? matchState()!.match.id
+                return <>{minPendingResult()}</>
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'pending'}>
+              {(_) => {
+                const pendingMinMs =
+                  route().options.pendingMinMs ??
+                  router.options.defaultPendingMinMs
+
+                if (pendingMinMs) {
+                  const routerMatch = router.getMatch(currentMatch().id)
+                  if (
+                    routerMatch &&
+                    !routerMatch._nonReactive.minPendingPromise
+                  ) {
+                    // Create a promise that will resolve after the minPendingMs
+                    if (!(isServer ?? router.isServer)) {
+                      const minPendingPromise = createControlledPromise<void>()
+
+                      routerMatch._nonReactive.minPendingPromise =
+                        minPendingPromise
+
+                      setTimeout(() => {
+                        minPendingPromise.resolve()
+                        // We've handled the minPendingPromise, so we can delete it
+                        routerMatch._nonReactive.minPendingPromise = undefined
+                      }, pendingMinMs)
+                    }
+                  }
+                }
+
+                const [loaderResult] = Solid.createResource(async () => {
+                  await new Promise((r) => setTimeout(r, 0))
+                  return router.getMatch(currentMatch().id)?._nonReactive
+                    .loadPromise
+                })
+
+                const FallbackComponent =
+                  route().options.pendingComponent ??
+                  router.options.defaultPendingComponent
 
-  const out = () => {
-    const Comp = route().options.component ?? router.options.defaultComponent
-    if (Comp) {
-      return <Comp />
-    }
-    return <Outlet />
-  }
+                return (
+                  <>
+                    {FallbackComponent && pendingMinMs > 0 ? (
+                      <Dynamic component={FallbackComponent} />
+                    ) : null}
+                    {loaderResult()}
+                  </>
+                )
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'notFound'}>
+              {(_) => {
+                invariant(
+                  isNotFound(currentMatch().error),
+                  'Expected a notFound error',
+                )
 
-  const keyedOut = () => (
-    <Solid.Show when={componentKey()} keyed>
-      {(_key) => out()}
-    </Solid.Show>
-  )
+                // Use Show with keyed to ensure re-render when routeId changes
+                return (
+                  <Solid.Show when={currentMatchState().routeId} keyed>
+                    {(_routeId) =>
+                      renderRouteNotFound(router, route(), currentMatch().error)
+                    }
+                  </Solid.Show>
+                )
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'redirected'}>
+              {(_) => {
+                invariant(
+                  isRedirect(currentMatch().error),
+                  'Expected a redirect error',
+                )
 
-  return (
-    <Solid.Switch>
-      <Solid.Match when={match()._displayPending}>
-        {(_) => {
-          const [displayPendingResult] = Solid.createResource(
-            () =>
-              router.getMatch(match().id)?._nonReactive.displayPendingPromise,
-          )
-
-          return <>{displayPendingResult()}</>
-        }}
-      </Solid.Match>
-      <Solid.Match when={match()._forcePending}>
-        {(_) => {
-          const [minPendingResult] = Solid.createResource(
-            () => router.getMatch(match().id)?._nonReactive.minPendingPromise,
-          )
-
-          return <>{minPendingResult()}</>
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'pending'}>
-        {(_) => {
-          const pendingMinMs =
-            route().options.pendingMinMs ?? router.options.defaultPendingMinMs
-
-          if (pendingMinMs) {
-            const routerMatch = router.getMatch(match().id)
-            if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
-              // Create a promise that will resolve after the minPendingMs
-              if (!(isServer ?? router.isServer)) {
-                const minPendingPromise = createControlledPromise<void>()
-
-                routerMatch._nonReactive.minPendingPromise = minPendingPromise
-
-                setTimeout(() => {
-                  minPendingPromise.resolve()
-                  // We've handled the minPendingPromise, so we can delete it
-                  routerMatch._nonReactive.minPendingPromise = undefined
-                }, pendingMinMs)
-              }
-            }
-          }
+                const [loaderResult] = Solid.createResource(async () => {
+                  await new Promise((r) => setTimeout(r, 0))
+                  return router.getMatch(currentMatch().id)?._nonReactive
+                    .loadPromise
+                })
 
-          const [loaderResult] = Solid.createResource(async () => {
-            await new Promise((r) => setTimeout(r, 0))
-            return router.getMatch(match().id)?._nonReactive.loadPromise
-          })
-
-          const FallbackComponent =
-            route().options.pendingComponent ??
-            router.options.defaultPendingComponent
-
-          return (
-            <>
-              {FallbackComponent && pendingMinMs > 0 ? (
-                <Dynamic component={FallbackComponent} />
-              ) : null}
-              {loaderResult()}
-            </>
-          )
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'notFound'}>
-        {(_) => {
-          invariant(isNotFound(match().error), 'Expected a notFound error')
-
-          // Use Show with keyed to ensure re-render when routeId changes
-          return (
-            <Solid.Show when={matchState()!.routeId} keyed>
-              {(_routeId) =>
-                renderRouteNotFound(router, route(), match().error)
-              }
-            </Solid.Show>
-          )
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'redirected'}>
-        {(_) => {
-          invariant(isRedirect(match().error), 'Expected a redirect error')
-
-          const [loaderResult] = Solid.createResource(async () => {
-            await new Promise((r) => setTimeout(r, 0))
-            return router.getMatch(match().id)?._nonReactive.loadPromise
-          })
-
-          return <>{loaderResult()}</>
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'error'}>
-        {(_) => {
-          throw match().error
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'success'}>
-        {keyedOut()}
-      </Solid.Match>
-    </Solid.Switch>
+                return <>{loaderResult()}</>
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'error'}>
+              {(_) => {
+                if (isServer ?? router.isServer) {
+                  const RouteErrorComponent =
+                    (route().options.errorComponent ??
+                      router.options.defaultErrorComponent) ||
+                    ErrorComponent
+
+                  return (
+                    <RouteErrorComponent
+                      error={currentMatch().error}
+                      info={{
+                        componentStack: '',
+                      }}
+                    />
+                  )
+                }
+
+                throw currentMatch().error
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'success'}>
+              {keyedOut()}
+            </Solid.Match>
+          </Solid.Switch>
+        )
+      }}
+    </Solid.Show>
   )
 }
 
 export const Outlet = () => {
   const router = useRouter()
-  const matchId = Solid.useContext(matchContext)
-  const routeId = useRouterState({
-    select: (s) => s.matches.find((d) => d.id === matchId())?.routeId as string,
-  })
-
-  const route = () => router.routesById[routeId()]!
-
-  const parentGlobalNotFound = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const parentMatch = matches.find((d) => d.id === matchId())
-
-      // During navigation transitions, parent match can be temporarily removed
-      // Return false to avoid errors - the component will handle this gracefully
-      if (!parentMatch) {
-        return false
-      }
+  const nearestParentMatch = Solid.useContext(nearestMatchContext)
+  const parentMatch = nearestParentMatch.match
+  const routeId = nearestParentMatch.routeId
+  const route = Solid.createMemo(() =>
+    routeId() ? router.routesById[routeId()!] : undefined,
+  )
 
-      return parentMatch.globalNotFound
-    },
-  })
+  const parentGlobalNotFound = Solid.createMemo(
+    () => parentMatch()?.globalNotFound ?? false,
+  )
 
-  const childMatchId = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const index = matches.findIndex((d) => d.id === matchId())
-      const v = matches[index + 1]?.id
-      return v
-    },
+  const childMatchId = Solid.createMemo(() => {
+    const currentRouteId = routeId()
+    return currentRouteId
+      ? router.stores.childMatchIdByRouteId.state[currentRouteId]
+      : undefined
   })
 
-  const childMatchStatus = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const index = matches.findIndex((d) => d.id === matchId())
-      return matches[index + 1]?.status
-    },
+  const childMatchStatus = Solid.createMemo(() => {
+    const id = childMatchId()
+    if (!id) return undefined
+    return router.stores.activeMatchStoresById.get(id)?.state.status
   })
 
   // Only show not-found if we're not in a redirected state
@@ -392,14 +438,15 @@ export const Outlet = () => {
     <Solid.Show
       when={!shouldShowNotFound() && childMatchId()}
       fallback={
-        <Solid.Show when={shouldShowNotFound()}>
-          {renderRouteNotFound(router, route(), undefined)}
+        <Solid.Show when={shouldShowNotFound() && route()}>
+          {(resolvedRoute) =>
+            renderRouteNotFound(router, resolvedRoute(), undefined)
+          }
         </Solid.Show>
       }
     >
-      {(matchIdAccessor) => {
-        // Use a memo to avoid stale accessor errors while keeping reactivity
-        const currentMatchId = Solid.createMemo(() => matchIdAccessor())
+      {(childMatchIdAccessor) => {
+        const currentMatchId = Solid.createMemo(() => childMatchIdAccessor())
 
         return (
           <Solid.Show