@tanstack/router-core 1.171.15 → 1.171.16-pre.0

package/src/ssr/createRequestHandler.ts

@@ -1,11 +1,15 @@
 import { createMemoryHistory } from '@tanstack/history'
+import { _getRenderedMatches } from '../load-client'
 import { mergeHeaders } from './headers'
 import {
   attachRouterServerSsrUtils,
   getNormalizedURL,
   getOrigin,
 } from './ssr-server'
-import { normalizeSsrResponse } from './handlerCallback'
+import {
+  bindSsrResponseToRequest,
+  disposeSsrResponseDetached,
+} from './handlerCallback'
 import type { HandlerCallback } from './handlerCallback'
 import type { AnyHeaders } from './headers'
 import type { AnyRouter } from '../router'
@@ -15,6 +19,79 @@ export type RequestHandler<TRouter extends AnyRouter> = (
   cb: HandlerCallback<TRouter>,
 ) => Promise<Response>
 
+type RequestWaiter = ((reason: unknown) => void) | undefined
+
+const requestWaiters = new WeakMap<AbortSignal, Array<RequestWaiter>>()
+
+function removeRequestWaiter(
+  waiters: Array<RequestWaiter>,
+  index: number,
+  reject: (reason: unknown) => void,
+) {
+  if (waiters[index] !== reject) {
+    return
+  }
+  if (index !== waiters.length - 1) {
+    waiters[index] = undefined
+    return
+  }
+
+  waiters.pop()
+  while (waiters.length && waiters[waiters.length - 1] === undefined) {
+    waiters.pop()
+  }
+}
+
+export function waitForRequest<T>(
+  value: T | PromiseLike<T>,
+  signal: AbortSignal,
+  onLate?: (value: T) => void,
+): Promise<T> {
+  const promise = Promise.resolve(value)
+  if (signal.aborted) {
+    void promise.then(onLate, () => {})
+    return Promise.reject(signal.reason)
+  }
+
+  return new Promise<T>((resolve, reject) => {
+    let waiters = requestWaiters.get(signal)
+    let index: number
+    if (waiters) {
+      index = waiters.push(reject) - 1
+    } else {
+      const newWaiters: Array<RequestWaiter> = [reject]
+      waiters = newWaiters
+      index = 0
+      requestWaiters.set(signal, newWaiters)
+      signal.addEventListener(
+        'abort',
+        () => {
+          requestWaiters.delete(signal)
+          for (const rejectWaiter of newWaiters) {
+            rejectWaiter?.(signal.reason)
+          }
+          newWaiters.length = 0
+        },
+        { once: true },
+      )
+    }
+    void promise.then(
+      (result) => {
+        removeRequestWaiter(waiters, index, reject)
+        if (signal.aborted) {
+          onLate?.(result)
+        } else {
+          resolve(result)
+        }
+      },
+      (error) => {
+        removeRequestWaiter(waiters, index, reject)
+        reject(error)
+      },
+    )
+  })
+}
+
 export function createRequestHandler<TRouter extends AnyRouter>({
   createRouter,
   request,
@@ -25,13 +102,14 @@ export function createRequestHandler<TRouter extends AnyRouter>({
   getRouterManifest?: () => ServerManifest | Promise<ServerManifest>
 }): RequestHandler<TRouter> {
   return async (cb) => {
+    request.signal.throwIfAborted()
     const router = createRouter()
     let responseOwnsCleanup = false
 
     try {
       attachRouterServerSsrUtils({
         router,
-        manifest: await getRouterManifest?.(),
+        manifest: await waitForRequest(getRouterManifest?.(), request.signal),
       })
 
       // normalizing and sanitizing the pathname here for server, so we always deal with the same format during SSR.
@@ -50,20 +128,41 @@ export function createRequestHandler<TRouter extends AnyRouter>({
         origin: router.options.origin ?? origin,
       })
 
-      await router.load()
+      await router.load({
+        _signal: request.signal,
+      })
+      request.signal.throwIfAborted()
+
+      const result = router._serverResult
+      if (result?.type === 'redirect') {
+        return result.redirect
+      }
 
-      await router.serverSsr?.dehydrate()
+      await waitForRequest(router.serverSsr?.dehydrate(), request.signal)
+      request.signal.throwIfAborted()
 
       const responseHeaders = getRequestHeaders({
         router,
       })
 
-      const response = await cb({
-        request,
+      request.signal.throwIfAborted()
+      const response = await waitForRequest(
+        cb({
+          request,
+          router,
+          responseHeaders,
+        }),
+        request.signal,
+        (late) => {
+          disposeSsrResponseDetached(late, request.signal.reason)
+        },
+      )
+      const ssrResponse = bindSsrResponseToRequest(
         router,
-        responseHeaders,
-      })
-      const ssrResponse = normalizeSsrResponse(response)
+        response,
+        request.signal,
+      )
+      request.signal.throwIfAborted()
       responseOwnsCleanup = ssrResponse.serverSsrCleanup === 'stream'
       return ssrResponse.response
     } finally {
@@ -79,16 +178,10 @@ export function createRequestHandler<TRouter extends AnyRouter>({
 
 function getRequestHeaders(opts: { router: AnyRouter }): Headers {
   const matchHeaders: Array<AnyHeaders> = []
-  for (const match of opts.router.stores.matches.get()) {
+  for (const match of _getRenderedMatches(opts.router.stores.matches.get())) {
     matchHeaders.push(match.headers)
   }
 
-  // Handle Redirects
-  const redirect = opts.router.stores.redirect.get()
-  if (redirect) {
-    matchHeaders.push(redirect.headers)
-  }
-
   return mergeHeaders(
     {
       'Content-Type': 'text/html; charset=UTF-8',

package/src/ssr/handlerCallback.ts

@@ -30,6 +30,40 @@ export function normalizeSsrResponse(
     : { response: result, serverSsrCleanup: 'none' }
 }
 
+export function disposeSsrResponse(
+  response: SsrResponse,
+  reason?: unknown,
+): Promise<void> {
+  if (response.serverSsrCleanup !== 'stream') {
+    return Promise.resolve()
+  }
+  try {
+    return Promise.resolve(response.dispose(reason))
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+export function disposeSsrResponseDetached(
+  result: HandlerCallbackResult,
+  reason?: unknown,
+  onError: (error: unknown) => void = console.error,
+): void {
+  const ssrResponse = normalizeSsrResponse(result)
+  if (ssrResponse.serverSsrCleanup === 'stream') {
+    void disposeSsrResponse(ssrResponse, reason).catch(onError)
+    return
+  }
+
+  if (ssrResponse.response.body) {
+    try {
+      void ssrResponse.response.body.cancel(reason).catch(onError)
+    } catch (error) {
+      onError(error)
+    }
+  }
+}
+
 export function createSsrStreamResponse<TRouter extends AnyRouter>(
   router: TRouter,
   response: Response,
@@ -43,29 +77,63 @@ export function createSsrStreamResponse<TRouter extends AnyRouter>(
     response,
     serverSsrCleanup: 'stream',
     async dispose(reason?: unknown) {
-      if (disposed) return
+      if (disposed) {
+        return
+      }
       disposed = true
 
+      // Sever router ownership before asking user/renderer stream machinery to
+      // cancel. A custom stream is allowed to ignore cancellation forever.
+      router.serverSsr?.cleanup()
+
       try {
         await response.body!.cancel(reason)
       } catch {
-        // ignore; fallback cleanup below still releases router SSR state
+        // Cleanup above already released router SSR state.
       }
-
-      router.serverSsr?.cleanup()
     },
   }
 }
 
+export function bindSsrResponseToRequest(
+  router: AnyRouter | undefined,
+  result: HandlerCallbackResult,
+  signal: AbortSignal,
+): SsrResponse {
+  const ssrResponse = normalizeSsrResponse(result)
+  if (ssrResponse.serverSsrCleanup !== 'stream') {
+    if (signal.aborted) {
+      disposeSsrResponseDetached(result, signal.reason)
+    }
+    return ssrResponse
+  }
+
+  const failed = (error: unknown) => {
+    router?.serverSsr?.cleanup()
+    console.error(error)
+  }
+  const abort = () => {
+    disposeSsrResponseDetached(ssrResponse, signal.reason, failed)
+  }
+  if (signal.aborted) {
+    abort()
+    return ssrResponse
+  }
+
+  signal.addEventListener('abort', abort, { once: true })
+  router?.serverSsr?.onCleanup(() => {
+    signal.removeEventListener('abort', abort)
+  })
+  return ssrResponse
+}
+
 export async function replaceSsrResponse(
   result: HandlerCallbackResult,
   response: Response,
   reason?: unknown,
 ): Promise<SsrResponse> {
   const ssrResponse = normalizeSsrResponse(result)
-  if (ssrResponse.serverSsrCleanup === 'stream') {
-    await ssrResponse.dispose(reason)
-  }
+  await disposeSsrResponse(ssrResponse, reason)
   return { response, serverSsrCleanup: 'none' }
 }
 
@@ -74,9 +142,7 @@ export async function stripSsrResponseBody(
   reason?: unknown,
 ): Promise<SsrResponse> {
   const ssrResponse = normalizeSsrResponse(result)
-  if (ssrResponse.serverSsrCleanup === 'stream') {
-    await ssrResponse.dispose(reason)
-  }
+  await disposeSsrResponse(ssrResponse, reason)
   return {
     response: new Response(null, ssrResponse.response),
     serverSsrCleanup: 'none',

package/src/ssr/server.ts

@@ -1,8 +1,11 @@
-export { createRequestHandler } from './createRequestHandler'
+export { createRequestHandler, waitForRequest } from './createRequestHandler'
 export type { RequestHandler } from './createRequestHandler'
 export {
+  bindSsrResponseToRequest,
   createSsrStreamResponse,
   defineHandlerCallback,
+  disposeSsrResponse,
+  disposeSsrResponseDetached,
   isSsrResponse,
   normalizeSsrResponse,
   replaceSsrResponse,

package/src/ssr/ssr-client.ts

@@ -1,310 +1 @@
-import { invariant } from '../invariant'
-import { isNotFound } from '../not-found'
-import { createControlledPromise } from '../utils'
-import { hydrateSsrMatchId } from './ssr-match-id'
-import type { GLOBAL_SEROVAL, GLOBAL_TSR } from './constants'
-import type { DehydratedMatch, TsrSsrGlobal } from './types'
-import type { AnyRouteMatch } from '../Matches'
-import type { AnyRouter } from '../router'
-import type { RouteContextOptions } from '../route'
-import type { AnySerializationAdapter } from './serializer/transformer'
-
-declare global {
-  interface Window {
-    [GLOBAL_TSR]?: TsrSsrGlobal
-    [GLOBAL_SEROVAL]?: any
-  }
-}
-
-function hydrateMatch(
-  match: AnyRouteMatch,
-  deyhydratedMatch: DehydratedMatch,
-): void {
-  match.id = deyhydratedMatch.i
-  match.__beforeLoadContext = deyhydratedMatch.b
-  match.loaderData = deyhydratedMatch.l
-  match.status = deyhydratedMatch.s
-  match.ssr = deyhydratedMatch.ssr
-  match.updatedAt = deyhydratedMatch.u
-  match.error = deyhydratedMatch.e
-  // Only hydrate global-not-found when a defined value is present in the
-  // dehydrated payload. If omitted, preserve the value computed from the
-  // current client location (important for SPA fallback HTML served at unknown
-  // URLs, where dehydrated matches may come from `/` but client matching marks
-  // root as globalNotFound).
-  if (deyhydratedMatch.g !== undefined) {
-    match.globalNotFound = deyhydratedMatch.g
-  }
-}
-
-export async function hydrate(router: AnyRouter): Promise<any> {
-  if (!window.$_TSR) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(
-        'Invariant failed: Expected to find bootstrap data on window.$_TSR, but we did not. Please file an issue!',
-      )
-    }
-
-    invariant()
-  }
-
-  const serializationAdapters = router.options.serializationAdapters as
-    | Array<AnySerializationAdapter>
-    | undefined
-
-  if (serializationAdapters?.length) {
-    const fromSerializableMap = new Map()
-    serializationAdapters.forEach((adapter) => {
-      fromSerializableMap.set(adapter.key, adapter.fromSerializable)
-    })
-    window.$_TSR.t = fromSerializableMap
-    window.$_TSR.buffer.forEach((script) => script())
-  }
-  window.$_TSR.initialized = true
-
-  if (!window.$_TSR.router) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(
-        'Invariant failed: Expected to find a dehydrated data on window.$_TSR.router, but we did not. Please file an issue!',
-      )
-    }
-
-    invariant()
-  }
-
-  const dehydratedRouter = window.$_TSR.router
-  dehydratedRouter.matches.forEach((dehydratedMatch) => {
-    dehydratedMatch.i = hydrateSsrMatchId(dehydratedMatch.i)
-  })
-  if (dehydratedRouter.lastMatchId) {
-    dehydratedRouter.lastMatchId = hydrateSsrMatchId(
-      dehydratedRouter.lastMatchId,
-    )
-  }
-  const { manifest, dehydratedData, lastMatchId } = dehydratedRouter
-
-  router.ssr = {
-    manifest,
-  }
-  const meta = document.querySelector('meta[property="csp-nonce"]') as
-    | HTMLMetaElement
-    | undefined
-  const nonce = meta?.content
-  router.options.ssr = {
-    nonce,
-  }
-
-  // Allow the user to handle custom hydration data before matching routes.
-  // This lets hydration install router config that affects matching, e.g. rewrites.
-  await router.options.hydrate?.(dehydratedData)
-
-  // Hydrate the router state
-  const matches = router.matchRoutes(router.stores.location.get())
-
-  // kick off loading the route chunks
-  const routeChunkPromise = Promise.all(
-    matches.map((match) =>
-      router.loadRouteChunk(router.looseRoutesById[match.routeId]!),
-    ),
-  )
-
-  function setMatchForcePending(match: AnyRouteMatch) {
-    // usually the minPendingPromise is created in the Match component if a pending match is rendered
-    // however, this might be too late if the match synchronously resolves
-    const route = router.looseRoutesById[match.routeId]!
-    const pendingMinMs =
-      route.options.pendingMinMs ?? router.options.defaultPendingMinMs
-    if (pendingMinMs) {
-      const minPendingPromise = createControlledPromise<void>()
-      match._nonReactive.minPendingPromise = minPendingPromise
-      match._forcePending = true
-
-      setTimeout(() => {
-        minPendingPromise.resolve()
-        // We've handled the minPendingPromise, so we can delete it
-        router.updateMatch(match.id, (prev) => {
-          prev._nonReactive.minPendingPromise = undefined
-          return {
-            ...prev,
-            _forcePending: undefined,
-          }
-        })
-      }, pendingMinMs)
-    }
-  }
-
-  function setRouteSsr(match: AnyRouteMatch) {
-    const route = router.looseRoutesById[match.routeId]
-    if (route) {
-      route.options.ssr = match.ssr
-    }
-  }
-  // Right after hydration and before the first render, we need to rehydrate each match
-  // First step is to reyhdrate loaderData and __beforeLoadContext
-  let firstNonSsrMatchIndex: number | undefined = undefined
-  matches.forEach((match) => {
-    const dehydratedMatch = dehydratedRouter.matches.find(
-      (d) => d.i === match.id,
-    )
-    if (!dehydratedMatch) {
-      match._nonReactive.dehydrated = false
-      match.ssr = false
-      setRouteSsr(match)
-      return
-    }
-
-    hydrateMatch(match, dehydratedMatch)
-    setRouteSsr(match)
-
-    match._nonReactive.dehydrated = match.ssr !== false
-
-    if (match.ssr === 'data-only' || match.ssr === false) {
-      if (firstNonSsrMatchIndex === undefined) {
-        firstNonSsrMatchIndex = match.index
-        setMatchForcePending(match)
-      }
-    }
-  })
-
-  router.stores.setMatches(matches)
-
-  // now that all necessary data is hydrated:
-  // 1) fully reconstruct the route context
-  // 2) execute `head()` and `scripts()` for each match
-  const activeMatches = router.stores.matches.get()
-  const location = router.stores.location.get()
-  await Promise.all(
-    activeMatches.map(async (match) => {
-      try {
-        const route = router.looseRoutesById[match.routeId]!
-
-        const parentMatch = activeMatches[match.index - 1]
-        const parentContext = parentMatch?.context ?? router.options.context
-
-        // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed
-        // so run it again and merge route context
-        if (route.options.context) {
-          const contextFnContext: RouteContextOptions<any, any, any, any, any> =
-            {
-              deps: match.loaderDeps,
-              params: match.params,
-              context: parentContext ?? {},
-              location,
-              navigate: (opts: any) =>
-                router.navigate({
-                  ...opts,
-                  _fromLocation: location,
-                }),
-              buildLocation: router.buildLocation,
-              cause: match.cause,
-              abortController: match.abortController,
-              preload: false,
-              matches,
-              routeId: route.id,
-            }
-          match.__routeContext =
-            route.options.context(contextFnContext) ?? undefined
-        }
-
-        match.context = {
-          ...parentContext,
-          ...match.__routeContext,
-          ...match.__beforeLoadContext,
-        }
-
-        const assetContext = {
-          ssr: router.options.ssr,
-          matches: activeMatches,
-          match,
-          params: match.params,
-          loaderData: match.loaderData,
-        }
-        const headFnContent = await route.options.head?.(assetContext)
-
-        const scripts = await route.options.scripts?.(assetContext)
-
-        match.meta = headFnContent?.meta
-        match.links = headFnContent?.links
-        match.headScripts = headFnContent?.scripts
-        match.styles = headFnContent?.styles
-        match.scripts = scripts
-      } catch (err) {
-        if (isNotFound(err)) {
-          match.error = { isNotFound: true }
-          console.error(
-            `NotFound error during hydration for routeId: ${match.routeId}`,
-            err,
-          )
-        } else {
-          match.error = err as any
-          console.error(
-            `Error during hydration for route ${match.routeId}:`,
-            err,
-          )
-          throw err
-        }
-      }
-    }),
-  )
-
-  const isSpaMode = matches[matches.length - 1]!.id !== lastMatchId
-  const hasSsrFalseMatches = matches.some((m) => m.ssr === false)
-  // all matches have data from the server and we are not in SPA mode so we don't need to kick of router.load()
-  if (!hasSsrFalseMatches && !isSpaMode) {
-    matches.forEach((match) => {
-      // remove the dehydrated flag since we won't run router.load() which would remove it
-      match._nonReactive.dehydrated = undefined
-    })
-    // Mark the current location as resolved so that later load cycles
-    // (e.g. preloads, invalidations) don't mistakenly detect a href change
-    // (resolvedLocation defaults to undefined and router.load() is skipped
-    // in the normal SSR hydration path).
-    router.stores.resolvedLocation.set(router.stores.location.get())
-    return routeChunkPromise
-  }
-
-  // schedule router.load() to run after the next tick so we can store the promise in the match before loading starts
-  const loadPromise = Promise.resolve()
-    .then(() => router.load())
-    .catch((err) => {
-      console.error('Error during router hydration:', err)
-    })
-
-  // in SPA mode we need to keep the first match below the root route pending until router.load() is finished
-  // this will prevent that other pending components are rendered but hydration is not blocked
-  if (isSpaMode) {
-    const match = matches[1]
-    if (!match) {
-      if (process.env.NODE_ENV !== 'production') {
-        throw new Error(
-          'Invariant failed: Expected to find a match below the root match in SPA mode.',
-        )
-      }
-
-      invariant()
-    }
-    setMatchForcePending(match)
-
-    match._displayPending = true
-    match._nonReactive.displayPendingPromise = loadPromise
-
-    loadPromise.then(() => {
-      router.batch(() => {
-        // ensure router is not in status 'pending' anymore
-        // this usually happens in Transitioner but if loading synchronously resolves,
-        // Transitioner won't be rendered while loading so it cannot track the change from loading:true to loading:false
-        if (router.stores.status.get() === 'pending') {
-          router.stores.status.set('idle')
-          router.stores.resolvedLocation.set(router.stores.location.get())
-        }
-        // hide the pending component once the load is finished
-        router.updateMatch(match.id, (prev) => ({
-          ...prev,
-          _displayPending: undefined,
-          displayPendingPromise: undefined,
-        }))
-      })
-    })
-  }
-  return routeChunkPromise
-}
+export { hydrate } from '../load-client'

package/src/ssr/ssr-match-id.ts

@@ -1,7 +1,16 @@
 export function dehydrateSsrMatchId(id: string): string {
-  return id.replaceAll('/', '\0')
+  return id
+    .replaceAll('~', '~~')
+    .replaceAll('\0', '~0')
+    .replaceAll('\uFFFD', '~r')
+    .replaceAll('/', '\0')
 }
 
 export function hydrateSsrMatchId(id: string): string {
-  return id.replaceAll('\0', '/').replaceAll('\uFFFD', '/')
+  return id
+    .replaceAll('\0', '/')
+    .replaceAll('\uFFFD', '/')
+    .replace(/~([~0r])/g, (_, code) =>
+      code === '0' ? '\0' : code === 'r' ? '\uFFFD' : code,
+    )
 }

package/src/ssr/ssr-server.ts

@@ -8,6 +8,7 @@ import {
 import { decodePath } from '../utils'
 import { createLRUCache } from '../lru-cache'
 import { rootRouteId } from '../root'
+import { _getRenderedMatches } from '../load-client'
 import minifiedTsrBootStrapScript from './tsrScript?script-string'
 import { GLOBAL_TSR, TSR_SCRIPT_BARRIER_ID } from './constants'
 import { dehydrateSsrMatchId } from './ssr-match-id'
@@ -51,7 +52,7 @@ export function dehydrateMatch(match: AnyRouteMatch): DehydratedMatch {
       dehydratedMatch[shorthand] = match[key]
     }
   }
-  if (match.globalNotFound) {
+  if (match._notFound) {
     dehydratedMatch.g = true
   }
   return dehydratedMatch
@@ -389,7 +390,7 @@ export function attachRouterServerSsrUtils({
       if (!manifest) return manifest
 
       const requestAssets = getRequestAssets?.()
-      const matches = router.stores.matches.get()
+      const matches = _getRenderedMatches(router.stores.matches.get())
       const hasAssets = hasRequestAssets(requestAssets)
 
       if (!hasAssets && !manifest.inlineCss) {
@@ -495,8 +496,9 @@ export function attachRouterServerSsrUtils({
 
         invariant()
       }
-      let matchesToDehydrate = router.stores.matches.get()
-      if (router.isShell()) {
+      let matchesToDehydrate = _getRenderedMatches(router.stores.matches.get())
+      const isShell = router.isShell()
+      if (isShell) {
         // In SPA mode we only want to dehydrate the root match
         matchesToDehydrate = matchesToDehydrate.slice(0, 1)
       }
@@ -540,11 +542,10 @@ export function attachRouterServerSsrUtils({
         manifest: manifestToDehydrate,
         matches,
       }
-      const lastMatchId = matchesToDehydrate[matchesToDehydrate.length - 1]?.id
-      if (lastMatchId) {
-        dehydratedRouter.lastMatchId = dehydrateSsrMatchId(lastMatchId)
-      }
       const dehydratedData = await router.options.dehydrate?.()
+      if (cleanupStarted) {
+        return
+      }
       if (dehydratedData) {
         dehydratedRouter.dehydratedData = dehydratedData
       }