@tanstack/solid-router 2.0.0-alpha.5 → 2.0.0-alpha.7

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,11 +23,10 @@ import type {
   ResolveRelativePath,
   ResolveRoute,
   RouteByPath,
-  RouterState,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
-const MatchContext = matchContext as unknown as Solid.Component<{
+const NearestMatchContext = nearestMatchContext as unknown as Solid.Component<{
   value: any
   children: any
 }>
@@ -77,15 +75,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 matchContent = () => (
     <Solid.Show when={matchId()}>
@@ -96,11 +102,15 @@ function MatchesInner() {
   if (router.options.disableGlobalCatchBoundary) {
     // When disableGlobalCatchBoundary is true, render without any internal
     // error boundary so errors bubble up freely to an external Errored boundary.
-    return <MatchContext value={matchId}>{matchContent()}</MatchContext>
+    return (
+      <NearestMatchContext value={nearestMatch}>
+        {matchContent()}
+      </NearestMatchContext>
+    )
   }
 
   return (
-    <MatchContext value={matchId}>
+    <NearestMatchContext value={nearestMatch}>
       <CatchBoundary
         getResetKey={() => resetKey()}
         errorComponent={ErrorComponent}
@@ -109,8 +119,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())
               }
@@ -119,7 +128,7 @@ function MatchesInner() {
       >
         {matchContent()}
       </CatchBoundary>
-    </MatchContext>
+    </NearestMatchContext>
   )
 }
 
@@ -138,10 +147,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,
@@ -152,10 +157,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,
@@ -163,8 +168,6 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
         includeSearch,
       })
     })
-
-    return matchRoute
   }
 }
 
@@ -193,24 +196,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> {
@@ -228,14 +228,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<
@@ -244,7 +245,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>>) => {
@@ -263,7 +264,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/RouterProvider.tsx

@@ -1,3 +1,4 @@
+import * as Solid from 'solid-js'
 import { routerContext } from './routerContext'
 import { SafeFragment } from './SafeFragment'
 import { Matches } from './Matches'
@@ -6,7 +7,6 @@ import type {
   RegisteredRouter,
   RouterOptions,
 } from '@tanstack/router-core'
-import type * as Solid from 'solid-js'
 
 const RouterContext = routerContext as unknown as Solid.Component<{
   value: any
@@ -23,15 +23,18 @@ export function RouterContextProvider<
 }: RouterProps<TRouter, TDehydrated> & {
   children: () => Solid.JSX.Element
 }) {
-  // Allow the router to update options on the router instance
-  router.update({
-    ...router.options,
-    ...rest,
-    context: {
-      ...router.options.context,
-      ...rest.context,
-    },
-  } as any)
+  if (Object.keys(rest).length > 0) {
+    Solid.runWithOwner(null, () => {
+      router.update({
+        ...router.options,
+        ...rest,
+        context: {
+          ...router.options.context,
+          ...rest.context,
+        },
+      } as any)
+    })
+  }
 
   const OptionalWrapper = router.options.Wrap || SafeFragment
 

package/src/Scripts.tsx

@@ -1,77 +1,78 @@
 import { NoHydration } from '@solidjs/web'
+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
+  const serverBufferedScript: RouterManagedTag | undefined = router.serverSsr
+    ? router.serverSsr.takeBufferedScripts()
+    : undefined
 
-  if (router.serverSsr) {
-    serverBufferedScript = router.serverSsr.takeBufferedScripts()
-  }
+  const allScripts = Solid.createMemo(() => {
+    const result = [...scripts(), ...assetScripts()] as Array<RouterManagedTag>
 
-  const allScripts = [
-    ...scripts().scripts,
-    ...assetScripts(),
-  ] as Array<RouterManagedTag>
+    if (serverBufferedScript) {
+      result.unshift(serverBufferedScript)
+    }
 
-  if (serverBufferedScript) {
-    allScripts.unshift(serverBufferedScript)
-  }
+    return result
+  })
 
   return (
     <NoHydration>
-      {allScripts.map((asset, _i) => (
-        <Asset {...asset} />
-      ))}
+      <Solid.For each={allScripts()}>
+        {(asset) => {
+          const a = Solid.untrack(asset)
+          return <Asset {...a} />
+        }}
+      </Solid.For>
     </NoHydration>
   )
 }

package/src/Transitioner.tsx

@@ -1,44 +1,62 @@
 import * as Solid from 'solid-js'
-import {
-  getLocationChangeInfo,
-  handleHashScroll,
-  trimPathRight,
-} from '@tanstack/router-core'
+import { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
-import { usePrevious } from './utils'
+import type { ParsedLocation } from '@tanstack/router-core'
+
+/**
+ * Inline version of handleHashScroll that accepts a pre-captured location
+ * to avoid reading router.stores.location.state inside an effect callback
+ * (which would trigger a Solid v2 reactive warning).
+ */
+function handleHashScrollWithLocation(_router: any, location: ParsedLocation) {
+  if (typeof document !== 'undefined' && (document as any).querySelector) {
+    const hashScrollIntoViewOptions =
+      location.state.__hashScrollIntoViewOptions ?? true
+
+    if (hashScrollIntoViewOptions && location.hash !== '') {
+      const el = document.getElementById(location.hash)
+      if (el) {
+        el.scrollIntoView(hashScrollIntoViewOptions)
+      }
+    }
+  }
+}
 
 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)
 
   const [isSolidTransitioning] = [() => false]
 
   // 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.runWithOwner(null, fn)
