@tanstack/start-server-core 1.121.0-alpha.26 → 1.121.0-alpha.28

package/src/createStartHandler.ts

@@ -10,19 +10,30 @@ import {
   isResolvedRedirect,
   joinPaths,
   processRouteTree,
-  rootRouteId,
   trimPath,
 } from '@tanstack/router-core'
-import { getResponseHeaders, requestHandler } from './h3'
-import { attachRouterServerSsrUtils, dehydrateRouter } from './ssr-server'
+import { attachRouterServerSsrUtils } from '@tanstack/router-core/ssr/server'
+import { runWithStartContext } from '@tanstack/start-storage-context'
+import { getResponseHeaders, requestHandler } from './request-response'
 import { getStartManifest } from './router-manifest'
 import { handleServerAction } from './server-functions-handler'
 import { VIRTUAL_MODULES } from './virtual-modules'
 import { loadVirtualModule } from './loadVirtualModule'
-import type { AnyServerRoute, AnyServerRouteWithTypes } from './serverRoute'
-import type { RequestHandler } from './h3'
-import type { AnyRouter } from '@tanstack/router-core'
-import type { HandlerCallback } from './handlerCallback'
+
+import { HEADERS } from './constants'
+import type {
+  AnyServerRouteWithTypes,
+  ServerRouteMethodHandlerFn,
+} from './serverRoute'
+import type { RequestHandler } from './request-response'
+import type {
+  AnyRoute,
+  AnyRouter,
+  Awaitable,
+  Manifest,
+  ProcessRouteTreeResult,
+} from '@tanstack/router-core'
+import type { HandlerCallback } from '@tanstack/router-core/ssr/server'
 
 type TODO = any
 
@@ -30,36 +41,37 @@ export type CustomizeStartHandler<TRouter extends AnyRouter> = (
   cb: HandlerCallback<TRouter>,
 ) => RequestHandler
 
