msw 2.15.0 → 3.0.0

package/src/browser/sources/service-worker-source.ts

@@ -1,25 +1,24 @@
 import { invariant } from 'outvariant'
 import type { Emitter } from 'rettime'
-import { DeferredPromise } from '@open-draft/deferred-promise'
 import { FetchResponse } from '@mswjs/interceptors'
 import { NetworkSource } from '#core/experimental/sources/network-source'
-import { RequestHandler } from '#core/handlers/RequestHandler'
+import { RequestHandler } from '#core/handlers/request-handler'
 import {
   HttpNetworkFrame,
   ResponseEvent,
 } from '#core/experimental/frames/http-frame'
-import { HttpResponse } from '#core/HttpResponse'
-import { toResponseInit } from '#core/utils/toResponseInit'
-import { devUtils } from '#core/utils/internal/devUtils'
+import { HttpResponse } from '#http/http-response'
+import { toResponseInit } from '#core/utils/to-response-init'
+import { devUtils } from '#core/utils/internal/dev-utils'
 import {
   supportsReadableStreamTransfer,
   supportsServiceWorker,
 } from '../utils/supports'
 import { getWorkerInstance } from '../utils/get-worker-instance'
-import type { WorkerChannelEventMap } from '../utils/workerChannel'
-import { WorkerChannel } from '../utils/workerChannel'
+import type { WorkerChannelEventMap } from '../utils/worker-channel'
+import { WorkerChannel } from '../utils/worker-channel'
 import type { FindWorker } from '../glossary'
-import { deserializeRequest } from '../utils/deserializeRequest'
+import { deserializeRequest } from '../utils/deserialize-request'
 import { validateWorkerScope } from '../utils/validate-worker-scope'
 import { shouldInvalidateWorker } from '../utils/should-invalidate-worker'
 
@@ -44,6 +43,12 @@ type WorkerChannelResponseEvent = Emitter.Event<
   WorkerChannelEventMap
 >
 
+type WorkerChannelRequestErrorEvent = Emitter.Event<
+  WorkerChannel,
+  'REQUEST_ERROR',
+  WorkerChannelEventMap
+>
+
 type WorkerChannelClient =
   WorkerChannelEventMap['MOCKING_ENABLED']['data']['client']
 
@@ -70,16 +75,21 @@ export class ServiceWorkerSource extends NetworkSource<ServiceWorkerHttpNetworkF
   }
 
   #options: ServiceWorkerSourceOptions
+  /**
+   * @note We cannot use `WeakMap` here as request/response
+   * identity cannot be preserved through the client-worker channel.
+   */
   #frames: Map<string, ServiceWorkerHttpNetworkFrame>
   #channel: WorkerChannel
   #listenerController?: AbortController
   #clientPromise?: Promise<WorkerChannelClient>
   #keepAliveInterval?: number
-  #stoppedAt?: number
 
-  public workerPromise: DeferredPromise<
+  public workerPromise: Promise<[ServiceWorker, ServiceWorkerRegistration]>
+  #workerResolvers: PromiseWithResolvers<
     [ServiceWorker, ServiceWorkerRegistration]
   >
+  #workerState: 'pending' | 'fulfilled' | 'rejected'
 
   constructor(options: ServiceWorkerSourceOptions) {
     super()
@@ -91,31 +101,15 @@ export class ServiceWorkerSource extends NetworkSource<ServiceWorkerHttpNetworkF
 
     this.#options = options
     this.#frames = new Map()
-    this.workerPromise = new DeferredPromise()
+    this.#workerResolvers = Promise.withResolvers()
+    this.workerPromise = this.#workerResolvers.promise
+    this.#workerState = 'pending'
     this.#channel = new WorkerChannel({
       getWorker: () => this.workerPromise.then(([worker]) => worker),
     })
   }
 
   public async enable(): Promise<ServiceWorkerRegistration> {
-    /**
-     * @note The source is considered already running if the worker has been
-     * resolved AND `stop()` has not been called since. `workerPromise` is NOT
-     * reset on `disable()` so that the channel's `getWorker()` can keep
-     * resolving to the registered SW for post-stop passthrough replies.
-     */
-    if (
-      this.workerPromise.state === 'fulfilled' &&
-      typeof this.#stoppedAt == 'undefined'
-    ) {
-      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.workerPromise.then(([, registration]) => registration)
-    }
-
-    this.#stoppedAt = undefined
     this.#channel.removeAllListeners()
     this.#frames.clear()
 
@@ -124,8 +118,8 @@ export class ServiceWorkerSource extends NetworkSource<ServiceWorkerHttpNetworkF
 
     if (worker.state !== 'activated') {
       const controller = new AbortController()
-      const activationPromise = new DeferredPromise<void>()
-      activationPromise.then(() => controller.abort())
+      const activationPromise = Promise.withResolvers<void>()
+      activationPromise.promise.then(() => controller.abort())
 
       worker.addEventListener(
         'statechange',
@@ -139,18 +133,19 @@ export class ServiceWorkerSource extends NetworkSource<ServiceWorkerHttpNetworkF
         },
       )
 
-      await activationPromise
+      await activationPromise.promise
     }
 
     this.#channel.postMessage('MOCK_ACTIVATE')
 
