feat!: rewrite package to new network source architecture

package.json

@@ -50,15 +50,15 @@
     "node": ">=20.0.0"
   },
   "peerDependencies": {
-    "msw": "^2.12.10"
+    "msw": "^2.13.2"
   },
   "devDependencies": {
     "@epic-web/test-server": "^0.1.6",
     "@ossjs/release": "^0.10.1",
     "@playwright/test": "^1.59.1",
     "@types/node": "^22.15.29",
     "@types/sinon": "^21.0.1",
-    "msw": "^2.12.14",
+    "msw": "^2.13.2",
     "publint": "^0.3.18",
     "sinon": "^21.0.3",
     "tsdown": "^0.21.7",

src/frames/http-frame.ts

@@ -0,0 +1,39 @@
+import type { Route } from '@playwright/test'
+import { HttpNetworkFrame } from 'msw/experimental'
+import { fulfillResponse, handleRouteSafely } from '../utils.js'
+
+interface PlaywrightHttpNetworkFrameOptions {
+  request: Request
+  id?: string
+  route: Route
+}
+
+export class PlaywrightHttpNetworkFrame extends HttpNetworkFrame {
+  #route: Route
+  constructor(options: PlaywrightHttpNetworkFrameOptions) {
+    super(options)
+    this.#route = options.route
+  }
+
+  override async respondWith(response?: Response): Promise<void> {
+    if (!response) return
+
+    if (response.status === 0) {
+      return await handleRouteSafely(() => this.#route.abort())
+    }
+
+    return await handleRouteSafely(() => fulfillResponse(this.#route, response))
+  }
+
+  override passthrough(): Promise<void> {
+    return handleRouteSafely(() => this.#route.fallback())
+  }
+
+  override errorWith(reason?: unknown): Promise<void> {
+    if (reason instanceof Response) {
+      return handleRouteSafely(() => fulfillResponse(this.#route, reason))
+    }
+
+    return handleRouteSafely(() => this.#route.abort())
+  }
+}

src/playwright-source.ts

@@ -0,0 +1,55 @@
+import type { BrowserContext, Route } from '@playwright/test'
+import { isCommonAssetRequest } from 'msw'
+import { NetworkSource } from 'msw/experimental'
+import { PlaywrightHttpNetworkFrame } from './frames/http-frame.js'
+import {
+  convertToRequest,
+  handleRouteSafely,
+  INTERNAL_MATCH_ALL_REG_EXP,
+} from './utils.js'
+
+interface PlaywrightSourceOptions {
+  context: BrowserContext
+  skipAssetRequests?: boolean
+}
+
+export class PlaywrightSource extends NetworkSource<PlaywrightHttpNetworkFrame> {
+  #context: BrowserContext
+  #skipAssetRequests: boolean
+
+  constructor(options: PlaywrightSourceOptions) {
+    super()
+    this.#context = options.context
+    this.#skipAssetRequests = options.skipAssetRequests ?? true
+  }
+
+  override async enable(): Promise<void> {
+    await this.#context.route(
+      INTERNAL_MATCH_ALL_REG_EXP,
+      this.#handleRouteRequest.bind(this),
+    )
+  }
+
+  override async disable(): Promise<void> {
+    super.disable()
+    await this.#context.unroute(INTERNAL_MATCH_ALL_REG_EXP)
+  }
+
+  async #handleRouteRequest(route: Route): Promise<void> {
+    const request = await convertToRequest(route)
+
+    /**
+     * @note Skip common asset requests (default).
+     * Playwright seems to experience performance degradation when routing all
+     * requests through the matching logic below.
+     * @see https://github.com/mswjs/playwright/issues/13
+     */
+    if (this.#skipAssetRequests && isCommonAssetRequest(request)) {
+      return await handleRouteSafely(() => route.fallback())
+    }
+
+    // TODO: Do we need a id for the frame? Do we need to store the frame in a map like Interceptor- and ServiceWorkerSource?
+    const frame = new PlaywrightHttpNetworkFrame({ route, request })
+    await this.queue(frame)
+  }
+}

src/utils.ts

@@ -0,0 +1,54 @@
+import type { Route } from '@playwright/test'
+
+/**
+ * @note Use a match-all RegExp with an optional group as the predicate
+ * for the `page.route()`/`page.unroute()` calls. Playwright treats given RegExp
+ * as the handler ID, which allows us to remove only those handlers introduces by us
+ * without carrying the reference to the handler function around.
+ */
+export const INTERNAL_MATCH_ALL_REG_EXP = /.+(__MSW_PLAYWRIGHT_PREDICATE__)?/
+
+export async function convertToRequest(route: Route): Promise<Request> {
+  const request = route.request()
+  return new Request(request.url(), {
+    method: request.method(),
+    headers: new Headers(await request.allHeaders()),
+    // TODO: Can we get rid of the type cast?
+    body: request.postDataBuffer() as null | ArrayBuffer,
+  })
+}
+
+export async function fulfillResponse(
+  route: Route,
+  response: Response,
+): Promise<void> {
+  await route.fulfill({
+    status: response.status,
+    headers: Object.fromEntries(response.headers),
+    body: response.body ? Buffer.from(await response.arrayBuffer()) : undefined,
+  })
+}
+
+export async function handleRouteSafely(
+  callback: () => Promise<void>,
+): Promise<void> {
+  try {
+    await callback()
+  } catch (error) {
+    /**
+     * @note Ignore "Route is already handled!" errors.
+     * Playwright has a bug where requests terminated due to navigation
+     * cause your in-flight route handlers to throw. There's no means to
+     * detect that scenario as both "route.handled" and "route._handlingPromise" are internal.
+     * @see https://github.com/mswjs/playwright/issues/35
+     */
+    if (
+      error instanceof Error &&
+      /route is already handled/i.test(error.message)
+    ) {
+      return
+    }
+
+    throw error
+  }
+}

tests/requests.test.ts

@@ -1,19 +1,24 @@
 import { test as testBase, expect } from '@playwright/test'
 import { http, type AnyHandler } from 'msw'
-import { defineNetworkFixture, type NetworkFixture } from '../src/index.js'
+import { defineNetwork } from 'msw/experimental'
+import { PlaywrightSource } from '../src/playwright-source.js'
 
 interface Fixtures {
   handlers: Array<AnyHandler>
-  network: NetworkFixture
+  network: ReturnType<typeof defineNetwork<PlaywrightSource[]>>
 }
 
 const test = testBase.extend<Fixtures>({
   handlers: [[], { option: true }],
   network: [
     async ({ context, handlers }, use) => {
-      const network = defineNetworkFixture({
-        context,
+      const network = defineNetwork({
+        sources: [new PlaywrightSource({ context })],
         handlers,
+        context: {
+          // TODO: Extract baseUrl from request and somehow pass it along into HttpNetworkFrame.prototype.resolve().
+          baseUrl: 'http://localhost:5173',
+        },
       })
 
       await network.enable()