msw 2.11.1 → 2.11.2

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
 }

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()
   }
 }

package/src/core/utils/internal/devUtils.ts

@@ -14,7 +14,6 @@ function formatMessage(message: string, ...positionals: any[]): string {
  * Prints a library-specific warning.
  */
 function warn(message: string, ...positionals: any[]): void {
-  // eslint-disable-next-line no-console
   console.warn(formatMessage(message, ...positionals))
 }
 
@@ -22,7 +21,6 @@ function warn(message: string, ...positionals: any[]): void {
  * Prints a library-specific error.
  */
 function error(message: string, ...positionals: any[]): void {
-  // eslint-disable-next-line no-console
   console.error(formatMessage(message, ...positionals))
 }
 

package/src/core/utils/internal/getCallFrame.ts

@@ -1,8 +1,8 @@
 // Ignore the source files traces for local testing.
-const SOURCE_FRAME = /[\/\\]msw[\/\\]src[\/\\](.+)/
+const SOURCE_FRAME = /[/\\]msw[/\\]src[/\\](.+)/
 
 const BUILD_FRAME =
-  /(node_modules)?[\/\\]lib[\/\\](core|browser|node|native|iife)[\/\\]|^[^\/\\]*$/
+  /(node_modules)?[/\\]lib[/\\](core|browser|node|native|iife)[/\\]|^[^/\\]*$/
 
 /**
  * Return the stack trace frame of a function's invocation.

package/src/core/utils/internal/parseGraphQLRequest.ts

@@ -168,6 +168,7 @@ async function getGraphQLInput(request: Request): Promise<GraphQLInput | null> {
           variables,
         }
       }
+      return null
     }
 
     default:

package/src/core/utils/matching/matchRequestUrl.ts

@@ -42,13 +42,13 @@ export function coercePath(path: string): string {
        * Escape the port so that "path-to-regexp" can match
        * absolute URLs including port numbers.
        */
-      .replace(/([^\/])(:)(?=\d+)/, '$1\\$2')
+      .replace(/([^/])(:)(?=\d+)/, '$1\\$2')
       /**
        * Escape the protocol so that "path-to-regexp" could match
        * absolute URL.
        * @see https://github.com/pillarjs/path-to-regexp/issues/259
        */
-      .replace(/^([^\/]+)(:)(?=\/\/)/, '$1\\$2')
+      .replace(/^([^/]+)(:)(?=\/\/)/, '$1\\$2')
   )
 }
 

package/src/core/utils/request/onUnhandledRequest.test.ts

@@ -17,7 +17,7 @@ Read more: https://mswjs.io/docs/http/intercepting-requests`,
 
   • POST ${url}
 
-  • Request body: {\"variables\":{\"id\":\"abc-123\"},\"query\":\"query UserName($id: String!) { user(id: $id) { name } }\"}
+  • Request body: {"variables":{"id":"abc-123"},"query":"query UserName($id: String!) { user(id: $id) { name } }"}
 
 If you still wish to intercept this unhandled request, please create a request handler for it.
 Read more: https://mswjs.io/docs/http/intercepting-requests`,

package/src/core/utils/url/cleanUrl.ts

@@ -1,4 +1,4 @@
-const REDUNDANT_CHARACTERS_EXP = /[\?|#].*$/g
+const REDUNDANT_CHARACTERS_EXP = /[?|#].*$/g
 
 export function getSearchParams(path: string) {
   return new URL(`/${path}`, 'http://localhost').searchParams

package/src/core/utils/url/isAbsoluteUrl.ts

@@ -2,5 +2,5 @@
  * Determines if the given URL string is an absolute URL.
  */
 export function isAbsoluteUrl(url: string): boolean {
-  return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
+  return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)
 }

package/src/core/ws/WebSocketIndexedDBClientStore.ts

@@ -34,7 +34,6 @@ export class WebSocketIndexedDBClientStore implements WebSocketClientStore {
       promise.resolve()
     }
     request.onerror = () => {
-      // eslint-disable-next-line no-console
       console.error(request.error)
       promise.reject(
         new Error(
@@ -81,7 +80,6 @@ export class WebSocketIndexedDBClientStore implements WebSocketClientStore {
       promise.resolve()
     }
     store.transaction.onerror = () => {
-      // eslint-disable-next-line no-console
       console.error(store.transaction.error)
       promise.reject(
         new Error(
@@ -116,7 +114,6 @@ export class WebSocketIndexedDBClientStore implements WebSocketClientStore {
         promise.resolve(db)
       }
       store.transaction.onerror = () => {
-        // eslint-disable-next-line no-console
         console.error(store.transaction.error)
         promise.reject(
           new Error(
@@ -126,7 +123,6 @@ export class WebSocketIndexedDBClientStore implements WebSocketClientStore {
       }
     }
     request.onerror = () => {
-      // eslint-disable-next-line no-console
       console.error(request.error)
       promise.reject(
         new Error(