@tanstack/solid-router 1.124.0 → 1.125.0

package/src/Match.tsx

@@ -22,18 +22,19 @@ import type { AnyRoute, RootRouteOptions } from '@tanstack/router-core'
 
 export const Match = (props: { matchId: string }) => {
   const router = useRouter()
-  const routeId = useRouterState({
+  const matchState = useRouterState({
     select: (s) => {
-      return s.matches.find((d) => d.id === props.matchId)?.routeId as string
+      const match = s.matches.find((d) => d.id === props.matchId)
+
+      invariant(
+        match,
+        `Could not find match for matchId "${props.matchId}". Please file an issue!`,
+      )
+      return pick(match, ['routeId', 'ssr', '_displayPending'])
     },
   })
 
-  invariant(
-    routeId,
-    `Could not find routeId for matchId "${props.matchId}". Please file an issue!`,
-  )
-
-  const route: () => AnyRoute = () => router.routesById[routeId()]
+  const route: () => AnyRoute = () => router.routesById[matchState().routeId]
 
   const PendingComponent = () =>
     route().options.pendingComponent ?? router.options.defaultPendingComponent
@@ -51,12 +52,18 @@ export const Match = (props: { matchId: string }) => {
         router.options.notFoundRoute?.options.component)
       : route().options.notFoundComponent
 
+  const resolvedNoSsr =
+    matchState().ssr === false || matchState().ssr === 'data-only'
+
   const ResolvedSuspenseBoundary = () =>
     // If we're on the root route, allow forcefully wrapping in suspense
-    (!route().isRoot || route().options.wrapInSuspense) &&
+    (!route().isRoot ||
+      route().options.wrapInSuspense ||
+      resolvedNoSsr ||
+      matchState()._displayPending) &&
     (route().options.wrapInSuspense ??
       PendingComponent() ??
-      (route().options.errorComponent as any)?.preload)
+      ((route().options.errorComponent as any)?.preload || resolvedNoSsr))
       ? Solid.Suspense
       : SafeFragment
 
@@ -106,7 +113,7 @@ export const Match = (props: { matchId: string }) => {
                 // route ID which doesn't match the current route, rethrow the error
                 if (
                   !routeNotFoundComponent() ||
-                  (error.routeId && error.routeId !== routeId) ||
+                  (error.routeId && error.routeId !== matchState().routeId) ||
                   (!error.routeId && !route().isRoot)
                 )
                   throw error
@@ -116,7 +123,19 @@ export const Match = (props: { matchId: string }) => {
                 )
               }}
             >
-              <MatchInner matchId={props.matchId} />
+              <Solid.Switch>
+                <Solid.Match when={resolvedNoSsr || router.isShell}>
+                  <Solid.Show
+                    when={!router.isServer}
+                    fallback={<Dynamic component={PendingComponent()} />}
+                  >
+                    <MatchInner matchId={props.matchId} />
+                  </Solid.Show>
+                </Solid.Match>
+                <Solid.Match when={!resolvedNoSsr}>
+                  <MatchInner matchId={props.matchId} />
+                </Solid.Match>
+              </Solid.Switch>
             </Dynamic>
           </Dynamic>
         </Dynamic>
@@ -161,8 +180,7 @@ function OnRendered() {
 export const MatchInner = (props: { matchId: string }): any => {
   const router = useRouter()
 
-  // { match, key, routeId } =
-  const matchState: Solid.Accessor<any> = useRouterState({
+  const matchState = useRouterState({
     select: (s) => {
       const matchIndex = s.matches.findIndex((d) => d.id === props.matchId)
       const match = s.matches[matchIndex]!
@@ -182,31 +200,19 @@ export const MatchInner = (props: { matchId: string }): any => {
       return {
         key,
         routeId,
-        match: pick(match, ['id', 'status', 'error']),
+        match: pick(match, [
+          'id',
+          'status',
+          'error',
+          '_forcePending',
+          '_displayPending',
+        ]),
       }
     },
   })
 
   const route = () => router.routesById[matchState().routeId]!
 
-  // function useChangedDiff(value: any) {
-  //   const ref = Solid.useRef(value)
-  //   const changed = ref.current !== value
-  //   if (changed) {
-  //     console.log(
-  //       'Changed:',
-  //       value,
-  //       Object.fromEntries(
-  //         Object.entries(value).filter(
-  //           ([key, val]) => val !== ref.current[key],
-  //         ),
-  //       ),
-  //     )
-  //   }
-  //   ref.current = value
-  // }
-
-  // useChangedDiff(match)
   const match = () => matchState().match
 
   const out = () => {
@@ -219,47 +225,16 @@ export const MatchInner = (props: { matchId: string }): any => {
 
   return (
     <Solid.Switch>
-      <Solid.Match when={match().status === 'notFound'}>
-        {(_) => {
-          invariant(isNotFound(match().error), 'Expected a notFound error')
-
-          return renderRouteNotFound(router, route(), match().error)
-        }}
-      </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)?.loadPromise
-          })
-
-          return <>{loaderResult()}</>
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'error'}>
+      <Solid.Match when={match()._displayPending}>
         {(_) => {
-          if (router.isServer) {
-            const RouteErrorComponent =
-              (route().options.errorComponent ??
-                router.options.defaultErrorComponent) ||
-              ErrorComponent
-
-            return (
-              <RouteErrorComponent
-                error={match().error}
-                info={{
-                  componentStack: '',
-                }}
-              />
-            )
-          }
+          const [displayPendingResult] = Solid.createResource(
+            () => router.getMatch(match().id)?.displayPendingPromise,
+          )
 
-          throw match().error
+          return <>{displayPendingResult()}</>
         }}
       </Solid.Match>
-      <Solid.Match when={match().status === 'pending'}>
+      <Solid.Match when={match().status === 'pending' || match()._forcePending}>
         {(_) => {
           const pendingMinMs =
             route().options.pendingMinMs ?? router.options.defaultPendingMinMs
@@ -296,6 +271,46 @@ export const MatchInner = (props: { matchId: string }): any => {
           return <>{loaderResult()}</>
         }}
       </Solid.Match>
+      <Solid.Match when={match().status === 'notFound'}>
+        {(_) => {
+          invariant(isNotFound(match().error), 'Expected a notFound error')
+
+          return renderRouteNotFound(router, route(), match().error)
+        }}
+      </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)?.loadPromise
+          })
+
+          return <>{loaderResult()}</>
+        }}
+      </Solid.Match>
+      <Solid.Match when={match().status === 'error'}>
+        {(_) => {
+          if (router.isServer) {
+            const RouteErrorComponent =
+              (route().options.errorComponent ??
+                router.options.defaultErrorComponent) ||
+              ErrorComponent
+
+            return (
+              <RouteErrorComponent
+                error={match().error}
+                info={{
+                  componentStack: '',
+                }}
+              />
+            )
+          }
+
+          throw match().error
+        }}
+      </Solid.Match>
       <Solid.Match when={match().status === 'success'}>{out()}</Solid.Match>
     </Solid.Switch>
   )
