msw 2.3.0-ws.rc-6 → 2.3.1

package/src/core/ws/WebSocketClientManager.ts

@@ -1,234 +0,0 @@
-import { invariant } from 'outvariant'
-import type {
-  WebSocketData,
-  WebSocketClientConnection,
-  WebSocketClientConnectionProtocol,
-} from '@mswjs/interceptors/WebSocket'
-import { matchRequestUrl, type Path } from '../utils/matching/matchRequestUrl'
-
-export const MSW_WEBSOCKET_CLIENTS_KEY = 'msw:ws:clients'
-
-export type WebSocketBroadcastChannelMessage =
-  | {
-      type: 'extraneous:send'
-      payload: {
-        clientId: string
-        data: WebSocketData
-      }
-    }
-  | {
-      type: 'extraneous:close'
-      payload: {
-        clientId: string
-        code?: number
-        reason?: string
-      }
-    }
-
-type SerializedClient = {
-  clientId: string
-  url: string
-}
-
-/**
- * A manager responsible for accumulating WebSocket client
- * connections across different browser runtimes.
- */
-export class WebSocketClientManager {
-  private inMemoryClients: Set<WebSocketClientConnectionProtocol>
-
-  constructor(
-    private channel: BroadcastChannel,
-    private url: Path,
-  ) {
-    this.inMemoryClients = new Set()
-
-    if (typeof localStorage !== 'undefined') {
-      // When the worker clears the local storage key in "worker.stop()",
-      // also clear the in-memory clients map.
-      localStorage.removeItem = new Proxy(localStorage.removeItem, {
-        apply: (target, thisArg, args) => {
-          const [key] = args
-
-          if (key === MSW_WEBSOCKET_CLIENTS_KEY) {
-            this.inMemoryClients.clear()
-          }
-
-          return Reflect.apply(target, thisArg, args)
-        },
-      })
-    }
-  }
-
-  /**
-   * All active WebSocket client connections.
-   */
-  get clients(): Set<WebSocketClientConnectionProtocol> {
-    // In the browser, different runtimes use "localStorage"
-    // as the shared source of all the clients.
-    if (typeof localStorage !== 'undefined') {
-      const inMemoryClients = Array.from(this.inMemoryClients)
-
-      console.log('get clients()', inMemoryClients, this.getSerializedClients())
-
-      return new Set(
-        inMemoryClients.concat(
-          this.getSerializedClients()
-            // Filter out the serialized clients that are already present
-            // in this runtime in-memory. This is crucial because a remote client
-            // wrapper CANNOT send a message to the client in THIS runtime
-            // (the "message" event on broadcast channel won't trigger).
-            .filter((serializedClient) => {
-              if (
-                inMemoryClients.every(
-                  (client) => client.id !== serializedClient.clientId,
-                )
-              ) {
-                return serializedClient
-              }
-            })
-            .map((serializedClient) => {
-              return new WebSocketRemoteClientConnection(
-                serializedClient.clientId,
-                new URL(serializedClient.url),
-                this.channel,
-              )
-            }),
-        ),
-      )
-    }
-
-    // In Node.js, the manager acts as a singleton, and all clients
-    // are kept in-memory.
-    return this.inMemoryClients
-  }
-
-  private getSerializedClients(): Array<SerializedClient> {
-    invariant(
-      typeof localStorage !== 'undefined',
-      'Failed to call WebSocketClientManager#getSerializedClients() in a non-browser environment. This is likely a bug in MSW. Please, report it on GitHub: https://github.com/mswjs/msw',
-    )
-
-    const clientsJson = localStorage.getItem(MSW_WEBSOCKET_CLIENTS_KEY)
-
-    if (!clientsJson) {
-      return []
-    }
-
-    const allClients = JSON.parse(clientsJson) as Array<SerializedClient>
-    const matchingClients = allClients.filter((client) => {
-      return matchRequestUrl(new URL(client.url), this.url).matches
-    })
-
-    return matchingClients
-  }
-
-  private addClient(client: WebSocketClientConnection): void {
-    this.inMemoryClients.add(client)
-
-    if (typeof localStorage !== 'undefined') {
-      const serializedClients = this.getSerializedClients()
-
-      // Serialize the current client for other runtimes to create
-      // a remote wrapper over it. This has no effect on the current runtime.
-      const nextSerializedClients = serializedClients.concat({
-        clientId: client.id,
-        url: client.url.href,
-      } as SerializedClient)
-
-      localStorage.setItem(
-        MSW_WEBSOCKET_CLIENTS_KEY,
-        JSON.stringify(nextSerializedClients),
-      )
-    }
-  }
-
-  /**
-   * 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 addConnection(client: WebSocketClientConnection): void {
-    this.addClient(client)
-
-    // Instruct the current client how to handle events
-    // coming from other runtimes (e.g. when calling `.broadcast()`).
-    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)
-  }
-}

package/src/core/ws/handleWebSocketEvent.ts

@@ -1,56 +0,0 @@
-import type { WebSocketConnectionData } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'
-import { RequestHandler } from '../handlers/RequestHandler'
-import { WebSocketHandler, kDispatchEvent } from '../handlers/WebSocketHandler'
-import { webSocketInterceptor } from './webSocketInterceptor'
-
-interface HandleWebSocketEventOptions {
-  getHandlers: () => Array<RequestHandler | WebSocketHandler>
-  onMockedConnection: (connection: WebSocketConnectionData) => void
-  onPassthroughConnection: (onnection: WebSocketConnectionData) => void
-}
-
-export function handleWebSocketEvent(options: HandleWebSocketEventOptions) {
-  webSocketInterceptor.on('connection', (connection) => {
-    const handlers = options.getHandlers()
-
-    const connectionEvent = new MessageEvent('connection', {
-      data: connection,
-    })
-
-    // First, filter only those WebSocket handlers that
-    // match the "ws.link()" endpoint predicate. Don't dispatch
-    // anything yet so the logger can be attached to the connection
-    // before it potentially sends events.
-    const matchingHandlers = handlers.filter<WebSocketHandler>(
-      (handler): handler is WebSocketHandler => {
-        if (handler instanceof WebSocketHandler) {
-          return handler.predicate({
-            event: connectionEvent,
-            parsedResult: handler.parse({
-              event: connectionEvent,
-            }),
-          })
-        }
-
-        return false
-      },
-    )
-
-    if (matchingHandlers.length > 0) {
-      options?.onMockedConnection(connection)
-
-      // Iterate over the handlers and forward the connection
-      // event to WebSocket event handlers. This is equivalent
-      // to dispatching that event onto multiple listeners.
-      for (const handler of matchingHandlers) {
-        handler[kDispatchEvent](connectionEvent)
-      }
-    } else {
-      options?.onPassthroughConnection(connection)
-
-      // If none of the "ws" handlers matched,
-      // establish the WebSocket connection as-is.
-      connection.server.connect()
-    }
-  })
-}

package/src/core/ws/utils/attachWebSocketLogger.ts

@@ -1,269 +0,0 @@
-import type {
-  WebSocketClientConnection,
-  WebSocketConnectionData,
-  WebSocketData,
-} from '@mswjs/interceptors/WebSocket'
-import { devUtils } from '../../utils/internal/devUtils'
-import { getTimestamp } from '../../utils/logging/getTimestamp'
-import { toPublicUrl } from '../../utils/request/toPublicUrl'
-import { getMessageLength } from './getMessageLength'
-import { getPublicData } from './getPublicData'
-
-const colors = {
-  blue: '#3b82f6',
-  green: '#22c55e',
-  red: '#ef4444',
-  orange: '#ff6a33',
-}
-
-export function attachWebSocketLogger(
-  connection: WebSocketConnectionData,
-): void {
-  const { client, server } = connection
-
-  logConnectionOpen(client)
-
-  // Log the events sent from the WebSocket client.
-  // WebSocket client connection object is written from the
-  // server's perspective so these message events are outgoing.
-  /**
-   * @todo Provide the reference to the exact event handler
-   * that called this `client.send()`.
-   */
-  client.addEventListener('message', (event) => {
-    logOutgoingClientMessage(event)
-  })
-
-  client.addEventListener('close', (event) => {
-    logConnectionClose(event)
-  })
-
-  // Log the events received by the WebSocket client.
-  // "client.socket" references the actual WebSocket instance
-  // so these message events are incoming messages.
-  client.socket.addEventListener('message', (event) => {
-    logIncomingClientMessage(event)
-  })
-
-  // Log client errors (connection closures due to errors).
-  client.socket.addEventListener('error', (event) => {
-    logClientError(event)
-  })
-
-  client.send = new Proxy(client.send, {
-    apply(target, thisArg, args) {
-      const [data] = args
-      const messageEvent = new MessageEvent('message', { data })
-      Object.defineProperties(messageEvent, {
-        currentTarget: {
-          enumerable: true,
-          writable: false,
-          value: client.socket,
-        },
-        target: {
-          enumerable: true,
-          writable: false,
-          value: client.socket,
-        },
-      })
-      logIncomingMockedClientMessage(messageEvent)
-
-      return Reflect.apply(target, thisArg, args)
-    },
-  })
-
-  server.addEventListener(
-    'open',
-    () => {
-      server.addEventListener('message', (event) => {
-        logIncomingServerMessage(event)
-      })
-    },
-    { once: true },
-  )
-
-  // Log outgoing client events initiated by the event handler.
-  // The actual client never sent these but the handler did.
-  server.send = new Proxy(server.send, {
-    apply(target, thisArg, args) {
-      const [data] = args
-      const messageEvent = new MessageEvent('message', { data })
-      Object.defineProperties(messageEvent, {
-        currentTarget: {
-          enumerable: true,
-          writable: false,
-          value: server['realWebSocket'],
-        },
-        target: {
-          enumerable: true,
-          writable: false,
-          value: server['realWebSocket'],
-        },
-      })
-
-      logOutgoingMockedClientMessage(messageEvent)
-
-      return Reflect.apply(target, thisArg, args)
-    },
-  })
-}
-
-/**
- * Prints the WebSocket connection.
- * This is meant to be logged by every WebSocket handler
- * that intercepted this connection. This helps you see
- * what handlers observe this connection.
- */
-export function logConnectionOpen(client: WebSocketClientConnection) {
-  const publicUrl = toPublicUrl(client.url)
-
-  console.groupCollapsed(
-    devUtils.formatMessage(`${getTimestamp()} %c▶%c ${publicUrl}`),
-    `color:${colors.blue}`,
-    'color:inherit',
-  )
-  console.log('Client:', client.socket)
-  console.groupEnd()
-}
-
-/**
- * Prints the outgoing client message.
- */
-export async function logOutgoingClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
-
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c↑%c ${publicData} %c${byteLength}%c`,
-    ),
-    `color:${colors.green}`,
-    'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
-  )
-  console.log(event)
-  console.groupEnd()
-}
-
-/**
- * Prints the outgoing client message initiated
- * by `server.send()` in the event handler.
- */
-export async function logOutgoingMockedClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
-
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇡%c ${publicData} %c${byteLength}%c`,
-    ),
-    `color:${colors.orange}`,
-    'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
-  )
-  console.log(event)
-  console.groupEnd()
-}
-
-/**
- * Prings the message received by the WebSocket client.
- * This is fired when the "message" event is dispatched
- * on the actual WebSocket client instance, and translates to
- * the client receiving a message from the server.
- */
-export async function logIncomingClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
-
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c↓%c ${publicData} %c${byteLength}%c`,
-    ),
-    `color:${colors.red}`,
-    'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
-  )
-  console.log(event)
-  console.groupEnd()
-}
-
-/**
- * Prints the outgoing client message initiated
- * by `client.send()` in the event handler.
- */
-export async function logIncomingMockedClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
-
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
-    ),
-    `color:${colors.orange}`,
-    'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
-  )
-  console.log(event)
-  console.groupEnd()
-}
-
-function logConnectionClose(event: CloseEvent) {
-  const target = event.target as WebSocket
-  const publicUrl = toPublicUrl(target.url)
-
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,
-    ),
-    `color:${colors.blue}`,
-    'color:inherit',
-  )
-  console.log(event)
-  console.groupEnd()
-}
-
-export async function logIncomingServerMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
-
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
-    ),
-    `color:${colors.green}`,
-    'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
-  )
-  console.log(event)
-  console.groupEnd()
-}
-
-function logClientError(event: Event) {
-  const socket = event.target as WebSocket
-  const publicUrl = toPublicUrl(socket.url)
-
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c\u00D7%c ${publicUrl}`,
-    ),
-    `color:${colors.blue}`,
-    'color:inherit',
-  )
-  console.log(event)
-  console.groupEnd()
-}

