msw 3.0.2 → 3.0.4

package/src/graphql/graphql-subscription.ts

@@ -585,24 +585,32 @@ export class GraphQLSubscriptionTransportHandler extends GraphQLWebSocketHandler
   }
 
   /**
-   * Drop this transport's subscribers and active subscriptions from the
-   * sessions it participates in. The sessions themselves are left intact:
-   * they are shared with the other transports of the same connection and
-   * own the protocol listeners for as long as the client stays connected.
+   * Remove the given handler from the subscribers of every session
+   * this transport participates in. The handler no longer matches
+   * subscriptions on the connections opened while it was registered.
+   */
+  public unsubscribe(handler: WebSocketHandler): void {
+    for (const connection of connections.values()) {
+      connection.subscribers.delete(handler)
+    }
+  }
+
+  /**
+   * End the active subscriptions of the sessions this transport
+   * participates in. The sessions and their subscribers are left intact:
+   * the handlers that survive the reset keep serving the connections
+   * opened before it, while the removed handlers unsubscribe themselves
+   * on disposal. The sessions own the protocol listeners for as long as
+   * the client stays connected.
    *
    * @note This method is invoked automatically when the handlers
    * controller resets the handlers (e.g. `server.resetHandlers()`).
    */
   public reset(): void {
     for (const connection of connections.values()) {
-      let ownsConnection = false
-
-      for (const [handler, entry] of connection.subscribers) {
-        if (entry.transport === this) {
-          connection.subscribers.delete(handler)
-          ownsConnection = true
-        }
-      }
+      const ownsConnection = Array.from(connection.subscribers.values()).some(
+        (entry) => entry.transport === this,
+      )
 
       // Resetting the handlers detaches the resolvers from their
       // subscriptions, so run their cleanups instead of dropping them.
@@ -935,6 +943,16 @@ export class GraphQLSubscriptionHandler<
     this.isUsed = false
   }
 
+  /**
+   * Stop serving the connections this handler was bound to.
+   * @note This method is invoked automatically when the handler
+   * is removed from the network, either by resetting the handlers
+   * (e.g. `server.resetHandlers()`) or by disabling the network.
+   */
+  public dispose(): void {
+    this.#transport.unsubscribe(this)
+  }
+
   /**
    * @note Individual subscription handlers stay silent. The subscription
    * transport owns the GraphQL-aware logging for the entire connection

package/src/mockServiceWorker.js

@@ -10,6 +10,10 @@
 const PACKAGE_VERSION = '<PACKAGE_VERSION>'
 const INTEGRITY_CHECKSUM = '<INTEGRITY_CHECKSUM>'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+// Cache Storage is shared by the whole origin. Scope the cache name
+// to this registration so multiple workers do not overwrite each other.
+const ACTIVE_CLIENTS_CACHE_NAME = `msw:active-clients:${self.registration.scope}`
+const ACTIVE_CLIENTS_CACHE_KEY = '/__msw__/active-clients'
 
 const activeClientIds = new Set()
 /**
@@ -17,6 +21,23 @@ const activeClientIds = new Set()
  */
 const pendingRequests = new Map()
 
+/**
+ * The browser may terminate this worker at any point (idle timeout,
+ * hidden page throttling, event timeout) and evaluate it again on the
+ * next event, losing all in-memory state. Restore the active client IDs
+ * from the storage so the worker keeps handling requests after that.
+ */
+let hasRestoredActiveClientIds = false
+let isStoredActiveClientIdsOutdated = false
+let activeClientIdsStorePromise = Promise.resolve()
+const activeClientIdsRestorePromise = restoreActiveClientIds()
+  .catch((error) => {
+    console.error('[MSW] Failed to restore the active clients:', error)
+  })
+  .finally(() => {
+    hasRestoredActiveClientIds = true
+  })
+
 addEventListener('install', function () {
   self.skipWaiting()
 })
@@ -34,12 +55,17 @@ addEventListener('message', function (event) {
 
   event.waitUntil(
     (async () => {
+      // Never mutate the active clients before they are restored,
+      // otherwise storing them would persist an incomplete set.
+      await activeClientIdsRestorePromise
+
       if (event.data === 'CLIENT_CLOSE') {
         const allClients = await self.clients.matchAll({
           type: 'window',
         })
 
         activeClientIds.delete(clientId)
+        await storeActiveClientIds()
 
         // Await any pending requests from the closing client.
         // This makes sure that those requests are handled and not passthrough.
@@ -55,13 +81,14 @@ addEventListener('message', function (event) {
 
         // Unregister itself when there are no more clients
         if (remainingClients.length === 0) {
+          await clearStoredActiveClientIds()
           await self.registration.unregister()
         }
 
         const client = await self.clients.get(clientId)
 
         if (client != null) {
-          await sendToClient(client, {
+          notifyClient(client, {
             type: 'CLIENT_CLOSED',
           })
         }
@@ -83,14 +110,20 @@ addEventListener('message', function (event) {
 
       switch (event.data) {
         case 'KEEPALIVE_REQUEST': {
-          await sendToClient(client, {
+          // Retry a failed store on the next keepalive so the storage
+          // catches up with the in-memory state before the worker restarts.
+          if (isStoredActiveClientIdsOutdated) {
+            await storeActiveClientIds()
+          }
+
+          notifyClient(client, {
             type: 'KEEPALIVE_RESPONSE',
           })
           break
         }
 
         case 'INTEGRITY_CHECK_REQUEST': {
-          await sendToClient(client, {
+          notifyClient(client, {
             type: 'INTEGRITY_CHECK_RESPONSE',
             payload: {
               packageVersion: PACKAGE_VERSION,
@@ -102,8 +135,9 @@ addEventListener('message', function (event) {
 
         case 'MOCK_ACTIVATE': {
           activeClientIds.add(clientId)
+          await storeActiveClientIds()
 
-          await sendToClient(client, {
+          notifyClient(client, {
             type: 'MOCKING_ENABLED',
             payload: {
               client: {
@@ -129,6 +163,22 @@ addEventListener('fetch', function (event) {
     return
   }
 
+  // This request may be the one waking the worker up after the browser
+  // has terminated it. Wait for the active clients to be restored
+  // before deciding whether to handle the request.
+  if (!hasRestoredActiveClientIds) {
+    event.respondWith(
+      activeClientIdsRestorePromise.then(() => {
+        if (activeClientIds.size === 0) {
+          return fetch(event.request)
+        }
+
+        return handleRequest(event)
+      }),
+    )
+    return
+  }
+
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
   // after it's been terminated (still remains active until the next reload).
@@ -136,15 +186,85 @@ addEventListener('fetch', function (event) {
     return
   }
 
-  const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId))
+  event.respondWith(handleRequest(event))
 })
 
+/**
+ * Populate the active client IDs from the storage,
+ * ignoring the clients that no longer exist.
+ */
+async function restoreActiveClientIds() {
+  const storedClientIds = await readStoredActiveClientIds()
+
+  if (storedClientIds.length === 0) {
+    return
+  }
+
+  const windowClients = await self.clients.matchAll({
+    type: 'window',
+  })
+  const windowClientIds = new Set(windowClients.map((client) => client.id))
+
+  for (const clientId of storedClientIds) {
+    if (windowClientIds.has(clientId)) {
+      activeClientIds.add(clientId)
+    }
+  }
+}
+
+/**
+ * @returns {Promise<Array<string>>}
+ */
+async function readStoredActiveClientIds() {
+  const cache = await caches.open(ACTIVE_CLIENTS_CACHE_NAME)
+  const response = await cache.match(ACTIVE_CLIENTS_CACHE_KEY)
+
+  if (!response) {
+    return []
+  }
+
+  return response.json()
+}
+
+/**
+ * Storing is best-effort: a failure must never prevent the client
+ * from being activated or closed, in-memory state is still correct.
+ * Stores are serialized so each write persists the latest state
+ * and an earlier success cannot clear the flag of a later failure.
+ */
+function storeActiveClientIds() {
+  activeClientIdsStorePromise =
+    activeClientIdsStorePromise.then(writeActiveClientIds)
+  return activeClientIdsStorePromise
+}
+
+async function writeActiveClientIds() {
+  try {
+    const cache = await caches.open(ACTIVE_CLIENTS_CACHE_NAME)
+    await cache.put(
+      ACTIVE_CLIENTS_CACHE_KEY,
+      new Response(JSON.stringify(Array.from(activeClientIds))),
+    )
+    isStoredActiveClientIdsOutdated = false
+  } catch (error) {
+    isStoredActiveClientIdsOutdated = true
+    console.error('[MSW] Failed to store the active clients:', error)
+  }
+}
+
+async function clearStoredActiveClientIds() {
+  try {
+    await caches.delete(ACTIVE_CLIENTS_CACHE_NAME)
+  } catch (error) {
+    console.error('[MSW] Failed to clear the stored active clients:', error)
+  }
+}
+
 /**
  * @param {FetchEvent} event
- * @param {string} requestId
  */
-async function handleRequest(event, requestId) {
+async function handleRequest(event) {
+  const requestId = crypto.randomUUID()
   const client = await resolveMainClient(event)
   const requestCloneForEvents = event.request.clone()
 
@@ -172,7 +292,7 @@ async function handleRequest(event, requestId) {
     // request failed with a network error). Notify the client so it
     // can release the resources associated with this request.
     if (client && activeClientIds.has(client.id)) {
-      sendToClient(client, {
+      notifyClient(client, {
         type: 'REQUEST_ERROR',
         payload: {
           request: {
@@ -205,7 +325,7 @@ async function handleRequest(event, requestId) {
     // Clone the response so both the client and the library could consume it.
     const responseClone = isEventStreamResponse ? null : response.clone()
 
-    sendToClient(
+    notifyClient(
       client,
       {
         type: 'RESPONSE',
@@ -402,6 +522,26 @@ function sendToClient(client, message, transferrables = []) {
   })
 }
 
+/**
+ * Post a one-way message to the client.
+ * Unlike `sendToClient`, this does not open a MessageChannel or wait
+ * for a reply. The client never acknowledges these messages, so awaiting
+ * them keeps the extended event pending until the browser terminates
+ * the worker on its event timeout (5 minutes in Chromium), wiping its state.
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ */
+function notifyClient(client, message, transferrables = []) {
+  try {
+    client.postMessage(message, transferrables.filter(Boolean))
+  } catch (error) {
+    // A one-way message must never fail its caller (e.g. a transferable
+    // that has already been detached must not reject a resolved request).
+    console.error('[MSW] Failed to notify the client:', error)
+  }
+}
+
 /**
  * @param {Response} response
  * @param {FetchEvent} event

package/src/utils/is-common-asset-request.test.ts

@@ -0,0 +1,371 @@
+// @vitest-environment node
+import { isCommonAssetRequest } from './is-common-asset-request'
+
+test('treats requests over the "file:" protocol as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('file:///Users/me/app/index.js')),
+  ).toBe(true)
+  expect(isCommonAssetRequest(new Request('file:///Users/me/app/data'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('file:///etc/hosts'))).toBe(true)
+})
+
+test('does not treat requests over other protocols as common assets by default', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/api/user'))).toBe(
+    false,
+  )
+  expect(isCommonAssetRequest(new Request('https://localhost/api/user'))).toBe(
+    false,
+  )
+  expect(isCommonAssetRequest(new Request('ftp://localhost/api/user'))).toBe(
+    false,
+  )
+})
+
+test('treats requests to Google Fonts as common assets', () => {
+  expect(
+    isCommonAssetRequest(
+      new Request('https://fonts.googleapis.com/css2?family=Inter'),
+    ),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(new Request('https://fonts.googleapis.com/')),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(new Request('http://fonts.googleapis.com/icon')),
+  ).toBe(true)
+})
+
+test('does not treat requests to other Google hosts as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('https://www.googleapis.com/oauth2/v1')),
+  ).toBe(false)
+  expect(
+    isCommonAssetRequest(new Request('https://fonts.gstatic.com/resource')),
+  ).toBe(false)
+})
+
+test('treats requests to node modules served over HTTP as common assets', () => {
+  expect(
+    isCommonAssetRequest(
+      new Request('http://localhost:3000/node_modules/react/index.js'),
+    ),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(
+      new Request('http://localhost:3000/node_modules/.vite/deps/react.js'),
+    ),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(
+      new Request('http://localhost:3000/packages/app/node_modules/lodash'),
+    ),
+  ).toBe(true)
+})
+
+test('does not treat node modules in the hostname as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://node_modules.example.com/api')),
+  ).toBe(false)
+})
+
+test('does not treat node modules in the query as common assets', () => {
+  expect(
+    isCommonAssetRequest(
+      new Request('http://localhost/api?path=node_modules/react'),
+    ),
+  ).toBe(false)
+})
+
+test('treats internal Vite requests as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost:5173/@vite/client')),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(new Request('http://localhost:5173/@vite/env')),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(
+      new Request('http://localhost:5173/@vite-plugin-react/preamble'),
+    ),
+  ).toBe(true)
+})
+
+test('does not treat Vite mentions in the query as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/api?source=@vite')),
+  ).toBe(false)
+})
+
+test('treats stylesheet requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/main.css'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/main.scss'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/main.less'))).toBe(
+    true,
+  )
+})
+
+test('treats script requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/main.js'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/main.mjs'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/main.jsx'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/main.ts'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/main.mts'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/main.tsx'))).toBe(
+    true,
+  )
+})
+
+test('treats HTML document requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/index.html'))).toBe(
+    true,
+  )
+})
+
+test('treats font requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/font.ttf'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/font.otf'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/font.woff'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/font.woff2'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/font.eot'))).toBe(
+    true,
+  )
+})
+
+test('treats image requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/image.gif'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/image.jpg'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/image.jpeg'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/image.png'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/image.avif'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/image.webp'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/image.svg'))).toBe(
+    true,
+  )
+})
+
+test('treats favicon requests as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/favicon.ico')),
+  ).toBe(true)
+})
+
+test('treats video requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/video.mp4'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/video.webm'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/video.ogg'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/video.mov'))).toBe(
+    true,
+  )
+})
+
+test('treats audio requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/audio.mp3'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/audio.wav'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/audio.flac'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/audio.aac'))).toBe(
+    true,
+  )
+})
+
+test('treats document requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/file.pdf'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/file.txt'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/file.csv'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/file.json'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/file.xml'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/file.md'))).toBe(
+    true,
+  )
+})
+
+test('treats archive requests as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/archive.zip')),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/archive.tar')),
+  ).toBe(true)
+  expect(isCommonAssetRequest(new Request('http://localhost/archive.gz'))).toBe(
+    true,
+  )
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/archive.tar.gz')),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/archive.rar')),
+  ).toBe(true)
+  expect(isCommonAssetRequest(new Request('http://localhost/archive.7z'))).toBe(
+    true,
+  )
+})
+
+test('matches the asset extension regardless of its case', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/image.PNG'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/main.Js'))).toBe(
+    true,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/file.JSON'))).toBe(
+    true,
+  )
+})
+
+test('treats nested asset paths as common assets', () => {
+  expect(
+    isCommonAssetRequest(
+      new Request('http://localhost/static/assets/images/logo.png'),
+    ),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(new Request('https://cdn.example.com/v1/bundle.js')),
+  ).toBe(true)
+})
+
+test('ignores the query string when matching the asset extension', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/main.js?v=123')),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/image.png?w=100&h=100')),
+  ).toBe(true)
+})
+
+test('ignores the hash when matching the asset extension', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/main.js#section')),
+  ).toBe(true)
+})
+
+test('does not treat asset-like extensions in the query as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/api?file=image.png')),
+  ).toBe(false)
+})
+
+test('does not treat asset-like extensions in the hostname as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://example.png/api'))).toBe(
+    false,
+  )
+})
+
+test('does not treat an extension followed by more path as a common asset', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/main.js/metadata')),
+  ).toBe(false)
+  expect(isCommonAssetRequest(new Request('http://localhost/image.png/'))).toBe(
+    false,
+  )
+})
+
+test('does not treat unknown extensions as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/data.bin'))).toBe(
+    false,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/map.wasm'))).toBe(
+    false,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/file.docx'))).toBe(
+    false,
+  )
+})
+
+test('does not treat an extension without a leading dot as a common asset', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/png'))).toBe(false)
+  expect(isCommonAssetRequest(new Request('http://localhost/api/json'))).toBe(
+    false,
+  )
+})
+
+test('does not treat API requests as common assets', () => {
+  expect(isCommonAssetRequest(new Request('http://localhost/api/user'))).toBe(
+    false,
+  )
+  expect(
+    isCommonAssetRequest(new Request('https://api.example.com/v1/users/123')),
+  ).toBe(false)
+  expect(isCommonAssetRequest(new Request('http://localhost/graphql'))).toBe(
+    false,
+  )
+  expect(isCommonAssetRequest(new Request('http://localhost/'))).toBe(false)
+})
+
+test('does not treat API requests with dotted segments as common assets', () => {
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/api/v1.2/users')),
+  ).toBe(false)
+  expect(
+    isCommonAssetRequest(new Request('http://localhost/users/john.doe')),
+  ).toBe(false)
+})
+
+test('ignores the request method when matching common assets', () => {
+  expect(
+    isCommonAssetRequest(
+      new Request('http://localhost/main.js', { method: 'POST' }),
+    ),
+  ).toBe(true)
+  expect(
+    isCommonAssetRequest(
+      new Request('http://localhost/api/user', { method: 'GET' }),
+    ),
+  ).toBe(false)
+})

package/src/utils/is-common-asset-request.ts

@@ -40,7 +40,7 @@ export function isCommonAssetRequest(request: Request): boolean {
   }
 
   // Ignore common static assets.
-  return /\.(s?css|less|m?jsx?|m?tsx?|html|ttf|otf|woff|woff2|eot|gif|jpe?g|png|avif|webp|svg|mp4|webm|ogg|mov|mp3|wav|ogg|flac|aac|pdf|txt|csv|json|xml|md|zip|tar|gz|rar|7z)$/i.test(
+  return /\.(s?css|less|m?jsx?|m?tsx?|html|ttf|otf|woff|woff2|eot|gif|jpe?g|png|avif|webp|ico|svg|mp4|webm|ogg|mov|mp3|wav|ogg|flac|aac|pdf|txt|csv|json|xml|md|zip|tar|gz|rar|7z)$/i.test(
     url.pathname,
   )
 }