fix: use cookie directly via a shim (#2606)

global.d.ts

@@ -1,7 +1,3 @@
-declare module '@bundled-es-modules/cookie' {
-  export * as default from 'cookie'
-}
-
 declare module '@bundled-es-modules/statuses' {
   import * as statuses from 'statuses'
   export default statuses

package.json

@@ -237,13 +237,12 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@bundled-es-modules/cookie": "^2.0.1",
     "@bundled-es-modules/statuses": "^1.0.1",
     "@inquirer/confirm": "^5.0.0",
     "@mswjs/interceptors": "^0.39.1",
     "@open-draft/deferred-promise": "^2.2.0",
-    "@types/cookie": "^0.6.0",
     "@types/statuses": "^2.0.4",
+    "cookie": "^1.0.2",
     "graphql": "^16.8.1",
     "headers-polyfill": "^4.0.2",
     "is-node-process": "^1.2.0",

pnpm-lock.yaml

@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@bundled-es-modules/cookie':
-        specifier: ^2.0.1
-        version: 2.0.1
       '@bundled-es-modules/statuses':
         specifier: ^1.0.1
         version: 1.0.1
@@ -23,12 +20,12 @@ importers:
       '@open-draft/deferred-promise':
         specifier: ^2.2.0
         version: 2.2.0
-      '@types/cookie':
-        specifier: ^0.6.0
-        version: 0.6.0
       '@types/statuses':
         specifier: ^2.0.4
         version: 2.0.5
+      cookie:
+        specifier: ^1.0.2
+        version: 1.0.2
       graphql:
         specifier: ^16.8.1
         version: 16.8.2
@@ -327,9 +324,6 @@ packages:
     resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
     engines: {node: '>=6.9.0'}
 
-  '@bundled-es-modules/[email protected]':
-    resolution: {integrity: sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==}
-
   '@bundled-es-modules/[email protected]':
     resolution: {integrity: sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==}
 
@@ -1333,9 +1327,6 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
 
-  '@types/[email protected]':
-    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
-
   '@types/[email protected]':
     resolution: {integrity: sha512-40Zk8qR147RABiQ7NQnBzWzDcjKzNrntB5BAmeGCb2p/MIyOE+4BVvc17wumsUqUw00bJYqoXFHYygQnEFh4/Q==}
 
@@ -2208,6 +2199,10 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
+  [email protected]:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
   [email protected]:
     resolution: {integrity: sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==}
     engines: {node: '>= 0.8'}
@@ -5435,10 +5430,6 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  '@bundled-es-modules/[email protected]':
-    dependencies:
-      cookie: 0.7.2
-
   '@bundled-es-modules/[email protected]':
     dependencies:
       statuses: 2.0.1
@@ -6333,8 +6324,6 @@ snapshots:
 
   '@types/[email protected]': {}
 
-  '@types/[email protected]': {}
-
   '@types/[email protected]':
     dependencies:
       '@types/connect': 3.4.38
@@ -7393,6 +7382,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       depd: 2.0.0

src/browser/setupWorker/glossary.ts

@@ -1,4 +1,5 @@
 import { Emitter } from 'strict-event-emitter'
+import type { HttpRequestEventMap, Interceptor } from '@mswjs/interceptors'
 import type { DeferredPromise } from '@open-draft/deferred-promise'
 import {
   LifeCycleEventEmitter,
@@ -6,7 +7,6 @@ import {
   SharedOptions,
 } from '~/core/sharedOptions'
 import { RequestHandler } from '~/core/handlers/RequestHandler'
-import type { HttpRequestEventMap, Interceptor } from '@mswjs/interceptors'
 import type { RequiredDeep } from '~/core/typeUtils'
 import type { WebSocketHandler } from '~/core/handlers/WebSocketHandler'
 import type { WorkerChannel } from '../utils/workerChannel'

src/browser/setupWorker/setupWorker.ts

@@ -1,5 +1,6 @@
 import { invariant } from 'outvariant'
 import { isNodeProcess } from 'is-node-process'
+import { DeferredPromise } from '@open-draft/deferred-promise'
 import type {
   SetupWorkerInternalContext,
   StartReturnType,
@@ -18,7 +19,6 @@ import { webSocketInterceptor } from '~/core/ws/webSocketInterceptor'
 import { handleWebSocketEvent } from '~/core/ws/handleWebSocketEvent'
 import { attachWebSocketLogger } from '~/core/ws/utils/attachWebSocketLogger'
 import { WorkerChannel } from '../utils/workerChannel'
-import { DeferredPromise } from '@open-draft/deferred-promise'
 import { createFallbackRequestListener } from './start/createFallbackRequestListener'
 import { printStartMessage } from './start/utils/printStartMessage'
 import { printStopMessage } from './stop/utils/printStopMessage'

src/core/utils/request/getRequestCookies.ts

@@ -1,8 +1,11 @@
-import cookieUtils from '@bundled-es-modules/cookie'
+import {
+  parse as parseCookie,
+  serialize as serializeCookie,
+} from '../../../shims/cookie'
 import { cookieStore } from '../cookieStore'
 
 function parseCookies(input: string): Record<string, string> {
-  const parsedCookies = cookieUtils.parse(input)
+  const parsedCookies = parseCookie(input)
   const cookies: Record<string, string> = {}
 
   for (const cookieName in parsedCookies) {
@@ -62,7 +65,7 @@ export function getAllRequestCookies(request: Request): Record<string, string> {
   for (const name in cookiesFromDocument) {
     request.headers.append(
       'cookie',
-      cookieUtils.serialize(name, cookiesFromDocument[name]),
+      serializeCookie(name, cookiesFromDocument[name]),
     )
   }
 

src/core/ws/WebSocketIndexedDBClientStore.ts

@@ -1,5 +1,5 @@
 import { DeferredPromise } from '@open-draft/deferred-promise'
-import { WebSocketClientConnectionProtocol } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'
+import { WebSocketClientConnectionProtocol } from '@mswjs/interceptors/WebSocket'
 import {
   type SerializedWebSocketClient,
   WebSocketClientStore,

src/core/ws/WebSocketMemoryClientStore.ts

@@ -1,4 +1,4 @@
-import { WebSocketClientConnectionProtocol } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'
+import { WebSocketClientConnectionProtocol } from '@mswjs/interceptors/WebSocket'
 import {
   SerializedWebSocketClient,
   WebSocketClientStore,

src/core/ws/handleWebSocketEvent.ts

@@ -1,4 +1,4 @@
-import type { WebSocketConnectionData } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'
+import type { WebSocketConnectionData } from '@mswjs/interceptors/WebSocket'
 import { RequestHandler } from '../handlers/RequestHandler'
 import { WebSocketHandler } from '../handlers/WebSocketHandler'
 import { webSocketInterceptor } from './webSocketInterceptor'

src/core/ws/utils/getMessageLength.ts

@@ -1,4 +1,4 @@
-import type { WebSocketData } from '@mswjs/interceptors/lib/browser/interceptors/WebSocket'
+import type { WebSocketData } from '@mswjs/interceptors/WebSocket'
 
 /**
  * Returns the byte length of the given WebSocket message.

src/shims/cookie.ts

@@ -0,0 +1,7 @@
+import * as allCookie from 'cookie'
+const cookie = (allCookie as any).default || allCookie
+
+export const parse = cookie.parse as typeof import('cookie').parse
+export const serialize = cookie.serialize as typeof import('cookie').serialize
+
+export default cookie

src/tsconfig.src.json

@@ -3,12 +3,7 @@
   // living in the "src" directory.
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "composite": true,
-    "baseUrl": "./",
-    "paths": {
-      "~/core": ["core"],
-      "~/core/*": ["core/*"]
-    }
+    "composite": true
   },
   "include": ["../global.d.ts", "./**/*.ts"],
   "exclude": ["./**/*.test.ts"]

test/browser/graphql-api/cookies.test.ts

@@ -1,4 +1,4 @@
-import cookieUtils from '@bundled-es-modules/cookie'
+import { parse as parseCookie } from '../../../src/shims/cookie'
 import { test, expect } from '../playwright.extend'
 import { gql } from '../../support/graphql'
 
@@ -32,6 +32,6 @@ test('sets cookie on the mocked GraphQL response', async ({
   const cookieString = await page.evaluate(() => {
     return document.cookie
   })
-  const allCookies = cookieUtils.parse(cookieString)
+  const allCookies = parseCookie(cookieString)
   expect(allCookies).toHaveProperty('test-cookie', 'value')
 })

test/node/graphql-api/cookies.node.test.ts

@@ -1,5 +1,5 @@
 // @vitest-environment node
-import cookieUtils from '@bundled-es-modules/cookie'
+import { parse as parseCookie } from '../../../src/shims/cookie'
 import { graphql as executeGraphql, buildSchema } from 'graphql'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -68,7 +68,7 @@ test('sets cookie on the mocked response', async () => {
   })
   const body = await res.json()
   const cookieString = res.headers.get('set-cookie')!
-  const responseCookies = cookieUtils.parse(cookieString)
+  const responseCookies = parseCookie(cookieString)
 
   expect(cookieString).toBe('test-cookie=value')
   expect(body).toEqual({

tsconfig.base.json

@@ -6,7 +6,12 @@
     "moduleResolution": "node",
     "strictNullChecks": true,
     "skipLibCheck": true,
-    "allowSyntheticDefaultImports": false
+    "allowSyntheticDefaultImports": false,
+    "baseUrl": "./",
+    "paths": {
+      "~/core": ["src/core"],
+      "~/core/*": ["src/core/*"]
+    }
   },
   "include": ["./global.d.ts"],
   "exclude": ["node_modules", "lib"]

tsup.config.ts

@@ -20,6 +20,24 @@ const mswCore = /\/core(\/.+)?$/
 
 const SERVICE_WORKER_CHECKSUM = getWorkerChecksum()
 
+/**
+ * A designated configuration for CJS shims.
+ * This bundles the shims so CJS modules could be used
+ * in the browser.
+ */
+const shimConfig: Options = {
+  name: 'shims',
+  platform: 'neutral',
+  entry: glob.sync('./src/shims/**/*.ts'),
+  format: ['esm', 'cjs'],
+  noExternal: ['cookie'],
+  outDir: './lib/shims',
+  bundle: true,
+  splitting: false,
+  sourcemap: false,
+  dts: true,
+}
+
 const coreConfig: Options = {
   name: 'core',
   platform: 'neutral',
@@ -27,6 +45,7 @@ const coreConfig: Options = {
     ignore: '**/*.test.ts',
   }),
   external: [ecosystemDependencies],
+  noExternal: ['cookie'],
   format: ['esm', 'cjs'],
   outDir: './lib/core',
   bundle: false,
@@ -67,7 +86,7 @@ const browserConfig: Options = {
   noExternal: Object.keys(packageJson.dependencies).filter((packageName) => {
     /**
      * @note Never bundle MSW core so all builds reference the *same*
-     * JavaScript and TypeScript care files. This way types across
+     * JavaScript and TypeScript core files. This way types across
      * export paths remain compatible:
      * import { http } from 'msw' // <- core
      * import { setupWorker } from 'msw/browser' // <- /browser
@@ -131,6 +150,7 @@ const iifeConfig: Options = {
 }
 
 export default defineConfig([
+  shimConfig,
   coreConfig,
   nodeConfig,
   reactNativeConfig,