-    const clientConfirmationPromise = new DeferredPromise<WorkerChannelClient>()
-    this.#clientPromise = clientConfirmationPromise
+    const clientConfirmationPromise =
+      Promise.withResolvers<WorkerChannelClient>()
+    this.#clientPromise = clientConfirmationPromise.promise
 
     this.#channel.once('MOCKING_ENABLED', (event) => {
       clientConfirmationPromise.resolve(event.data.client)
     })
-    await clientConfirmationPromise
+    await clientConfirmationPromise.promise
 
     if (!this.#options.quiet) {
       this.#printStartMessage()
@@ -159,7 +154,7 @@ export class ServiceWorkerSource extends NetworkSource<ServiceWorkerHttpNetworkF
     return registration
   }
 
-  public disable(): void {
+  public async disable(): Promise<void> {
     /**
      * @note Do NOT call `super.disable()` because it removes any "frame" listeners
      * from this network source, effectively turning it off. The Service Worker source
@@ -167,25 +162,14 @@ export class ServiceWorkerSource extends NetworkSource<ServiceWorkerHttpNetworkF
      * after it's been disabled.
      */
 
-    if (typeof this.#stoppedAt !== 'undefined') {
-      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.#stoppedAt = Date.now()
-
     this.#listenerController?.abort()
     this.#listenerController = undefined
 
-    /**
-     * @note Tell the Service Worker to drop this client from its active set
-     * so it stops forwarding REQUEST events here. `stoppedAt` still guards
-     * any requests the SW already forwarded before this message arrived.
-     */
-    this.#channel.postMessage('CLIENT_CLOSED')
+    const closedPromise = Promise.withResolvers<void>()
+    this.#channel.once('CLIENT_CLOSED', () => closedPromise.resolve())
+
+    this.#channel.postMessage('CLIENT_CLOSE')
+    await closedPromise.promise
 
     /**
      * @note Do NOT reset `workerPromise` here. The channel must continue to
@@ -215,7 +199,7 @@ export class ServiceWorkerSource extends NetworkSource<ServiceWorkerHttpNetworkF
     this.#listenerController?.abort()
     this.#listenerController = undefined
 
-    if (this.workerPromise.state === 'fulfilled') {
+    if (this.#workerState === 'fulfilled') {
       const [, registration] = await this.workerPromise
       await registration.unregister()
     }
@@ -261,27 +245,33 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
       throw new Error(missingWorkerMessage)
     }
 
-    if (this.workerPromise.state === 'pending') {
-      this.workerPromise.resolve([worker, registration])
+    if (this.#workerState === 'pending') {
+      this.#workerResolvers.resolve([worker, registration])
+      this.#workerState = 'fulfilled'
     } else {
       /**
        * @note Re-enable after `stop()`: the previous `workerPromise` is already
        * fulfilled and cannot be resolved again. Swap in a pre-resolved one so
        * `getWorker()` sees the new worker instance immediately.
        */
-      this.workerPromise = new DeferredPromise((resolve) => {
-        resolve([worker, registration])
-      })
+      this.#workerResolvers = Promise.withResolvers()
+      this.#workerResolvers.resolve([worker, registration])
+      this.workerPromise = this.#workerResolvers.promise
     }
 
     this.#channel.on('REQUEST', this.#handleRequest.bind(this))
     this.#channel.on('RESPONSE', this.#handleResponse.bind(this))
+    this.#channel.on('REQUEST_ERROR', this.#handleRequestError.bind(this))
 
     window.addEventListener(
-      'beforeunload',
-      () => {
+      'pagehide',
+      (event) => {
+        if (event.persisted) {
+          return
+        }
+
         if (worker.state !== 'redundant') {
-          this.#channel.postMessage('CLIENT_CLOSED')
+          this.#channel.postMessage('CLIENT_CLOSE')
         }
 
         clearInterval(this.#keepAliveInterval)
@@ -312,10 +302,6 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
   }
 
   async #handleRequest(event: WorkerChannelRequestEvent): Promise<void> {
-    if (this.#stoppedAt && event.data.interceptedAt > this.#stoppedAt) {
-      return event.postMessage('PASSTHROUGH')
-    }
-
     const request = deserializeRequest(event.data)
     RequestHandler.cache.set(request, request.clone())
 
@@ -397,12 +383,27 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
     }
   }
 
+  /**
+   * @note A request can settle without ever producing a response
+   * (e.g. a passthrough request failing with a network error).
+   * The worker never sends the "RESPONSE" message for such requests,
+   * so the frame must be released here to prevent it from being retained.
+   * No "response:*" event is emitted, consistent with the Node.js source.
+   * @see https://github.com/mswjs/msw/issues/2792
+   */
+  #handleRequestError(event: WorkerChannelRequestErrorEvent): void {
+    const { request } = event.data
+    const frame = this.#frames.get(request.id)
+    this.#frames.delete(request.id)
+    frame?.events.removeAllListeners()
+  }
+
   #defaultFindWorker: FindWorker = (workerUrl, mockServiceWorkerUrl) => {
     return workerUrl === mockServiceWorkerUrl
   }
 
   async #checkWorkerIntegrity(): Promise<void> {
-    const integrityCheckPromise = new DeferredPromise<void>()
+    const integrityCheckPromise = Promise.withResolvers<void>()
 
     this.#channel.postMessage('INTEGRITY_CHECK_REQUEST')
     this.#channel.once('INTEGRITY_CHECK_RESPONSE', (event) => {
@@ -429,11 +430,11 @@ You can also automate this process and make the worker script update automatical
       integrityCheckPromise.resolve()
     })
 