package/src/core/ws/utils/getMessageLength.test.ts

@@ -1,16 +0,0 @@
-import { getMessageLength } from './getMessageLength'
-
-it('returns the length of the string', () => {
-  expect(getMessageLength('')).toBe(0)
-  expect(getMessageLength('hello')).toBe(5)
-})
-
-it('returns the size of the Blob', () => {
-  expect(getMessageLength(new Blob())).toBe(0)
-  expect(getMessageLength(new Blob(['hello']))).toBe(5)
-})
-
-it('returns the byte length of ArrayBuffer', () => {
-  expect(getMessageLength(new ArrayBuffer(0))).toBe(0)
-  expect(getMessageLength(new ArrayBuffer(5))).toBe(5)
-})

package/src/core/ws/utils/getMessageLength.ts

@@ -1,19 +0,0 @@
-import type { WebSocketData } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'
-
-/**
- * Returns the byte length of the given WebSocket message.
- * @example
- * getMessageLength('hello') // 5
- * getMessageLength(new Blob(['hello'])) // 5
- */
-export function getMessageLength(data: WebSocketData): number {
-  if (data instanceof Blob) {
-    return data.size
-  }
-
-  if (data instanceof ArrayBuffer) {
-    return data.byteLength
-  }
-
-  return new Blob([data]).size
-}

