msw 2.11.1 → 2.11.3

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/getWorkerInstance.ts

@@ -1,4 +1,4 @@
-import { until } from '@open-draft/until'
+import { until } from 'until-async'
 import { devUtils } from '~/core/utils/internal/devUtils'
 import { getAbsoluteWorkerUrl } from '../../../utils/getAbsoluteWorkerUrl'
 import { getWorkerByRegistration } from './getWorkerByRegistration'
@@ -52,21 +52,22 @@ export const getWorkerInstance = async (
   }
 
   // When the Service Worker wasn't found, register it anew and return the reference.
-  const registrationResult = await until<Error, ServiceWorkerInstanceTuple>(
-    async () => {
-      const registration = await navigator.serviceWorker.register(url, options)
-      return [
-        // Compare existing worker registration by its worker URL,
-        // to prevent irrelevant workers to resolve here (such as Codesandbox worker).
-        getWorkerByRegistration(registration, absoluteWorkerUrl, findWorker),
-        registration,
-      ]
-    },
-  )
+  const [registrationError, registrationResult] = await until<
+    Error,
+    ServiceWorkerInstanceTuple
+  >(async () => {
+    const registration = await navigator.serviceWorker.register(url, options)
+    return [
+      // Compare existing worker registration by its worker URL,
+      // to prevent irrelevant workers to resolve here (such as Codesandbox worker).
+      getWorkerByRegistration(registration, absoluteWorkerUrl, findWorker),
+      registration,
+    ]
+  })
 
   // Handle Service Worker registration errors.
-  if (registrationResult.error) {
-    const isWorkerMissing = registrationResult.error.message.includes('(404)')
+  if (registrationError) {
+    const isWorkerMissing = registrationError.message.includes('(404)')
 
     // Produce a custom error message when given a non-existing Service Worker url.
     // Suggest developers to check their setup.
@@ -87,10 +88,10 @@ Learn more about creating the Service Worker script: https://mswjs.io/docs/cli/i
     throw new Error(
       devUtils.formatMessage(
         'Failed to register the Service Worker:\n\n%s',
-        registrationResult.error.message,
+        registrationError.message,
       ),
     )
   }
 
-  return registrationResult.data
+  return registrationResult
 }

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
 }

package/src/browser/utils/deferNetworkRequestsUntil.ts