+    try {
+      Solid.flush()
+    } catch {
+      // flush() throws inside reactive contexts — Solid auto-flushes there
+    }
   }
 
   // Subscribe to location changes
   // and try to load the new location
   Solid.onSettled(() => {
-    const unsub = router.history.subscribe(router.load)
+    const unsub = router.history.subscribe(() => {
+      queueMicrotask(() => router.load())
+    })
 
     // Refresh latestLocation from the current browser URL before comparing.
     // The URL may have been changed synchronously (e.g. via replaceState) after
@@ -65,22 +83,27 @@ export function Transitioner() {
       router.commitLocation({ ...nextLocation, replace: true })
     }
 
-    Solid.onCleanup(() => {
+    return () => {
       unsub()
-    })
+    }
   })
 
   // Try to load the initial location
-  Solid.createTrackedEffect(() => {
-    Solid.untrack(() => {
-      if (
-        // if we are hydrating from SSR, loading is triggered in ssr-client
-        (typeof window !== 'undefined' && router.ssr) ||
-        (mountLoadForRouter.router === router && mountLoadForRouter.mounted)
-      ) {
-        return
-      }
-      mountLoadForRouter = { router, mounted: true }
+  // In Solid v2, signal updates inside onSettled cannot be flushed
+  // synchronously (flush() throws). router.load() sets signals via batch(),
+  // and the code that runs immediately after needs those values committed.
+  // By deferring to queueMicrotask, the load runs outside the reactive
+  // scheduling frame so flush() works correctly.
+  Solid.onSettled(() => {
+    if (
+      // if we are hydrating from SSR, loading is triggered in ssr-client
+      (typeof window !== 'undefined' && router.ssr) ||
+      (mountLoadForRouter.router === router && mountLoadForRouter.mounted)
+    ) {
+      return
+    }
+    mountLoadForRouter = { router, mounted: true }
+    queueMicrotask(() => {
       const tryLoad = async () => {
         try {
           await router.load()
@@ -91,50 +114,70 @@ export function Transitioner() {
       tryLoad()
     })
   })
-
-  Solid.createEffect(
-    () => [previousIsLoading(), isLoading()] as const,
-    ([previousIsLoading, isLoading]) => {
-      if (previousIsLoading.previous && !isLoading) {
+  Solid.createRenderEffect(
+    () =>
+      [
+        isLoading(),
+        isPagePending(),
+        isAnyPending(),
+        router.stores.location.state,
+        router.stores.resolvedLocation.state,
+      ] as const,
+    (
+      [
+        currentIsLoading,
+        currentIsPagePending,
+        currentIsAnyPending,
+        loc,
+        resolvedLoc,
+      ],
+      prev,
+    ) => {
+      // Guard: if location state isn't available yet, skip all event emissions
+      if (!loc) return
+
+      const previousIsLoading = prev?.[0]
+      const previousIsPagePending = prev?.[1]
+      const previousIsAnyPending = prev?.[2]
+
+      // onLoad: when the router finishes loading
+      if (previousIsLoading && !currentIsLoading) {
         router.emit({
           type: 'onLoad',
-          ...getLocationChangeInfo(router.state),
+          ...getLocationChangeInfo(loc, resolvedLoc),
         })
       }
-    },
-  )
 
-  Solid.createEffect(
-    () => [isPagePending(), previousIsPagePending()] as const,
-    ([isPagePending, previousIsPagePending]) => {
-      // emit onBeforeRouteMount
-      if (previousIsPagePending.previous && !isPagePending) {
+      // onBeforeRouteMount: must fire before onResolved
+      if (previousIsPagePending && !currentIsPagePending) {
         router.emit({
           type: 'onBeforeRouteMount',
-          ...getLocationChangeInfo(router.state),
+          ...getLocationChangeInfo(loc, resolvedLoc),
         })
       }
-    },
-  )
 
-  Solid.createEffect(
-    () => [isAnyPending(), previousIsAnyPending()] as const,
-    ([isAnyPending, previousIsAnyPending]) => {
-      if (previousIsAnyPending.previous && !isAnyPending) {
-        const changeInfo = getLocationChangeInfo(router.state)
+      // onResolved: fires after onBeforeRouteMount
+      if (previousIsAnyPending && !currentIsAnyPending) {
+        const changeInfo = getLocationChangeInfo(loc, resolvedLoc)
         router.emit({
           type: 'onResolved',
           ...changeInfo,
         })
 
-        router.__store.setState((s) => ({
-          ...s,
-          status: 'idle',
-          resolvedLocation: s.location,
-        }))
+        Solid.runWithOwner(null, () => {
+          router.batch(() => {
+            router.stores.status.setState(() => 'idle')
+            // Use `loc` from the source tuple to avoid reading
+            // router.stores.location.state inside the effect callback
+            router.stores.resolvedLocation.setState(() => loc)
+          })
+        })
 
         if (changeInfo.hrefChanged) {
-          handleHashScroll(router)
+          // Pass the already-captured location to avoid a reactive read
+          // inside the effect callback (handleHashScroll would otherwise
+          // read router.stores.location.state which triggers a warning)
+          handleHashScrollWithLocation(router, loc)
         }
       }
     },