@tanstack/solid-router 1.166.6 → 2.0.0-alpha.1

package/src/Match.tsx

@@ -9,7 +9,7 @@ import {
   rootRouteId,
 } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
-import { Dynamic } from 'solid-js/web'
+import { Dynamic } from '@solidjs/web'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
@@ -20,6 +20,11 @@ import { renderRouteNotFound } from './renderRouteNotFound'
 import { ScrollRestoration } from './scroll-restoration'
 import type { AnyRoute, RootRouteOptions } from '@tanstack/router-core'
 
+const MatchContext = matchContext as unknown as Solid.Component<{
+  value: any
+  children?: any
+}>
+
 export const Match = (props: { matchId: string }) => {
   const router = useRouter()
   const matchState = useRouterState({
@@ -41,7 +46,7 @@ export const Match = (props: { matchId: string }) => {
   })
 
   // If match doesn't exist yet, return null (component is being unmounted or not ready)
-  if (!matchState()) return null
+  if (!Solid.untrack(matchState)) return null
 
   const route: () => AnyRoute = () => router.routesById[matchState()!.routeId]
 
@@ -61,10 +66,12 @@ export const Match = (props: { matchId: string }) => {
         router.options.notFoundRoute?.options.component)
       : route().options.notFoundComponent
 
-  const resolvedNoSsr =
-    matchState()!.ssr === false || matchState()!.ssr === 'data-only'
+  const resolvedNoSsr = Solid.createMemo(
+    () => matchState()!.ssr === false || matchState()!.ssr === 'data-only',
+  )
 
-  const ResolvedSuspenseBoundary = () => Solid.Suspense
+  const ResolvedSuspenseBoundary = () =>
+    resolvedNoSsr() ? SafeFragment : Solid.Loading
 
   const ResolvedCatchBoundary = () =>
     routeErrorComponent() ? CatchBoundary : SafeFragment
@@ -83,18 +90,20 @@ export const Match = (props: { matchId: string }) => {
     },
   })
 
