@depup/msw 2.12.13-depup.0

package/src/core/utils/url/getAbsoluteUrl.test.ts

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+import { getAbsoluteUrl } from './getAbsoluteUrl'
+
+const rawLocation = window.location
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    value: rawLocation,
+  })
+})
+
+it('resolves a relative URL against the current location (default)', () => {
+  expect(getAbsoluteUrl('/reviews')).toBe('http://localhost/reviews')
+})
+
+it('supports relative URLs starting with search parameters', () => {
+  Object.defineProperty(window, 'location', {
+    value: {
+      href: 'http://localhost/nested',
+    },
+  })
+
+  expect(getAbsoluteUrl('?resourceId=abc-123')).toBe(
+    'http://localhost/nested?resourceId=abc-123',
+  )
+})
+
+it('resolves a relative URL against a custom base URL', () => {
+  expect(getAbsoluteUrl('/user', 'https://api.github.com')).toBe(
+    'https://api.github.com/user',
+  )
+})
+
+it('returns a given absolute URL as-is', () => {
+  expect(getAbsoluteUrl('https://api.mswjs.io/users')).toBe(
+    'https://api.mswjs.io/users',
+  )
+})
+
+it('returns an absolute URL given a relative path without a leading slash', () => {
+  expect(getAbsoluteUrl('users')).toBe('http://localhost/users')
+})
+
+it('returns a path with a pattern as-is', () => {
+  expect(getAbsoluteUrl(':api/user')).toBe('http://localhost/:api/user')
+  expect(getAbsoluteUrl('*/resource/*')).toBe('*/resource/*')
+})

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

@@ -0,0 +1,25 @@
+import { isAbsoluteUrl } from './isAbsoluteUrl'
+
+/**
+ * Returns an absolute URL based on the given path.
+ */
+export function getAbsoluteUrl(path: string, baseUrl?: string): string {
+  // already absolute URL
+  if (isAbsoluteUrl(path)) {
+    return path
+  }
+
+  // Ignore path with pattern start with *
+  if (path.startsWith('*')) {
+    return path
+  }
+
+  // Resolve a relative request URL against a given custom "baseUrl"
+  // or the document baseURI (in the case of browser/browser-like environments).
+  const origin = baseUrl || (typeof location !== 'undefined' && location.href)
+
+  return origin
+    ? // Encode and decode the path to preserve escaped characters.
+      decodeURI(new URL(encodeURI(path), origin).href)
+    : path
+}

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

@@ -0,0 +1,32 @@
+/**
+ * @vitest-environment node
+ */
+import { isAbsoluteUrl } from './isAbsoluteUrl'
+
+it('returns true for the "http" scheme', () => {
+  expect(isAbsoluteUrl('http://www.domain.com')).toEqual(true)
+})
+
+it('returns true for the "https" scheme', () => {
+  expect(isAbsoluteUrl('https://www.domain.com')).toEqual(true)
+})
+
+it('returns true for the "ws" scheme', () => {
+  expect(isAbsoluteUrl('ws://www.domain.com')).toEqual(true)
+})
+
+it('returns true for the "ftp" scheme', () => {
+  expect(isAbsoluteUrl('ftp://www.domain.com')).toEqual(true)
+})
+
+it('returns true for the custom scheme', () => {
+  expect(isAbsoluteUrl('web+my://www.example.com')).toEqual(true)
+})
+
+it('returns false for the relative URL', () => {
+  expect(isAbsoluteUrl('/test')).toEqual(false)
+})
+
+it('returns false for the relative URL without a leading slash', () => {
+  expect(isAbsoluteUrl('test')).toEqual(false)
+})

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

