msw 2.3.0-ws.rc-5 → 2.3.0

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

package/src/core/ws.test.ts

@@ -1,23 +0,0 @@
-/**
- * @vitest-environment node-websocket
- */
-import { ws } from './ws'
-
-it('exports the "link()" method', () => {
-  expect(ws).toHaveProperty('link')
-  expect(ws.link).toBeInstanceOf(Function)
-})
-
-it('throws an error when calling "ws.link()" without a URL argument', () => {
-  expect(() =>
-    // @ts-expect-error Intentionally invalid call.
-    ws.link(),
-  ).toThrow('Expected a WebSocket server URL but got undefined')
-})
-
-it('throws an error when given a non-path argument to "ws.link()"', () => {
-  expect(() =>
-    // @ts-expect-error Intentionally invalid argument.
-    ws.link(2),
-  ).toThrow('Expected a WebSocket server URL to be a valid path but got number')
-})

package/src/core/ws.ts

@@ -1,122 +0,0 @@
-import { invariant } from 'outvariant'
-import type {
-  WebSocketClientConnectionProtocol,
-  WebSocketData,
-} from '@mswjs/interceptors/WebSocket'
-import {
-  WebSocketHandler,
-  kEmitter,
-  type WebSocketHandlerEventMap,
-} from './handlers/WebSocketHandler'
-import { Path, isPath } from './utils/matching/matchRequestUrl'
-import { WebSocketClientManager } from './ws/WebSocketClientManager'
-
-const wsBroadcastChannel = new BroadcastChannel('msw:ws-client-manager')
-
-export type WebSocketLink = {
-  /**
-   * A set of all WebSocket clients connected
-   * to this link.
-   */
-  clients: Set<WebSocketClientConnectionProtocol>
-
-  on<EventType extends keyof WebSocketHandlerEventMap>(
-    event: EventType,
-    listener: (...args: WebSocketHandlerEventMap[EventType]) => void,
-  ): WebSocketHandler
-
-  /**
-   * Broadcasts the given data to all WebSocket clients.
-   *
-   * @example
-   * const service = ws.link('wss://example.com')
-   * service.on('connection', () => {
-   *   service.broadcast('hello, everyone!')
-   * })
-   */
-  broadcast(data: WebSocketData): void
-
-  /**
-   * Broadcasts the given data to all WebSocket clients
-   * except the ones provided in the `clients` argument.
-   *
-   * @example
-   * const service = ws.link('wss://example.com')
-   * service.on('connection', ({ client }) => {
-   *   service.broadcastExcept(client, 'hi, the rest of you!')
-   * })
-   */
-  broadcastExcept(
-    clients:
-      | WebSocketClientConnectionProtocol
-      | Array<WebSocketClientConnectionProtocol>,
-    data: WebSocketData,
-  ): void
-}
-
-/**
- * Intercepts outgoing WebSocket connections to the given URL.
- *
- * @example
- * const chat = ws.link('wss://chat.example.com')
- * chat.on('connection', ({ client }) => {
- *   client.send('hello from server!')
- * })
- */
-function createWebSocketLinkHandler(url: Path): WebSocketLink {
-  invariant(url, 'Expected a WebSocket server URL but got undefined')
-
-  invariant(
-    isPath(url),
-    'Expected a WebSocket server URL to be a valid path but got %s',
-    typeof url,
-  )
-
-  const clientManager = new WebSocketClientManager(wsBroadcastChannel)
-
-  return {
-    clients: clientManager.clients,
-    on(event, listener) {
-      const handler = new WebSocketHandler(url)
-
-      // Add the connection event listener for when the
-      // handler matches and emits a connection event.
-      // When that happens, store that connection in the
-      // set of all connections for reference.
-      handler[kEmitter].on('connection', ({ client }) => {
-        clientManager.addConnection(client)
-      })
-
-      // The "handleWebSocketEvent" function will invoke
-      // the "run()" method on the WebSocketHandler.
-      // If the handler matches, it will emit the "connection"
-      // event. Attach the user-defined listener to that event.
-      handler[kEmitter].on(event, listener)
-
-      return handler
-    },
-
-    broadcast(data) {
-      // This will invoke "send()" on the immediate clients
-      // in this runtime and post a message to the broadcast channel
-      // to trigger send for the clients in other runtimes.
-      this.broadcastExcept([], data)
-    },
-
-    broadcastExcept(clients, data) {
-      const ignoreClients = Array.prototype
-        .concat(clients)
-        .map((client) => client.id)
-
-      clientManager.clients.forEach((otherClient) => {
-        if (!ignoreClients.includes(otherClient.id)) {
-          otherClient.send(data)
-        }
-      })
-    },
-  }
-}
-
-export const ws = {
-  link: createWebSocketLinkHandler,
-}