@tanstack/solid-router 1.167.4 → 1.168.0

package/src/Matches.tsx

@@ -1,12 +1,11 @@
 import * as Solid from 'solid-js'
 import warning from 'tiny-warning'
-import { rootRouteId } from '@tanstack/router-core'
+import { replaceEqualDeep, rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import { Transitioner } from './Transitioner'
-import { matchContext } from './matchContext'
+import { nearestMatchContext } from './matchContext'
 import { SafeFragment } from './SafeFragment'
 import { Match } from './Match'
 import type {
@@ -24,7 +23,6 @@ import type {
   ResolveRelativePath,
   ResolveRoute,
   RouteByPath,
-  RouterState,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
@@ -68,15 +66,23 @@ export function Matches() {
 
 function MatchesInner() {
   const router = useRouter()
-  const matchId = useRouterState({
-    select: (s) => {
-      return s.matches[0]?.id
-    },
-  })
-
-  const resetKey = useRouterState({
-    select: (s) => s.loadedAt,
-  })
+  const matchId = () => router.stores.firstMatchId.state
+  const routeId = () => (matchId() ? rootRouteId : undefined)
+  const match = () =>
+    routeId()
+      ? router.stores.getMatchStoreByRouteId(rootRouteId).state
+      : undefined
+  const hasPendingMatch = () =>
+    routeId()
+      ? Boolean(router.stores.pendingRouteIds.state[rootRouteId])
+      : false
+  const resetKey = () => router.stores.loadedAt.state
+  const nearestMatch = {
+    matchId,
+    routeId,
+    match,
+    hasPending: hasPendingMatch,
+  }
 
   const matchComponent = () => {
     return (
@@ -87,7 +93,7 @@ function MatchesInner() {
   }
 
   return (
-    <matchContext.Provider value={matchId}>
+    <nearestMatchContext.Provider value={nearestMatch}>
       {router.options.disableGlobalCatchBoundary ? (
         matchComponent()
       ) : (
@@ -99,8 +105,7 @@ function MatchesInner() {
               ? (error) => {
                   warning(
                     false,
-                    `The following error wasn't caught by any route! At the very leas
-    t, consider setting an 'errorComponent' in your RootRoute!`,
+                    `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
                   )
                   warning(false, error.message || error.toString())
                 }
@@ -110,7 +115,7 @@ function MatchesInner() {
           {matchComponent()}
         </CatchBoundary>
       )}
-    </matchContext.Provider>
+    </nearestMatchContext.Provider>
   )
 }
 
@@ -129,10 +134,6 @@ export type UseMatchRouteOptions<
 export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
   const router = useRouter()
 
-  const status = useRouterState({
-    select: (s) => s.status,
-  })
-
   return <
     const TFrom extends string = string,
     const TTo extends string | undefined = undefined,
@@ -143,10 +144,10 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
   ): Solid.Accessor<
     false | Expand<ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']>
   > => {
-    const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
+    return Solid.createMemo(() => {
+      const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
 
-    const matchRoute = Solid.createMemo(() => {
-      status()
+      router.stores.matchRouteReactivity.state
       return router.matchRoute(rest as any, {
         pending,
         caseSensitive,
@@ -154,8 +155,6 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
         includeSearch,
       })
     })
-
-    return matchRoute
   }
 }
 
@@ -184,24 +183,21 @@ export function MatchRoute<
   const TMaskFrom extends string = TFrom,
   const TMaskTo extends string = '',
 >(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {
-  const status = useRouterState({
-    select: (s) => s.status,
-  })
+  const matchRoute = useMatchRoute()
+  const params = matchRoute(props as any)
 
-  return (
-    <Solid.Show when={status()} keyed>
-      {(_) => {
-        const matchRoute = useMatchRoute()
-        const params = matchRoute(props as any)() as boolean
-        const child = props.children
-        if (typeof child === 'function') {
-          return (child as any)(params)
-        }
+  const renderedChild = Solid.createMemo(() => {
+    const matchedParams = params()
+    const child = props.children
 
-        return params ? child : null
-      }}
-    </Solid.Show>
-  )
+    if (typeof child === 'function') {
+      return (child as any)(matchedParams)
+    }
+
+    return matchedParams ? child : null
+  })
+
+  return <>{renderedChild()}</>
 }
 
 export interface UseMatchesBaseOptions<TRouter extends AnyRouter, TSelected> {
@@ -219,14 +215,15 @@ export function useMatches<
 >(
   opts?: UseMatchesBaseOptions<TRouter, TSelected>,
 ): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
-  return useRouterState({
-    select: (state: RouterState<TRouter['routeTree']>) => {
-      const matches = state.matches
-      return opts?.select
-        ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
-        : matches
-    },
-  } as any) as Solid.Accessor<UseMatchesResult<TRouter, TSelected>>
+  const router = useRouter<TRouter>()
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const matches = router.stores.activeMatchesSnapshot.state as Array<
+      MakeRouteMatchUnion<TRouter>
+    >
+    const res = opts?.select ? opts.select(matches) : matches
+    if (prev === undefined) return res
+    return replaceEqualDeep(prev, res) as any
+  }) as Solid.Accessor<UseMatchesResult<TRouter, TSelected>>
 }
 
 export function useParentMatches<
@@ -235,7 +232,7 @@ export function useParentMatches<
 >(
   opts?: UseMatchesBaseOptions<TRouter, TSelected>,
 ): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
-  const contextMatchId = Solid.useContext(matchContext)
+  const contextMatchId = Solid.useContext(nearestMatchContext).matchId
 
   return useMatches({
     select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
@@ -254,7 +251,7 @@ export function useChildMatches<
 >(
   opts?: UseMatchesBaseOptions<TRouter, TSelected>,
 ): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
-  const contextMatchId = Solid.useContext(matchContext)
+  const contextMatchId = Solid.useContext(nearestMatchContext).matchId
 
   return useMatches({
     select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {

package/src/Scripts.tsx

@@ -1,55 +1,54 @@
+import * as Solid from 'solid-js'
 import { Asset } from './Asset'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
 export const Scripts = () => {
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
-  const assetScripts = useRouterState({
-    select: (state) => {
-      const assetScripts: Array<RouterManagedTag> = []
-      const manifest = router.ssr?.manifest
+  const activeMatches = Solid.createMemo(
+    () => router.stores.activeMatchesSnapshot.state,
+  )
+  const assetScripts = Solid.createMemo(() => {
+    const assetScripts: Array<RouterManagedTag> = []
+    const manifest = router.ssr?.manifest
 
-      if (!manifest) {
-        return []
-      }
+    if (!manifest) {
+      return []
+    }
 
-      state.matches
-        .map((match) => router.looseRoutesById[match.routeId]!)
-        .forEach((route) =>
-          manifest.routes[route.id]?.assets
-            ?.filter((d) => d.tag === 'script')
-            .forEach((asset) => {
-              assetScripts.push({
-                tag: 'script',
-                attrs: { ...asset.attrs, nonce },
-                children: asset.children,
-              } as any)
-            }),
-        )
+    activeMatches()
+      .map((match) => router.looseRoutesById[match.routeId]!)
+      .forEach((route) =>
+        manifest.routes[route.id]?.assets
+          ?.filter((d) => d.tag === 'script')
+          .forEach((asset) => {
+            assetScripts.push({
+              tag: 'script',
+              attrs: { ...asset.attrs, nonce },
+              children: asset.children,
+            } as any)
+          }),
+      )
 
-      return assetScripts
-    },
+    return assetScripts
   })
 
-  const scripts = useRouterState({
-    select: (state) => ({
-      scripts: (
-        state.matches
-          .map((match) => match.scripts!)
-          .flat(1)
-          .filter(Boolean) as Array<RouterManagedTag>
-      ).map(({ children, ...script }) => ({
-        tag: 'script',
-        attrs: {
-          ...script,
-          nonce,
-        },
-        children,
-      })),
-    }),
-  })
+  const scripts = Solid.createMemo(() =>
+    (
+      activeMatches()
+        .map((match) => match.scripts!)
+        .flat(1)
+        .filter(Boolean) as Array<RouterManagedTag>
+    ).map(({ children, ...script }) => ({
+      tag: 'script',
+      attrs: {
+        ...script,
+        nonce,
+      },
+      children,
+    })),
+  )
 
   let serverBufferedScript: RouterManagedTag | undefined = undefined
 
@@ -58,7 +57,7 @@ export const Scripts = () => {
   }
 
   const allScripts = [
-    ...scripts().scripts,
+    ...scripts(),
     ...assetScripts(),
   ] as Array<RouterManagedTag>
 

package/src/Transitioner.tsx

@@ -6,15 +6,11 @@ import {
 } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
-import { usePrevious } from './utils'
 
 export function Transitioner() {
   const router = useRouter()
   let mountLoadForRouter = { router, mounted: false }
-  const isLoading = useRouterState({
-    select: ({ isLoading }) => isLoading,
-  })
+  const isLoading = Solid.createMemo(() => router.stores.isLoading.state)
 
   if (isServer ?? router.isServer) {
     return null
@@ -23,18 +19,17 @@ export function Transitioner() {
   const [isSolidTransitioning, startSolidTransition] = Solid.useTransition()
 
   // Track pending state changes
-  const hasPendingMatches = useRouterState({
-    select: (s) => s.matches.some((d) => d.status === 'pending'),
-  })
-
-  const previousIsLoading = usePrevious(isLoading)
+  const hasPendingMatches = Solid.createMemo(
+    () => router.stores.hasPendingMatches.state,
+  )
 
-  const isAnyPending = () =>
-    isLoading() || isSolidTransitioning() || hasPendingMatches()
-  const previousIsAnyPending = usePrevious(isAnyPending)
+  const isAnyPending = Solid.createMemo(
+    () => isLoading() || isSolidTransitioning() || hasPendingMatches(),
+  )
 
-  const isPagePending = () => isLoading() || hasPendingMatches()
-  const previousIsPagePending = usePrevious(isPagePending)
+  const isPagePending = Solid.createMemo(
+    () => isLoading() || hasPendingMatches(),
+  )
 
   router.startTransition = (fn: () => void | Promise<void>) => {
     Solid.startTransition(() => {
@@ -93,59 +88,65 @@ export function Transitioner() {
     })
   })
 
-  Solid.createRenderEffect(
-    Solid.on(
-      [previousIsLoading, isLoading],
-      ([previousIsLoading, isLoading]) => {
-        if (previousIsLoading.previous && !isLoading) {
-          router.emit({
-            type: 'onLoad',
-            ...getLocationChangeInfo(router.state),
-          })
-        }
-      },
-    ),
-  )
+  Solid.createRenderEffect((previousIsLoading = false) => {
+    const currentIsLoading = isLoading()
+
+    if (previousIsLoading && !currentIsLoading) {
+      router.emit({
+        type: 'onLoad',
+        ...getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        ),
+      })
+    }
 
-  Solid.createComputed(
-    Solid.on(
-      [isPagePending, previousIsPagePending],
-      ([isPagePending, previousIsPagePending]) => {
-        // emit onBeforeRouteMount
-        if (previousIsPagePending.previous && !isPagePending) {
-          router.emit({
-            type: 'onBeforeRouteMount',
-            ...getLocationChangeInfo(router.state),
-          })
-        }
-      },
-    ),
-  )
+    return currentIsLoading
+  })
 
-  Solid.createRenderEffect(
-    Solid.on(
-      [isAnyPending, previousIsAnyPending],
-      ([isAnyPending, previousIsAnyPending]) => {
-        if (previousIsAnyPending.previous && !isAnyPending) {
-          const changeInfo = getLocationChangeInfo(router.state)
-          router.emit({
-            type: 'onResolved',
-            ...changeInfo,
-          })
-
-          router.__store.setState((s) => ({
-            ...s,
-            status: 'idle',
-            resolvedLocation: s.location,
-          }))
-
-          if (changeInfo.hrefChanged) {
-            handleHashScroll(router)
-          }
-        }
-      },
-    ),
-  )
+  Solid.createComputed((previousIsPagePending = false) => {
+    const currentIsPagePending = isPagePending()
+
+    if (previousIsPagePending && !currentIsPagePending) {
+      router.emit({
+        type: 'onBeforeRouteMount',
+        ...getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        ),
+      })
+    }
+
+    return currentIsPagePending
+  })
+
+  Solid.createRenderEffect((previousIsAnyPending = false) => {
+    const currentIsAnyPending = isAnyPending()
+
+    if (previousIsAnyPending && !currentIsAnyPending) {
+      const changeInfo = getLocationChangeInfo(
+        router.stores.location.state,
+        router.stores.resolvedLocation.state,
+      )
+      router.emit({
+        type: 'onResolved',
+        ...changeInfo,
+      })
+
+      Solid.batch(() => {
+        router.stores.status.setState(() => 'idle')
+        router.stores.resolvedLocation.setState(
+          () => router.stores.location.state,
+        )
+      })
+
+      if (changeInfo.hrefChanged) {
+        handleHashScroll(router)
+      }
+    }
+
+    return currentIsAnyPending
+  })
 
   return null
 }

package/src/headContentUtils.tsx

@@ -1,7 +1,6 @@
 import * as Solid from 'solid-js'
 import { escapeHtml } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
 /**
@@ -11,11 +10,14 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 export const useTags = () => {
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
-  const routeMeta = useRouterState({
-    select: (state) => {
-      return state.matches.map((match) => match.meta!).filter(Boolean)
-    },
-  })
+  const activeMatches = Solid.createMemo(
+    () => router.stores.activeMatchesSnapshot.state,
+  )
+  const routeMeta = Solid.createMemo(() =>
+    activeMatches()
+      .map((match) => match.meta!)
+      .filter(Boolean),
+  )
 
   const meta: Solid.Accessor<Array<RouterManagedTag>> = Solid.createMemo(() => {
     const resultMeta: Array<RouterManagedTag> = []
@@ -89,98 +91,94 @@ export const useTags = () => {
     return resultMeta
   })
 
-  const links = useRouterState({
-    select: (state) => {
-      const constructed = state.matches
-        .map((match) => match.links!)
-        .filter(Boolean)
-        .flat(1)
-        .map((link) => ({
-          tag: 'link',
-          attrs: {
-            ...link,
-            nonce,
-          },
-        })) satisfies Array<RouterManagedTag>
-
-      const manifest = router.ssr?.manifest
-
-      const assets = state.matches
-        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
-        .filter(Boolean)
-        .flat(1)
-        .filter((asset) => asset.tag === 'link')
-        .map(
-          (asset) =>
-            ({
-              tag: 'link',
-              attrs: { ...asset.attrs, nonce },
-            }) satisfies RouterManagedTag,
-        )
-
-      return [...constructed, ...assets]
-    },
-  })
-
-  const preloadLinks = useRouterState({
-    select: (state) => {
-      const preloadLinks: Array<RouterManagedTag> = []
-
-      state.matches
-        .map((match) => router.looseRoutesById[match.routeId]!)
-        .forEach((route) =>
-          router.ssr?.manifest?.routes[route.id]?.preloads
-            ?.filter(Boolean)
-            .forEach((preload) => {
-              preloadLinks.push({
-                tag: 'link',
-                attrs: {
-                  rel: 'modulepreload',
-                  href: preload,
-                  nonce,
-                },
-              })
-            }),
-        )
-
-      return preloadLinks
-    },
-  })
-
-  const styles = useRouterState({
-    select: (state) =>
-      (
-        state.matches
-          .map((match) => match.styles!)
-          .flat(1)
-          .filter(Boolean) as Array<RouterManagedTag>
-      ).map(({ children, ...style }) => ({
-        tag: 'style',
+  const links = Solid.createMemo(() => {
+    const matches = activeMatches()
+    const constructed = matches
+      .map((match) => match.links!)
+      .filter(Boolean)
+      .flat(1)
+      .map((link) => ({
+        tag: 'link',
         attrs: {
-          ...style,
+          ...link,
           nonce,
         },
-        children,
-      })),
+      })) satisfies Array<RouterManagedTag>
+
+    const manifest = router.ssr?.manifest
+
+    const assets = matches
+      .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
+      .filter(Boolean)
+      .flat(1)
+      .filter((asset) => asset.tag === 'link')
+      .map(
+        (asset) =>
+          ({
+            tag: 'link',
+            attrs: { ...asset.attrs, nonce },
+          }) satisfies RouterManagedTag,
+      )
+
+    return [...constructed, ...assets]
   })
 
-  const headScripts = useRouterState({
-    select: (state) =>
-      (
-        state.matches
-          .map((match) => match.headScripts!)
-          .flat(1)
-          .filter(Boolean) as Array<RouterManagedTag>
-      ).map(({ children, ...script }) => ({
-        tag: 'script',
-        attrs: {
-          ...script,
-          nonce,
-        },
-        children,
-      })),
+  const preloadLinks = Solid.createMemo(() => {
+    const matches = activeMatches()
+    const preloadLinks: Array<RouterManagedTag> = []
+
+    matches
+      .map((match) => router.looseRoutesById[match.routeId]!)
+      .forEach((route) =>
+        router.ssr?.manifest?.routes[route.id]?.preloads
+          ?.filter(Boolean)
+          .forEach((preload) => {
+            preloadLinks.push({
+              tag: 'link',
+              attrs: {
+                rel: 'modulepreload',
+                href: preload,
+                nonce,
+              },
+            })
+          }),
+      )
+
+    return preloadLinks
   })
 
+  const styles = Solid.createMemo(() =>
+    (
+      activeMatches()
+        .map((match) => match.styles!)
+        .flat(1)
+        .filter(Boolean) as Array<RouterManagedTag>
+    ).map(({ children, ...style }) => ({
+      tag: 'style',
+      attrs: {
+        ...style,
+        nonce,
+      },
+      children,
+    })),
+  )
+
+  const headScripts = Solid.createMemo(() =>
+    (
+      activeMatches()
+        .map((match) => match.headScripts!)
+        .flat(1)
+        .filter(Boolean) as Array<RouterManagedTag>
+    ).map(({ children, ...script }) => ({
+      tag: 'script',
+      attrs: {
+        ...script,
+        nonce,
+      },
+      children,
+    })),
+  )
+
   return () =>
     uniqBy(
       [