msw 2.11.0 → 2.11.2

package/src/browser/setupWorker/setupWorker.ts

@@ -1,45 +1,34 @@
 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'
 import type { LifeCycleEventsMap } from '~/core/sharedOptions'
 import type { WebSocketHandler } from '~/core/handlers/WebSocketHandler'
-import { SetupWorker } from './glossary'
 import { supportsReadableStreamTransfer } from '../utils/supportsReadableStreamTransfer'
 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: {

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

@@ -1,21 +1,14 @@
 import { FetchResponse } from '@mswjs/interceptors'
-import type {
-  ServiceWorkerIncomingEventsMap,
-  SetupWorkerInternalContext,
-} from '../glossary'
-import type { ServiceWorkerMessage } from './utils/createMessageChannel'
+import type { Emitter } from 'rettime'
+import type { SetupWorkerInternalContext } from '../glossary'
 import { deserializeRequest } from '../../utils/deserializeRequest'
 
-export function createResponseListener(context: SetupWorkerInternalContext) {
-  return (
-    _: MessageEvent,
-    message: ServiceWorkerMessage<
-      'RESPONSE',
-      ServiceWorkerIncomingEventsMap['RESPONSE']
-    >,
-  ) => {
-    const { payload: responseJson } = message
-    const request = deserializeRequest(responseJson.request)
+export function createResponseListener(
+  context: SetupWorkerInternalContext,
+): Emitter.ListenerType<typeof context.workerChannel, 'RESPONSE'> {
+  return (event) => {
+    const responseMessage = event.data
+    const request = deserializeRequest(responseMessage.request)
 
     /**
      * CORS requests with `mode: "no-cors"` result in "opaque" responses.
@@ -24,12 +17,12 @@ export function createResponseListener(context: SetupWorkerInternalContext) {
      * @see https://fetch.spec.whatwg.org/#concept-filtered-response-opaque
      * @see https://github.com/mswjs/msw/issues/529
      */
-    if (responseJson.response.type?.includes('opaque')) {
+    if (responseMessage.response.type?.includes('opaque')) {
       return
     }
 
     const response =
-      responseJson.response.status === 0
+      responseMessage.response.status === 0
         ? Response.error()
         : new FetchResponse(
             /**
@@ -38,11 +31,11 @@ export function createResponseListener(context: SetupWorkerInternalContext) {
              * throw when passed a non-null body, so ensure it's null here
              * for those codes
              */
-            FetchResponse.isResponseWithBody(responseJson.response.status)
-              ? responseJson.response.body
+            FetchResponse.isResponseWithBody(responseMessage.response.status)
+              ? responseMessage.response.body
               : null,
             {
-              ...responseJson,
+              ...responseMessage,
               /**
                * Set response URL if it's not set already.
                * @see https://github.com/mswjs/msw/issues/2030
@@ -53,9 +46,9 @@ export function createResponseListener(context: SetupWorkerInternalContext) {
           )
 
     context.emitter.emit(
-      responseJson.isMockedResponse ? 'response:mocked' : 'response:bypass',
+      responseMessage.isMockedResponse ? 'response:mocked' : 'response:bypass',
       {
-        requestId: responseJson.request.id,
+        requestId: responseMessage.request.id,
         request,
         response,
       },

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

@@ -1,11 +1,12 @@
 import { devUtils } from '~/core/utils/internal/devUtils'
 import { getWorkerInstance } from './utils/getWorkerInstance'
 import { enableMocking } from './utils/enableMocking'
-import { SetupWorkerInternalContext, StartHandler } from '../glossary'
+import type { SetupWorkerInternalContext, StartHandler } from '../glossary'
 import { createRequestListener } from './createRequestListener'
 import { checkWorkerIntegrity } from '../../utils/checkWorkerIntegrity'
 import { createResponseListener } from './createResponseListener'
 import { validateWorkerScope } from './utils/validateWorkerScope'
+import { DeferredPromise } from '@open-draft/deferred-promise'
 
 export const createStartHandler = (
   context: SetupWorkerInternalContext,
@@ -15,7 +16,7 @@ export const createStartHandler = (
       // Remove all previously existing event listeners.
       // This way none of the listeners persists between Fast refresh
       // of the application's code.
-      context.events.removeAllListeners()
+      context.workerChannel.removeAllListeners()
 
       // Handle requests signaled by the worker.
       context.workerChannel.on(
@@ -57,17 +58,18 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
         throw new Error(missingWorkerMessage)
       }
 
-      context.worker = worker
+      context.workerPromise.resolve(worker)
       context.registration = registration
 
-      context.events.addListener(window, 'beforeunload', () => {
+      window.addEventListener('beforeunload', () => {
         if (worker.state !== 'redundant') {
           // Notify the Service Worker that this client has closed.
           // Internally, it's similar to disabling the mocking, only
           // client close event has a handler that self-terminates
           // the Service Worker when there are no open clients.
-          context.workerChannel.send('CLIENT_CLOSED')
+          context.workerChannel.postMessage('CLIENT_CLOSED')
         }
+
         // Make sure we're always clearing the interval - there are reports that not doing this can
         // cause memory leaks in headless browser environments.
         window.clearInterval(context.keepAliveInterval)
@@ -82,14 +84,13 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
       // by the currently installed version of MSW.
       await checkWorkerIntegrity(context).catch((error) => {
         devUtils.error(
-          'Error while checking the worker script integrity. Please report this on GitHub (https://github.com/mswjs/msw/issues), including the original error below.',
+          'Error while checking the worker script integrity. Please report this on GitHub (https://github.com/mswjs/msw/issues) and include the original error below.',
         )
-        // eslint-disable-next-line no-console
         console.error(error)
       })
 
       context.keepAliveInterval = window.setInterval(
-        () => context.workerChannel.send('KEEPALIVE_REQUEST'),
+        () => context.workerChannel.postMessage('KEEPALIVE_REQUEST'),
         5000,
       )
 
@@ -104,22 +105,27 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
       async (registration) => {
         const pendingInstance = registration.installing || registration.waiting
 
-        // Wait until the worker is activated.
-        // Assume the worker is already activated if there's no pending registration
-        // (i.e. when reloading the page after a successful activation).
         if (pendingInstance) {
-          await new Promise<void>((resolve) => {
-            pendingInstance.addEventListener('statechange', () => {
-              if (pendingInstance.state === 'activated') {
-                return resolve()
-              }
-            })
+          const activationPromise = new DeferredPromise<void>()
+
+          pendingInstance.addEventListener('statechange', () => {
+            if (pendingInstance.state === 'activated') {
+              activationPromise.resolve()
+            }
           })
+
+          // Wait until the worker is activated.
+          // Assume the worker is already activated if there's no pending registration
+          // (i.e. when reloading the page after a successful activation).
+          await activationPromise
         }
 
         // Print the activation message only after the worker has been activated.
         await enableMocking(context, options).catch((error) => {
-          throw new Error(`Failed to enable mocking: ${error?.message}`)
+          devUtils.error(
+            'Failed to enable mocking. Please report this on GitHub (https://github.com/mswjs/msw/issues) and include the original error below.',
+          )
+          throw error
         })
 
         return registration

package/src/browser/setupWorker/start/utils/enableMocking.ts

@@ -1,33 +1,30 @@
-import { devUtils } from '~/core/utils/internal/devUtils'
-import { StartOptions, SetupWorkerInternalContext } from '../../glossary'
+import { DeferredPromise } from '@open-draft/deferred-promise'
+import type { StartOptions, SetupWorkerInternalContext } from '../../glossary'
 import { printStartMessage } from './printStartMessage'
 
 /**
  * Signals the worker to enable the interception of requests.
  */
-export async function enableMocking(
+export function enableMocking(
   context: SetupWorkerInternalContext,
   options: StartOptions,
-) {
-  context.workerChannel.send('MOCK_ACTIVATE')
-  const { payload } = await context.events.once('MOCKING_ENABLED')
+): Promise<boolean> {
+  const mockingEnabledPromise = new DeferredPromise<boolean>()
 
-  // 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 (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
-  }
+  context.workerChannel.postMessage('MOCK_ACTIVATE')
+  context.workerChannel.once('MOCKING_ENABLED', async (event) => {
+    context.isMockingEnabled = true
+    const worker = await context.workerPromise
 
-  context.isMockingEnabled = true
+    printStartMessage({
+      quiet: options.quiet,
+      workerScope: context.registration?.scope,
+      workerUrl: worker.scriptURL,
+      client: event.data.client,
+    })
 
-  printStartMessage({
-    quiet: options.quiet,
-    workerScope: context.registration?.scope,
-    workerUrl: context.worker?.scriptURL,
-    client: payload.client,
+    mockingEnabledPromise.resolve(true)
   })
+
+  return mockingEnabledPromise
 }

package/src/browser/setupWorker/start/utils/printStartMessage.ts

@@ -19,7 +19,6 @@ export function printStartMessage(args: PrintStartMessageArgs = {}) {
 
   const message = args.message || 'Mocking enabled.'
 
-  // eslint-disable-next-line no-console
   console.groupCollapsed(
     `%c${devUtils.formatMessage(message)}`,
     'color:orangered;font-weight:bold;',
@@ -48,6 +47,5 @@ export function printStartMessage(args: PrintStartMessageArgs = {}) {
     console.log('Client ID: %s (%s)', args.client.id, args.client.frameType)
   }
 
-  // eslint-disable-next-line no-console
   console.groupEnd()
 }

package/src/browser/utils/checkWorkerIntegrity.ts

@@ -1,34 +1,42 @@
 import { devUtils } from '~/core/utils/internal/devUtils'
 import type { SetupWorkerInternalContext } from '../setupWorker/glossary'
+import { DeferredPromise } from '@open-draft/deferred-promise'
 
 /**
  * Check whether the registered Service Worker has been
  * generated by the installed version of the library.
  * Prints a warning message if the worker scripts mismatch.
  */
-export async function checkWorkerIntegrity(
+export function checkWorkerIntegrity(
   context: SetupWorkerInternalContext,
 ): Promise<void> {
-  // Request the integrity checksum from the registered worker.
-  context.workerChannel.send('INTEGRITY_CHECK_REQUEST')
+  const integrityCheckPromise = new DeferredPromise<void>()
 
-  const { payload } = await context.events.once('INTEGRITY_CHECK_RESPONSE')
+  // Request the integrity checksum from the registered worker.
+  context.workerChannel.postMessage('INTEGRITY_CHECK_REQUEST')
+  context.workerChannel.once('INTEGRITY_CHECK_RESPONSE', (event) => {
+    const { checksum, packageVersion } = event.data
 
-  // Compare the response from the Service Worker and the
-  // global variable set during the build.
+    // Compare the response from the Service Worker and the
+    // global variable set during the build.
 
-  // The integrity is validated based on the worker script's checksum
-  // that's derived from its minified content during the build.
-  // The "SERVICE_WORKER_CHECKSUM" global variable is injected by the build.
-  if (payload.checksum !== SERVICE_WORKER_CHECKSUM) {
-    devUtils.warn(
-      `The currently registered Service Worker has been generated by a different version of MSW (${payload.packageVersion}) and may not be fully compatible with the installed version.
+    // The integrity is validated based on the worker script's checksum
+    // that's derived from its minified content during the build.
+    // The "SERVICE_WORKER_CHECKSUM" global variable is injected by the build.
+    if (checksum !== SERVICE_WORKER_CHECKSUM) {
+      devUtils.warn(
+        `The currently registered Service Worker has been generated by a different version of MSW (${packageVersion}) and may not be fully compatible with the installed version.
 
 It's recommended you update your worker script by running this command:
 
   \u2022 npx msw init <PUBLIC_DIR>
 
 You can also automate this process and make the worker script update automatically upon the library installations. Read more: https://mswjs.io/docs/cli/init.`,
-    )
-  }
+      )
+    }
+
+    integrityCheckPromise.resolve()
+  })
+
+  return integrityCheckPromise
 }