msw 2.11.1 → 2.11.2

package/lib/mockServiceWorker.js

@@ -7,8 +7,8 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.11.1'
-const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
+const PACKAGE_VERSION = '2.11.2'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -71,11 +71,6 @@ addEventListener('message', async function (event) {
       break
     }
 
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
     case 'CLIENT_CLOSED': {
       activeClientIds.delete(clientId)
 
@@ -94,6 +89,8 @@ addEventListener('message', async function (event) {
 })
 
 addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
   // Bypass navigation requests.
   if (event.request.mode === 'navigate') {
     return
@@ -110,23 +107,29 @@ addEventListener('fetch', function (event) {
 
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
+  // after it's been terminated (still remains active until the next reload).
   if (activeClientIds.size === 0) {
     return
   }
 
   const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId))
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
 })
 
 /**
  * @param {FetchEvent} event
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  */
-async function handleRequest(event, requestId) {
+async function handleRequest(event, requestId, requestInterceptedAt) {
   const client = await resolveMainClient(event)
   const requestCloneForEvents = event.request.clone()
-  const response = await getResponse(event, client, requestId)
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
@@ -204,7 +207,7 @@ async function resolveMainClient(event) {
  * @param {string} requestId
  * @returns {Promise<Response>}
  */
-async function getResponse(event, client, requestId) {
+async function getResponse(event, client, requestId, requestInterceptedAt) {
   // 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()
@@ -255,6 +258,7 @@ async function getResponse(event, client, requestId) {
       type: 'REQUEST',
       payload: {
         id: requestId,
+        interceptedAt: requestInterceptedAt,
         ...serializedRequest,
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "msw",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "description": "Seamless REST/GraphQL API mocking library for browser and Node.js.",
   "type": "commonjs",
   "main": "./lib/core/index.js",
@@ -228,6 +228,7 @@
     "outvariant": "^1.4.3",
     "path-to-regexp": "^6.3.0",
     "picocolors": "^1.1.1",
+    "rettime": "^0.7.0",
     "strict-event-emitter": "^0.5.1",
     "tough-cookie": "^6.0.0",
     "type-fest": "^4.26.1",
@@ -236,18 +237,22 @@
   "devDependencies": {
     "@commitlint/cli": "^18.4.4",
     "@commitlint/config-conventional": "^18.4.4",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.34.0",
     "@fastify/websocket": "^8.3.1",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@open-draft/test-server": "^0.4.2",
     "@ossjs/release": "^0.8.1",
     "@playwright/test": "^1.48.0",
+    "@swc/core": "^1.13.5",
+    "@types/eslint__js": "^8.42.3",
     "@types/express": "^4.17.21",
     "@types/json-bigint": "^1.0.4",
-    "@types/node": "~18.19.28",
-    "@types/serviceworker": "^0.0.136",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
-    "@web/dev-server": "^0.4.6",
-    "axios": "^1.7.7",
+    "@types/node": "18.x",
+    "@typescript-eslint/eslint-plugin": "^8.42.0",
+    "@typescript-eslint/parser": "^8.42.0",
+    "@web/dev-server": "^0.1.38",
+    "axios": "^1.6.5",
     "babel-minify": "^0.5.1",
     "commitizen": "^4.3.1",
     "cross-env": "^7.0.3",
@@ -255,11 +260,12 @@
     "cz-conventional-changelog": "3.3.0",
     "esbuild": "^0.25.3",
     "esbuild-loader": "^4.2.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "express": "^5.0.0",
     "fastify": "^4.26.0",
+    "fs-extra": "^11.2.0",
     "fs-teardown": "^0.3.0",
     "glob": "^11.0.0",
     "jsdom": "^25.0.1",
@@ -267,20 +273,21 @@
     "knip": "^5.51.1",
     "lint-staged": "^15.2.10",
     "page-with": "^0.6.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.6.2",
     "publint": "^0.3.12",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
     "simple-git-hooks": "^2.9.0",
     "tsup": "^8.4.0",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.42.0",
     "undici": "^6.20.0",
     "url-loader": "^4.1.1",
     "vitest": "^3.1.4",
     "vitest-environment-miniflare": "^2.14.4",
     "webpack": "^5.95.0",
     "webpack-http-server": "^0.5.0",
-    "msw": "2.11.1"
+    "msw": "2.11.2"
   },
   "peerDependencies": {
     "typescript": ">= 4.8.x"
@@ -303,7 +310,7 @@
   "scripts": {
     "start": "tsup --watch",
     "clean": "rimraf ./lib",
-    "lint": "eslint \"{cli,src}/**/*.ts\"",
+    "lint": "eslint \"{cli,src,test}/**/*.ts\"",
     "build": "pnpm clean && cross-env NODE_ENV=production tsup && pnpm patch:dts",
     "patch:dts": "node \"./config/scripts/patch-ts.js\"",
     "publint": "publint",

package/src/browser/setupWorker/glossary.ts

@@ -1,137 +1,30 @@
 import { Emitter } from 'strict-event-emitter'
+import type { DeferredPromise } from '@open-draft/deferred-promise'
 import {
   LifeCycleEventEmitter,
   LifeCycleEventsMap,
   SharedOptions,
 } from '~/core/sharedOptions'
-import { ServiceWorkerMessage } from './start/utils/createMessageChannel'
 import { RequestHandler } from '~/core/handlers/RequestHandler'
 import type { HttpRequestEventMap, Interceptor } from '@mswjs/interceptors'
 import type { RequiredDeep } from '~/core/typeUtils'
 import type { WebSocketHandler } from '~/core/handlers/WebSocketHandler'
-
-type RequestWithoutMethods = Omit<
-  Request,
-  | 'text'
-  | 'body'
-  | 'json'
-  | 'blob'
-  | 'arrayBuffer'
-  | 'formData'
-  | 'clone'
-  | 'signal'
-  | 'isHistoryNavigation'
-  | 'isReloadNavigation'
->
-
-/**
- * Request representation received from the worker message event.
- */
-export interface ServiceWorkerIncomingRequest extends RequestWithoutMethods {
-  /**
-   * Unique ID of the request generated once the request is
-   * intercepted by the "fetch" event in the Service Worker.
-   */
-  id: string
-  body?: ArrayBuffer | null
-}
-
-type ServiceWorkerIncomingResponse = {
-  isMockedResponse: boolean
-  request: ServiceWorkerIncomingRequest
-  response: Pick<
-    Response,
-    'type' | 'ok' | 'status' | 'statusText' | 'body' | 'headers' | 'redirected'
-  >
-}
-
-/**
- * Map of the events that can be received from the Service Worker.
- */
-export interface ServiceWorkerIncomingEventsMap {
-  MOCKING_ENABLED: {
-    client: {
-      id: string
-      frameType: string
-    }
-  }
-  INTEGRITY_CHECK_RESPONSE: {
-    packageVersion: string
-    checksum: string
-  }
-  KEEPALIVE_RESPONSE: never
-  REQUEST: ServiceWorkerIncomingRequest
-  RESPONSE: ServiceWorkerIncomingResponse
-}
-
-/**
- * Map of the events that can be sent to the Service Worker
- * from any execution context.
- */
-type ServiceWorkerOutgoingEventTypes =
-  | 'MOCK_ACTIVATE'
-  | 'MOCK_DEACTIVATE'
-  | 'INTEGRITY_CHECK_REQUEST'
-  | 'KEEPALIVE_REQUEST'
-  | 'CLIENT_CLOSED'
+import type { WorkerChannel } from '../utils/workerChannel'
 
 export interface StringifiedResponse extends ResponseInit {
   body: string | ArrayBuffer | ReadableStream<Uint8Array> | null
 }
 
-interface StrictEventListener<EventType extends Event> {
-  (event: EventType): void
-}
-
-export interface SetupWorkerInternalContext {
+export type SetupWorkerInternalContext = {
   isMockingEnabled: boolean
+  workerStoppedAt?: number
   startOptions: RequiredDeep<StartOptions>
-  worker: ServiceWorker | null
-  registration: ServiceWorkerRegistration | null
+  workerPromise: DeferredPromise<ServiceWorker>
+  registration: ServiceWorkerRegistration | undefined
   getRequestHandlers: () => Array<RequestHandler | WebSocketHandler>
   emitter: Emitter<LifeCycleEventsMap>
   keepAliveInterval?: number
-  workerChannel: {
-    /**
-     * Adds a Service Worker event listener.
-     */
-    on<EventType extends keyof ServiceWorkerIncomingEventsMap>(
-      eventType: EventType,
-      callback: (
-        event: MessageEvent,
-        message: ServiceWorkerMessage<
-          EventType,
-          ServiceWorkerIncomingEventsMap[EventType]
-        >,
-      ) => void,
-    ): void
-    send<EventType extends ServiceWorkerOutgoingEventTypes>(
-      eventType: EventType,
-    ): void
-  }
-  events: {
-    /**
-     * Adds an event listener on the given target.
-     * Returns a clean-up function that removes that listener.
-     */
-    addListener<EventType extends Event>(
-      target: EventTarget,
-      eventType: string,
-      callback: StrictEventListener<EventType>,
-    ): () => void
-    /**
-     * Removes all currently attached listeners.
-     */
-    removeAllListeners(): void
-    /**
-     * Awaits a given message type from the Service Worker.
-     */
-    once<EventType extends keyof ServiceWorkerIncomingEventsMap>(
-      eventType: EventType,
-    ): Promise<
-      ServiceWorkerMessage<EventType, ServiceWorkerIncomingEventsMap[EventType]>
-    >
-  }
+  workerChannel: WorkerChannel
   supports: {
     serviceWorkerApi: boolean
     readableStreamTransfer: boolean
@@ -184,10 +77,12 @@ export interface StartOptions extends SharedOptions {
 }
 
 export type StartReturnType = Promise<ServiceWorkerRegistration | undefined>
+
 export type StartHandler = (
   options: RequiredDeep<StartOptions>,
   initialOptions: StartOptions,
 ) => StartReturnType
+
 export type StopHandler = () => void
 
 export interface SetupWorker {

package/src/browser/setupWorker/setupWorker.ts

@@ -1,21 +1,14 @@
 import { invariant } from 'outvariant'
 import { isNodeProcess } from 'is-node-process'
-import {
+import type {
   SetupWorkerInternalContext,
-  ServiceWorkerIncomingEventsMap,
   StartReturnType,
-  StopHandler,
-  StartHandler,
   StartOptions,
   SetupWorker,
 } from './glossary'
-import { createStartHandler } from './start/createStartHandler'
-import { createStop } from './stop/createStop'
-import { ServiceWorkerMessage } from './start/utils/createMessageChannel'
 import { RequestHandler } from '~/core/handlers/RequestHandler'
 import { DEFAULT_START_OPTIONS } from './start/utils/prepareStartHandler'
-import { createFallbackStart } from './start/createFallbackStart'
-import { createFallbackStop } from './stop/createFallbackStop'
+import { createStartHandler } from './start/createStartHandler'
 import { devUtils } from '~/core/utils/internal/devUtils'
 import { SetupApi } from '~/core/SetupApi'
 import { mergeRight } from '~/core/utils/internal/mergeRight'
@@ -25,21 +18,17 @@ import { supportsReadableStreamTransfer } from '../utils/supportsReadableStreamT
 import { webSocketInterceptor } from '~/core/ws/webSocketInterceptor'
 import { handleWebSocketEvent } from '~/core/ws/handleWebSocketEvent'
 import { attachWebSocketLogger } from '~/core/ws/utils/attachWebSocketLogger'
-
-interface Listener {
-  target: EventTarget
-  eventType: string
-  callback: EventListenerOrEventListenerObject
-}
+import { WorkerChannel } from '../utils/workerChannel'
+import { DeferredPromise } from '@open-draft/deferred-promise'
+import { createFallbackRequestListener } from './start/createFallbackRequestListener'
+import { printStartMessage } from './start/utils/printStartMessage'
+import { printStopMessage } from './stop/utils/printStopMessage'
 
 export class SetupWorkerApi
   extends SetupApi<LifeCycleEventsMap>
   implements SetupWorker
 {
   private context: SetupWorkerInternalContext
-  private startHandler: StartHandler = null as any
-  private stopHandler: StopHandler = null as any
-  private listeners: Array<Listener>
 
   constructor(...handlers: Array<RequestHandler | WebSocketHandler>) {
     super(...handlers)
@@ -51,129 +40,53 @@ export class SetupWorkerApi
       ),
     )
 
-    this.listeners = []
     this.context = this.createWorkerContext()
   }
 
   private createWorkerContext(): SetupWorkerInternalContext {
-    const context: SetupWorkerInternalContext = {
+    const workerPromise = new DeferredPromise<ServiceWorker>()
+
+    return {
       // Mocking is not considered enabled until the worker
       // signals back the successful activation event.
       isMockingEnabled: false,
       startOptions: null as any,
-      worker: null,
+      workerPromise,
+      registration: undefined,
       getRequestHandlers: () => {
         return this.handlersController.currentHandlers()
       },
-      registration: null,
       emitter: this.emitter,
-      workerChannel: {
-        on: (eventType, callback) => {
-          this.context.events.addListener<
-            MessageEvent<ServiceWorkerMessage<typeof eventType, any>>
-          >(navigator.serviceWorker, 'message', (event) => {
-            // Avoid messages broadcasted from unrelated workers.
-            if (event.source !== this.context.worker) {
-              return
-            }
-
-            const message = event.data
-
-            if (!message) {
-              return
-            }
-
-            if (message.type === eventType) {
-              callback(event, message)
-            }
-          })
-        },
-        send: (type) => {
-          this.context.worker?.postMessage(type)
-        },
-      },
-      events: {
-        addListener: (target, eventType, callback) => {
-          target.addEventListener(eventType, callback as EventListener)
-          this.listeners.push({
-            eventType,
-            target,
-            callback: callback as EventListener,
-          })
-
-          return () => {
-            target.removeEventListener(eventType, callback as EventListener)
-          }
-        },
-        removeAllListeners: () => {
-          for (const { target, eventType, callback } of this.listeners) {
-            target.removeEventListener(eventType, callback)
-          }
-          this.listeners = []
-        },
-        once: (eventType) => {
-          const bindings: Array<() => void> = []
-
-          return new Promise<
-            ServiceWorkerMessage<
-              typeof eventType,
-              ServiceWorkerIncomingEventsMap[typeof eventType]
-            >
-          >((resolve, reject) => {
-            const handleIncomingMessage = (event: MessageEvent) => {
-              try {
-                const message = event.data
-
-                if (message.type === eventType) {
-                  resolve(message)
-                }
-              } catch (error) {
-                reject(error)
-              }
-            }
-
-            bindings.push(
-              this.context.events.addListener(
-                navigator.serviceWorker,
-                'message',
-                handleIncomingMessage,
-              ),
-              this.context.events.addListener(
-                navigator.serviceWorker,
-                'messageerror',
-                reject,
-              ),
-            )
-          }).finally(() => {
-            bindings.forEach((unbind) => unbind())
-          })
-        },
-      },
+      workerChannel: new WorkerChannel({
+        worker: workerPromise,
+      }),
       supports: {
         serviceWorkerApi:
-          !('serviceWorker' in navigator) || location.protocol === 'file:',
+          'serviceWorker' in navigator && location.protocol !== 'file:',
         readableStreamTransfer: supportsReadableStreamTransfer(),
       },
     }
-
-    this.startHandler = context.supports.serviceWorkerApi
-      ? createFallbackStart(context)
-      : createStartHandler(context)
-
-    this.stopHandler = context.supports.serviceWorkerApi
-      ? createFallbackStop(context)
-      : createStop(context)
-
-    return context
   }
 
   public async start(options: StartOptions = {}): StartReturnType {
-    if (options.waitUntilReady === true) {
+    if ('waitUntilReady' in options) {
       devUtils.warn(
         'The "waitUntilReady" option has been deprecated. Please remove it from this "worker.start()" call. Follow the recommended Browser integration (https://mswjs.io/docs/integrations/browser) to eliminate any race conditions between the Service Worker registration and any requests made by your application on initial render.',
       )
     }
 
+    // Warn the developer on multiple "worker.start()" calls.
+    // While this will not affect the worker in any way,
+    // it likely indicates an issue with the developer's code.
+    if (this.context.isMockingEnabled) {
+      devUtils.warn(
+        `Found a redundant "worker.start()" call. Note that starting the worker while mocking is already enabled will have no effect. Consider removing this "worker.start()" call.`,
+      )
+      return this.context.registration
+    }
+
+    this.context.workerStoppedAt = undefined
+
     this.context.startOptions = mergeRight(
       DEFAULT_START_OPTIONS,
       options,
@@ -202,14 +115,64 @@ export class SetupWorkerApi
       webSocketInterceptor.dispose()
     })
 
-    return await this.startHandler(this.context.startOptions, options)
+    // Use a fallback interception algorithm in the environments
+    // where the Service Worker API isn't supported.
+    if (!this.context.supports.serviceWorkerApi) {
+      const fallbackInterceptor = createFallbackRequestListener(
+        this.context,
+        this.context.startOptions,
+      )
+
+      this.subscriptions.push(() => {
+        fallbackInterceptor.dispose()
+      })
+
+      this.context.isMockingEnabled = true
+
+      printStartMessage({
+        message: 'Mocking enabled (fallback mode).',
+        quiet: this.context.startOptions.quiet,
+      })
+
+      return undefined
+    }
+
+    const startHandler = createStartHandler(this.context)
+    const registration = await startHandler(this.context.startOptions, options)
+
+    this.context.isMockingEnabled = true
+
+    return registration
   }
 
   public stop(): void {
     super.dispose()
-    this.context.events.removeAllListeners()
+
+    if (!this.context.isMockingEnabled) {
+      devUtils.warn(
+        'Found a redundant "worker.stop()" call. Notice that stopping the worker after it has already been stopped has no effect. Consider removing this "worker.stop()" call.',
+      )
+      return
+    }
+
+    this.context.isMockingEnabled = false
+    this.context.workerStoppedAt = Date.now()
     this.context.emitter.removeAllListeners()
-    this.stopHandler()
+
+    if (this.context.supports.serviceWorkerApi) {
+      this.context.workerChannel.removeAllListeners('RESPONSE')
+      window.clearInterval(this.context.keepAliveInterval)
+    }
+
+    // Post the internal stop message on the window
+    // to let any logic know when the worker has stopped.
+    // E.g. the WebSocket client manager needs this to know
+    // when to clear its in-memory clients list.
+    window.postMessage({ type: 'msw/worker:stop' })
+
+    printStopMessage({
+      quiet: this.context.startOptions?.quiet,
+    })
   }
 }
 

package/src/browser/setupWorker/start/createRequestListener.ts

@@ -1,12 +1,5 @@
-import {
-  StartOptions,
-  SetupWorkerInternalContext,
-  ServiceWorkerIncomingEventsMap,
-} from '../glossary'
-import {
-  ServiceWorkerMessage,
-  WorkerChannel,
-} from './utils/createMessageChannel'
+import { Emitter } from 'rettime'
+import { StartOptions, SetupWorkerInternalContext } from '../glossary'
 import { deserializeRequest } from '../../utils/deserializeRequest'
 import { RequestHandler } from '~/core/handlers/RequestHandler'
 import { handleRequest } from '~/core/utils/handleRequest'
@@ -18,18 +11,21 @@ import { isHandlerKind } from '~/core/utils/internal/isHandlerKind'
 export const createRequestListener = (
   context: SetupWorkerInternalContext,
   options: RequiredDeep<StartOptions>,
-) => {
-  return async (
-    event: MessageEvent,
-    message: ServiceWorkerMessage<
-      'REQUEST',
-      ServiceWorkerIncomingEventsMap['REQUEST']
-    >,
-  ) => {
-    const messageChannel = new WorkerChannel(event.ports[0])
+): Emitter.ListenerType<typeof context.workerChannel, 'REQUEST'> => {
+  return async (event) => {
+    // Treat any incoming requests from the worker as passthrough
+    // if `worker.stop()` has been called for this client.
+    if (
+      !context.isMockingEnabled &&
+      context.workerStoppedAt &&
+      event.data.interceptedAt > context.workerStoppedAt
+    ) {
+      event.postMessage('PASSTHROUGH')
+      return
+    }
 
-    const requestId = message.payload.id
-    const request = deserializeRequest(message.payload)
+    const requestId = event.data.id
+    const request = deserializeRequest(event.data)
     const requestCloneForLogs = request.clone()
 
     // Make this the first request clone before the
@@ -48,7 +44,7 @@ export const createRequestListener = (
         context.emitter,
         {
           onPassthroughResponse() {
-            messageChannel.postMessage('PASSTHROUGH')
+            event.postMessage('PASSTHROUGH')
           },
           async onMockedResponse(response, { handler, parsedResult }) {
             // Clone the mocked response so its body could be read
@@ -65,7 +61,7 @@ export const createRequestListener = (
             if (context.supports.readableStreamTransfer) {
               const responseStreamOrNull = response.body
 
-              messageChannel.postMessage(
+              event.postMessage(
                 'MOCK_RESPONSE',
                 {
                   ...responseInit,
@@ -85,7 +81,7 @@ export const createRequestListener = (
                   ? null
                   : await responseClone.arrayBuffer()
 
-              messageChannel.postMessage('MOCK_RESPONSE', {
+              event.postMessage('MOCK_RESPONSE', {
                 ...responseInit,
                 body: responseBufferOrNull,
               })
@@ -118,7 +114,7 @@ This exception has been gracefully handled as a 500 response, however, it's stro
 
         // Treat all other exceptions in a request handler as unintended,
         // alerting that there is a problem that needs fixing.
-        messageChannel.postMessage('MOCK_RESPONSE', {
+        event.postMessage('MOCK_RESPONSE', {
           status: 500,
           statusText: 'Request Handler Error',
           headers: {