@depup/msw 2.13.2-depup.0 → 2.15.0-depup.6

package/src/core/handlers/WebSocketHandler.test.ts

@@ -125,3 +125,61 @@ describe('parse', () => {
     })
   })
 })
+
+describe('test', () => {
+  it('returns true for a matching string', () => {
+    expect(
+      new WebSocketHandler('ws://localhost/ws').test('ws://localhost/ws'),
+    ).toBe(true)
+  })
+
+  it('returns false for a non-matching string', () => {
+    expect(
+      new WebSocketHandler('ws://localhost/ws').test('ws://localhost/other'),
+    ).toBe(false)
+  })
+
+  it('returns true for a relative matching string', () => {
+    expect(
+      new WebSocketHandler('ws://localhost/ws').test('/ws', {
+        baseUrl: 'ws://localhost',
+      }),
+    ).toBe(true)
+  })
+
+  it('returns false for a relative non-matching string', () => {
+    expect(
+      new WebSocketHandler('ws://localhost/ws').test('/other', {
+        baseUrl: 'ws://localhost',
+      }),
+    ).toBe(false)
+  })
+
+  it('returns true for a matching URL', () => {
+    expect(
+      new WebSocketHandler('ws://localhost/ws').test(
+        new URL('ws://localhost/ws'),
+      ),
+    ).toBe(true)
+  })
+
+  it('returns false for a non-matching URL', () => {
+    expect(
+      new WebSocketHandler('ws://localhost/ws').test(
+        new URL('ws://localhost/other'),
+      ),
+    ).toBe(false)
+  })
+
+  it('returns true for a matching HTTP url string', () => {
+    expect(
+      new WebSocketHandler('ws://localhost/ws').test('http://localhost/ws'),
+    ).toBe(true)
+  })
+
+  it('returns false for a non-matching HTTP url string', () => {
+    expect(
+      new WebSocketHandler('ws://localhost/ws').test('http://localhost/other'),
+    ).toBe(false)
+  })
+})

package/src/core/handlers/WebSocketHandler.ts