package/src/core/ws/utils/getPublicData.test.ts

@@ -1,38 +0,0 @@
-import { getPublicData } from './getPublicData'
-
-it('returns a short string as-is', async () => {
-  expect(await getPublicData('')).toBe('')
-  expect(await getPublicData('hello')).toBe('hello')
-})
-
-it('returns a truncated long string', async () => {
-  expect(await getPublicData('this is a very long string')).toBe(
-    'this is a very long stri…',
-  )
-})
-
-it('returns a short Blob text as-is', async () => {
-  expect(await getPublicData(new Blob(['']))).toBe('Blob()')
-  expect(await getPublicData(new Blob(['hello']))).toBe('Blob(hello)')
-})
-
-it('returns a truncated long Blob text', async () => {
-  expect(await getPublicData(new Blob(['this is a very long string']))).toBe(
-    'Blob(this is a very long stri…)',
-  )
-})
-
-it('returns a short ArrayBuffer text as-is', async () => {
-  expect(await getPublicData(new TextEncoder().encode(''))).toBe(
-    'ArrayBuffer()',
-  )
-  expect(await getPublicData(new TextEncoder().encode('hello'))).toBe(
-    'ArrayBuffer(hello)',
-  )
-})
-
-it('returns a truncated ArrayBuffer text', async () => {
-  expect(
-    await getPublicData(new TextEncoder().encode('this is a very long string')),
-  ).toBe('ArrayBuffer(this is a very long stri…)')
-})