@@ -0,0 +1,6 @@
+/**
+ * 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)
+}

package/src/core/ws/WebSocketClientManager.test.ts

@@ -0,0 +1,164 @@
+// @vitest-environment node-websocket
+import { setMaxListeners } from 'node:events'
+import {
+  WebSocketClientConnection,
+  WebSocketData,
+  WebSocketTransport,
+} from '@mswjs/interceptors/WebSocket'
+import {
+  WebSocketClientManager,
+  WebSocketBroadcastChannelMessage,
+} from './WebSocketClientManager'
+
+const channel = new BroadcastChannel('test:channel')
+
+/**
+ * @note Increase the number of maximum event listeners
+ * because the same channel is shared between different
+ * manager instances in different tests.
+ */
+setMaxListeners(Number.MAX_SAFE_INTEGER, channel)
+
+vi.spyOn(channel, 'postMessage')
+
+const socket = new WebSocket('ws://localhost')
+
+class TestWebSocketTransport extends EventTarget implements WebSocketTransport {
+  send(_data: WebSocketData): void {}
+  close(_code?: number | undefined, _reason?: string | undefined): void {}
+}
+
+afterEach(() => {
+  vi.resetAllMocks()
+})
+
+it('adds a client from this runtime to the list of clients', async () => {
+  const manager = new WebSocketClientManager(channel)
+  const connection = new WebSocketClientConnection(
+    socket,
+    new TestWebSocketTransport(),
+  )
+
+  await manager.addConnection(connection)
+
+  // Must add the client to the list of clients.
+  expect(Array.from(manager.clients.values())).toEqual([connection])
+})
+
+it('adds multiple clients from this runtime to the list of clients', async () => {
+  const manager = new WebSocketClientManager(channel)
+  const connectionOne = new WebSocketClientConnection(
+    socket,
+    new TestWebSocketTransport(),
+  )
+  await manager.addConnection(connectionOne)
+
+  // Must add the client to the list of clients.
+  expect(Array.from(manager.clients.values())).toEqual([connectionOne])
+
+  const connectionTwo = new WebSocketClientConnection(
+    socket,
+    new TestWebSocketTransport(),
+  )
+  await manager.addConnection(connectionTwo)
+
+  // Must add the new client to the list as well.
+  expect(Array.from(manager.clients.values())).toEqual([
+    connectionOne,
+    connectionTwo,
+  ])
+})
+
+it('replays a "send" event coming from another runtime', async () => {
+  const manager = new WebSocketClientManager(channel)
+  const connection = new WebSocketClientConnection(
+    socket,
+    new TestWebSocketTransport(),
+  )
+  await manager.addConnection(connection)
+  vi.spyOn(connection, 'send')
+
+  // Emulate another runtime signaling this connection to receive data.
+  channel.dispatchEvent(
+    new MessageEvent<WebSocketBroadcastChannelMessage>('message', {
+      data: {
+        type: 'extraneous:send',
+        payload: {
+          clientId: connection.id,
+          data: 'hello',
+        },
+      },
+    }),
+  )
+
+  await vi.waitFor(() => {
+    // Must execute the requested operation on the connection.
+    expect(connection.send).toHaveBeenCalledWith('hello')
+    expect(connection.send).toHaveBeenCalledTimes(1)
+  })
+})
+
+it('replays a "close" event coming from another runtime', async () => {
+  const manager = new WebSocketClientManager(channel)
+  const connection = new WebSocketClientConnection(
+    socket,
+    new TestWebSocketTransport(),
+  )
+  await manager.addConnection(connection)
+  vi.spyOn(connection, 'close')
+
+  // Emulate another runtime signaling this connection to close.
+  channel.dispatchEvent(
+    new MessageEvent<WebSocketBroadcastChannelMessage>('message', {
+      data: {
+        type: 'extraneous:close',
+        payload: {
+          clientId: connection.id,
+          code: 1000,
+          reason: 'Normal closure',
+        },
+      },
+    }),
+  )
+
+  await vi.waitFor(() => {
+    // Must execute the requested operation on the connection.
+    expect(connection.close).toHaveBeenCalledWith(1000, 'Normal closure')
+    expect(connection.close).toHaveBeenCalledTimes(1)
+  })
+})
+
+it('removes the extraneous message listener when the connection closes', async () => {
+  const manager = new WebSocketClientManager(channel)
+  const transport = new TestWebSocketTransport()
+  const connection = new WebSocketClientConnection(socket, transport)
+  vi.spyOn(connection, 'close').mockImplementationOnce(() => {
+    /**
+     * @note This is a nasty hack so we don't have to uncouple
+     * the connection from transport. Creating a mock transport
+     * is difficult because it relies on the `WebSocketOverride` class.
+     * All we care here is that closing the connection triggers
+     * the transport closure, which it always does.
+     */
+    transport.dispatchEvent(new Event('close'))
+  })
+  vi.spyOn(connection, 'send')
+
+  await manager.addConnection(connection)
+  connection.close()
+
+  // Signals from other runtimes have no effect on the closed connection.
+  channel.dispatchEvent(
+    new MessageEvent<WebSocketBroadcastChannelMessage>('message', {
+      data: {
+        type: 'extraneous:send',
+        payload: {
+          clientId: connection.id,
+          data: 'hello',
+        },
+      },
+    }),
+  )
+
+  expect(connection.send).not.toHaveBeenCalled()
+})