@@ -333,16 +348,6 @@ export const Outlet = () => {
 
   return (
     <Solid.Switch>
-      <Solid.Match when={router.isShell}>
-        <Solid.Suspense
-          fallback={
-            <Dynamic component={router.options.defaultPendingComponent} />
-          }
-        >
-          <ErrorComponent error={new Error('ShellBoundaryError')} />
-        </Solid.Suspense>
-      </Solid.Match>
-
       <Solid.Match when={parentGlobalNotFound()}>
         {renderRouteNotFound(router, route(), undefined)}
       </Solid.Match>

package/src/lazyRouteComponent.tsx

@@ -1,28 +1,14 @@
 import { Dynamic } from 'solid-js/web'
 import { createResource } from 'solid-js'
-import { Outlet } from './Match'
-import { ClientOnly } from './ClientOnly'
+import { isModuleNotFoundError } from '@tanstack/router-core'
 import type { AsyncRouteComponent } from './route'
 
-// If the load fails due to module not found, it may mean a new version of
-// the build was deployed and the user's browser is still using an old version.
-// If this happens, the old version in the user's browser would have an outdated
-// URL to the lazy module.
-// In that case, we want to attempt one window refresh to get the latest.
-function isModuleNotFoundError(error: any): boolean {
-  return (
-    typeof error?.message === 'string' &&
-    /Failed to fetch dynamically imported module/.test(error.message)
-  )
-}
-
 export function lazyRouteComponent<
   T extends Record<string, any>,
   TKey extends keyof T = 'default',
 >(
   importer: () => Promise<T>,
   exportName?: TKey,
-  ssr?: () => boolean,
 ): T[TKey] extends (props: infer TProps) => any
   ? AsyncRouteComponent<TProps>
   : never {
@@ -31,10 +17,6 @@ export function lazyRouteComponent<
   let error: any
 
   const load = () => {
-    if (typeof document === 'undefined' && ssr?.() === false) {
-      comp = (() => null) as any
-      return Promise.resolve(comp)
-    }
     if (!loadPromise) {
       loadPromise = importer()
         .then((res) => {
@@ -54,6 +36,11 @@ export function lazyRouteComponent<
     // Now that we're out of preload and into actual render path,
     // throw the error if it was a module not found error during preload
     if (error) {
+      // If the load fails due to module not found, it may mean a new version of
+      // the build was deployed and the user's browser is still using an old version.
+      // If this happens, the old version in the user's browser would have an outdated
+      // URL to the lazy module.
+      // In that case, we want to attempt one window refresh to get the latest.
       if (isModuleNotFoundError(error)) {
         // We don't want an error thrown from preload in this case, because
         // there's nothing we want to do about module not found during preload.
@@ -94,13 +81,6 @@ export function lazyRouteComponent<
       return <>{compResource()}</>
     }
 
-    if (ssr?.() === false) {
-      return (
-        <ClientOnly fallback={<Outlet />}>
-          <Dynamic component={comp} {...props} />
-        </ClientOnly>
-      )
-    }
     return <Dynamic component={comp} {...props} />
   }