fix: fix MSW load (riccardoperra#376)

* fix: fix MSW service worker
* fix css bundle invalid syntax

Author: riccardoperra

apps/codeimage/package.json

@@ -21,7 +21,7 @@
     "@types/downloadjs": "^1.4.3",
     "cross-env": "^7.0.3",
     "https-localhost": "^4.7.1",
-    "msw": "^0.47.3",
+    "msw": "^0.47.4",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
     "sass": "^1.52.1",

apps/codeimage/public/mockServiceWorker.js

@@ -2,13 +2,13 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.43.1).
+ * Mock Service Worker (0.47.4).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = 'c9450df6e4dc5e45740c3b0b640727a2'
+const INTEGRITY_CHECKSUM = 'b3066ef78c2f9090b4ce87e874965995'
 const activeClientIds = new Set()
 
 self.addEventListener('install', function () {
@@ -200,7 +200,7 @@ async function getResponse(event, client, requestId) {
 
   function passthrough() {
     // Clone the request because it might've been already used
-    // (i.e. its body has been read and sent to the cilent).
+    // (i.e. its body has been read and sent to the client).
     const headers = Object.fromEntries(clonedRequest.headers.entries())
 
     // Remove MSW-specific request headers so the bypassed requests
@@ -231,13 +231,6 @@ async function getResponse(event, client, requestId) {
     return passthrough()
   }
 
-  // Create a communication channel scoped to the current request.
-  // This way events can be exchanged outside of the worker's global
-  // "message" event listener (i.e. abstracted into functions).
-  const operationChannel = new BroadcastChannel(
-    `msw-response-stream-${requestId}`,
-  )
-
   // Notify the client that a request has been intercepted.
   const clientMessage = await sendToClient(client, {
     type: 'REQUEST',
@@ -262,43 +255,21 @@ async function getResponse(event, client, requestId) {
 
   switch (clientMessage.type) {
     case 'MOCK_RESPONSE': {
-      return respondWithMock(clientMessage.payload)
-    }
-
-    case 'MOCK_RESPONSE_START': {
-      return respondWithMockStream(operationChannel, clientMessage.payload)
+      return respondWithMock(clientMessage.data)
     }
 
     case 'MOCK_NOT_FOUND': {
       return passthrough()
     }
 
     case 'NETWORK_ERROR': {
-      const { name, message } = clientMessage.payload
+      const { name, message } = clientMessage.data
       const networkError = new Error(message)
       networkError.name = name
 
       // Rejecting a "respondWith" promise emulates a network error.
       throw networkError
     }
-
-    case 'INTERNAL_ERROR': {
-      const parsedBody = JSON.parse(clientMessage.payload.body)
-
-      console.error(
-        `\
-[MSW] Uncaught exception in the request handler for "%s %s":
-
-${parsedBody.location}
-
-This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
-`,
-        request.method,
-        request.url,
-      )
-
-      return respondWithMock(clientMessage.payload)
-    }
   }
 
   return passthrough()
@@ -316,7 +287,7 @@ function sendToClient(client, message) {
       resolve(event.data)
     }
 
-    client.postMessage(JSON.stringify(message), [channel.port2])
+    client.postMessage(message, [channel.port2])
   })
 }
 
@@ -330,38 +301,3 @@ async function respondWithMock(response) {
   await sleep(response.delay)
   return new Response(response.body, response)
 }
-
-function respondWithMockStream(operationChannel, mockResponse) {
-  let streamCtrl
-  const stream = new ReadableStream({
-    start: (controller) => (streamCtrl = controller),
-  })
-
-  return new Promise(async (resolve, reject) => {
-    operationChannel.onmessageerror = (event) => {
-      operationChannel.close()
-      return reject(event.data.error)
-    }
-
-    operationChannel.onmessage = (event) => {
-      if (!event.data) {
-        return
-      }
-
-      switch (event.data.type) {
-        case 'MOCK_RESPONSE_CHUNK': {
-          streamCtrl.enqueue(event.data.payload)
-          break
-        }
-
-        case 'MOCK_RESPONSE_END': {
-          streamCtrl.close()
-          operationChannel.close()
-        }
-      }
-    }
-
-    await sleep(mockResponse.delay)
-    return resolve(new Response(stream, mockResponse))
-  })
-}

apps/codeimage/src/components/KeyboardShortcuts/KeyboardShortcuts.css.ts

@@ -49,10 +49,14 @@ export const key = style([
     selectors: {
       ...withThemeMode({
         light: {
-          [backgroundColorVar]: '#f3f3f3',
+          vars: {
+            [backgroundColorVar]: '#f3f3f3',
+          },
         },
         dark: {
-          [backgroundColorVar]: '#555555',
+          vars: {
+            [backgroundColorVar]: '#555555',
+          },
         },
       }),
     },