@tanstack/solid-router 1.121.0-alpha.27 → 1.121.0-alpha.28

package/src/HeadContent.tsx

@@ -116,6 +116,22 @@ export const useTags = () => {
     },
   })
 
+  const styles = useRouterState({
+    select: (state) =>
+      (
+        state.matches
+          .map((match) => match.styles!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...style }) => ({
+        tag: 'style',
+        attrs: {
+          ...style,
+        },
+        children,
+      })),
+  })
+
   const headScripts = useRouterState({
     select: (state) =>
       (
@@ -138,6 +154,7 @@ export const useTags = () => {
         ...meta(),
         ...preloadMeta(),
         ...links(),
+        ...styles(),
         ...headScripts(),
       ] as Array<RouterManagedTag>,
       (d) => {

package/src/Match.tsx

@@ -18,22 +18,23 @@ import { matchContext } from './matchContext'
 import { SafeFragment } from './SafeFragment'
 import { renderRouteNotFound } from './renderRouteNotFound'
 import { ScrollRestoration } from './scroll-restoration'
-import type { AnyRoute } from '@tanstack/router-core'
+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
 
@@ -77,8 +84,12 @@ export const Match = (props: { matchId: string }) => {
     },
   })
 
+  const ShellComponent = route().isRoot
+    ? ((route().options as RootRouteOptions).shellComponent ?? SafeFragment)
+    : SafeFragment
+
   return (
-    <>
+    <ShellComponent>
       <matchContext.Provider value={() => props.matchId}>
         <Dynamic
           component={ResolvedSuspenseBoundary()}
@@ -102,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
@@ -112,7 +123,19 @@ export const Match = (props: { matchId: string }) => {
                 )
               }}
             >
-              <MatchInner matchId={props.matchId} />
+              <Solid.Switch>
+                <Solid.Match when={resolvedNoSsr}>
+                  <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>
@@ -124,14 +147,14 @@ export const Match = (props: { matchId: string }) => {
           <ScrollRestoration />
         </>
       ) : null}
-    </>
+    </ShellComponent>
   )
 }
 
 // On Rendered can't happen above the root layout because it actually
 // renders a dummy dom element to track the rendered state of the app.
 // We render a script tag with a key that changes based on the current
-// location state.key. Also, because it's below the root layout, it
+// location state.__TSR_key. Also, because it's below the root layout, it
 // 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).
@@ -140,7 +163,7 @@ function OnRendered() {
 
   const location = useRouterState({
     select: (s) => {
-      return s.resolvedLocation?.state.key
+      return s.resolvedLocation?.state.__TSR_key
     },
   })
   Solid.createEffect(
@@ -157,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]!
@@ -178,81 +200,51 @@ 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 = () => {
     const Comp = route().options.component ?? router.options.defaultComponent
     if (Comp) {
-      return <Comp />
+      return (
+        <Solid.Show when={matchState().match.id} keyed>
+          <Comp />
+        </Solid.Show>
+      )
     }
     return <Outlet />
   }
 
   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'}>
+      <Solid.Match when={match()._displayPending}>
         {(_) => {
-          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
-          })
+          const [displayPendingResult] = Solid.createResource(
+            () => router.getMatch(match().id)?.displayPendingPromise,
+          )
 
-          return <>{loaderResult()}</>
+          return <>{displayPendingResult()}</>
         }}
       </Solid.Match>
-      <Solid.Match when={match().status === 'error'}>
+      <Solid.Match when={match()._forcePending}>
         {(_) => {
-          if (router.isServer) {
-            const RouteErrorComponent =
-              (route().options.errorComponent ??
-                router.options.defaultErrorComponent) ||
-              ErrorComponent
-
-            return (
-              <RouteErrorComponent
-                error={match().error}
-                info={{
-                  componentStack: '',
-                }}
-              />
-            )
-          }
+          const [minPendingResult] = Solid.createResource(
+            () => router.getMatch(match().id)?.minPendingPromise,
+          )
 
-          throw match().error
+          return <>{minPendingResult()}</>
         }}
       </Solid.Match>
       <Solid.Match when={match().status === 'pending'}>
@@ -292,6 +284,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>
   )
@@ -329,16 +361,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/Matches.tsx

@@ -30,6 +30,7 @@ declare module '@tanstack/router-core' {
     meta?: Array<Solid.JSX.IntrinsicElements['meta'] | undefined>
     links?: Array<Solid.JSX.IntrinsicElements['link'] | undefined>
     scripts?: Array<Solid.JSX.IntrinsicElements['script'] | undefined>
+    styles?: Array<Solid.JSX.IntrinsicElements['style'] | undefined>
     headScripts?: Array<Solid.JSX.IntrinsicElements['script'] | undefined>
   }
 }
