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

package/src/scroll-restoration.ts

@@ -1,5 +1,4 @@
 import { isServer } from '@tanstack/router-core/isServer'
-import { locationHistoryActions } from './router'
 import type { AnyRouter } from './router'
 import type { ParsedLocation } from './location'
 
@@ -133,7 +132,6 @@ export function getElementScrollRestorationEntry(
 
 let ignoreScroll = false
 const windowScrollTarget = 'window'
-type ScrollTarget = typeof windowScrollTarget | Element
 
 function getElement(selector: string | (() => Element | null | undefined)) {
   try {
@@ -148,8 +146,8 @@ function getScrollToTopElements(
   scrollToTopSelectors: NonNullable<
     AnyRouter['options']['scrollToTopSelectors']
   >,
-): Array<Element> {
-  const elements: Array<Element> = []
+) {
+  const elements = new Set<Element>()
 
   for (const selector of scrollToTopSelectors) {
     if (selector === windowScrollTarget) {
@@ -158,7 +156,7 @@ function getScrollToTopElements(
 
     const element = getElement(selector)
     if (element) {
-      elements.push(element)
+      elements.add(element)
     }
   }
 
@@ -180,46 +178,21 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
 
   const getKey =
     router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
-  const trackedScrollEntries = new Map<ScrollTarget, ScrollRestorationEntry>()
-  const setTrackedScrollEntry = (
-    target: ScrollTarget,
-    scrollX: number,
-    scrollY: number,
-  ) => {
-    const entry =
-      trackedScrollEntries.get(target) || ({} as ScrollRestorationEntry)
-    entry.scrollX = scrollX
-    entry.scrollY = scrollY
-    trackedScrollEntries.set(target, entry)
-  }
-
-  const onScroll = (event: Event) => {
-    if (ignoreScroll || !scroll.restoring) {
-      return
-    }
-
-    if (event.target === document) {
-      setTrackedScrollEntry(windowScrollTarget, scrollX, scrollY)
-    } else {
-      const target = event.target as Element
-      setTrackedScrollEntry(target, target.scrollLeft, target.scrollTop)
-    }
-  }
+  const trackedScrollTargets = new Set<Document | Element>()
 
   // Snapshot the current page's tracked scroll targets before navigation or unload.
   const snapshotCurrentScrollTargets = (restoreKey: string) => {
-    if (!scroll.restoring) {
-      return
-    }
-
     const keyEntry = (scrollRestorationCache[restoreKey] ||=
       {} as ScrollRestorationByElement)
 
-    for (const [target, position] of trackedScrollEntries) {
-      if (target === windowScrollTarget) {
-        keyEntry[windowScrollTarget] = position
-      } else if (target.isConnected) {
-        keyEntry[getScrollRestorationSelector(target)] = position
+    for (const target of trackedScrollTargets) {
+      if (target === document) {
+        keyEntry[windowScrollTarget] = { scrollX, scrollY }
+      } else if ((target as Element).isConnected) {
+        keyEntry[getScrollRestorationSelector(target as Element)] = {
+          scrollX: (target as Element).scrollLeft,
+          scrollY: (target as Element).scrollTop,
+        }
       }
     }
   }
@@ -230,12 +203,21 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
 
     history.scrollRestoration = 'manual'
 
-    document.addEventListener('scroll', onScroll, true)
+    document.addEventListener(
+      'scroll',
+      (event) => {
+        if (ignoreScroll) {
+          return
+        }
+        trackedScrollTargets.add(event.target as Document | Element)
+      },
+      true,
+    )
     router.subscribe('onBeforeLoad', (event) => {
       if (event.fromLocation) {
         snapshotCurrentScrollTargets(getKey(event.fromLocation))
       }
-      trackedScrollEntries.clear()
+      trackedScrollTargets.clear()
     })
     addEventListener('pagehide', () => {
       snapshotCurrentScrollTargets(
@@ -258,12 +240,11 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
     const behavior = router.options.scrollRestorationBehavior
     const scrollToTopSelectors = router.options.scrollToTopSelectors
     const shouldResetScroll = scroll.next
-    let scrollToTopElements: Array<Element> | undefined
-    trackedScrollEntries.clear()
-
-    if (!shouldResetScroll) {
-      scroll.next = true
-    }
+    const hashNavigation = scroll.hash
+    let scrollToTopElements: Set<Element> | undefined
+    trackedScrollTargets.clear()
+    scroll.next = true
+    scroll.hash = false
 
     if (
       typeof router.options.scrollRestoration === 'function' &&
@@ -295,7 +276,7 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
             if (shouldResetScroll && scrollToTopSelectors) {
               scrollToTopElements ??=
                 getScrollToTopElements(scrollToTopSelectors)
-              if (scrollToTopElements.includes(element)) {
+              if (scrollToTopElements.has(element)) {
                 continue
               }
             }
@@ -321,11 +302,12 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
       let windowRestored = false
 
       if (shouldResetScroll) {
-        const action = locationHistoryActions.get(event.toLocation)
+        if (!hash && scrollToTopSelectors) {
+          scrollToTopElements ??= getScrollToTopElements(scrollToTopSelectors)
+        }
+
         const skipWindowRestore =
-          hash &&
-          hashScrollIntoViewOptions &&
-          (action === 'PUSH' || action === 'REPLACE')
+          hash && hashScrollIntoViewOptions && hashNavigation
 
         const elementEntries = scroll.restoring
           ? scrollRestorationCache[cacheKey]
@@ -351,21 +333,23 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
               if (element) {
                 element.scrollLeft = scrollX
                 element.scrollTop = scrollY
+                scrollToTopElements?.delete(element)
               }
             }
           }
         }
 
-        if (!windowRestored && !hash) {
+        if (!hash) {
           const scrollOptions = {
             top: 0,
             left: 0,
             behavior,
           }
 
-          scrollTo(scrollOptions)
-          if (scrollToTopSelectors) {
-            scrollToTopElements ??= getScrollToTopElements(scrollToTopSelectors)
+          if (!windowRestored) {
+            scrollTo(scrollOptions)
+          }
+          if (scrollToTopElements) {
             for (const element of scrollToTopElements) {
               element.scrollTo(scrollOptions)
             }

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,