@@ -1,4 +1,4 @@
-import { until } from '@open-draft/until'
+import { until } from 'until-async'
 
 /**
  * Intercepts and defers any requests on the page

package/src/browser/utils/workerChannel.ts

@@ -0,0 +1,146 @@
+import { Emitter, TypedEvent } from 'rettime'
+import { isObject } from '~/core/utils/internal/isObject'
+import type { StringifiedResponse } from '../setupWorker/glossary'
+
+export interface WorkerChannelOptions {
+  worker: Promise<ServiceWorker>
+}
+
+export type WorkerChannelEventMap = {
+  REQUEST: WorkerEvent<IncomingWorkerRequest>
+  RESPONSE: WorkerEvent<IncomingWorkerResponse>
+  MOCKING_ENABLED: WorkerEvent<{
+    client: {
+      id: string
+      frameType: string
+    }
+  }>
+  INTEGRITY_CHECK_RESPONSE: WorkerEvent<{
+    packageVersion: string
+    checksum: string
+  }>
+  KEEPALIVE_RESPONSE: TypedEvent<never>
+}
+
+/**
+ * Request representation received from the worker message event.
+ */
+export interface IncomingWorkerRequest
+  extends Omit<
+    Request,
+    | 'text'
+    | 'body'
+    | 'json'
+    | 'blob'
+    | 'arrayBuffer'
+    | 'formData'
+    | 'clone'
+    | 'signal'
+    | 'isHistoryNavigation'
+    | 'isReloadNavigation'
+  > {
+  /**
+   * Unique ID of the request generated once the request is
+   * intercepted by the "fetch" event in the Service Worker.
+   */
+  id: string
+  interceptedAt: number
+  body?: ArrayBuffer | null
+}
+
+type IncomingWorkerResponse = {
+  isMockedResponse: boolean
+  request: IncomingWorkerRequest
+  response: Pick<
+    Response,
+    'type' | 'ok' | 'status' | 'statusText' | 'body' | 'headers' | 'redirected'
+  >
+}
+
+export type WorkerEventResponse = {
+  MOCK_RESPONSE: [
+    data: StringifiedResponse,
+    transfer?: [ReadableStream<Uint8Array>],
+  ]
+  PASSTHROUGH: []
+}
+
+export class WorkerEvent<
+  DataType,
+  ReturnType = any,
+  EventType extends string = string,
+> extends TypedEvent<DataType, ReturnType, EventType> {
+  #workerEvent: MessageEvent
+
+  constructor(workerEvent: MessageEvent) {
+    const type = workerEvent.data.type as EventType
+    const data = workerEvent.data.payload as DataType
+
+    /**
+     * @note This is the only place we're mapping { type, payload }
+     * message structure of the worker. The client references the
+     * payload via `event.data`.
+     */
+    super(
+      // @ts-expect-error Troublesome `TypedEvent` extension.
+      type,
+      { data },
+    )
+    this.#workerEvent = workerEvent
+  }
+
+  get ports() {
+    return this.#workerEvent.ports
+  }
+
+  /**
+   * Reply directly to this event using its `MessagePort`.
+   */
+  public postMessage<Type extends keyof WorkerEventResponse>(
+    type: Type,
+    ...rest: WorkerEventResponse[Type]
+  ): void {
+    this.#workerEvent.ports[0].postMessage(
+      { type, data: rest[0] },
+      { transfer: rest[1] },
+    )
+  }
+}
+
+/**
+ * Map of the events that can be sent to the Service Worker
+ * from any execution context.
+ */
+type OutgoingWorkerEvents =
+  | 'MOCK_ACTIVATE'
+  | 'INTEGRITY_CHECK_REQUEST'
+  | 'KEEPALIVE_REQUEST'
+  | 'CLIENT_CLOSED'
+
+export class WorkerChannel extends Emitter<WorkerChannelEventMap> {
+  constructor(protected readonly options: WorkerChannelOptions) {
+    super()
+
+    navigator.serviceWorker.addEventListener('message', async (event) => {
+      const worker = await this.options.worker
+
+      if (event.source != null && event.source !== worker) {
+        return
+      }
+
+      if (event.data && isObject(event.data) && 'type' in event.data) {
+        this.emit(new WorkerEvent<any, any, any>(event))
+      }
+    })
+  }
+
+  /**
+   * Send data to the Service Worker controlling this client.
+   * This triggers the `message` event listener on ServiceWorkerGlobalScope.
+   */
+  public postMessage(type: OutgoingWorkerEvents): void {
+    this.options.worker.then((worker) => {
+      worker.postMessage(type)
+    })
+  }
+}

package/src/core/handlers/GraphQLHandler.ts

@@ -176,7 +176,6 @@ export class GraphQLHandler extends RequestHandler<
       GraphQLHandler.parsedRequestCache.set(
         request,
         await parseGraphQLRequest(request).catch((error) => {
-          // eslint-disable-next-line no-console
           console.error(error)
           return undefined
         }),
@@ -318,7 +317,6 @@ Consider naming this operation or using "graphql.operation()" request handler to
       ? `${args.parsedResult.operationType} ${args.parsedResult.operationName}`
       : `anonymous ${args.parsedResult.operationType}`
 
-    // eslint-disable-next-line no-console
     console.groupCollapsed(
       devUtils.formatMessage(
         `${getTimestamp()} ${requestInfo} (%c${loggedResponse.status} ${
@@ -334,7 +332,6 @@ Consider naming this operation or using "graphql.operation()" request handler to
     console.log('Handler:', this)
     // eslint-disable-next-line no-console
     console.log('Response:', loggedResponse)
-    // eslint-disable-next-line no-console
     console.groupEnd()
   }
 }

package/src/core/handlers/HttpHandler.ts

@@ -201,7 +201,6 @@ export class HttpHandler extends RequestHandler<
     const loggedResponse = await serializeResponse(args.response)
     const statusColor = getStatusCodeColor(loggedResponse.status)
 
-    // eslint-disable-next-line no-console
     console.groupCollapsed(
       devUtils.formatMessage(
         `${getTimestamp()} ${args.request.method} ${publicUrl} (%c${
@@ -217,7 +216,6 @@ export class HttpHandler extends RequestHandler<
     console.log('Handler:', this)
     // eslint-disable-next-line no-console
     console.log('Response', loggedResponse)
-    // eslint-disable-next-line no-console
     console.groupEnd()
   }
 }