@@ -57,7 +57,7 @@ export class WebSocketHandler {
   }
 
   public parse(args: {
-    url: URL
+    url: string | URL
     resolutionContext?: WebSocketResolutionContext
   }): WebSocketHandlerParsedResult {
     const clientUrl = new URL(args.url)
@@ -90,22 +90,26 @@ export class WebSocketHandler {
   }
 
   public predicate(args: {
-    url: URL
+    url: string | URL
     parsedResult: WebSocketHandlerParsedResult
   }): boolean {
     return args.parsedResult.match.matches
   }
 
+  public test(
+    url: string | URL,
+    resolutionContext?: WebSocketResolutionContext & { strict?: boolean },
+  ): boolean {
+    return this.#match(url, resolutionContext) != null
+  }
+
   public async run(
     connection: WebSocketConnectionData,
     resolutionContext?: WebSocketResolutionContext,
   ): Promise<WebSocketHandlerConnection | null> {
-    const parsedResult = this.parse({
-      url: connection.client.url,
-      resolutionContext,
-    })
+    const parsedResult = this.#match(connection.client.url, resolutionContext)
 
-    if (!this.predicate({ url: connection.client.url, parsedResult })) {
+    if (parsedResult == null) {
       return null
     }
 
@@ -114,7 +118,7 @@ export class WebSocketHandler {
       params: parsedResult.match.params || {},
     }
 
-    if (resolutionContext?.[kAutoConnect]) {
+    if (resolutionContext?.[kAutoConnect] ?? true) {
       if (this[kConnect](resolvedConnection)) {
         return resolvedConnection
       }
@@ -125,6 +129,31 @@ export class WebSocketHandler {
     return resolvedConnection
   }
 
+  #match(
+    url: string | URL,
+    resolutionContext?: WebSocketResolutionContext & { strict?: boolean },
+  ): WebSocketHandlerParsedResult | null {
+    const resolvedUrl = this.#resolveWebSocketUrl(
+      url.toString(),
+      resolutionContext?.baseUrl,
+    )
+    const parsedResult = this.parse({
+      url: resolvedUrl,
+      resolutionContext,
+    })
+
+    if (
+      this.predicate({
+        url,
+        parsedResult,
+      })
+    ) {
+      return parsedResult
+    }
+
+    return null
+  }
+
   protected [kConnect](connection: WebSocketHandlerConnection): boolean {
     // Support `event.stopPropagation()` for various client/server events.
     connection.client.addEventListener(

package/src/core/http.ts

@@ -1,13 +1,13 @@
 import {
-  DefaultBodyType,
-  RequestHandlerOptions,
-  ResponseResolver,
+  type DefaultBodyType,
+  type RequestHandlerOptions,
+  type ResponseResolver,
 } from './handlers/RequestHandler'
 import {
   HttpMethods,
   HttpHandler,
-  HttpRequestResolverExtras,
-  HttpRequestPredicate,
+  type HttpRequestResolverExtras,
+  type HttpRequestPredicate,
 } from './handlers/HttpHandler'
 import type { PathParams } from './utils/matching/matchRequestUrl'
 

package/src/core/sse.ts

@@ -1,5 +1,6 @@
 import { invariant } from 'outvariant'
-import { Emitter } from 'strict-event-emitter'
+import { DeferredPromise } from '@open-draft/deferred-promise'
+import { Emitter, TypedEvent } from 'rettime'
 import type { ResponseResolver } from './handlers/RequestHandler'
 import {
   HttpHandler,
@@ -79,7 +80,7 @@ const SSE_RESPONSE_INIT: ResponseInit = {
 class ServerSentEventHandler<
   EventMap extends EventMapConstraint,
 > extends HttpHandler {
-  #emitter: Emitter<ServerSentEventClientEventMap>
+  #loggableRequests: WeakSet<Request>
 
   constructor(path: Path, resolver: ServerSentEventResolver<EventMap, any>) {
     invariant(
@@ -89,29 +90,37 @@ class ServerSentEventHandler<
     )
 
     super('GET', path, async (info) => {
-      const stream = new ReadableStream({
-        start: async (controller) => {
-          const client = new ServerSentEventClient<EventMap>({
-            controller,
-            emitter: this.#emitter,
-          })
-          const server = new ServerSentEventServer({
-            request: info.request,
-            client,
-          })
-
-          await resolver({
-            ...info,
-            client,
-            server,
-          })
-        },
-      })
+      const { client, server, response } = createEventStream<EventMap>(
+        info.request,
+      )
+
+      /**
+       * @note Scope the emitter to this connection so its logging
+       * listeners don't accumulate on the handler across connections.
+       */
+      const emitter = new Emitter<ServerSentEventClientEventMap>()
+      client[kClientEmitter] = emitter
+
+      if (this.#loggableRequests.has(info.request)) {
+        this.#attachClientLogger(info.request, emitter)
+      }
+
+      /**
+       * @note Extend the resolver info via assignment instead of a spread.
+       * Spreading the info would invoke its lazy `finalize` getter,
+       * initializing the finalize machinery for resolvers that never use it.
+       */
+      await resolver(
+        Object.assign(info, {
+          client,
+          server,
+        }),
+      )
 
-      return new Response(stream, SSE_RESPONSE_INIT)
+      return response
     })
 
-    this.#emitter = new Emitter<ServerSentEventClientEventMap>()
+    this.#loggableRequests = new WeakSet()
   }
 
   async predicate(args: {
@@ -140,13 +149,22 @@ class ServerSentEventHandler<
         response: new Response('[streaming]', SSE_RESPONSE_INIT),
       })
 
-      this.#attachClientLogger(args.request, this.#emitter)
+      // Defer attaching the client logger until the resolver runs
+      // and creates a connection-scoped emitter for this request.
+      this.#loggableRequests.add(args.request)
     }
 
     return matches
   }
 
-  async log(_args: { request: Request; response: Response }): Promise<void> {
+  async log(args: { request: Request; response: Response }): Promise<void> {
+    /**
+     * @note Cancel the response stream because it's not needed for logging.
+     * Otherwise, this cloned response remains unconsumed and its original
+     * doesn't propagate stream cancelations at all.
+     */
+    args.response.body?.cancel()
+
     /**
      * @note Skip the default `this.log()` logic so that when this handler is logged
      * upon handling the request, nothing is printed (we log SSE requests early).
@@ -161,16 +179,14 @@ class ServerSentEventHandler<
     const publicUrl = toPublicUrl(request.url)
 
     /* eslint-disable no-console */
-    emitter.on('message', (payload) => {
+    emitter.on('message', ({ data }) => {
       console.groupCollapsed(
-        devUtils.formatMessage(
-          `${getTimestamp()} SSE %s %c⇣%c ${payload.event}`,
-        ),
+        devUtils.formatMessage(`${getTimestamp()} SSE %s %c⇣%c ${data.event}`),
         publicUrl,
         `color:${colors.mocked}`,
         'color:inherit',
       )
-      console.log(payload.frames)
+      console.log(data.frames)
       console.groupEnd()
     })
 
@@ -222,32 +238,26 @@ type ToEventDiscriminatedUnion<T> = Values<{
 }>
 
 type ServerSentEventClientEventMap = {
-  message: [
-    payload: {
-      id?: string
-      event: string
-      data?: unknown
-      frames: Array<string>
-    },
-  ]
-  error: []
-  close: []
+  message: TypedEvent<EventStreamMessage>
+  error: TypedEvent
+  close: TypedEvent
 }
 
+const kClientEmitter = Symbol.for('kClientEmitter')
+
 class ServerSentEventClient<
   EventMap extends EventMapConstraint = { message: unknown },
 > {
+  private [kClientEmitter]?: Emitter<ServerSentEventClientEventMap>
+
   #encoder: TextEncoder
-  #controller: ReadableStreamDefaultController
-  #emitter: Emitter<ServerSentEventClientEventMap>
+  #controller: ReadableStreamDefaultController<Uint8Array>
+  #closed: DeferredPromise<void>
 
-  constructor(args: {
-    controller: ReadableStreamDefaultController
-    emitter: Emitter<ServerSentEventClientEventMap>
-  }) {
+  constructor(controller: ReadableStreamDefaultController<Uint8Array>) {
     this.#encoder = new TextEncoder()
-    this.#controller = args.controller
-    this.#emitter = args.emitter
+    this.#controller = controller
+    this.#closed = new DeferredPromise()
   }
 
   /**
@@ -303,24 +313,52 @@ class ServerSentEventClient<
    * error.
    */
   public error(): void {
+    if (this.#closed.state !== 'pending') {
+      return
+    }
+
     this.#controller.error()
-    this.#emitter.emit('error')
+    this.#closed.resolve()
+    this[kClientEmitter]?.emit(new TypedEvent('error'))
   }
 
   /**
    * Closes the underlying `EventSource`, closing the connection.
    */
   public close(): void {
-    this.#controller.close()
-    this.#emitter.emit('close')
+    if (this.#closed.state !== 'pending') {
+      return
+    }
+
+    try {
+      this.#controller.close()
+      this.#closed.resolve()
+    } catch {
+      //
+    }
+
+    this[kClientEmitter]?.emit(new TypedEvent('close'))
   }
 
-  #sendRetry(retry: number): void {
-    if (typeof retry === 'number') {
-      this.#controller.enqueue(this.#encoder.encode(`retry:${retry}\n\n`))
+  #enqueue(chunk: Uint8Array): void {
+    if (this.#closed.state !== 'pending') {
+      return
+    }
+
+    try {
+      this.#controller.enqueue(chunk)
+    } catch (error) {
+      console.error(error)
+      devUtils.error(
+        'Failed to write to server-side EventSource. Please see the original error above.',
+      )
     }
   }
 
+  #sendRetry(retry: number): void {
+    this.#enqueue(this.#encoder.encode(`retry:${retry}\n\n`))
+  }
+
   #sendMessage(message: {
     id?: string
     event?: unknown
@@ -349,14 +387,18 @@ class ServerSentEventClient<
 
     frames.push('', '')
 
-    this.#controller.enqueue(this.#encoder.encode(frames.join('\n')))
+    this.#enqueue(this.#encoder.encode(frames.join('\n')))
 
-    this.#emitter.emit('message', {
-      id: message.id,
-      event: message.event?.toString() || 'message',
-      data: message.data,
-      frames,
-    })
+    this[kClientEmitter]?.emit(
+      new TypedEvent('message', {
+        data: {
+          id: message.id,
+          event: message.event?.toString() || 'message',
+          data: message.data,
+          frames,
+        },
+      }),
+    )
   }
 }
 
@@ -383,6 +425,7 @@ class ServerSentEventServer {
          */
         accept: 'msw/passthrough',
       },
+      signal: this.#request.signal,
     })
 
     source[kOnAnyMessage] = (event) => {
@@ -429,6 +472,7 @@ class ServerSentEventServer {
 
 interface ObservableEventSourceInit extends EventSourceInit {
   headers?: HeadersInit
+  signal?: AbortSignal
 }
 
 type EventHandler<EventType extends Event> = (
@@ -489,6 +533,18 @@ class ObservableEventSource extends EventTarget implements EventSource {
       signal: this[kAbortController].signal,
     })
 
+    if (init?.signal) {
+      if (init.signal.aborted) {
+        this.close()
+        return
+      }
+
+      init.signal.addEventListener('abort', () => this.close(), {
+        once: true,
+        signal: this[kAbortController].signal,
+      })
+    }
+
     this.connect()
   }
 
@@ -518,7 +574,7 @@ class ObservableEventSource extends EventTarget implements EventSource {
   get onerror(): EventHandler<Event> | null {
     return this[kOnError]
   }
-  set oneerror(handler: EventHandler<Event>) {
+  set onerror(handler: EventHandler<Event>) {
     if (this[kOnError]) {
       this.removeEventListener('error', { handleEvent: this[kOnError] })
     }
@@ -642,10 +698,6 @@ class ObservableEventSource extends EventTarget implements EventSource {
           this[kLastEventId] = message.id
         }
 
-        if (message.retry) {
-          this[kReconnectionTime] = message.retry
-        }
-
         const messageEvent = new MessageEvent(
           message.event ? message.event : 'message',
           {
@@ -659,6 +711,9 @@ class ObservableEventSource extends EventTarget implements EventSource {
         this[kOnAnyMessage]?.(messageEvent)
         this.dispatchEvent(messageEvent)
       },
+      retry: (reconnectionTime) => {
+        this[kReconnectionTime] = reconnectionTime
+      },
       abort: () => {
         throw new Error('Stream abort is not implemented')
       },
@@ -693,7 +748,25 @@ class ObservableEventSource extends EventTarget implements EventSource {
       this.dispatchEvent(new Event('error'))
     })
 
-    await delay(this[kReconnectionTime])
+    const signal = this[kAbortController].signal
+
+    if (signal.aborted) {
+      return
+    }
+
+    const aborted = new DeferredPromise<void>()
+    const onAbort = () => aborted.resolve()
+    signal.addEventListener('abort', onAbort, { once: true })
+
+    await Promise.race([delay(this[kReconnectionTime]), aborted]).finally(
+      () => {
+        signal.removeEventListener('abort', onAbort)
+      },
+    )
+
+    if (signal.aborted) {
+      return
+    }
 
     queueMicrotask(async () => {
       if (this.readyState !== this.CONNECTING) {
@@ -743,7 +816,6 @@ interface EventSourceMessage {
   id?: string
   event?: string
   data?: string
-  retry?: number
 }
 
 class EventSourceParsingStream extends WritableStream {
@@ -758,12 +830,12 @@ class EventSourceParsingStream extends WritableStream {
     id: undefined,
     event: undefined,
     data: undefined,
-    retry: undefined,
   }
 
   constructor(
     private underlyingSink: {
       message: (message: EventSourceMessage) => void
+      retry?: (reconnectionTime: number) => void
       abort?: (reason: any) => void
       close?: () => void
     },
@@ -789,7 +861,6 @@ class EventSourceParsingStream extends WritableStream {
       id: undefined,
       event: undefined,
       data: undefined,
-      retry: undefined,
     }
   }
 
@@ -903,10 +974,12 @@ class EventSourceParsingStream extends WritableStream {
         }
 
         case 'retry': {
-          const retry = parseInt(value, 10)
-
-          if (!isNaN(retry)) {
-            this.message.retry = retry
+          /**
+           * Apply the retry immediately. Don't buffer onto the current message.
+           * @see https://html.spec.whatwg.org/multipage/server-sent-events.html#event-stream-interpretation
+           */
+          if (/^\d+$/.test(value)) {
+            this.underlyingSink.retry?.(parseInt(value, 10))
           }
           break
         }
@@ -914,3 +987,74 @@ class EventSourceParsingStream extends WritableStream {
     }
   }
 }
+
+interface EventStreamMessage {
+  id?: string
+  event: string
+  data?: unknown
+  frames: Array<string>
+}
+
+interface EventStream<EventMap extends EventMapConstraint> {
+  client: ServerSentEventClient<EventMap>
+  server: ServerSentEventServer
+  response: Response
+}
+
+/**
+ * Create an event stream out of the given Fetch API `Request`.
+ * Returns the following properties:
+ * - `client`, to operate on the intercepted request;
+ * - `server`, to establish and manage the actual server connection;
+ * - `response`, a `Response` to use as the mock response's body.
+ *
+ * @example
+ * http.post('/resource', ({ request }) => {
+ *   const { client, server, response } = createEventStream(request)
+ *   client.send({ data: 'hello world' })
+ *   return response
+ * })
+ */
+function createEventStream<EventMap extends EventMapConstraint>(
+  request: Request,
+): EventStream<EventMap> {
+  invariant(
+    !request.signal.aborted,
+    'Failed to call "createEventStream" on the "%s %s" request: request aborted',
+    request.method,
+    request.url,
+  )
+
+  let controller!: ReadableStreamDefaultController<Uint8Array>
+
+  const readable = new ReadableStream<Uint8Array>({
+    start(defaultController) {
+      controller = defaultController
+    },
+    cancel() {
+      client.close()
+    },
+  })
+
+  const client = new ServerSentEventClient<EventMap>(controller)
+  const server = new ServerSentEventServer({
+    request,
+    client,
+  })
+
+  const response = new Response(readable, SSE_RESPONSE_INIT)
+
+  request.signal.addEventListener(
+    'abort',
+    () => {
+      client.close()
+    },
+    { once: true },
+  )
+
+  return {
+    client,
+    server,
+    response,
+  }
+}

package/src/core/utils/HttpResponse/decorators.ts

@@ -1,10 +1,9 @@
 import statuses from '../../../shims/statuses'
-import { Headers as HeadersPolyfill } from 'headers-polyfill'
-import type { HttpResponseInit } from '../../HttpResponse'
+import type { HttpResponse, HttpResponseInit } from '../../HttpResponse'
 
 const { message } = statuses
 
-export const kSetCookie = Symbol('kSetCookie')
+const kSetCookie = Symbol('kSetCookie')
 
 export interface HttpResponseDecoratedInit extends HttpResponseInit {
   status: number
@@ -28,10 +27,10 @@ export function normalizeResponseInit(
 }
 
 export function decorateResponse(
-  response: Response,
+  response: HttpResponse<any>,
   init: HttpResponseDecoratedInit,
 ): Response {
-  // Allow to mock the response type.
+  // Allow mocking the response type.
   if (init.type) {
     Object.defineProperty(response, 'type', {
       value: init.type,
@@ -52,25 +51,32 @@ export function decorateResponse(
       enumerable: false,
       writable: false,
     })
+  }
+
+  return response
+}
 
-    // Cookie forwarding is only relevant in the browser.
-    if (typeof document !== 'undefined') {
-      // Write the mocked response cookies to the document.
-      // Use `headers-polyfill` to get the Set-Cookie header value correctly.
-      // This is an alternative until TypeScript 5.2
-      // and Node.js v20 become the minimum supported version
-      // and getSetCookie in Headers can be used directly.
-      const responseCookiePairs = HeadersPolyfill.prototype.getSetCookie.call(
-        init.headers,
-      )
+export function getRawSetCookie(response: Response): string | undefined {
+  return Reflect.get(response, kSetCookie)
+}
+
+/**
+ * Copy the given response own properties, like internal symbols,
+ * onto another response. Used for faithful internal copying of responses.
+ */
+export function copyResponseOwnProperties(
+  source: Response,
+  target: Response,
+): void {
+  for (const propertyName of Reflect.ownKeys(source)) {
+    const descriptor = Object.getOwnPropertyDescriptor(source, propertyName)
+    const existingDescriptor = Object.getOwnPropertyDescriptor(
+      target,
+      propertyName,
+    )
 
-      for (const cookieString of responseCookiePairs) {
-        // No need to parse the cookie headers because it's defined
-        // as the valid cookie string to begin with.
-        document.cookie = cookieString
-      }
+    if (descriptor && existingDescriptor == null) {
+      Object.defineProperty(target, propertyName, descriptor)
     }
   }
-
-  return response
 }