@tanstack/start-server-core 1.121.10 → 1.121.12

package/src/createStartHandler.ts

@@ -10,7 +10,6 @@ import {
   isResolvedRedirect,
   joinPaths,
   processRouteTree,
-  rootRouteId,
   trimPath,
 } from '@tanstack/router-core'
 import { getResponseHeaders, requestHandler } from './h3'
@@ -19,9 +18,18 @@ 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 {
+  AnyServerRoute,
+  AnyServerRouteWithTypes,
+  ServerRouteMethodHandlerFn,
+} from './serverRoute'
 import type { RequestHandler } from './h3'
-import type { AnyRouter } from '@tanstack/router-core'
+import type {
+  AnyRoute,
+  AnyRouter,
+  Manifest,
+  ProcessRouteTreeResult,
+} from '@tanstack/router-core'
 import type { HandlerCallback } from './handlerCallback'
 
 type TODO = any
@@ -30,8 +38,8 @@ export type CustomizeStartHandler<TRouter extends AnyRouter> = (
   cb: HandlerCallback<TRouter>,
 ) => RequestHandler
 
-export function getStartResponseHeaders(opts: { router: AnyRouter }) {
-  let headers = mergeHeaders(
+function getStartResponseHeaders(opts: { router: AnyRouter }) {
+  const headers = mergeHeaders(
     getResponseHeaders(),
     {
       'Content-Type': 'text/html; charset=UTF-8',
@@ -40,12 +48,6 @@ export function getStartResponseHeaders(opts: { router: AnyRouter }) {
       return match.headers
     }),
   )
-  // Handle Redirects
-  const { redirect } = opts.router.state
-
-  if (redirect) {
-    headers = mergeHeaders(headers, redirect.headers)
-  }
   return headers
 }
 
@@ -54,7 +56,14 @@ export function createStartHandler<TRouter extends AnyRouter>({
 }: {
   createRouter: () => TRouter
 }): CustomizeStartHandler<TRouter> {
-  let serverRouteTree: AnyServerRoute | undefined | null = null
+  let routeTreeModule: {
+    serverRouteTree: AnyServerRoute | undefined
+    routeTree: AnyRoute | undefined
+  } | null = null
+  let startRoutesManifest: Manifest | null = null
+  let processedServerRouteTree:
+    | ProcessRouteTreeResult<AnyServerRouteWithTypes>
+    | undefined = undefined
 
   return (cb) => {
     const originalFetch = globalThis.fetch
@@ -101,23 +110,16 @@ export function createStartHandler<TRouter extends AnyRouter>({
       const url = new URL(request.url)
       const href = 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 = 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
       router.update({
         history,
       })
@@ -141,67 +143,96 @@ 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)
             }
           }
 
-          // 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) {
-            const [_matchedRoutes, response] = await handleServerRoutes({
-              routeTree: serverRouteTree,
-              request,
-              basePath: APP_BASE,
-            })
+          async function executeRouter() {
+            const requestAcceptHeader = request.headers.get('Accept') || '*/*'
+            const splitRequestAcceptHeader = requestAcceptHeader.split(',')
 
-            if (response) return response
-          }
+            const supportedMimeTypes = ['*/*', 'text/html']
+            const isRouterAcceptSupported = supportedMimeTypes.some(
+              (mimeType) =>
+                splitRequestAcceptHeader.some((acceptedMimeType) =>
+                  acceptedMimeType.trim().startsWith(mimeType),
+                ),
+            )
 
-          const requestAcceptHeader = request.headers.get('Accept') || '*/*'
-          const splitRequestAcceptHeader = requestAcceptHeader.split(',')
+            if (!isRouterAcceptSupported) {
+              return json(
+                {
+                  error: 'Only HTML requests are supported here',
+                },
+                {
+                  status: 500,
+                },
+              )
+            }
 
-          const supportedMimeTypes = ['*/*', 'text/html']
-          const isRouterAcceptSupported = supportedMimeTypes.some((mimeType) =>
-            splitRequestAcceptHeader.some((acceptedMimeType) =>
-              acceptedMimeType.trim().startsWith(mimeType),
-            ),
-          )
+            // if the startRoutesManifest is not loaded yet, load it once
+            if (startRoutesManifest === null) {
+              startRoutesManifest = await getStartManifest({
+                basePath: APP_BASE,
+              })
+            }
 
-          if (!isRouterAcceptSupported) {
-            return json(
-              {
-                error: 'Only HTML requests are supported here',
-              },
-              {
-                status: 500,
-              },
-            )
-          }
+            // Attach the server-side SSR utils to the client-side router
+            attachRouterServerSsrUtils(router, startRoutesManifest)
 
-          // If no Server Routes were found, so fallback to normal SSR matching using
-          // the router
+            await router.load()
 
-          await router.load()
+            // If there was a redirect, skip rendering the page at all
+            if (router.state.redirect) {
+              return router.state.redirect
+            }
 
-          // If there was a redirect, skip rendering the page at all
-          if (router.state.redirect) return router.state.redirect
+            dehydrateRouter(router)
 
-          dehydrateRouter(router)
+            const responseHeaders = getStartResponseHeaders({ router })
+            const response = await cb({
+              request,
+              router,
+              responseHeaders,
+            })
 
-          const responseHeaders = getStartResponseHeaders({ router })
-          const response = await cb({
-            request,
-            router,
-            responseHeaders,
-          })
+            return response
+          }
 
-          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 (processedServerRouteTree) {
+            const [_matchedRoutes, response] = await handleServerRoutes({
+              processedServerRouteTree,
+              router,
+              request,
+              basePath: APP_BASE,
+              executeRouter,
+            })
+
+            if (response) 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
@@ -275,78 +306,97 @@ 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(),
-    )
+        matchedRoutes.reverse()
+      }
+    }
+  }
 
-    if (method) {
-      const handler = foundRoute.options.methods[method]
+  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()`?
 
-      if (handler) {
-        const middlewares = flattenMiddlewares(
-          matchedRoutes.flatMap((r) => r.options.middleware).filter(Boolean),
-        ).map((d) => d.options.server)
+    const middlewares = flattenMiddlewares(
+      matchedRoutes.flatMap((r) => r.options.middleware).filter(Boolean),
+    ).map((d) => d.options.server)
 
-        middlewares.push(handlerToMiddleware(handler) as TODO)
+    if (serverTreeResult.foundRoute?.options.methods) {
+      const method = Object.keys(
+        serverTreeResult.foundRoute.options.methods,
+      ).find(
+        (method) => method.toLowerCase() === opts.request.method.toLowerCase(),
+      )
 
-        // 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 (method) {
+        const handler = serverTreeResult.foundRoute.options.methods[method]
 
-        response = ctx.response
+        if (handler) {
+          middlewares.push(handlerToMiddleware(handler) as TODO)
+        }
       }
     }
+
+    // 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 +406,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) {

package/src/serverRoute.ts

@@ -42,8 +42,8 @@ export interface ServerRouteOptions<
   pathname: TFullPath
   originalIndex: number
   getParentRoute?: () => TParentRoute
-  middleware: Constrain<TMiddlewares, ReadonlyArray<AnyRequestMiddleware>>
-  methods: Record<
+  middleware?: Constrain<TMiddlewares, ReadonlyArray<AnyRequestMiddleware>>
+  methods?: Record<
     string,
     ServerRouteMethodHandlerFn<TParentRoute, TFullPath, TMiddlewares, any, any>
   >