package/src/core/ws/utils/getPublicData.ts

@@ -1,17 +0,0 @@
-import { WebSocketData } from '@mswjs/interceptors/WebSocket'
-import { truncateMessage } from './truncateMessage'
-
-export async function getPublicData(data: WebSocketData): Promise<string> {
-  if (data instanceof Blob) {
-    const text = await data.text()
-    return `Blob(${truncateMessage(text)})`
-  }
-
-  // Handle all ArrayBuffer-like objects.
-  if (typeof data === 'object' && 'byteLength' in data) {
-    const text = new TextDecoder().decode(data)
-    return `ArrayBuffer(${truncateMessage(text)})`
-  }
-
-  return truncateMessage(data)
-}

package/src/core/ws/utils/truncateMessage.test.ts

@@ -1,12 +0,0 @@
-import { truncateMessage } from './truncateMessage'
-
-it('returns a short string as-is', () => {
-  expect(truncateMessage('')).toBe('')
-  expect(truncateMessage('hello')).toBe('hello')
-})
-
-it('truncates a long string', () => {
-  expect(truncateMessage('this is a very long string')).toBe(
-    'this is a very long stri…',
-  )
-})

package/src/core/ws/utils/truncateMessage.ts

@@ -1,9 +0,0 @@
-const MAX_LENGTH = 24
-
-export function truncateMessage(message: string): string {
-  if (message.length <= MAX_LENGTH) {
-    return message
-  }
-
-  return `${message.slice(0, MAX_LENGTH)}…`
-}

package/src/core/ws/webSocketInterceptor.ts

@@ -1,3 +0,0 @@
-import { WebSocketInterceptor } from '@mswjs/interceptors/WebSocket'
-
-export const webSocketInterceptor = new WebSocketInterceptor()