@msw/cloudflare 0.0.0

package/README.md

@@ -0,0 +1,80 @@
+# `@msw/cloudflare`
+
+Develop and test Cloudflare applications with Mock Service Worker.
+
+## Getting started
+
+### Install
+
+```sh
+npm i https://pkg.pr.new/mswjs/cloudflare/@msw/cloudflare@beta msw
+```
+
+> This package requires `msw` as a peer dependency.
+
+### Usage
+
+Let's say your worker performs a GET request to `https://example.com/user`.
+
+```ts
+// worker.ts
+export default {
+  async fetch(req, env, ctx) {
+    const response = await fetch('https://api.example.com/user')
+    const user = await response.json()
+
+    return new Response(user.id, {
+      headers: { 'content-type': 'text/plain' },
+    })
+  },
+}
+```
+
+Here's how you can intercept and mock that third-party request in order to reliably test your worker in Vitest.
+
+```ts
+import { env } from 'cloudflare:workers'
+import { createExecutionContext } from 'cloudflare:test'
+import { http, HttpResponse } from 'msw'
+import { setupNetwork } from '@msw/cloudflare'
+import worker from './worker'
+
+const network = setupNetwork()
+
+beforeAll(() => {
+  network.enable()
+})
+
+afterEach(() => {
+  network.resetHandlers()
+})
+
+afterAll(() => {
+  network.disable()
+})
+
+it('responds with the user id', async () => {
+  network.use(
+    http.get('https://api.example.com/user', () => {
+      return HttpResponse.json({ id: 1, name: 'John Maverick' })
+    }),
+  )
+
+  const ctx = createExecutionContext()
+  const response = await worker.fetch(
+    new Request('http://localhost/'),
+    env,
+    ctx,
+  )
+
+  expect.soft(response.status).toBe(200)
+  await expect.soft(response.text()).resolves.toBe('1')
+})
+```
+
+## Related materials
+
+- [**Write your first test in Cloudflare Docs**](https://developers.cloudflare.com/workers/testing/vitest-integration/write-your-first-test/)
+- [Mocking HTTP with MSW](https://mswjs.io/docs/http/)
+- [Mocking GraphQL with MSW](https://mswjs.io/docs/graphql/)
+- [Mocking WebSocket with MSW](https://mswjs.io/docs/websocket/)

package/build/index.d.mts

@@ -0,0 +1,8 @@
+import * as _$msw_experimental0 from "msw/experimental";
+import { InterceptorSource } from "msw/experimental";
+
+//#region src/index.d.ts
+declare function setupNetwork(): _$msw_experimental0.NetworkApi<InterceptorSource[]>;
+//#endregion
+export { setupNetwork };
+//# sourceMappingURL=index.d.mts.map

package/build/index.mjs

@@ -0,0 +1,98 @@
+import { bypass, ws } from "msw";
+import { InMemoryHandlersController, InterceptorSource, defineNetwork } from "msw/experimental";
+import { createRequestId, resolveWebSocketUrl } from "@mswjs/interceptors";
+import { FetchInterceptor } from "@mswjs/interceptors/fetch";
+import { WebSocketInterceptor } from "@mswjs/interceptors/WebSocket";
+//#region src/index.ts
+function setupNetwork() {
+	const handlersController = new InMemoryHandlersController([]);
+	ws.onUpgrade = async ({ requestId, request }) => {
+		const handlers = handlersController.getHandlersByKind("websocket");
+		if (handlers.length === 0) return;
+		const connectionUrl = resolveWebSocketUrl(new URL(request.url));
+		const [client, server] = Object.values(new WebSocketPair());
+		const connection = {
+			client: new CloudflareWebSocketClientConnection({
+				url: connectionUrl,
+				socket: server
+			}),
+			server: new CloudflareWebSocketServerConnection({ url: request.url }),
+			info: { protocols: [] }
+		};
+		for (const handler of handlers) await handler.run({
+			requestId,
+			request,
+			...connection
+		});
+		return new Response(null, {
+			status: 101,
+			webSocket: client
+		});
+	};
+	return defineNetwork({
+		sources: [new InterceptorSource({ interceptors: [new FetchInterceptor(), new WebSocketInterceptor()] })],
+		handlers: handlersController,
+		context: { quiet: true }
+	});
+}
+var CloudflareWebSocketClientConnection = class {
+	#socket;
+	id;
+	url;
+	constructor(options) {
+		this.#socket = options.socket;
+		this.id = createRequestId();
+		this.url = new URL(options.url);
+	}
+	send(data) {
+		this.#socket.accept();
+		this.#socket.send(data);
+	}
+	close(code, reason) {
+		this.#socket.close(code, reason);
+	}
+	addEventListener(type, listener, options) {
+		this.#socket.addEventListener(type, listener, options);
+	}
+	removeEventListener(event, listener, options) {
+		this.#socket.removeEventListener(event, listener, options);
+	}
+};
+var CloudflareWebSocketServerConnection = class {
+	#url;
+	#pendingSocket;
+	constructor(options) {
+		this.#url = options.url;
+		this.#pendingSocket = Promise.withResolvers();
+	}
+	connect() {
+		const upgradeRequest = new Request(this.#url, { headers: { upgrade: "websocket" } });
+		fetch(bypass(upgradeRequest)).then((response) => {
+			if (!response.webSocket) throw new Error(`Failed to establish an actual WebSocket connection at "${this.#url}": the server did not approve the handshake`);
+			response.webSocket.accept();
+			this.#pendingSocket.resolve(response.webSocket);
+		}).catch((error) => {
+			this.#pendingSocket.reject(error);
+		});
+	}
+	send(data) {
+		this.#pendingSocket.promise.then((socket) => socket.send(data));
+	}
+	close() {
+		this.#pendingSocket.promise.then((socket) => socket.close());
+	}
+	addEventListener(event, listener, options) {
+		this.#pendingSocket.promise.then((socket) => {
+			socket.addEventListener(event, listener, options);
+		});
+	}
+	removeEventListener(event, listener, options) {
+		this.#pendingSocket.promise.then((socket) => {
+			socket.removeEventListener(event, listener, options);
+		});
+	}
+};
+//#endregion
+export { setupNetwork };
+
+//# sourceMappingURL=index.mjs.map

package/build/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["#socket","#url","#pendingSocket"],"sources":["../src/index.ts"],"sourcesContent":["import { bypass, ws } from 'msw'\nimport {\n  defineNetwork,\n  InterceptorSource,\n  InMemoryHandlersController,\n} from 'msw/experimental'\nimport { createRequestId, resolveWebSocketUrl } from '@mswjs/interceptors'\nimport { FetchInterceptor } from '@mswjs/interceptors/fetch'\nimport {\n  WebSocketInterceptor,\n  type WebSocketData,\n  type WebSocketServerEventMap,\n  type WebSocketClientEventMap,\n  type WebSocketClientConnectionProtocol,\n  type WebSocketServerConnectionProtocol,\n} from '@mswjs/interceptors/WebSocket'\n\nexport function setupNetwork() {\n  const handlersController = new InMemoryHandlersController([])\n\n  ws.onUpgrade = async ({ requestId, request }) => {\n    const handlers = handlersController.getHandlersByKind('websocket')\n\n    if (handlers.length === 0) {\n      return\n    }\n\n    const url = new URL(request.url)\n    const connectionUrl = resolveWebSocketUrl(url)\n    const [client, server] = Object.values(new WebSocketPair())\n\n    const connection = {\n      client: new CloudflareWebSocketClientConnection({\n        url: connectionUrl,\n        socket: server,\n      }),\n      server: new CloudflareWebSocketServerConnection({\n        url: request.url,\n      }),\n      info: {\n        protocols: [],\n      },\n    }\n\n    for (const handler of handlers) {\n      await handler.run({\n        requestId,\n        request,\n        ...connection,\n      })\n    }\n\n    return new Response(null, {\n      status: 101,\n      webSocket: client,\n    })\n  }\n\n  const network = defineNetwork({\n    sources: [\n      new InterceptorSource({\n        interceptors: [new FetchInterceptor(), new WebSocketInterceptor()],\n      }),\n    ],\n    handlers: handlersController,\n    context: {\n      quiet: true,\n    },\n  })\n\n  return network\n}\n\nclass CloudflareWebSocketClientConnection implements WebSocketClientConnectionProtocol {\n  #socket: WebSocket\n\n  public id: string\n  public url: URL\n\n  constructor(options: { url: string; socket: WebSocket }) {\n    this.#socket = options.socket\n\n    this.id = createRequestId()\n    this.url = new URL(options.url)\n  }\n\n  send(data: WebSocketData): void {\n    this.#socket.accept()\n    this.#socket.send(data as any)\n  }\n\n  close(code?: number, reason?: string): void {\n    this.#socket.close(code, reason)\n  }\n\n  addEventListener<EventType extends keyof WebSocketClientEventMap>(\n    type: EventType,\n    listener: (\n      this: WebSocket,\n      event: WebSocketClientEventMap[EventType],\n    ) => void,\n    options?: AddEventListenerOptions | boolean,\n  ): void {\n    this.#socket.addEventListener(type, listener, options)\n  }\n\n  removeEventListener<EventType extends keyof WebSocketClientEventMap>(\n    event: EventType,\n    listener: (\n      this: WebSocket,\n      event: WebSocketClientEventMap[EventType],\n    ) => void,\n    options?: EventListenerOptions | boolean,\n  ): void {\n    this.#socket.removeEventListener(event, listener, options)\n  }\n}\n\nclass CloudflareWebSocketServerConnection implements WebSocketServerConnectionProtocol {\n  #url: string\n  #pendingSocket: PromiseWithResolvers<WebSocket>\n\n  constructor(options: { url: string }) {\n    this.#url = options.url\n    this.#pendingSocket = Promise.withResolvers<WebSocket>()\n  }\n\n  connect(): void {\n    const upgradeRequest = new Request(this.#url, {\n      headers: {\n        upgrade: 'websocket',\n      },\n    })\n\n    fetch(bypass(upgradeRequest))\n      .then((response) => {\n        if (!response.webSocket) {\n          throw new Error(\n            `Failed to establish an actual WebSocket connection at \"${this.#url}\": the server did not approve the handshake`,\n          )\n        }\n\n        response.webSocket.accept()\n        this.#pendingSocket.resolve(response.webSocket)\n      })\n      .catch((error) => {\n        this.#pendingSocket.reject(error)\n      })\n  }\n\n  send(data: WebSocketData): void {\n    this.#pendingSocket.promise.then((socket) => socket.send(data as any))\n  }\n\n  close(): void {\n    this.#pendingSocket.promise.then((socket) => socket.close())\n  }\n\n  addEventListener<EventType extends keyof WebSocketServerEventMap>(\n    event: EventType,\n    listener: (\n      this: WebSocket,\n      event: WebSocketServerEventMap[EventType],\n    ) => void,\n    options?: AddEventListenerOptions | boolean,\n  ): void {\n    this.#pendingSocket.promise.then((socket) => {\n      socket.addEventListener(event, listener, options)\n    })\n  }\n\n  removeEventListener<EventType extends keyof WebSocketServerEventMap>(\n    event: EventType,\n    listener: (\n      this: WebSocket,\n      event: WebSocketServerEventMap[EventType],\n    ) => void,\n    options?: EventListenerOptions | boolean,\n  ): void {\n    this.#pendingSocket.promise.then((socket) => {\n      socket.removeEventListener(event, listener, options)\n    })\n  }\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,eAAe;CAC7B,MAAM,qBAAqB,IAAI,2BAA2B,EAAE,CAAC;AAE7D,IAAG,YAAY,OAAO,EAAE,WAAW,cAAc;EAC/C,MAAM,WAAW,mBAAmB,kBAAkB,YAAY;AAElE,MAAI,SAAS,WAAW,EACtB;EAIF,MAAM,gBAAgB,oBAAoB,IAD1B,IAAI,QAAQ,IACiB,CAAC;EAC9C,MAAM,CAAC,QAAQ,UAAU,OAAO,OAAO,IAAI,eAAe,CAAC;EAE3D,MAAM,aAAa;GACjB,QAAQ,IAAI,oCAAoC;IAC9C,KAAK;IACL,QAAQ;IACT,CAAC;GACF,QAAQ,IAAI,oCAAoC,EAC9C,KAAK,QAAQ,KACd,CAAC;GACF,MAAM,EACJ,WAAW,EAAE,EACd;GACF;AAED,OAAK,MAAM,WAAW,SACpB,OAAM,QAAQ,IAAI;GAChB;GACA;GACA,GAAG;GACJ,CAAC;AAGJ,SAAO,IAAI,SAAS,MAAM;GACxB,QAAQ;GACR,WAAW;GACZ,CAAC;;AAeJ,QAZgB,cAAc;EAC5B,SAAS,CACP,IAAI,kBAAkB,EACpB,cAAc,CAAC,IAAI,kBAAkB,EAAE,IAAI,sBAAsB,CAAC,EACnE,CAAC,CACH;EACD,UAAU;EACV,SAAS,EACP,OAAO,MACR;EACF,CAEa;;AAGhB,IAAM,sCAAN,MAAuF;CACrF;CAEA;CACA;CAEA,YAAY,SAA6C;AACvD,QAAA,SAAe,QAAQ;AAEvB,OAAK,KAAK,iBAAiB;AAC3B,OAAK,MAAM,IAAI,IAAI,QAAQ,IAAI;;CAGjC,KAAK,MAA2B;AAC9B,QAAA,OAAa,QAAQ;AACrB,QAAA,OAAa,KAAK,KAAY;;CAGhC,MAAM,MAAe,QAAuB;AAC1C,QAAA,OAAa,MAAM,MAAM,OAAO;;CAGlC,iBACE,MACA,UAIA,SACM;AACN,QAAA,OAAa,iBAAiB,MAAM,UAAU,QAAQ;;CAGxD,oBACE,OACA,UAIA,SACM;AACN,QAAA,OAAa,oBAAoB,OAAO,UAAU,QAAQ;;;AAI9D,IAAM,sCAAN,MAAuF;CACrF;CACA;CAEA,YAAY,SAA0B;AACpC,QAAA,MAAY,QAAQ;AACpB,QAAA,gBAAsB,QAAQ,eAA0B;;CAG1D,UAAgB;EACd,MAAM,iBAAiB,IAAI,QAAQ,MAAA,KAAW,EAC5C,SAAS,EACP,SAAS,aACV,EACF,CAAC;AAEF,QAAM,OAAO,eAAe,CAAC,CAC1B,MAAM,aAAa;AAClB,OAAI,CAAC,SAAS,UACZ,OAAM,IAAI,MACR,0DAA0D,MAAA,IAAU,6CACrE;AAGH,YAAS,UAAU,QAAQ;AAC3B,SAAA,cAAoB,QAAQ,SAAS,UAAU;IAC/C,CACD,OAAO,UAAU;AAChB,SAAA,cAAoB,OAAO,MAAM;IACjC;;CAGN,KAAK,MAA2B;AAC9B,QAAA,cAAoB,QAAQ,MAAM,WAAW,OAAO,KAAK,KAAY,CAAC;;CAGxE,QAAc;AACZ,QAAA,cAAoB,QAAQ,MAAM,WAAW,OAAO,OAAO,CAAC;;CAG9D,iBACE,OACA,UAIA,SACM;AACN,QAAA,cAAoB,QAAQ,MAAM,WAAW;AAC3C,UAAO,iBAAiB,OAAO,UAAU,QAAQ;IACjD;;CAGJ,oBACE,OACA,UAIA,SACM;AACN,QAAA,cAAoB,QAAQ,MAAM,WAAW;AAC3C,UAAO,oBAAoB,OAAO,UAAU,QAAQ;IACpD"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "type": "module",
+  "name": "@msw/cloudflare",
+  "version": "0.0.0",
+  "description": "Mock API in Cloudflare with Mock Service Worker.",
+  "exports": {
+    ".": "./build/index.mjs"
+  },
+  "files": [
+    "./build"
+  ],
+  "scripts": {
+    "start": "tsdown -w",
+    "test": "vitest",
+    "lint": "publint",
+    "build": "tsdown",
+    "publish": "release publish"
+  },
+  "keywords": [
+    "cloudflare",
+    "mock",
+    "api",
+    "intercept",
+    "request",
+    "network",
+    "test"
+  ],
+  "author": "Artem Zakharchenko <kettanaito@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "msw": ">=2.14.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/mswjs/cloudflare",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mswjs/cloudflare.git"
+  },
+  "dependencies": {
+    "@mswjs/interceptors": "^0.41.6"
+  },
+  "devDependencies": {
+    "@cloudflare/vitest-pool-workers": "^0.14.9",
+    "@cloudflare/workers-types": "^4.20260424.1",
+    "@epic-web/test-server": "^0.1.6",
+    "@ossjs/release": "^0.11.0",
+    "msw": "^2.14.6",
+    "publint": "^0.3.18",
+    "tsdown": "^0.21.10",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.5"
+  }
+}