-  const ShellComponent = route().isRoot
-    ? ((route().options as RootRouteOptions).shellComponent ?? SafeFragment)
-    : SafeFragment
+  const ShellComponent = Solid.createMemo(() =>
+    route().isRoot
+      ? ((route().options as RootRouteOptions).shellComponent ?? SafeFragment)
+      : SafeFragment,
+  )
 
   return (
-    <ShellComponent>
-      <matchContext.Provider value={() => props.matchId}>
+    <Dynamic component={ShellComponent()}>
+      <MatchContext 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 : (
+            (isServer ?? router.isServer) || resolvedNoSsr() ? undefined : (
               <Dynamic component={resolvePendingComponent()} />
             )
           }
@@ -106,7 +115,10 @@ export const Match = (props: { matchId: string }) => {
             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}`)
+              warning(
+                false,
+                `Error in route match: ${Solid.untrack(matchState)!.routeId}`,
+              )
               routeOnCatch()?.(error)
             }}
           >
@@ -128,7 +140,7 @@ export const Match = (props: { matchId: string }) => {
               }}
             >
               <Solid.Switch>
-                <Solid.Match when={resolvedNoSsr}>
+                <Solid.Match when={resolvedNoSsr()}>
                   <Solid.Show
                     when={!(isServer ?? router.isServer)}
                     fallback={<Dynamic component={resolvePendingComponent()} />}
@@ -136,14 +148,14 @@ export const Match = (props: { matchId: string }) => {
                     <MatchInner matchId={props.matchId} />
                   </Solid.Show>
                 </Solid.Match>
-                <Solid.Match when={!resolvedNoSsr}>
+                <Solid.Match when={!resolvedNoSsr()}>
                   <MatchInner matchId={props.matchId} />
                 </Solid.Match>
               </Solid.Switch>
             </Dynamic>
           </Dynamic>
         </Dynamic>
-      </matchContext.Provider>
+      </MatchContext>
 
       {parentRouteId() === rootRouteId ? (
         <>
@@ -151,7 +163,7 @@ export const Match = (props: { matchId: string }) => {
           <ScrollRestoration />
         </>
       ) : null}
-    </ShellComponent>
+    </Dynamic>
   )
 }
 
@@ -162,6 +174,14 @@ export const Match = (props: { matchId: string }) => {
 // allows us to fire onRendered events even after a hydration mismatch
 // error that occurred above the root layout (like bad head/link tags,
 // which is common).
+//
+// In Solid, createEffect(source, fn) fires on initial mount as well as on
+// reactive changes. OnRendered can also remount when the first child route
+// changes (e.g. navigating from / to /posts). We deduplicate by tracking
+// the last emitted resolvedLocation key per router so each unique resolved
+// location only triggers one onRendered event regardless of remounts.
+const lastOnRenderedKey = new WeakMap<object, string>()
+
 function OnRendered() {
   const router = useRouter()
 
@@ -171,12 +191,16 @@ function OnRendered() {
     },
   })
   Solid.createEffect(
-    Solid.on([location], () => {
+    () => [location()] as const,
+    ([location]) => {
+      if (!location) return
+      if (lastOnRenderedKey.get(router) === location) return
+      lastOnRenderedKey.set(router, location)
       router.emit({
         type: 'onRendered',
         ...getLocationChangeInfo(router.state),
       })
-    }),
+    },
   )
   return null
 }
@@ -220,7 +244,7 @@ export const MatchInner = (props: { matchId: string }): any => {
     },
   })
 
-  if (!matchState()) return null
+  if (!Solid.untrack(matchState)) return null
 
   const route = () => router.routesById[matchState()!.routeId]!
 
@@ -229,7 +253,9 @@ export const MatchInner = (props: { matchId: string }): any => {
   const componentKey = () => matchState()!.key ?? matchState()!.match.id
 
   const out = () => {
-    const Comp = route().options.component ?? router.options.defaultComponent
+    const currentRoute = Solid.untrack(route)
+    const Comp =
+      currentRoute.options.component ?? router.options.defaultComponent
     if (Comp) {
       return <Comp />
     }
@@ -246,9 +272,9 @@ export const MatchInner = (props: { matchId: string }): any => {
     <Solid.Switch>
       <Solid.Match when={match()._displayPending}>
         {(_) => {
-          const [displayPendingResult] = Solid.createResource(
-            () =>
-              router.getMatch(match().id)?._nonReactive.displayPendingPromise,
+          const matchId = Solid.untrack(() => match().id)
+          const displayPendingResult = Solid.createMemo(
+            () => router.getMatch(matchId)?._nonReactive.displayPendingPromise,
           )
 
           return <>{displayPendingResult()}</>
@@ -256,8 +282,9 @@ export const MatchInner = (props: { matchId: string }): any => {
       </Solid.Match>
       <Solid.Match when={match()._forcePending}>
         {(_) => {
-          const [minPendingResult] = Solid.createResource(
-            () => router.getMatch(match().id)?._nonReactive.minPendingPromise,
+          const matchId = Solid.untrack(() => match().id)
+          const minPendingResult = Solid.createMemo(
+            () => router.getMatch(matchId)?._nonReactive.minPendingPromise,
           )
 
           return <>{minPendingResult()}</>
@@ -265,11 +292,14 @@ export const MatchInner = (props: { matchId: string }): any => {
       </Solid.Match>
       <Solid.Match when={match().status === 'pending'}>
         {(_) => {
+          const currentMatch = Solid.untrack(match)
+          const currentRoute = Solid.untrack(route)
           const pendingMinMs =
-            route().options.pendingMinMs ?? router.options.defaultPendingMinMs
+            currentRoute.options.pendingMinMs ??
+            router.options.defaultPendingMinMs
 
           if (pendingMinMs) {
-            const routerMatch = router.getMatch(match().id)
+            const routerMatch = router.getMatch(currentMatch.id)
             if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
               // Create a promise that will resolve after the minPendingMs
               if (!(isServer ?? router.isServer)) {
@@ -286,13 +316,13 @@ export const MatchInner = (props: { matchId: string }): any => {
             }
           }
 
-          const [loaderResult] = Solid.createResource(async () => {
+          const loaderResult = Solid.createMemo(async () => {
             await new Promise((r) => setTimeout(r, 0))
-            return router.getMatch(match().id)?._nonReactive.loadPromise
+            return router.getMatch(currentMatch.id)?._nonReactive.loadPromise
           })
 
           const FallbackComponent =
-            route().options.pendingComponent ??
+            currentRoute.options.pendingComponent ??
             router.options.defaultPendingComponent
 
           return (
@@ -307,13 +337,16 @@ export const MatchInner = (props: { matchId: string }): any => {
       </Solid.Match>
       <Solid.Match when={match().status === 'notFound'}>
         {(_) => {
-          invariant(isNotFound(match().error), 'Expected a notFound error')
+          const currentMatch = Solid.untrack(match)
+          const currentRoute = Solid.untrack(route)
+          const currentRouteId = Solid.untrack(() => matchState()!.routeId)
+          invariant(isNotFound(currentMatch.error), 'Expected a notFound error')
 
           // Use Show with keyed to ensure re-render when routeId changes
           return (
-            <Solid.Show when={matchState()!.routeId} keyed>
+            <Solid.Show when={currentRouteId} keyed>
               {(_routeId) =>
-                renderRouteNotFound(router, route(), match().error)
+                renderRouteNotFound(router, currentRoute, currentMatch.error)
               }
             </Solid.Show>
           )
@@ -321,11 +354,15 @@ export const MatchInner = (props: { matchId: string }): any => {
       </Solid.Match>
       <Solid.Match when={match().status === 'redirected'}>
         {(_) => {
-          invariant(isRedirect(match().error), 'Expected a redirect error')
+          const matchId = Solid.untrack(() => match().id)
+          invariant(
+            isRedirect(Solid.untrack(match).error),
+            'Expected a redirect error',
+          )
 
-          const [loaderResult] = Solid.createResource(async () => {
+          const loaderResult = Solid.createMemo(async () => {
             await new Promise((r) => setTimeout(r, 0))
-            return router.getMatch(match().id)?._nonReactive.loadPromise
+            return router.getMatch(matchId)?._nonReactive.loadPromise
           })
 
           return <>{loaderResult()}</>
@@ -333,7 +370,24 @@ export const MatchInner = (props: { matchId: string }): any => {
       </Solid.Match>
       <Solid.Match when={match().status === 'error'}>
         {(_) => {
-          throw match().error
+          if (isServer ?? router.isServer) {
+            const currentMatch = Solid.untrack(match)
+            const RouteErrorComponent =
+              (Solid.untrack(route).options.errorComponent ??
+                router.options.defaultErrorComponent) ||
+              ErrorComponent
+
+            return (
+              <RouteErrorComponent
+                error={currentMatch.error}
+                info={{
+                  componentStack: '',
+                }}
+              />
+            )
+          }
+
+          throw Solid.untrack(match).error
         }}
       </Solid.Match>
       <Solid.Match when={match().status === 'success'}>
@@ -376,6 +430,14 @@ export const Outlet = () => {
     },
   })
 
+  const childRouteId = useRouterState({
+    select: (s) => {
+      const matches = s.matches
+      const index = matches.findIndex((d) => d.id === matchId())
+      return matches[index + 1]?.routeId
+    },
+  })
+
   const childMatchStatus = useRouterState({
     select: (s) => {
       const matches = s.matches
@@ -406,13 +468,19 @@ export const Outlet = () => {
             when={routeId() === rootRouteId}
             fallback={<Match matchId={currentMatchId()} />}
           >
-            <Solid.Suspense
-              fallback={
-                <Dynamic component={router.options.defaultPendingComponent} />
-              }
-            >
-              <Match matchId={currentMatchId()} />
-            </Solid.Suspense>
+            <Solid.Show when={childRouteId()} keyed>
+              {(_routeId) => (
+                <Solid.Loading
+                  fallback={
+                    <Dynamic
+                      component={router.options.defaultPendingComponent}
+                    />
+                  }
+                >
+                  <Match matchId={currentMatchId()} />
+                </Solid.Loading>
+              )}
+            </Solid.Show>
           </Solid.Show>
         )
       }}

package/src/Matches.tsx

@@ -28,6 +28,11 @@ import type {
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
+const MatchContext = matchContext as unknown as Solid.Component<{
+  value: any
+  children: any
+}>
+
 declare module '@tanstack/router-core' {
   export interface RouteMatchExtensions {
     meta?: Array<Solid.JSX.IntrinsicElements['meta'] | undefined>
@@ -41,11 +46,15 @@ declare module '@tanstack/router-core' {
 export function Matches() {
   const router = useRouter()
 
+  // When disableGlobalCatchBoundary is true, we must NOT wrap with Solid.Loading
+  // because Solid.Loading transforms STATUS_ERROR into STATUS_PENDING, which
+  // prevents errors from propagating to an external Errored boundary.
   const ResolvedSuspense =
+    router.options.disableGlobalCatchBoundary ||
     (isServer ?? router.isServer) ||
     (typeof document !== 'undefined' && router.ssr)
       ? SafeFragment
-      : Solid.Suspense
+      : Solid.Loading
 
   const rootRoute: () => AnyRoute = () => router.routesById[rootRouteId]
   const PendingComponent =
@@ -78,39 +87,39 @@ function MatchesInner() {
     select: (s) => s.loadedAt,
   })
 
-  const matchComponent = () => {
-    return (
-      <Solid.Show when={matchId()}>
-        <Match matchId={matchId()!} />
-      </Solid.Show>
-    )
+  const matchContent = () => (
+    <Solid.Show when={matchId()}>
+      <Match matchId={matchId()!} />
+    </Solid.Show>
+  )
+
+  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 (
-    <matchContext.Provider value={matchId}>
-      {router.options.disableGlobalCatchBoundary ? (
-        matchComponent()
-      ) : (
-        <CatchBoundary
-          getResetKey={() => resetKey()}
-          errorComponent={ErrorComponent}
-          onCatch={
-            process.env.NODE_ENV !== 'production'
-              ? (error) => {
-                  warning(
-                    false,
-                    `The following error wasn't caught by any route! At the very leas
+    <MatchContext value={matchId}>
+      <CatchBoundary
+        getResetKey={() => resetKey()}
+        errorComponent={ErrorComponent}
+        onCatch={
+          process.env.NODE_ENV !== 'production'
+            ? (error) => {
+                warning(
+                  false,
+                  `The following error wasn't caught by any route! At the very leas
     t, consider setting an 'errorComponent' in your RootRoute!`,
-                  )
-                  warning(false, error.message || error.toString())
-                }
-              : undefined
-          }
-        >
-          {matchComponent()}
-        </CatchBoundary>
-      )}
-    </matchContext.Provider>
+                )
+                warning(false, error.message || error.toString())
+              }
+            : undefined
+        }
+      >
+        {matchContent()}
+      </CatchBoundary>
+    </MatchContext>
   )
 }
 