package/src/core/ws/WebSocketClientManager.ts

@@ -0,0 +1,241 @@
+import type {
+  WebSocketData,
+  WebSocketClientConnectionProtocol,
+  WebSocketClientEventMap,
+} from '@mswjs/interceptors/WebSocket'
+import { WebSocketClientStore } from './WebSocketClientStore'
+import { WebSocketMemoryClientStore } from './WebSocketMemoryClientStore'
+import { WebSocketIndexedDBClientStore } from './WebSocketIndexedDBClientStore'
+
+export type WebSocketBroadcastChannelMessage =
+  | {
+      type: 'extraneous:send'
+      payload: {
+        clientId: string
+        data: WebSocketData
+      }
+    }
+  | {
+      type: 'extraneous:close'
+      payload: {
+        clientId: string
+        code?: number
+        reason?: string
+      }
+    }
+
+/**
+ * A manager responsible for accumulating WebSocket client
+ * connections across different browser runtimes.
+ */
+export class WebSocketClientManager {
+  private store: WebSocketClientStore
+  private runtimeClients: Map<string, WebSocketClientConnectionProtocol>
+  private allClients: Set<WebSocketClientConnectionProtocol>
+
+  constructor(private channel: BroadcastChannel) {
+    // Store the clients in the IndexedDB in the browser,
+    // otherwise, store the clients in memory.
+    this.store =
+      typeof indexedDB !== 'undefined'
+        ? new WebSocketIndexedDBClientStore()
+        : new WebSocketMemoryClientStore()
+
+    this.runtimeClients = new Map()
+    this.allClients = new Set()
+
+    this.channel.addEventListener('message', (message) => {
+      if (message.data?.type === 'db:update') {
+        this.flushDatabaseToMemory()
+      }
+    })
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('message', async (message) => {
+        if (message.data?.type === 'msw/worker:stop') {
+          await this.removeRuntimeClients()
+        }
+      })
+    }
+  }
+
+  private async flushDatabaseToMemory() {
+    const storedClients = await this.store.getAll()
+
+    this.allClients = new Set(
+      storedClients.map((client) => {
+        const runtimeClient = this.runtimeClients.get(client.id)
+
+        /**
+         * @note For clients originating in this runtime, use their
+         * direct references. No need to wrap them in a remote connection.
+         */
+        if (runtimeClient) {
+          return runtimeClient
+        }
+
+        return new WebSocketRemoteClientConnection(
+          client.id,
+          new URL(client.url),
+          this.channel,
+        )
+      }),
+    )
+  }
+
+  private async removeRuntimeClients(): Promise<void> {
+    await this.store.deleteMany(Array.from(this.runtimeClients.keys()))
+    this.runtimeClients.clear()
+    await this.flushDatabaseToMemory()
+    this.notifyOthersAboutDatabaseUpdate()
+  }
+
+  /**
+   * All active WebSocket client connections.
+   */
+  get clients(): Set<WebSocketClientConnectionProtocol> {
+    return this.allClients
+  }
+
+  /**
+   * Notify other runtimes about the database update
+   * using the shared `BroadcastChannel` instance.
+   */
+  private notifyOthersAboutDatabaseUpdate(): void {
+    this.channel.postMessage({ type: 'db:update' })
+  }
+
+  private async addClient(
+    client: WebSocketClientConnectionProtocol,
+  ): Promise<void> {
+    await this.store.add(client)
+    // Sync the in-memory clients in this runtime with the
+    // updated database. This pulls in all the stored clients.
+    await this.flushDatabaseToMemory()
+    this.notifyOthersAboutDatabaseUpdate()
+  }
+
+  /**
+   * Adds the given `WebSocket` client connection to the set
+   * of all connections. The given connection is always the complete
+   * connection object because `addConnection()` is called only
+   * for the opened connections in the same runtime.
+   */
+  public async addConnection(
+    client: WebSocketClientConnectionProtocol,
+  ): Promise<void> {
+    // Store this client in the map of clients created in this runtime.
+    // This way, the manager can distinguish between this runtime clients
+    // and extraneous runtime clients when synchronizing clients storage.
+    this.runtimeClients.set(client.id, client)
+
+    // Add the new client to the storage.
+    await this.addClient(client)
+
+    // Handle the incoming BroadcastChannel messages from other runtimes
+    // that attempt to control this runtime (via a remote connection wrapper).
+    // E.g. another runtime calling `client.send()` for the client in this runtime.
+    const handleExtraneousMessage = (
+      message: MessageEvent<WebSocketBroadcastChannelMessage>,
+    ) => {
+      const { type, payload } = message.data
+
+      // Ignore broadcasted messages for other clients.
+      if (
+        typeof payload === 'object' &&
+        'clientId' in payload &&
+        payload.clientId !== client.id
+      ) {
+        return
+      }
+
+      switch (type) {
+        case 'extraneous:send': {
+          client.send(payload.data)
+          break
+        }
+
+        case 'extraneous:close': {
+          client.close(payload.code, payload.reason)
+          break
+        }
+      }
+    }
+
+    const abortController = new AbortController()
+
+    this.channel.addEventListener('message', handleExtraneousMessage, {
+      signal: abortController.signal,
+    })
+
+    // Once closed, this connection cannot be operated on.
+    // This must include the extraneous runtimes as well.
+    client.addEventListener('close', () => abortController.abort(), {
+      once: true,
+    })
+  }
+}
+
+/**
+ * A wrapper class to operate with WebSocket client connections
+ * from other runtimes. This class maintains 1-1 public API
+ * compatibility to the `WebSocketClientConnection` but relies
+ * on the given `BroadcastChannel` to communicate instructions
+ * with the client connections from other runtimes.
+ */
+export class WebSocketRemoteClientConnection
+  implements WebSocketClientConnectionProtocol
+{
+  constructor(
+    public readonly id: string,
+    public readonly url: URL,
+    private channel: BroadcastChannel,
+  ) {}
+
+  send(data: WebSocketData): void {
+    this.channel.postMessage({
+      type: 'extraneous:send',
+      payload: {
+        clientId: this.id,
+        data,
+      },
+    } as WebSocketBroadcastChannelMessage)
+  }
+
+  close(code?: number | undefined, reason?: string | undefined): void {
+    this.channel.postMessage({
+      type: 'extraneous:close',
+      payload: {
+        clientId: this.id,
+        code,
+        reason,
+      },
+    } as WebSocketBroadcastChannelMessage)
+  }
+
+  addEventListener<EventType extends keyof WebSocketClientEventMap>(
+    _type: EventType,
+    _listener: (
+      this: WebSocket,
+      event: WebSocketClientEventMap[EventType],
+    ) => void,
+    _options?: AddEventListenerOptions | boolean,
+  ): void {
+    throw new Error(
+      'WebSocketRemoteClientConnection.addEventListener is not supported',
+    )
+  }
+
+  removeEventListener<EventType extends keyof WebSocketClientEventMap>(
+    _event: EventType,
+    _listener: (
+      this: WebSocket,
+      event: WebSocketClientEventMap[EventType],
+    ) => void,
+    _options?: EventListenerOptions | boolean,
+  ): void {
+    throw new Error(
+      'WebSocketRemoteClientConnection.removeEventListener is not supported',
+    )
+  }
+}