-export function getStartResponseHeaders(opts: { router: AnyRouter }) {
-  let headers = mergeHeaders(
-    getResponseHeaders(),
+function getStartResponseHeaders(opts: { router: AnyRouter }) {
+  const headers = mergeHeaders(
+    getResponseHeaders() as Headers,
     {
-      'Content-Type': 'text/html; charset=UTF-8',
+      'Content-Type': 'text/html; charset=utf-8',
     },
     ...opts.router.state.matches.map((match) => {
       return match.headers
     }),
   )
-  // Handle Redirects
-  const { redirect } = opts.router.state
-
-  if (redirect) {
-    headers = mergeHeaders(headers, redirect.headers)
-  }
   return headers
 }
 
 export function createStartHandler<TRouter extends AnyRouter>({
   createRouter,
 }: {
-  createRouter: () => TRouter
+  createRouter: () => Awaitable<TRouter>
 }): CustomizeStartHandler<TRouter> {
-  let serverRouteTree: AnyServerRoute | undefined | null = null
+  let routeTreeModule: {
+    serverRouteTree: AnyServerRouteWithTypes | undefined
+    routeTree: AnyRoute | undefined
+  } | null = null
+  let startRoutesManifest: Manifest | null = null
+  let processedServerRouteTree:
+    | ProcessRouteTreeResult<AnyServerRouteWithTypes>
+    | undefined = undefined
 
   return (cb) => {
     const originalFetch = globalThis.fetch
 
-    const startRequestResolver: RequestHandler = async ({ request }) => {
+    const startRequestResolver: RequestHandler = async (request) => {
       // Patching fetch function to use our request resolver
       // if the input starts with `/` which is a common pattern for
       // client-side routing.
@@ -68,7 +80,7 @@ export function createStartHandler<TRouter extends AnyRouter>({
       globalThis.fetch = async function (input, init) {
         function resolve(url: URL, requestOptions: RequestInit | undefined) {
           const fetchRequest = new Request(url, requestOptions)
-          return startRequestResolver({ request: fetchRequest })
+          return startRequestResolver(fetchRequest)
         }
 
         function getOrigin() {
@@ -99,27 +111,32 @@ export function createStartHandler<TRouter extends AnyRouter>({
       }
 
       const url = new URL(request.url)
-      const href = url.href.replace(url.origin, '')
+      const href = decodeURIComponent(url.href.replace(url.origin, ''))
+
+      const APP_BASE = process.env.TSS_APP_BASE || '/'
+
+      // TODO how does this work with base path? does the router need to be configured the same as APP_BASE?
+      const router = await createRouter()
 
       // Create a history for the client-side router
       const history = createMemoryHistory({
         initialEntries: [href],
       })
 
-      const APP_BASE = process.env.TSS_APP_BASE || '/'
-
-      // TODO do not create a router instance before we need it
-      // Create the client-side router
-      const router = createRouter()
-
-      // TODO only build startRoutesManifest once, not per request
-      // Attach the server-side SSR utils to the client-side router
-      const startRoutesManifest = await getStartManifest({ basePath: APP_BASE })
-      attachRouterServerSsrUtils(router, startRoutesManifest)
-
-      // Update the client-side router with the history and context
+      // Update the client-side router with the history
+      const isPrerendering = process.env.TSS_PRERENDERING === 'true'
+      // env var is set during dev is SPA mode is enabled
+      let isShell = process.env.TSS_SHELL === 'true'
+      if (isPrerendering && !isShell) {
+        // only read the shell header if we are prerendering
+        // to avoid runtime behavior changes by injecting this header
+        // the header is set by the prerender plugin
+        isShell = request.headers.get(HEADERS.TSS_SHELL) === 'true'
+      }
       router.update({
         history,
+        isShell,
+        isPrerendering,
       })
 
       const response = await (async () => {
@@ -141,67 +158,97 @@ export function createStartHandler<TRouter extends AnyRouter>({
             return await handleServerAction({ request })
           }
 
-          if (serverRouteTree === null) {
+          if (routeTreeModule === null) {
             try {
-              serverRouteTree = (
-                await loadVirtualModule(VIRTUAL_MODULES.routeTree)
-              ).serverRouteTree
+              routeTreeModule = await loadVirtualModule(
+                VIRTUAL_MODULES.routeTree,
+              )
+              if (routeTreeModule.serverRouteTree) {
+                processedServerRouteTree =
+                  processRouteTree<AnyServerRouteWithTypes>({
+                    routeTree: routeTreeModule.serverRouteTree,
+                    initRoute: (route, i) => {
+                      route.init({
+                        originalIndex: i,
+                      })
+                    },
+                  })
+              }
             } catch (e) {
               console.log(e)
             }
           }
 
+          const executeRouter = () =>
+            runWithStartContext({ router }, async () => {
+              const requestAcceptHeader = request.headers.get('Accept') || '*/*'
+              const splitRequestAcceptHeader = requestAcceptHeader.split(',')
+
+              const supportedMimeTypes = ['*/*', 'text/html']
+              const isRouterAcceptSupported = supportedMimeTypes.some(
+                (mimeType) =>
+                  splitRequestAcceptHeader.some((acceptedMimeType) =>
+                    acceptedMimeType.trim().startsWith(mimeType),
+                  ),
+              )
+
+              if (!isRouterAcceptSupported) {
+                return json(
+                  {
+                    error: 'Only HTML requests are supported here',
+                  },
+                  {
+                    status: 500,
+                  },
+                )
+              }
+
+              // if the startRoutesManifest is not loaded yet, load it once
+              if (startRoutesManifest === null) {
+                startRoutesManifest = await getStartManifest({
+                  basePath: APP_BASE,
+                })
+              }
+
+              // Attach the server-side SSR utils to the client-side router
+              attachRouterServerSsrUtils(router, startRoutesManifest)
+
+              await router.load()
+
+              // If there was a redirect, skip rendering the page at all
+              if (router.state.redirect) {
+                return router.state.redirect
+              }
+
+              await router.serverSsr!.dehydrate()
+
+              const responseHeaders = getStartResponseHeaders({ router })
+              const response = await cb({
+                request,
+                router,
+                responseHeaders,
+              })
+
+              return response
+            })
+
           // If we have a server route tree, then we try matching to see if we have a
           // server route that matches the request.
-          if (serverRouteTree) {
+          if (processedServerRouteTree) {
             const [_matchedRoutes, response] = await handleServerRoutes({
-              routeTree: serverRouteTree,
+              processedServerRouteTree,
+              router,
               request,
               basePath: APP_BASE,
+              executeRouter,
             })
 
             if (response) return response
           }
 
-          const requestAcceptHeader = request.headers.get('Accept') || '*/*'
-          const splitRequestAcceptHeader = requestAcceptHeader.split(',')
-
-          const supportedMimeTypes = ['*/*', 'text/html']
-          const isRouterAcceptSupported = supportedMimeTypes.some((mimeType) =>
-            splitRequestAcceptHeader.some((acceptedMimeType) =>
-              acceptedMimeType.trim().startsWith(mimeType),
-            ),
-          )
-
-          if (!isRouterAcceptSupported) {
-            return json(
-              {
-                error: 'Only HTML requests are supported here',
-              },
-              {
-                status: 500,
-              },
-            )
-          }
-
-          // If no Server Routes were found, so fallback to normal SSR matching using
-          // the router
-
-          await router.load()
-
-          // If there was a redirect, skip rendering the page at all
-          if (router.state.redirect) return router.state.redirect
-
-          dehydrateRouter(router)
-
-          const responseHeaders = getStartResponseHeaders({ router })
-          const response = await cb({
-            request,
-            router,
-            responseHeaders,
-          })
-
-          return response
+          // Server Routes did not produce a response, so fallback to normal SSR matching using the router
+          const routerResponse = await executeRouter()
+          return routerResponse
         } catch (err) {
           if (err instanceof Response) {
             return err
@@ -232,7 +279,7 @@ export function createStartHandler<TRouter extends AnyRouter>({
           !response.options.to.startsWith('/')
         ) {
           throw new Error(
-            `Server side redirects must use absolute paths via the 'href' or 'to' options. Received: ${JSON.stringify(response.options)}`,
+            `Server side redirects must use absolute paths via the 'href' or 'to' options. The redirect() method's "to" property accepts an internal path only. Use the "href" property to provide an external URL. Received: ${JSON.stringify(response.options)}`,
           )
         }
 
@@ -275,78 +322,112 @@ export function createStartHandler<TRouter extends AnyRouter>({
   }
 }
 
-async function handleServerRoutes({
-  routeTree,
-  request,
-  basePath,
-}: {
-  routeTree: AnyServerRouteWithTypes
+async function handleServerRoutes(opts: {
+  router: AnyRouter
+  processedServerRouteTree: ProcessRouteTreeResult<AnyServerRouteWithTypes>
   request: Request
   basePath: string
+  executeRouter: () => Promise<Response>
 }) {
-  // TODO only process server route tree once, not per request
-  const { flatRoutes, routesById, routesByPath } = processRouteTree({
-    routeTree,
-    initRoute: (route, i) => {
-      route.init({
-        originalIndex: i,
-      })
-    },
-  })
-
-  const url = new URL(request.url)
+  const url = new URL(opts.request.url)
   const pathname = url.pathname
 
-  // TODO history seems not to be needed, we can just use the pathname
-  const history = createMemoryHistory({
-    initialEntries: [pathname],
+  const serverTreeResult = getMatchedRoutes<AnyServerRouteWithTypes>({
+    pathname,
+    basepath: opts.basePath,
+    caseSensitive: true,
+    routesByPath: opts.processedServerRouteTree.routesByPath,
+    routesById: opts.processedServerRouteTree.routesById,
+    flatRoutes: opts.processedServerRouteTree.flatRoutes,
   })
 
-  const { matchedRoutes, foundRoute, routeParams } =
-    getMatchedRoutes<AnyServerRouteWithTypes>({
-      pathname: history.location.pathname,
-      basepath: basePath,
-      caseSensitive: true,
-      routesByPath,
-      routesById,
-      flatRoutes,
-    })
+  const routeTreeResult = opts.router.getMatchedRoutes(pathname, undefined)
 
   let response: Response | undefined
+  let matchedRoutes: Array<AnyServerRouteWithTypes> = []
+  matchedRoutes = serverTreeResult.matchedRoutes
+  // check if the app route tree found a match that is deeper than the server route tree
+  if (routeTreeResult.foundRoute) {
+    if (
+      serverTreeResult.matchedRoutes.length <
+      routeTreeResult.matchedRoutes.length
+    ) {
+      const closestCommon = [...routeTreeResult.matchedRoutes]
+        .reverse()
+        .find((r) => {
+          return opts.processedServerRouteTree.routesById[r.id] !== undefined
+        })
+      if (closestCommon) {
+        // walk up the tree and collect all parents
+        let routeId = closestCommon.id
+        matchedRoutes = []
+        do {
+          const route = opts.processedServerRouteTree.routesById[routeId]
+          if (!route) {
+            break
+          }
+          matchedRoutes.push(route)
+          routeId = route.parentRoute?.id
+        } while (routeId)
 
-  if (foundRoute && foundRoute.id !== rootRouteId) {
-    // We've found a server route that matches the request, so we can call it.
-    // TODO: Get the input type-signature correct
-    // TODO: Perform the middlewares?
-    // TODO: Error handling? What happens when its `throw redirect()` vs `throw new Error()`?
-
-    const method = Object.keys(foundRoute.options.methods).find(
-      (method) => method.toLowerCase() === request.method.toLowerCase(),
-    )
-
-    if (method) {
-      const handler = foundRoute.options.methods[method]
-
-      if (handler) {
-        const middlewares = flattenMiddlewares(
-          matchedRoutes.flatMap((r) => r.options.middleware).filter(Boolean),
-        ).map((d) => d.options.server)
-
-        middlewares.push(handlerToMiddleware(handler) as TODO)
+        matchedRoutes.reverse()
+      }
+    }
+  }
 
-        // TODO: This is starting to feel too much like a server function
-        // Do generalize the existing middleware execution? Or do we need to
-        // build a new middleware execution system for server routes?
-        const ctx = await executeMiddleware(middlewares, {
-          request,
-          context: {},
-          params: routeParams,
-          pathname: history.location.pathname,
-        })
+  if (matchedRoutes.length) {
+    // We've found a server route that (partially) matches the request, so we can call it.
+    // TODO: Error handling? What happens when its `throw redirect()` vs `throw new Error()`?
 
-        response = ctx.response
+    const middlewares = flattenMiddlewares(
+      matchedRoutes.flatMap((r) => r.options.middleware).filter(Boolean),
+    ).map((d) => d.options.server)
+
+    if (serverTreeResult.foundRoute?.options.methods) {
+      const method = Object.keys(
+        serverTreeResult.foundRoute.options.methods,
+      ).find(
+        (method) => method.toLowerCase() === opts.request.method.toLowerCase(),
+      )
+
+      if (method) {
+        const handler = serverTreeResult.foundRoute.options.methods[method]
+        if (handler) {
+          if (typeof handler === 'function') {
+            middlewares.push(handlerToMiddleware(handler) as TODO)
+          } else {
+            if (
+              handler._options.middlewares &&
+              handler._options.middlewares.length
+            ) {
+              middlewares.push(
+                ...flattenMiddlewares(handler._options.middlewares as any).map(
+                  (d) => d.options.server,
+                ),
+              )
+            }
+            if (handler._options.handler) {
+              middlewares.push(handlerToMiddleware(handler._options.handler))
+            }
+          }
+        }
       }
     }
+
+    // eventually, execute the router
+    middlewares.push(handlerToMiddleware(opts.executeRouter))
+
+    // TODO: This is starting to feel too much like a server function
+    // Do generalize the existing middleware execution? Or do we need to
+    // build a new middleware execution system for server routes?
+    const ctx = await executeMiddleware(middlewares, {
+      request: opts.request,
+      context: {},
+      params: serverTreeResult.routeParams,
+      pathname,
+    })
+
+    response = ctx.response
   }
 
   // We return the matched routes too so if
@@ -356,11 +437,21 @@ async function handleServerRoutes({
 }
 
 function handlerToMiddleware(
-  handler: AnyServerRouteWithTypes['options']['methods'][string],
+  handler: ServerRouteMethodHandlerFn<
+    AnyServerRouteWithTypes,
+    any,
+    any,
+    any,
+    any
+  >,
 ) {
-  return async ({ next: _next, ...rest }: TODO) => ({
-    response: await handler(rest),
-  })
+  return async ({ next: _next, ...rest }: TODO) => {
+    const response = await handler(rest)
+    if (response) {
+      return { response }
+    }
+    return _next(rest)
+  }
 }
 
 function executeMiddleware(middlewares: TODO, ctx: TODO) {
@@ -376,7 +467,14 @@ function executeMiddleware(middlewares: TODO, ctx: TODO) {
       // Allow the middleware to call the next middleware in the chain
       next: async (nextCtx: TODO) => {
         // Allow the caller to extend the context for the next middleware
-        const nextResult = await next({ ...ctx, ...nextCtx })
+        const nextResult = await next({
+          ...ctx,
+          ...nextCtx,
+          context: {
+            ...ctx.context,
+            ...(nextCtx?.context || {}),
+          },
+        })
 
         // Merge the result into the context\
         return Object.assign(ctx, handleCtxResult(nextResult))

package/src/global.d.ts

@@ -1,6 +1,14 @@
 declare global {
-  // eslint-disable-next-line no-var
-  var TSS_INJECTED_HEAD_SCRIPTS: string | undefined
+  namespace NodeJS {
+    interface ProcessEnv {
+      TSS_APP_BASE?: string
+      TSS_SERVER_FN_BASE?: string
+      TSS_OUTPUT_PUBLIC_DIR?: string
+      TSS_SHELL?: 'true' | 'false'
+      TSS_PRERENDERING?: 'true' | 'false'
+      TSS_DEV_SERVER?: 'true' | 'false'
+    }
+  }
 }
 
 export {}

package/src/index.tsx

@@ -1,22 +1,18 @@
+export { createStartHandler } from './createStartHandler'
+export type { CustomizeStartHandler } from './createStartHandler'
+
 export {
+  attachRouterServerSsrUtils,
+  createRequestHandler,
+  defineHandlerCallback,
   transformReadableStreamWithRouter,
   transformPipeableStreamWithRouter,
-} from './transformStreamWithRouter'
+} from '@tanstack/router-core/ssr/server'
+export type { HandlerCallback } from '@tanstack/router-core/ssr/server'
 
-export {
-  getStartResponseHeaders,
-  createStartHandler,
-} from './createStartHandler'
-export type { CustomizeStartHandler } from './createStartHandler'
-export { createRequestHandler } from './createRequestHandler'
-
-export { defineHandlerCallback } from './handlerCallback'
-export type { HandlerCallback } from './handlerCallback'
-
-export { attachRouterServerSsrUtils, dehydrateRouter } from './ssr-server'
 export { handleServerAction } from './server-functions-handler'
 
-export * from './h3'
+export * from './request-response'
 
 export {
   createServerRoute,
@@ -26,6 +22,39 @@ export {
 export type {
   CreateServerFileRoute,
   ServerFileRoutesByPath,
+  ServerRouteOptions,
+  ServerRouteManifest,
+  ServerRouteAddFileChildrenFn,
+  ServerRouteMethodBuilderOptions,
+  AnyServerRouteWithTypes,
+  ServerRouteWithTypes,
+  ServerRouteTypes,
+  ResolveAllServerContext,
+  AnyServerRoute,
+  ServerRoute,
+  ServerRouteMiddleware,
+  ServerRouteAfterMiddleware,
+  ServerRouteMethods,
+  ServerRouteMethodsOptions,
+  ServerRouteMethodsRecord,
+  ServerRouteMethodRecordValue,
+  ServerRouteVerb,
+  ServerRouteMethodHandlerFn,
+  ServerRouteMethodHandlerCtx,
+  MergeMethodMiddlewares,
+  AssignAllMethodContext,
+  AnyRouteMethodsBuilder,
+  ServerRouteMethodBuilder,
+  ServerRouteMethodBuilderWithTypes,
+  ServerRouteMethodBuilderTypes,
+  ServerRouteMethodBuilderMiddleware,
+  ServerRouteMethodBuilderAfterMiddleware,
+  ServerRouteMethodBuilderHandler,
+  ServerRouteMethodBuilderAfterHandler,
+  ServerRouteMethod,
+  ServerRouteAfterMethods,
 } from './serverRoute'
 
 export * from './virtual-modules'
+
+export { HEADERS } from './constants'

package/src/loadVirtualModule.ts

@@ -15,6 +15,8 @@ export async function loadVirtualModule<TId extends keyof VirtualModules>(
       return (await import('tanstack-start-manifest:v')) as any
     case VIRTUAL_MODULES.serverFnManifest:
       return (await import('tanstack-start-server-fn-manifest:v')) as any
+    case VIRTUAL_MODULES.injectedHeadScripts:
+      return (await import('tanstack-start-injected-head-scripts:v')) as any
     default:
       throw new Error(`Unknown virtual module: ${id}`)
   }