msw 2.15.0 → 3.0.0

package/src/mockServiceWorker.js

@@ -10,7 +10,12 @@
 const PACKAGE_VERSION = '<PACKAGE_VERSION>'
 const INTEGRITY_CHECKSUM = '<INTEGRITY_CHECKSUM>'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+
 const activeClientIds = new Set()
+/**
+ * @type {Map<string, Set<Promise<Response>>>}
+ */
+const pendingRequests = new Map()
 
 addEventListener('install', function () {
   self.skipWaiting()
@@ -20,82 +25,101 @@ addEventListener('activate', function (event) {
   event.waitUntil(self.clients.claim())
 })
 
-addEventListener('message', async function (event) {
+addEventListener('message', function (event) {
   const clientId = Reflect.get(event.source || {}, 'id')
 
   if (!clientId || !self.clients) {
     return
   }
 
-  const client = await self.clients.get(clientId)
-
-  if (!client) {
-    return
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
-
-  switch (event.data) {
-    case 'KEEPALIVE_REQUEST': {
-      sendToClient(client, {
-        type: 'KEEPALIVE_RESPONSE',
-      })
-      break
-    }
-
-    case 'INTEGRITY_CHECK_REQUEST': {
-      sendToClient(client, {
-        type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: {
-          packageVersion: PACKAGE_VERSION,
-          checksum: INTEGRITY_CHECKSUM,
-        },
-      })
-      break
-    }
-
-    case 'MOCK_ACTIVATE': {
-      activeClientIds.add(clientId)
-
-      sendToClient(client, {
-        type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
-      })
-      break
-    }
-
-    case 'CLIENT_CLOSED': {
-      activeClientIds.delete(clientId)
+  event.waitUntil(
+    (async () => {
+      if (event.data === 'CLIENT_CLOSE') {
+        const allClients = await self.clients.matchAll({
+          type: 'window',
+        })
+
+        activeClientIds.delete(clientId)
+
+        // Await any pending requests from the closing client.
+        // This makes sure that those requests are handled and not passthrough.
+        const pending = pendingRequests.get(clientId)
+        if (pending != null && pending.size > 0) {
+          await Promise.allSettled(pending)
+        }
+        pendingRequests.delete(clientId)
+
+        const remainingClients = allClients.filter((client) => {
+          return client.id !== clientId
+        })
+
+        // Unregister itself when there are no more clients
+        if (remainingClients.length === 0) {
+          await self.registration.unregister()
+        }
+
+        const client = await self.clients.get(clientId)
+
+        if (client != null) {
+          await sendToClient(client, {
+            type: 'CLIENT_CLOSED',
+          })
+        }
+
+        return
+      }
 
-      const remainingClients = allClients.filter((client) => {
-        return client.id !== clientId
-      })
+      /**
+       * @note Check for the client AFTER handling "CLIENT_CLOSE".
+       * This prevents early return on "!client" in case the page has reloaded
+       * and disassociated itself from the worker. This ensures self-unregistration
+       * still fires for those pages.
+       */
+      const client = await self.clients.get(clientId)
 
-      // Unregister itself when there are no more clients
-      if (remainingClients.length === 0) {
-        self.registration.unregister()
+      if (!client) {
+        return
       }
 
-      break
-    }
-  }
+      switch (event.data) {
+        case 'KEEPALIVE_REQUEST': {
+          await sendToClient(client, {
+            type: 'KEEPALIVE_RESPONSE',
+          })
+          break
+        }
+
+        case 'INTEGRITY_CHECK_REQUEST': {
+          await sendToClient(client, {
+            type: 'INTEGRITY_CHECK_RESPONSE',
+            payload: {
+              packageVersion: PACKAGE_VERSION,
+              checksum: INTEGRITY_CHECKSUM,
+            },
+          })
+          break
+        }
+
+        case 'MOCK_ACTIVATE': {
+          activeClientIds.add(clientId)
+
+          await sendToClient(client, {
+            type: 'MOCKING_ENABLED',
+            payload: {
+              client: {
+                id: client.id,
+                frameType: client.frameType,
+              },
+            },
+          })
+          break
+        }
+      }
+    })(),
+  )
 })
 
 addEventListener('fetch', function (event) {
-  const requestInterceptedAt = Date.now()
-
-  // Bypass navigation requests.
-  if (event.request.mode === 'navigate') {
-    return
-  }
-
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
   if (
@@ -113,23 +137,54 @@ addEventListener('fetch', function (event) {
   }
 
   const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+  event.respondWith(handleRequest(event, requestId))
 })
 
 /**
  * @param {FetchEvent} event
  * @param {string} requestId
- * @param {number} requestInterceptedAt
  */
-async function handleRequest(event, requestId, requestInterceptedAt) {
+async function handleRequest(event, requestId) {
   const client = await resolveMainClient(event)
   const requestCloneForEvents = event.request.clone()
-  const response = await getResponse(
-    event,
-    client,
-    requestId,
-    requestInterceptedAt,
-  )
+
+  const responsePromise = getResponse(event, client, requestId)
+
+  if (client != null) {
+    let pending = pendingRequests.get(client.id)
+
+    if (pending == null) {
+      pendingRequests.set(client.id, (pending = new Set()))
+    }
+
+    pending.add(responsePromise)
+    responsePromise
+      .finally(() => pending.delete(responsePromise))
+      .catch(() => {})
+  }
+
+  let response
+
+  try {
+    response = await responsePromise
+  } catch (error) {
+    // The request has settled without a response (e.g. a passthrough
+    // request failed with a network error). Notify the client so it
+    // can release the resources associated with this request.
+    if (client && activeClientIds.has(client.id)) {
+      sendToClient(client, {
+        type: 'REQUEST_ERROR',
+        payload: {
+          request: {
+            id: requestId,
+          },
+          error: serializeError(error),
+        },
+      })
+    }
+
+    throw error
+  }
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
@@ -217,18 +272,32 @@ async function resolveMainClient(event) {
  * @param {FetchEvent} event
  * @param {Client | undefined} client
  * @param {string} requestId
- * @param {number} requestInterceptedAt
  * @returns {Promise<Response>}
  */
-async function getResponse(event, client, requestId, requestInterceptedAt) {
+async function getResponse(event, client, requestId) {
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
   const requestClone = event.request.clone()
 
-  function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
+  /**
+   * @param {{ request?: { headers?: Array<[string, string]> } }} [data]
+   */
+  function passthrough(data) {
+    const headers = new Headers()
+    const requestHeaders = data?.request?.headers
+
+    if (Array.isArray(requestHeaders)) {
+      // Apply the request headers provided by the client.
+      // Those reflect any modifications made in the request handlers.
+      // Use ".append()" to support multiple headers with the same name.
+      for (const [name, value] of requestHeaders) {
+        headers.append(name, value)
+      }
+    } else {
+      for (const [name, value] of requestClone.headers) {
+        headers.append(name, value)
+      }
+    }
 
     // Remove the "accept" header value that marked this request as passthrough.
     // This prevents request alteration and also keeps it compliant with the
@@ -271,7 +340,6 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
       type: 'REQUEST',
       payload: {
         id: requestId,
-        interceptedAt: requestInterceptedAt,
         ...serializedRequest,
       },
     },
@@ -280,17 +348,35 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
 
   switch (clientMessage.type) {
     case 'MOCK_RESPONSE': {
-      return respondWithMock(clientMessage.data)
+      return respondWithMock(clientMessage.data, event)
     }
 
     case 'PASSTHROUGH': {
-      return passthrough()
+      return passthrough(clientMessage.data)
     }
   }
 
   return passthrough()
 }
 
+/**
+ * @param {unknown} error
+ * @returns {{ name: string, message: string }}
+ */
+function serializeError(error) {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message,
+    }
+  }
+
+  return {
+    name: 'Error',
+    message: String(error),
+  }
+}
+
 /**
  * @param {Client} client
  * @param {any} message
@@ -318,9 +404,10 @@ function sendToClient(client, message, transferrables = []) {
 
 /**
  * @param {Response} response
- * @returns {Response}
+ * @param {FetchEvent} event
+ * @returns {Promise<Response>}
  */
-function respondWithMock(response) {
+async function respondWithMock(response, event) {
   // Setting response status code to 0 is a no-op.
   // However, when responding with a "Response.error()", the produced Response
   // instance will have status code set to 0. Since it's not possible to create
@@ -329,7 +416,19 @@ function respondWithMock(response) {
     return Response.error()
   }
 
-  const mockedResponse = new Response(response.body, response)
+  let body = response.body
+
+  // Buffer the streamed mocked response body for navigation requests.
+  // The stream is transferred from the client that is being navigated
+  // away from. Once the navigation commits, that client gets destroyed
+  // and the stream will never complete, resulting in an empty document.
+  // Buffering here keeps "event.respondWith()" pending (the navigation
+  // cannot commit) until the entire body arrives from the client.
+  if (event.request.mode === 'navigate' && body instanceof ReadableStream) {
+    body = await new Response(body).arrayBuffer()
+  }
+
+  const mockedResponse = new Response(body, response)
 
   Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
     value: true,

package/src/node/async-handlers-controller.test.ts

@@ -1,7 +1,7 @@
-import { http } from '../core/http'
+import { http } from '#http/http'
 import { AsyncHandlersController } from './async-handlers-controller'
 
-it('respects initial handlers in the boundary', () => {
+test('respects initial handlers in the boundary', () => {
   {
     const controller = new AsyncHandlersController([])
     controller.boundary(() => {
@@ -18,7 +18,7 @@ it('respects initial handlers in the boundary', () => {
   }
 })
 
-it('provides boundary-specific overrides', () => {
+test('provides boundary-specific overrides', () => {
   const initialHandlers = [http.get('/one', () => {})]
   const controller = new AsyncHandlersController(initialHandlers)
 
@@ -34,7 +34,7 @@ it('provides boundary-specific overrides', () => {
   expect(controller.currentHandlers()).toEqual(initialHandlers)
 })
 
-it('resets the handlers in the boundary', () => {
+test('resets the handlers in the boundary', () => {
   const initialHandlers = [http.get('/one', () => {})]
   const controller = new AsyncHandlersController(initialHandlers)
 

package/src/node/glossary.ts

@@ -2,17 +2,21 @@ import type { PartialDeep } from 'type-fest'
 import type { HttpNetworkFrameEventMap } from '#core/experimental/frames/http-frame'
 import type { WebSocketNetworkFrameEventMap } from '#core/experimental/frames/websocket-frame'
 import type { AnyHandler } from '#core/experimental/handlers-controller'
-import type { LifeCycleEventEmitter, SharedOptions } from '#core/sharedOptions'
-
-export interface ListenOptions extends SharedOptions {}
+import type { NetworkReadyState } from '#core/experimental/define-network'
+import type { LifeCycleEventEmitter, SharedOptions } from '#core/shared-options'
 
 export interface SetupServerCommon {
+  /**
+   * The current ready state of the underlying network.
+   */
+  readonly readyState: NetworkReadyState
+
   /**
    * Starts the request interception based on the previously provided request handlers.
    *
    * @see {@link https://mswjs.io/docs/api/setup-server/listen `server.listen()` API reference}
    */
-  listen: (options?: PartialDeep<ListenOptions>) => void
+  listen: (options?: PartialDeep<SharedOptions>) => void
 
   /**
    * Stops the request interception by restoring all augmented modules.

package/src/node/index.ts

@@ -1,8 +1,3 @@
 export type { SetupServer } from './glossary'
-export {
-  setupServer,
-  SetupServerApi,
-  defaultNetworkOptions,
-} from './setup-server'
-export { SetupServerCommonApi } from './setup-server-common'
+export { setupServer, defaultNetworkOptions } from './setup-server'
 export { AsyncHandlersController } from './async-handlers-controller'

package/src/node/setup-server-common.ts

@@ -1,31 +1,33 @@
-import type { PartialDeep } from 'type-fest'
-import type { Interceptor } from '@mswjs/interceptors'
+import { invariant } from 'outvariant'
 import {
   NetworkReadyState,
-  defineNetwork,
   type NetworkApi,
 } from '#core/experimental/define-network'
-import type { AnyHandler } from '#core/experimental/handlers-controller'
-import type { HandlersController } from '#core/experimental/handlers-controller'
-import { InterceptorSource } from '#core/experimental/sources/interceptor-source'
-import { fromLegacyOnUnhandledRequest } from '#core/experimental/compat'
-import type { ListenOptions, SetupServerCommon } from './glossary'
+import { devUtils } from '#core/utils/internal/dev-utils'
+import type { SetupServerCommon } from './glossary'
 
 /**
- * Define the common `setupServer` API around the given network.
- * This is used by both `msw/node` and `msw/native` to implement the same
- * baseline setup methods, like `.use()`, `.resetHandlers()`, `.close()`, etc.
+ * Define the common `setupServer` API around the given network,
+ * including the baseline setup methods, like `.use()`, `.resetHandlers()`, `.close()`, etc.
  */
 export function defineSetupServerApi(
   network: NetworkApi<any>,
 ): SetupServerCommon {
   return {
+    get readyState() {
+      return network.readyState
+    },
     events: network.events,
     listen(options) {
+      invariant(
+        network.readyState === NetworkReadyState.DISABLED,
+        devUtils.formatMessage(
+          'Failed to call "server.listen()": the server is already listening. Remove the redundant "server.listen()" call.',
+        ),
+      )
+
       network.configure({
-        onUnhandledFrame: fromLegacyOnUnhandledRequest(() => {
-          return options?.onUnhandledRequest || 'warn'
-        }),
+        onUnhandledFrame: options?.onUnhandledFrame ?? 'warn',
       })
 
       network.enable()
@@ -35,66 +37,7 @@ export function defineSetupServerApi(
     restoreHandlers: network.restoreHandlers.bind(network),
     listHandlers: network.listHandlers.bind(network),
     close() {
-      /**
-       * @note Ignore closing after closed for backwards compatibility.
-       */
-      if (network.readyState === NetworkReadyState.DISABLED) {
-        return
-      }
-
       network.disable()
     },
   }
 }
-
-/**
- * @deprecated
- * Please use the `defineNetwork` API instead.
- */
-export class SetupServerCommonApi implements SetupServerCommon {
-  protected network: NetworkApi<[InterceptorSource]>
-
-  constructor(
-    interceptors: Array<Interceptor<any>>,
-    handlers: Array<AnyHandler> | HandlersController,
-  ) {
-    this.network = defineNetwork({
-      sources: [new InterceptorSource({ interceptors })],
-      handlers,
-    })
-  }
-
-  get events() {
-    return this.network.events
-  }
-
-  public listen(options?: PartialDeep<ListenOptions>): void {
-    this.network.configure({
-      onUnhandledFrame: fromLegacyOnUnhandledRequest(() => {
-        return options?.onUnhandledRequest || 'warn'
-      }),
-    })
-
-    this.network.enable()
-  }
-
-  public use(...handlers: Array<AnyHandler>): void {
-    this.network.use(...handlers)
-  }
-
-  public resetHandlers(...nextHandlers: Array<AnyHandler>): void {
-    return this.network.resetHandlers(...nextHandlers)
-  }
-
-  public restoreHandlers(): void {
-    return this.network.restoreHandlers()
-  }
-
-  public listHandlers(): ReadonlyArray<AnyHandler> {
-    return this.network.listHandlers()
-  }
-
-  public close(): void {
-    this.network.disable()
-  }
-}

package/src/node/setup-server.ts

@@ -11,22 +11,13 @@ import type { AnyHandler } from '#core/experimental/handlers-controller'
 import { InterceptorSource } from '#core/experimental/sources/interceptor-source'
 import type { SetupServer } from './glossary'
 import { AsyncHandlersController } from './async-handlers-controller'
-import {
-  defineSetupServerApi,
-  SetupServerCommonApi,
-} from './setup-server-common'
+import { defineSetupServerApi } from './setup-server-common'
 
 const defaultInterceptors: Array<Interceptor<any>> = [
   new ClientRequestInterceptor(),
   new XMLHttpRequestInterceptor(),
   new FetchInterceptor(),
-  /**
-   * @fixme WebSocketInterceptor is in a browser-only export of Interceptors
-   * while the Interceptor class imported from the root module points to `lib/node`.
-   * An absolute madness to solve as it requires to duplicate the build config we have
-   * in MSW: shared core, CJS/ESM patching, .d.ts patching...
-   */
-  new WebSocketInterceptor() as any,
+  new WebSocketInterceptor(),
 ]
 
 export const defaultNetworkOptions: DefineNetworkOptions<[InterceptorSource]> =
@@ -57,35 +48,13 @@ export function setupServer(...handlers: Array<AnyHandler>): SetupServer {
 
   return {
     ...commonApi,
+    /**
+     * @note Spreading evaluates the "readyState" getter once.
+     * Redefine it so the property stays live.
+     */
+    get readyState() {
+      return network.readyState
+    },
     boundary: handlersController.boundary.bind(handlersController),
   }
 }
-
-/**
- * @deprecated
- * Please use the `defineNetwork` API instead.
- */
-export class SetupServerApi
-  extends SetupServerCommonApi
-  implements SetupServer
-{
-  #handlersController: AsyncHandlersController
-
-  public boundary: AsyncHandlersController['boundary']
-
-  constructor(
-    handlers: Array<AnyHandler>,
-    interceptors: Array<Interceptor<any>>,
-  ) {
-    const controller = new AsyncHandlersController(handlers)
-    super(interceptors, controller)
-
-    const { sources: _, ...networkOptions } = defaultNetworkOptions
-    this.network.configure(networkOptions)
-
-    this.#handlersController = controller
-    this.boundary = this.#handlersController.boundary.bind(
-      this.#handlersController,
-    )
-  }
-}

package/src/sse/index.test.ts

@@ -0,0 +1,14 @@
+import { HttpHandler } from '#http/http-handler'
+import { sse } from './index'
+
+beforeAll(() => {
+  vi.stubGlobal('EventSource', class EventSource {})
+})
+
+afterAll(() => {
+  vi.unstubAllGlobals()
+})
+
+test('exposes the sse request handler', () => {
+  expect(sse('/stream', () => {})).toBeInstanceOf(HttpHandler)
+})

package/src/sse/index.ts

@@ -0,0 +1,7 @@
+export {
+  sse,
+  type ServerSentEventRequestHandler,
+  type ServerSentEventResolver,
+  type ServerSentEventResolverExtras,
+  type ServerSentEventMessage,
+} from './sse'