refactor middleware

.changeset/new-shirts-bake.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start": minor
+---
+
+refactor middleware. mainly fix onResponse

packages/start/src/middleware/index.ts

@@ -1,57 +1,45 @@
 // @refresh skip
 
-import type { H3Event, Middleware } from "h3";
+import { H3Event, type Middleware, onResponse } from "h3";
 import { getFetchEvent } from "../server/fetchEvent.ts";
 import type { FetchEvent } from "../server/types.ts";
 
-/** Function responsible for receiving an observable [operation]{@link Operation} and returning a [result]{@link OperationResult}. */
+export type MiddlewareFn = (event: FetchEvent) => unknown;
 
-export type MiddlewareFn = (event: FetchEvent) => Promise<unknown> | unknown;
-/** This composes an array of Exchanges into a single ExchangeIO function */
-
-export type RequestMiddleware = (
-  event: FetchEvent,
-) => Response | Promise<Response> | void | Promise<void> | Promise<void | Response>;
-
-// copy-pasted from h3/dist/index.d.ts
-type EventHandlerResponse<T = any> = T | Promise<T>;
-type ResponseMiddlewareResponseParam = { body?: Awaited<EventHandlerResponse> };
+// `unknown` because h3 allows any response type like string, json, etc. not just Response
+export type RequestMiddleware = (event: FetchEvent) => unknown;
 
 export type ResponseMiddleware = (
   event: FetchEvent,
-  response: ResponseMiddlewareResponseParam,
-) => Response | Promise<Response> | void | Promise<void>;
+  response: Response,
+) => ReturnType<Parameters<typeof onResponse>[0]>;
 
 function wrapRequestMiddleware(onRequest: RequestMiddleware) {
   return async (h3Event: H3Event) => {
+    // h3 onRequest doesn't allow returning a response, but we will for backwards compatibility with start v1
     const fetchEvent = getFetchEvent(h3Event);
     const response = await onRequest(fetchEvent);
     if (response) return response;
   };
 }
 
 function wrapResponseMiddleware(onBeforeResponse: ResponseMiddleware): Middleware {
-  return async (h3Event, next) => {
-    const resp = await next();
-
+  return onResponse(async (response, h3Event) => {
     const fetchEvent = getFetchEvent(h3Event);
-    const mwResponse = await onBeforeResponse(fetchEvent, {
-      body: (resp as any)?.body,
-    });
+    const mwResponse = await onBeforeResponse(fetchEvent, response.clone());
     if (mwResponse) return mwResponse;
-  };
+  });
 }
 
 export function createMiddleware(
-  args:
+  args?:
     | {
-        /** @deprecated Use H3 `Middleware` */
         onRequest?: RequestMiddleware | RequestMiddleware[] | undefined;
-        /** @deprecated Use H3 `Middleware` */
         onBeforeResponse?: ResponseMiddleware | ResponseMiddleware[] | undefined;
       }
     | Middleware[],
 ): Middleware[] {
+  if (!args) return [];
   if (Array.isArray(args)) return args;
 
   const mw: Middleware[] = [];

packages/start/src/server/handler.ts

@@ -21,7 +21,7 @@ export function createBaseHandler(
   options: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>) = {},
 ) {
   const handler = defineHandler({
-    middleware: middleware.length ? middleware.map(decorateMiddleware) : undefined,
+    middleware: middleware?.length ? middleware.map(decorateMiddleware) : undefined,
     handler: decorateHandler(async (e: H3Event) => {
       const event = getRequestEvent()!;
       const url = new URL(event.request.url);

packages/start/src/virtual.d.ts

@@ -23,5 +23,5 @@ declare module "solid-start:app" {
 
 declare module "solid-start:middleware" {
   type MaybeArray<T> = T | Array<T>;
-  export default Middleware as import("h3").Middleware[];
+  export default Middleware as import("h3").Middleware[] | undefined;
 }