@@ -43,13 +44,13 @@ export function Matches() {
 
   // Do not render a root Suspense during SSR or hydrating from SSR
   const ResolvedSuspense =
-    router.isServer || (typeof document !== 'undefined' && router.clientSsr)
+    router.isServer || (typeof document !== 'undefined' && router.ssr)
       ? SafeFragment
       : Solid.Suspense
 
   const inner = (
     <ResolvedSuspense fallback={pendingElement}>
-      <Transitioner />
+      {!router.isServer && <Transitioner />}
       <MatchesInner />
     </ResolvedSuspense>
   )
@@ -62,6 +63,7 @@ export function Matches() {
 }
 
 function MatchesInner() {
+  const router = useRouter()
   const matchId = useRouterState({
     select: (s) => {
       return s.matches[0]?.id
@@ -72,21 +74,28 @@ function MatchesInner() {
     select: (s) => s.loadedAt,
   })
 
+  const matchComponent = () =>
+    matchId() ? <Match matchId={matchId()!} /> : null
+
   return (
     <matchContext.Provider value={matchId}>
-      <CatchBoundary
-        getResetKey={() => resetKey()}
-        errorComponent={ErrorComponent}
-        onCatch={(error) => {
-          warning(
-            false,
-            `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())
-        }}
-      >
-        {matchId() ? <Match matchId={matchId()!} /> : null}
-      </CatchBoundary>
+      {router.options.disableGlobalCatchBoundary ? (
+        matchComponent()
+      ) : (
+        <CatchBoundary
+          getResetKey={() => resetKey()}
+          errorComponent={ErrorComponent}
+          onCatch={(error) => {
+            warning(
+              false,
+              `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())
+          }}
+        >
+          {matchComponent()}
+        </CatchBoundary>
+      )}
     </matchContext.Provider>
   )
 }
@@ -170,12 +179,12 @@ export function MatchRoute<
       {(_) => {
         const matchRoute = useMatchRoute()
         const params = matchRoute(props as any)() as boolean
-
-        if (typeof props.children === 'function') {
-          return (props.children as any)(params)
+        const child = props.children
+        if (typeof child === 'function') {
+          return (child as any)(params)
         }
 
-        return params ? props.children : null
+        return params ? child : null
       }}
     </Solid.Show>
   )

package/src/ScriptOnce.tsx

@@ -1,8 +1,5 @@
-import jsesc from 'jsesc'
-
 export function ScriptOnce({
   children,
-  log,
 }: {
   children: string
   log?: boolean
@@ -15,16 +12,7 @@ export function ScriptOnce({
   return (
     <script
       class="tsr-once"
-      innerHTML={[
-        children,
-        (log ?? true) && process.env.NODE_ENV === 'development'
-          ? `console.info(\`Injected From Server:
-${jsesc(children.toString(), { quotes: 'backtick' })}\`)`
-          : '',
-        'if (typeof __TSR_SSR__ !== "undefined") __TSR_SSR__.cleanScripts()',
-      ]
-        .filter(Boolean)
-        .join('\n')}
+      innerHTML={[children].filter(Boolean).join('\n')}
     />
   )
 }

package/src/Transitioner.tsx

@@ -30,12 +30,10 @@ export function Transitioner() {
   const isPagePending = () => isLoading() || hasPendingMatches()
   const previousIsPagePending = usePrevious(isPagePending)
 
-  if (!router.isServer) {
-    router.startTransition = async (fn: () => void | Promise<void>) => {
-      setIsTransitioning(true)
-      await fn()
-      setIsTransitioning(false)
-    }
+  router.startTransition = async (fn: () => void | Promise<void>) => {
+    setIsTransitioning(true)
+    await fn()
+    setIsTransitioning(false)
   }
 
   // Subscribe to location changes
@@ -68,7 +66,8 @@ export function Transitioner() {
   Solid.createRenderEffect(() => {
     Solid.untrack(() => {
       if (
-        (typeof window !== 'undefined' && router.clientSsr) ||
+        // if we are hydrating from SSR, loading is triggered in ssr-client
+        (typeof window !== 'undefined' && router.ssr) ||
         (mountLoadForRouter.router === router && mountLoadForRouter.mounted)
       ) {
         return
@@ -98,6 +97,7 @@ export function Transitioner() {
       },
     ),
   )
+
   Solid.createRenderEffect(
     Solid.on(
       [isPagePending, previousIsPagePending],

package/src/index.tsx

@@ -1,6 +1,3 @@
-export { default as invariant } from 'tiny-invariant'
-export { default as warning } from 'tiny-warning'
-
 export {
   defer,
   TSR_DEFERRED_PROMISE,
@@ -24,26 +21,18 @@ export {
   defaultStringifySearch,
   parseSearchWith,
   stringifySearchWith,
-  escapeJSON, // SSR
   pick,
   functionalUpdate,
   replaceEqualDeep,
   isPlainObject,
   isPlainArray,
   deepEqual,
-  shallow,
   createControlledPromise,
   retainSearchParams,
   stripSearchParams,
 } from '@tanstack/router-core'
 
 export type {
-  StartSerializer,
-  Serializable,
-  SerializerParse,
-  SerializerParseBy,
-  SerializerStringify,
-  SerializerStringifyBy,
   DeferredPromiseState,
   DeferredPromise,
   ParsedLocation,
@@ -91,10 +80,6 @@ export type {
   SearchSerializer,
   SearchParser,
   TrailingSlashOption,
-  ExtractedEntry,
-  ExtractedStream,
-  ExtractedPromise,
-  StreamState,
   Manifest,
   RouterManagedTag,
   ControlledPromise,
@@ -167,6 +152,7 @@ export type {
   UseNavigateResult,
   AnyRedirect,
   Redirect,
+  RedirectOptions,
   ResolvedRedirect,
   RouteOptions,
   FileBaseRouteOptions,
@@ -204,8 +190,6 @@ export type {
   RouterConstructorOptions,
   ControllablePromise,
   InjectedHtmlEntry,
-  RouterErrorSerializer,
-  SerializerExtensions,
   CreateFileRoute,
   CreateLazyFileRoute,
 } from '@tanstack/router-core'
@@ -289,7 +273,6 @@ export {
 export type {
   AnyRootRoute,
   SolidNode,
-  SyncRouteComponent,
   AsyncRouteComponent,
   RouteComponent,
   ErrorRouteComponent,

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} />
   }