msw 2.3.0-ws.rc-10 → 2.3.0-ws.rc-11

package/lib/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.0-ws.rc-10'
+const PACKAGE_VERSION = '2.3.0-ws.rc-11'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "msw",
-  "version": "2.3.0-ws.rc-10",
+  "version": "2.3.0-ws.rc-11",
   "description": "Seamless REST/GraphQL API mocking library for browser and Node.js.",
   "main": "./lib/core/index.js",
   "module": "./lib/core/index.mjs",
@@ -137,7 +137,7 @@
     "@bundled-es-modules/statuses": "^1.0.1",
     "@bundled-es-modules/tough-cookie": "^0.1.6",
     "@inquirer/confirm": "^3.0.0",
-    "@mswjs/interceptors": "^0.36.0",
+    "@mswjs/interceptors": "^0.36.1",
     "@open-draft/deferred-promise": "^2.2.0",
     "@open-draft/until": "^2.1.0",
     "@types/cookie": "^0.6.0",

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

@@ -10,10 +10,10 @@ import { getMessageLength } from './getMessageLength'
 import { getPublicData } from './getPublicData'
 
 const colors = {
-  blue: '#3b82f6',
-  green: '#22c55e',
-  red: '#ef4444',
-  orange: '#ff6a33',
+  system: '#3b82f6',
+  outgoing: '#22c55e',
+  incoming: '#ef4444',
+  mocked: '#ff6a33',
 }
 
 export function attachWebSocketLogger(
@@ -38,13 +38,6 @@ export function attachWebSocketLogger(
     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)
@@ -66,7 +59,10 @@ export function attachWebSocketLogger(
           value: client.socket,
         },
       })
-      logIncomingMockedClientMessage(messageEvent)
+
+      queueMicrotask(() => {
+        logIncomingMockedClientMessage(messageEvent)
+      })
 
       return Reflect.apply(target, thisArg, args)
     },
@@ -120,7 +116,7 @@ export function logConnectionOpen(client: WebSocketClientConnection) {
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(`${getTimestamp()} %c▶%c ${publicUrl}`),
-    `color:${colors.blue}`,
+    `color:${colors.system}`,
     'color:inherit',
   )
   // eslint-disable-next-line no-console
@@ -129,24 +125,17 @@ export function logConnectionOpen(client: WebSocketClientConnection) {
   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)
+function logConnectionClose(event: CloseEvent) {
+  const target = event.target as WebSocket
+  const publicUrl = toPublicUrl(target.url)
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c↑%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,
     ),
-    `color:${colors.green}`,
+    `color:${colors.system}`,
     'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)
@@ -154,25 +143,17 @@ export async function logOutgoingClientMessage(
   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)
+function logClientError(event: Event) {
+  const socket = event.target as WebSocket
+  const publicUrl = toPublicUrl(socket.url)
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇡%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c\u00D7%c ${publicUrl}`,
     ),
-    `color:${colors.orange}`,
+    `color:${colors.system}`,
     'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)
@@ -181,23 +162,19 @@ export async function logOutgoingMockedClientMessage(
 }
 
 /**
- * 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.
+ * Prints the outgoing client message.
  */
-export async function logIncomingClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
+async function logOutgoingClientMessage(event: MessageEvent<WebSocketData>) {
   const byteLength = getMessageLength(event.data)
   const publicData = await getPublicData(event.data)
+  const arrow = event.defaultPrevented ? '⇡' : '⬆'
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c↓%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c${arrow}%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.red}`,
+    `color:${colors.outgoing}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -210,9 +187,9 @@ export async function logIncomingClientMessage(
 
 /**
  * Prints the outgoing client message initiated
- * by `client.send()` in the event handler.
+ * by `server.send()` in the event handler.
  */
-export async function logIncomingMockedClientMessage(
+async function logOutgoingMockedClientMessage(
   event: MessageEvent<WebSocketData>,
 ) {
   const byteLength = getMessageLength(event.data)
@@ -221,9 +198,9 @@ export async function logIncomingMockedClientMessage(
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c⬆%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.orange}`,
+    `color:${colors.mocked}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -234,25 +211,11 @@ export async function logIncomingMockedClientMessage(
   console.groupEnd()
 }
 
-function logConnectionClose(event: CloseEvent) {
-  const target = event.target as WebSocket
-  const publicUrl = toPublicUrl(target.url)
-
-  // eslint-disable-next-line no-console
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,
-    ),
-    `color:${colors.blue}`,
-    'color:inherit',
-  )
-  // eslint-disable-next-line no-console
-  console.log(event)
-  // eslint-disable-next-line no-console
-  console.groupEnd()
-}
-
-export async function logIncomingServerMessage(
+/**
+ * Prints the outgoing client message initiated
+ * by `client.send()` in the event handler.
+ */
+async function logIncomingMockedClientMessage(
   event: MessageEvent<WebSocketData>,
 ) {
   const byteLength = getMessageLength(event.data)
@@ -261,9 +224,9 @@ export async function logIncomingServerMessage(
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c⬇%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.green}`,
+    `color:${colors.mocked}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -274,17 +237,20 @@ export async function logIncomingServerMessage(
   console.groupEnd()
 }
 
-function logClientError(event: Event) {
-  const socket = event.target as WebSocket
-  const publicUrl = toPublicUrl(socket.url)
+async function logIncomingServerMessage(event: MessageEvent<WebSocketData>) {
+  const byteLength = getMessageLength(event.data)
+  const publicData = await getPublicData(event.data)
+  const arrow = event.defaultPrevented ? '⇣' : '⬇'
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c\u00D7%c ${publicUrl}`,
+      `${getTimestamp({ milliseconds: true })} %c${arrow}%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.blue}`,
+    `color:${colors.incoming}`,
     'color:inherit',
+    'color:gray;font-weight:normal',
+    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)