@tanstack/start-server-core 1.120.7 → 1.121.0-alpha.11

package/src/createStartHandler.ts

@@ -1,82 +1,408 @@
 import { createMemoryHistory } from '@tanstack/history'
-import { mergeHeaders } from '@tanstack/start-client-core'
-import { eventHandler, getResponseHeaders, toWebRequest } from 'h3'
+import {
+  flattenMiddlewares,
+  json,
+  mergeHeaders,
+} from '@tanstack/start-client-core'
+import {
+  getMatchedRoutes,
+  isRedirect,
+  isResolvedRedirect,
+  joinPaths,
+  processRouteTree,
+  rootRouteId,
+  trimPath,
+} from '@tanstack/router-core'
+import { getResponseHeaders, requestHandler } from './h3'
 import { attachRouterServerSsrUtils, dehydrateRouter } from './ssr-server'
+import { getStartManifest } from './router-manifest'
+import { handleServerAction } from './server-functions-handler'
+import type { AnyServerRoute, AnyServerRouteWithTypes } from './serverRoute'
+import type { RequestHandler } from './h3'
+import type { AnyRouter } from '@tanstack/router-core'
 import type { HandlerCallback } from './handlerCallback'
-import type { EventHandlerResponse, H3Event } from 'h3'
-import type { AnyRouter, Manifest } from '@tanstack/router-core'
-
-export type CustomizeStartHandler<
-  TRouter extends AnyRouter,
-  TResponse extends EventHandlerResponse = EventHandlerResponse,
-> = (cb: HandlerCallback<TRouter, TResponse>) => ReturnType<typeof eventHandler>
-
-export function createStartHandler<
-  TRouter extends AnyRouter,
-  TResponse extends EventHandlerResponse = EventHandlerResponse,
->({
+
+type TODO = any
+
+export type CustomizeStartHandler<TRouter extends AnyRouter> = (
+  cb: HandlerCallback<TRouter>,
+) => RequestHandler
+
+export function getStartResponseHeaders(opts: { router: AnyRouter }) {
+  let headers = mergeHeaders(
+    getResponseHeaders(),
+    {
+      '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,
-  getRouterManifest,
 }: {
   createRouter: () => TRouter
-  getRouterManifest?: () => Manifest | Promise<Manifest>
-}): CustomizeStartHandler<TRouter, TResponse> {
+}): CustomizeStartHandler<TRouter> {
   return (cb) => {
-    return eventHandler(async (event) => {
-      const request = toWebRequest(event)
+    const originalFetch = globalThis.fetch
+
+    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.
+      // When we encounter similar requests, we can assume that the
+      // user wants to use the same origin as the current request.
+      globalThis.fetch = async function (input, init) {
+        function resolve(url: URL, requestOptions: RequestInit | undefined) {
+          const fetchRequest = new Request(url, requestOptions)
+          return startRequestResolver({ request: fetchRequest })
+        }
+
+        function getOrigin() {
+          return (
+            request.headers.get('Origin') ||
+            request.headers.get('Referer') ||
+            'http://localhost'
+          )
+        }
+
+        if (typeof input === 'string' && input.startsWith('/')) {
+          // e.g: fetch('/api/data')
+          const url = new URL(input, getOrigin())
+          return resolve(url, init)
+        } else if (
+          typeof input === 'object' &&
+          'url' in input &&
+          typeof input.url === 'string' &&
+          input.url.startsWith('/')
+        ) {
+          // e.g: fetch(new Request('/api/data'))
+          const url = new URL(input.url, getOrigin())
+          return resolve(url, init)
+        }
+
+        // If not, it should just use the original fetch
+        return originalFetch(input, init)
+      }
 
       const url = new URL(request.url)
       const href = url.href.replace(url.origin, '')
 
-      // Create a history for the router
+      // Create a history for the client-side router
       const history = createMemoryHistory({
         initialEntries: [href],
       })
 
+      // Create the client-side router
       const router = createRouter()
 
-      attachRouterServerSsrUtils(router, await getRouterManifest?.())
+      // Attach the server-side SSR utils to the client-side router
+      attachRouterServerSsrUtils(router, getStartManifest())
 
-      // Update the router with the history and context
+      // Update the client-side router with the history and context
       router.update({
         history,
       })
 
-      await router.load()
+      const response = await (async () => {
+        try {
+          if (!process.env.TSS_SERVER_FN_BASE) {
+            throw new Error(
+              'tanstack/start-server-core: TSS_SERVER_FN_BASE must be defined in your environment for createStartHandler()',
+            )
+          }
 
-      dehydrateRouter(router)
+          // First, let's attempt to handle server functions
+          // Add trailing slash to sanitise user defined TSS_SERVER_FN_BASE
+          const serverFnBase = joinPaths([
+            '/',
+            trimPath(process.env.TSS_SERVER_FN_BASE),
+            '/',
+          ])
+          if (href.startsWith(serverFnBase)) {
+            return await handleServerAction({ request })
+          }
 
-      const responseHeaders = getStartResponseHeaders({ event, router })
-      const response = await cb({
-        request,
-        router,
-        responseHeaders,
-      })
+          // Then move on to attempting to load server routes
+          const serverRouteTreeModule = await (async () => {
+            try {
+              return (await import(
+                // @ts-expect-error
+                'tanstack-start-server-routes-manifest:v'
+              )) as { routeTree: AnyServerRoute }
+            } catch (e) {
+              console.log(e)
+              return undefined
+            }
+          })()
+
+          // If we have a server route tree, then we try matching to see if we have a
+          // server route that matches the request.
+          if (serverRouteTreeModule) {
+            const [_matchedRoutes, response] = await handleServerRoutes({
+              routeTree: serverRouteTreeModule.routeTree,
+              request,
+            })
+
+            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
+        } catch (err) {
+          if (err instanceof Response) {
+            return err
+          }
+
+          throw err
+        }
+      })()
+
+      if (isRedirect(response)) {
+        if (isResolvedRedirect(response)) {
+          if (request.headers.get('x-tsr-redirect') === 'manual') {
+            return json(
+              {
+                ...response.options,
+                isSerializedRedirect: true,
+              },
+              {
+                headers: response.headers,
+              },
+            )
+          }
+          return response
+        }
+        if (
+          response.options.to &&
+          typeof response.options.to === 'string' &&
+          !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)}`,
+          )
+        }
+
+        if (
+          ['params', 'search', 'hash'].some(
+            (d) => typeof (response.options as any)[d] === 'function',
+          )
+        ) {
+          throw new Error(
+            `Server side redirects must use static search, params, and hash values and do not support functional values. Received functional values for: ${Object.keys(
+              response.options,
+            )
+              .filter((d) => typeof (response.options as any)[d] === 'function')
+              .map((d) => `"${d}"`)
+              .join(', ')}`,
+          )
+        }
+
+        const redirect = router.resolveRedirect(response)
+
+        if (request.headers.get('x-tsr-redirect') === 'manual') {
+          return json(
+            {
+              ...response.options,
+              isSerializedRedirect: true,
+            },
+            {
+              headers: response.headers,
+            },
+          )
+        }
+
+        return redirect
+      }
 
       return response
-    })
+    }
+
+    return requestHandler(startRequestResolver)
   }
 }
 
-function getStartResponseHeaders(opts: { event: H3Event; router: AnyRouter }) {
-  let headers = mergeHeaders(
-    getResponseHeaders(opts.event),
-    (opts.event as any).___ssrRpcResponseHeaders,
-    {
-      'Content-Type': 'text/html; charset=UTF-8',
+async function handleServerRoutes({
+  routeTree,
+  request,
+}: {
+  routeTree: AnyServerRouteWithTypes
+  request: Request
+}) {
+  const { flatRoutes, routesById, routesByPath } = processRouteTree({
+    routeTree,
+    initRoute: (route, i) => {
+      route.init({
+        originalIndex: i,
+      })
     },
-    ...opts.router.state.matches.map((match) => {
-      return match.headers
-    }),
-  )
+  })
 
-  // Handle Redirects
-  const { redirect } = opts.router.state
+  const url = new URL(request.url)
+  const pathname = url.pathname
 
-  if (redirect) {
-    headers = mergeHeaders(headers, redirect.headers, {
-      Location: redirect.href,
+  const history = createMemoryHistory({
+    initialEntries: [pathname],
+  })
+
+  const { matchedRoutes, foundRoute, routeParams } =
+    getMatchedRoutes<AnyServerRouteWithTypes>({
+      pathname: history.location.pathname,
+      basepath: '/',
+      caseSensitive: true,
+      routesByPath,
+      routesById,
+      flatRoutes,
     })
+
+  let response: Response | undefined
+
+  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)
+
+        // 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,
+        })
+
+        response = ctx.response
+      }
+    }
   }
-  return headers
+
+  // We return the matched routes too so if
+  // the app router happens to match the same path,
+  // it can use any request middleware from server routes
+  return [matchedRoutes, response] as const
+}
+
+function handlerToMiddleware(
+  handler: AnyServerRouteWithTypes['options']['methods'][string],
+) {
+  return async ({ next: _next, ...rest }: TODO) => ({
+    response: await handler(rest),
+  })
+}
+
+function executeMiddleware(middlewares: TODO, ctx: TODO) {
+  let index = -1
+
+  const next = async (ctx: TODO) => {
+    index++
+    const middleware = middlewares[index]
+    if (!middleware) return ctx
+
+    const result = await middleware({
+      ...ctx,
+      // 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 })
+
+        // Merge the result into the context\
+        return Object.assign(ctx, handleCtxResult(nextResult))
+      },
+      // Allow the middleware result to extend the return context
+    }).catch((err: TODO) => {
+      if (isSpecialResponse(err)) {
+        return {
+          response: err,
+        }
+      }
+
+      throw err
+    })
+
+    // Merge the middleware result into the context, just in case it
+    // returns a partial context
+    return Object.assign(ctx, handleCtxResult(result))
+  }
+
+  return handleCtxResult(next(ctx))
+}
+
+function handleCtxResult(result: TODO) {
+  if (isSpecialResponse(result)) {
+    return {
+      response: result,
+    }
+  }
+
+  return result
+}
+
+function isSpecialResponse(err: TODO) {
+  return isResponse(err) || isRedirect(err)
+}
+
+function isResponse(response: Response): response is Response {
+  return response instanceof Response
 }

package/src/h3.ts

@@ -11,7 +11,9 @@ import {
   clearResponseHeaders as _clearResponseHeaders,
   clearSession as _clearSession,
   defaultContentType as _defaultContentType,
+  defineEventHandler as _defineEventHandler,
   deleteCookie as _deleteCookie,
+  eventHandler as _eventHandler,
   fetchWithEvent as _fetchWithEvent,
   getCookie as _getCookie,
   getHeader as _getHeader,
@@ -61,20 +63,24 @@ import {
   setResponseHeader as _setResponseHeader,
   setResponseHeaders as _setResponseHeaders,
   setResponseStatus as _setResponseStatus,
+  toWebRequest as _toWebRequest,
   unsealSession as _unsealSession,
   updateSession as _updateSession,
   useSession as _useSession,
   writeEarlyHints as _writeEarlyHints,
 } from 'h3'
-import { getContext as getUnctxContext } from 'unctx'
+
 import type {
   Encoding,
+  EventHandler,
   HTTPHeaderName,
   InferEventInput,
   _RequestMiddleware,
   _ResponseMiddleware,
 } from 'h3'
 
+const eventStorage = new AsyncLocalStorage()
+
 function _setContext(event: H3Event, key: string, value: any) {
   event.context[key] = value
 }
@@ -90,46 +96,38 @@ export function defineMiddleware(options: {
   return options
 }
 
-function toWebRequestH3(event: H3Event) {
-  /**
-   * @type {ReadableStream | undefined}
-   */
-  let readableStream: ReadableStream | undefined
+// function toWebRequestH3(event: H3Event) {
+//   /**
+//    * @type {ReadableStream | undefined}
+//    */
+//   let readableStream: ReadableStream | undefined
 
-  const url = getRequestURL(event)
-  const base = {
-    // @ts-ignore Undici option
-    duplex: 'half',
-    method: event.method,
-    headers: event.headers,
-  }
-
-  if ((event.node.req as any).body instanceof ArrayBuffer) {
-    return new Request(url, {
-      ...base,
-      body: (event.node.req as any).body,
-    })
-  }
+//   const url = _getRequestURL(event)
+//   const base = {
+//     // @ts-ignore Undici option
+//     duplex: 'half',
+//     method: event.method,
+//     headers: event.headers,
+//   }
 
-  return new Request(url, {
-    ...base,
-    get body() {
-      if (readableStream) {
-        return readableStream
-      }
-      readableStream = getRequestWebStream(event)
-      return readableStream
-    },
-  })
-}
+//   if ((event.node.req as any).body instanceof ArrayBuffer) {
+//     return new Request(url, {
+//       ...base,
+//       body: (event.node.req as any).body,
+//     })
+//   }
 
-export function toWebRequest(event: H3Event) {
-  event.web ??= {
-    request: toWebRequestH3(event),
-    url: getRequestURL(event),
-  }
-  return event.web.request
-}
+//   return new Request(url, {
+//     ...base,
+//     get body() {
+//       if (readableStream) {
+//         return readableStream
+//       }
+//       readableStream = _getRequestWebStream(event)
+//       return readableStream
+//     },
+//   })
+// }
 
 export {
   H3Error,
@@ -140,7 +138,6 @@ export {
   createAppEventHandler,
   createEvent,
   createRouter,
-  defineEventHandler,
   defineLazyEventHandler,
   defineNodeListener,
   defineNodeMiddleware,
@@ -148,7 +145,6 @@ export {
   defineResponseMiddleware,
   dynamicEventHandler,
   defineWebSocket,
-  eventHandler,
   splitCookiesString,
   fromNodeMiddleware,
   fromPlainHandler,
@@ -163,6 +159,7 @@ export {
   toNodeListener,
   toPlainHandler,
   toWebHandler,
+  toWebRequest,
   isCorsOriginAllowed,
   isStream,
   createError,
@@ -221,8 +218,33 @@ export {
   type _ResponseMiddleware,
 } from 'h3'
 
-function getHTTPEvent() {
-  return getEvent()
+export function defineEventHandler(handler: EventHandler) {
+  return _defineEventHandler((event) => {
+    return runWithEvent(event, () => handler(event))
+  })
+}
+
+export function eventHandler(handler: EventHandler) {
+  return _eventHandler((event) => {
+    return runWithEvent(event, () => handler(event))
+  })
+}
+
+export async function runWithEvent<T>(
+  event: H3Event,
+  fn: () => T | Promise<T>,
+): Promise<T> {
+  return eventStorage.run(event, fn)
+}
+
+export function getEvent() {
+  const event = eventStorage.getStore() as H3Event | undefined
+  if (!event) {
+    throw new Error(
+      `No HTTPEvent found in AsyncLocalStorage. Make sure you are using the function within the server runtime.`,
+    )
+  }
+  return event
 }
 
 export const HTTPEventSymbol = Symbol('$HTTPEvent')
@@ -262,12 +284,7 @@ function createWrapperFunction<TFn extends (...args: Array<any>) => any>(
   return function (...args: Array<any>) {
     const event = args[0]
     if (!isEvent(event)) {
-      if (!(globalThis as any).app.config.server.experimental?.asyncContext) {
-        throw new Error(
-          'AsyncLocalStorage was not enabled. Use the `server.experimental.asyncContext: true` option in your app configuration to enable it. Or, pass the instance of HTTPEvent that you have as the first argument to the function.',
-        )
-      }
-      args.unshift(getHTTPEvent())
+      args.unshift(getEvent())
     } else {
       args[0] =
         event instanceof H3Event || (event as any).__is_event__
@@ -463,37 +480,13 @@ export const readValidatedBody: PrependOverload<
 export const removeResponseHeader = createWrapperFunction(_removeResponseHeader)
 export const getContext = createWrapperFunction(_getContext)
 export const setContext = createWrapperFunction(_setContext)
-
 export const clearResponseHeaders = createWrapperFunction(_clearResponseHeaders)
+export const getWebRequest = createWrapperFunction(_toWebRequest)
 
-export const getWebRequest = createWrapperFunction(toWebRequest)
-
-export { createApp as createServer } from 'h3'
-
-function getNitroAsyncContext() {
-  const nitroAsyncContext = getUnctxContext('nitro-app', {
-    asyncContext: (globalThis as any).app.config.server.experimental
-      ?.asyncContext
-      ? true
-      : false,
-    AsyncLocalStorage,
-  })
-
-  return nitroAsyncContext
-}
-
-export function getEvent() {
-  const event = (getNitroAsyncContext().use() as any).event as
-    | H3Event
-    | undefined
-  if (!event) {
-    throw new Error(
-      `No HTTPEvent found in AsyncLocalStorage. Make sure you are using the function within the server runtime.`,
-    )
-  }
-  return event
-}
+export type RequestHandler = (ctx: {
+  request: Request
+}) => Promise<Response> | Response
 
-export async function handleHTTPEvent(event: H3Event) {
-  return await (globalThis as any).$handle(event)
+export function requestHandler(handler: RequestHandler) {
+  return handler
 }