-    return integrityCheckPromise
+    return integrityCheckPromise.promise
   }
 
   async #printStartMessage() {
-    if (this.workerPromise.state === 'rejected') {
+    if (this.#workerState === 'rejected') {
       return
     }
 
@@ -490,7 +491,13 @@ class ServiceWorkerHttpNetworkFrame extends HttpNetworkFrame {
   }
 
   public passthrough(): void {
-    this.#event.postMessage('PASSTHROUGH')
+    // Forward the request headers so that any modifications made
+    // in the request handlers are applied to the passthrough request.
+    this.#event.postMessage('PASSTHROUGH', {
+      request: {
+        headers: Array.from(this.data.request.headers),
+      },
+    })
   }
 
   public respondWith(response?: Response): void {

package/src/browser/tsconfig.browser.json

@@ -1,6 +1,6 @@
 {
   "extends": "../tsconfig.src.json",
-  "include": ["../../global.d.ts", "./global.browser.d.ts", "./**/*.ts"],
+  "include": ["./global.browser.d.ts", "./**/*.ts"],
   "references": [
     {
       "path": "../tsconfig.core.json"
@@ -9,6 +9,8 @@
   "compilerOptions": {
     // Expose browser-specific libraries only for the
     // source code under the "src/browser" directory.
-    "lib": ["DOM", "WebWorker", "DOM.Iterable"]
+    // Setting "lib" replaces the default library set implied by
+    // the "target", so "ESNext" must be listed explicitly.
+    "lib": ["ESNext", "DOM", "WebWorker", "DOM.Iterable"]
   }
 }

package/src/browser/utils/{deserializeRequest.ts → deserialize-request.ts}

@@ -1,5 +1,5 @@
-import { pruneGetRequestBody } from './pruneGetRequestBody'
-import type { IncomingWorkerRequest } from './workerChannel'
+import { FetchRequest } from '@mswjs/interceptors'
+import type { IncomingWorkerRequest } from './worker-channel'
 
 /**
  * Converts a given request received from the Service Worker
@@ -8,8 +8,7 @@ import type { IncomingWorkerRequest } from './workerChannel'
 export function deserializeRequest(
   serializedRequest: IncomingWorkerRequest,
 ): Request {
-  return new Request(serializedRequest.url, {
+  return new FetchRequest(serializedRequest.url, {
     ...serializedRequest,
-    body: pruneGetRequestBody(serializedRequest),
   })
 }

package/src/browser/utils/{getAbsoluteWorkerUrl.test.ts → get-absolute-worker-url.test.ts}

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { getAbsoluteWorkerUrl } from './getAbsoluteWorkerUrl'
+import { getAbsoluteWorkerUrl } from './get-absolute-worker-url'
 
 const rawLocation = window.location
 
@@ -9,11 +9,11 @@ afterAll(() => {
   })
 })
 
-it('returns absolute worker url relatively to the root', () => {
+test('returns absolute worker url relatively to the root', () => {
   expect(getAbsoluteWorkerUrl('./worker.js')).toBe('http://localhost/worker.js')
 })
 
-it('returns an absolute worker url relatively to the current path', () => {
+test('returns an absolute worker url relatively to the current path', () => {
   Object.defineProperty(window, 'location', {
     value: {
       href: 'http://localhost/path/to/page',

package/src/browser/utils/get-worker-instance.ts

@@ -1,6 +1,6 @@
 import { until } from 'until-async'
-import { devUtils } from '#core/utils/internal/devUtils'
-import { getAbsoluteWorkerUrl } from './getAbsoluteWorkerUrl'
+import { devUtils } from '#core/utils/internal/dev-utils'
+import { getAbsoluteWorkerUrl } from './get-absolute-worker-url'
 import { getWorkerByRegistration } from './get-worker-by-registration'
 import type { ServiceWorkerInstanceTuple, FindWorker } from '../glossary'
 

package/src/browser/utils/should-invalidate-worker.test.ts

@@ -1,4 +1,4 @@
-import { type ServiceWorkerSourceOptions } from '../sources/service-worker-source'
+import type { ServiceWorkerSourceOptions } from '../sources/service-worker-source'
 import { shouldInvalidateWorker } from './should-invalidate-worker'
 
 function createOptions(
@@ -13,7 +13,7 @@ function createOptions(
   }
 }
 
-it('returns true when the worker url differs', () => {
+test('returns true when the worker url differs', () => {
   expect(
     shouldInvalidateWorker(
       createOptions({
@@ -26,7 +26,7 @@ it('returns true when the worker url differs', () => {
   ).toBe(true)
 })
 
-it('returns true when the registration options differ', () => {
+test('returns true when the registration options differ', () => {
   expect(
     shouldInvalidateWorker(
       createOptions({
@@ -39,7 +39,7 @@ it('returns true when the registration options differ', () => {
   ).toBe(true)
 })
 
-it('returns true when only one side has registration options', () => {
+test('returns true when only one side has registration options', () => {
   expect(
     shouldInvalidateWorker(
       createOptions({ serviceWorker: { url: '/sw.js' } }),
@@ -50,7 +50,7 @@ it('returns true when only one side has registration options', () => {
   ).toBe(true)
 })
 
-it('returns true when findWorker differs by reference', () => {
+test('returns true when findWorker differs by reference', () => {
   expect(
     shouldInvalidateWorker(
       createOptions({ findWorker: () => true }),
@@ -59,7 +59,7 @@ it('returns true when findWorker differs by reference', () => {
   ).toBe(true)
 })
 
-it('returns true when findWorker is added on one side', () => {
+test('returns true when findWorker is added on one side', () => {
   expect(
     shouldInvalidateWorker(
       createOptions(),
@@ -68,12 +68,12 @@ it('returns true when findWorker is added on one side', () => {
   ).toBe(true)
 })
 
-it('returns false for the same options reference', () => {
+test('returns false for the same options reference', () => {
   const options = createOptions()
   expect(shouldInvalidateWorker(options, options)).toBe(false)
 })
 
-it('returns false for deeply equal options', () => {
+test('returns false for deeply equal options', () => {
   expect(
     shouldInvalidateWorker(
       createOptions({
@@ -86,7 +86,7 @@ it('returns false for deeply equal options', () => {
   ).toBe(false)
 })
 
-it('returns false for the same worker url without options', () => {
+test('returns false for the same worker url without options', () => {
   expect(
     shouldInvalidateWorker(
       createOptions({ serviceWorker: { url: '/sw.js' } }),
@@ -95,7 +95,7 @@ it('returns false for the same worker url without options', () => {
   ).toBe(false)
 })
 
-it('returns false when findWorker is the same reference', () => {
+test('returns false when findWorker is the same reference', () => {
   const findWorker = () => true
   expect(
     shouldInvalidateWorker(
@@ -105,7 +105,7 @@ it('returns false when findWorker is the same reference', () => {
   ).toBe(false)
 })
 
-it('returns false regardless of the "quiet" option', () => {
+test('returns false regardless of the "quiet" option', () => {
   expect(
     shouldInvalidateWorker(
       createOptions({ quiet: true }),

package/src/browser/utils/should-invalidate-worker.ts

@@ -1,4 +1,4 @@
-import { type ServiceWorkerSourceOptions } from '../sources/service-worker-source'
+import type { ServiceWorkerSourceOptions } from '../sources/service-worker-source'
 
 export function shouldInvalidateWorker(
   prevOptions: ServiceWorkerSourceOptions,

package/src/browser/utils/validate-worker-scope.ts

@@ -1,4 +1,4 @@
-import { devUtils } from '#core/utils/internal/devUtils'
+import { devUtils } from '#core/utils/internal/dev-utils'
 
 /**
  * Print a warning if the given Service Worker registration has a scope

package/src/browser/utils/{workerChannel.ts → worker-channel.ts}

@@ -1,18 +1,20 @@
 import { invariant } from 'outvariant'
 import { Emitter, TypedEvent } from 'rettime'
-import { isObject } from '#core/utils/internal/isObject'
+import { isObject } from '#core/utils/internal/is-object'
 import type { StringifiedResponse } from '../glossary'
 import { supportsServiceWorker } from '../utils/supports'
 
 export type WorkerChannelEventMap = {
   REQUEST: WorkerEvent<IncomingWorkerRequest>
   RESPONSE: WorkerEvent<IncomingWorkerResponse>
+  REQUEST_ERROR: WorkerEvent<IncomingWorkerRequestError>
   MOCKING_ENABLED: WorkerEvent<{
     client: {
       id: string
       frameType: string
     }
   }>
+  CLIENT_CLOSED: TypedEvent<never>
   INTEGRITY_CHECK_RESPONSE: WorkerEvent<{
     packageVersion: string
     checksum: string
@@ -23,26 +25,24 @@ export type WorkerChannelEventMap = {
 /**
  * Request representation received from the worker message event.
  */
-export interface IncomingWorkerRequest
-  extends Omit<
-    Request,
-    | 'text'
-    | 'body'
-    | 'json'
-    | 'blob'
-    | 'arrayBuffer'
-    | 'formData'
-    | 'clone'
-    | 'signal'
-    | 'isHistoryNavigation'
-    | 'isReloadNavigation'
-  > {
+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
 }
 
@@ -55,17 +55,39 @@ type IncomingWorkerResponse = {
   >
 }
 
-export type WorkerEventResponse = {
+/**
+ * Notification that a request has settled without producing a response
+ * (e.g. a passthrough request failed with a network error).
+ */
+type IncomingWorkerRequestError = {
+  request: Pick<IncomingWorkerRequest, 'id'>
+  error: Pick<Error, 'name' | 'message'>
+}
+
+/**
+ * Request modifications to apply to the passthrough request in the worker.
+ */
+export interface PassthroughPayload {
+  request: {
+    /**
+     * Request headers as a list of entries to support
+     * multiple headers with the same name.
+     */
+    headers: Array<[string, string]>
+  }
+}
+
+type WorkerEventResponse = {
   MOCK_RESPONSE: [
     data: StringifiedResponse,
     transfer?: [ReadableStream<Uint8Array>],
   ]
-  PASSTHROUGH: []
+  PASSTHROUGH: [data: PassthroughPayload]
 }
 
 const SUPPORTS_SERVICE_WORKER = supportsServiceWorker()
 
-export class WorkerEvent<
+class WorkerEvent<
   DataType,
   ReturnType = any,
   EventType extends string = string,
@@ -115,7 +137,7 @@ type OutgoingWorkerEvents =
   | 'MOCK_ACTIVATE'
   | 'INTEGRITY_CHECK_REQUEST'
   | 'KEEPALIVE_REQUEST'
-  | 'CLIENT_CLOSED'
+  | 'CLIENT_CLOSE'
 
 export interface WorkerChannelOptions {
   getWorker: () => Promise<ServiceWorker>