package/src/core/ws/WebSocketClientStore.ts

@@ -0,0 +1,14 @@
+import type { WebSocketClientConnectionProtocol } from '@mswjs/interceptors/WebSocket'
+
+export interface SerializedWebSocketClient {
+  id: string
+  url: string
+}
+
+export abstract class WebSocketClientStore {
+  public abstract add(client: WebSocketClientConnectionProtocol): Promise<void>
+
+  public abstract getAll(): Promise<Array<SerializedWebSocketClient>>
+
+  public abstract deleteMany(clientIds: Array<string>): Promise<void>
+}

package/src/core/ws/WebSocketIndexedDBClientStore.ts

@@ -0,0 +1,140 @@
+import { DeferredPromise } from '@open-draft/deferred-promise'
+import { WebSocketClientConnectionProtocol } from '@mswjs/interceptors/WebSocket'
+import {
+  type SerializedWebSocketClient,
+  WebSocketClientStore,
+} from './WebSocketClientStore'
+
+const DB_NAME = 'msw-websocket-clients'
+const DB_STORE_NAME = 'clients'
+
+export class WebSocketIndexedDBClientStore implements WebSocketClientStore {
+  private db: Promise<IDBDatabase>
+
+  constructor() {
+    this.db = this.createDatabase()
+  }
+
+  public async add(client: WebSocketClientConnectionProtocol): Promise<void> {
+    const promise = new DeferredPromise<void>()
+    const store = await this.getStore()
+
+    /**
+     * @note Use `.put()` instead of `.add()` to allow setting clients
+     * that already exist in the database. This can happen if a single page
+     * has multiple event handlers. Each handler will receive the "connection"
+     * event in parallel, and try to set that WebSocket client in the database.
+     */
+    const request = store.put({
+      id: client.id,
+      url: client.url.href,
+    } satisfies SerializedWebSocketClient)
+
+    request.onsuccess = () => {
+      promise.resolve()
+    }
+    request.onerror = () => {
+      console.error(request.error)
+      promise.reject(
+        new Error(
+          `Failed to add WebSocket client "${client.id}". There is likely an additional output above.`,
+        ),
+      )
+    }
+
+    return promise
+  }
+
+  public async getAll(): Promise<Array<SerializedWebSocketClient>> {
+    const promise = new DeferredPromise<Array<SerializedWebSocketClient>>()
+    const store = await this.getStore()
+    const request = store.getAll() as IDBRequest<
+      Array<SerializedWebSocketClient>
+    >
+
+    request.onsuccess = () => {
+      promise.resolve(request.result)
+    }
+    request.onerror = () => {
+      console.error(request.error)
+      promise.reject(
+        new Error(
+          `Failed to get all WebSocket clients. There is likely an additional output above.`,
+        ),
+      )
+    }
+
+    return promise
+  }
+
+  public async deleteMany(clientIds: Array<string>): Promise<void> {
+    const promise = new DeferredPromise<void>()
+    const store = await this.getStore()
+
+    for (const clientId of clientIds) {
+      store.delete(clientId)
+    }
+
+    store.transaction.oncomplete = () => {
+      promise.resolve()
+    }
+    store.transaction.onerror = () => {
+      console.error(store.transaction.error)
+      promise.reject(
+        new Error(
+          `Failed to delete WebSocket clients [${clientIds.join(', ')}]. There is likely an additional output above.`,
+        ),
+      )
+    }
+
+    return promise
+  }
+
+  private async createDatabase(): Promise<IDBDatabase> {
+    const promise = new DeferredPromise<IDBDatabase>()
+    const request = indexedDB.open(DB_NAME, 1)
+
+    request.onsuccess = ({ currentTarget }) => {
+      const db = Reflect.get(currentTarget!, 'result') as IDBDatabase
+
+      if (db.objectStoreNames.contains(DB_STORE_NAME)) {
+        return promise.resolve(db)
+      }
+    }
+
+    request.onupgradeneeded = async ({ currentTarget }) => {
+      const db = Reflect.get(currentTarget!, 'result') as IDBDatabase
+      if (db.objectStoreNames.contains(DB_STORE_NAME)) {
+        return
+      }
+
+      const store = db.createObjectStore(DB_STORE_NAME, { keyPath: 'id' })
+      store.transaction.oncomplete = () => {
+        promise.resolve(db)
+      }
+      store.transaction.onerror = () => {
+        console.error(store.transaction.error)
+        promise.reject(
+          new Error(
+            'Failed to create WebSocket client store. There is likely an additional output above.',
+          ),
+        )
+      }
+    }
+    request.onerror = () => {
+      console.error(request.error)
+      promise.reject(
+        new Error(
+          'Failed to open an IndexedDB database. There is likely an additional output above.',
+        ),
+      )
+    }
+
+    return promise
+  }
+
+  private async getStore(): Promise<IDBObjectStore> {
+    const db = await this.db
+    return db.transaction(DB_STORE_NAME, 'readwrite').objectStore(DB_STORE_NAME)
+  }
+}

package/src/core/ws/WebSocketMemoryClientStore.ts

@@ -0,0 +1,27 @@
+import { WebSocketClientConnectionProtocol } from '@mswjs/interceptors/WebSocket'
+import {
+  SerializedWebSocketClient,
+  WebSocketClientStore,
+} from './WebSocketClientStore'
+
+export class WebSocketMemoryClientStore implements WebSocketClientStore {
+  private store: Map<string, SerializedWebSocketClient>
+
+  constructor() {
+    this.store = new Map()
+  }
+
+  public async add(client: WebSocketClientConnectionProtocol): Promise<void> {
+    this.store.set(client.id, { id: client.id, url: client.url.href })
+  }
+
+  public getAll(): Promise<Array<SerializedWebSocketClient>> {
+    return Promise.resolve(Array.from(this.store.values()))
+  }
+
+  public async deleteMany(clientIds: Array<string>): Promise<void> {
+    for (const clientId of clientIds) {
+      this.store.delete(clientId)
+    }
+  }
+}