package/src/RouterProvider.tsx

@@ -8,6 +8,11 @@ import type {
 } from '@tanstack/router-core'
 import type * as Solid from 'solid-js'
 
+const RouterContext = routerContext as unknown as Solid.Component<{
+  value: any
+  children: any
+}>
+
 export function RouterContextProvider<
   TRouter extends AnyRouter = RegisteredRouter,
   TDehydrated extends Record<string, any> = Record<string, any>,
@@ -26,15 +31,13 @@ export function RouterContextProvider<
       ...router.options.context,
       ...rest.context,
     },
-  })
+  } as any)
 
   const OptionalWrapper = router.options.Wrap || SafeFragment
 
   return (
     <OptionalWrapper>
-      <routerContext.Provider value={router as AnyRouter}>
-        {children()}
-      </routerContext.Provider>
+      <RouterContext value={router as AnyRouter}>{children()}</RouterContext>
     </OptionalWrapper>
   )
 }

package/src/Scripts.tsx

@@ -1,3 +1,4 @@
+import { NoHydration } from '@solidjs/web'
 import { Asset } from './Asset'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
@@ -67,10 +68,10 @@ export const Scripts = () => {
   }
 
   return (
-    <>
-      {allScripts.map((asset, i) => (
+    <NoHydration>
+      {allScripts.map((asset, _i) => (
         <Asset {...asset} />
       ))}
-    </>
+    </NoHydration>
   )
 }

package/src/Transitioner.tsx

@@ -4,7 +4,6 @@ import {
   handleHashScroll,
   trimPathRight,
 } from '@tanstack/router-core'
-import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
 import { usePrevious } from './utils'
@@ -16,11 +15,7 @@ export function Transitioner() {
     select: ({ isLoading }) => isLoading,
   })
 
-  if (isServer ?? router.isServer) {
-    return null
-  }
-
-  const [isSolidTransitioning, startSolidTransition] = Solid.useTransition()
+  const [isSolidTransitioning] = [() => false]
 
   // Track pending state changes
   const hasPendingMatches = useRouterState({
@@ -37,16 +32,20 @@ export function Transitioner() {
   const previousIsPagePending = usePrevious(isPagePending)
 
   router.startTransition = (fn: () => void | Promise<void>) => {
-    Solid.startTransition(() => {
-      startSolidTransition(fn)
-    })
+    Solid.runWithOwner(null, fn)
   }
 
   // Subscribe to location changes
   // and try to load the new location
-  Solid.onMount(() => {
+  Solid.onSettled(() => {
     const unsub = router.history.subscribe(router.load)
 
+    // Refresh latestLocation from the current browser URL before comparing.
+    // The URL may have been changed synchronously (e.g. via replaceState) after
+    // render() but before this effect ran, so we must not use the stale
+    // render-time location here.
+    router.updateLatestLocation()
+
     const nextLocation = router.buildLocation({
       to: router.latestLocation.pathname,
       search: true,
@@ -72,7 +71,7 @@ export function Transitioner() {
   })
 
   // Try to load the initial location
-  Solid.createRenderEffect(() => {
+  Solid.createTrackedEffect(() => {
     Solid.untrack(() => {
       if (
         // if we are hydrating from SSR, loading is triggered in ssr-client
@@ -93,58 +92,52 @@ export function Transitioner() {
     })
   })
 
-  Solid.createRenderEffect(
-    Solid.on(
-      [previousIsLoading, isLoading],
-      ([previousIsLoading, isLoading]) => {
-        if (previousIsLoading.previous && !isLoading) {
-          router.emit({
-            type: 'onLoad',
-            ...getLocationChangeInfo(router.state),
-          })
-        }
-      },
-    ),
+  Solid.createEffect(
+    () => [previousIsLoading(), isLoading()] as const,
+    ([previousIsLoading, isLoading]) => {
+      if (previousIsLoading.previous && !isLoading) {
+        router.emit({
+          type: 'onLoad',
+          ...getLocationChangeInfo(router.state),
+        })
+      }
+    },
   )
 
-  Solid.createComputed(
-    Solid.on(
-      [isPagePending, previousIsPagePending],
-      ([isPagePending, previousIsPagePending]) => {
-        // emit onBeforeRouteMount
-        if (previousIsPagePending.previous && !isPagePending) {
-          router.emit({
-            type: 'onBeforeRouteMount',
-            ...getLocationChangeInfo(router.state),
-          })
-        }
-      },
-    ),
+  Solid.createEffect(
+    () => [isPagePending(), previousIsPagePending()] as const,
+    ([isPagePending, previousIsPagePending]) => {
+      // emit onBeforeRouteMount
+      if (previousIsPagePending.previous && !isPagePending) {
+        router.emit({
+          type: 'onBeforeRouteMount',
+          ...getLocationChangeInfo(router.state),
+        })
+      }
+    },
   )
 
-  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.createEffect(
+    () => [isAnyPending(), previousIsAnyPending()] as const,
+    ([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)
         }
-      },
-    ),
+      }
+    },
   )
 
   return null

package/src/awaited.tsx

@@ -24,24 +24,23 @@ export function useAwaited<T>({
   return [promise[TSR_DEFERRED_PROMISE].data, promise]
 }
 
+function InnerAwait<T>(props: {
+  promise: Promise<T>
+  children: (res: T) => SolidNode
+}) {
+  const [data] = useAwaited({ promise: props.promise })
+  return props.children(data) as any
+}
+
 export function Await<T>(
   props: AwaitOptions<T> & {
     fallback?: SolidNode
     children: (result: T) => SolidNode
   },
 ) {
-  const [resource] = Solid.createResource(
-    () => defer(props.promise),
-    // Simple passthrough - just return the promise for Solid to await
-    (p) => p,
-    {
-      deferStream: true,
-    },
-  )
-
   return (
-    <Solid.Show fallback={props.fallback} when={resource()}>
-      {(data) => props.children(data())}
-    </Solid.Show>
+    <Solid.Loading fallback={props.fallback as any}>
+      <InnerAwait promise={props.promise}>{props.children}</InnerAwait>
+    </Solid.Loading>
   )
 }