Bridge reference

Server and client

createMswPanelBridgeServer({
  controller,
  transport,
});

const remoteController = createMswPanelBridgeClient({
  initialSnapshot: controller.getSnapshot(),
  transport,
});

The server listens for commands and publishes snapshots. The client exposes a controller-compatible interface backed by transport messages.

Transport contract

interface MswPanelBridgeTransport {
  post(message: MswPanelBridgeMessage): void;
  subscribe(listener: (message: MswPanelBridgeMessage) => void): () => void;
}

Message types

type MswPanelBridgeMessage =
  | { source: "msw-panel"; type: "hello" }
  | { source: "msw-panel"; type: "command"; command: MswPanelBridgeCommand }
  | { source: "msw-panel"; type: "snapshot"; snapshot: MswPanelSnapshot };

Supported commands:

• set-all-enabled
• set-enabled
• sync
• toggle

Built-in helpers

• createBroadcastChannelMswPanelBridgeTransport(channelName)
• createPostMessageMswPanelBridgeTransport(options)
• createInMemoryMswPanelBridgeTransportPair()
• createWebSocketMswPanelBridgeTransport(options)

Transport-specific options

createPostMessageMswPanelBridgeTransport(options)

interface CreatePostMessageMswPanelBridgeTransportOptions {
  expectedSource?: unknown;
  listenWindow: MswPanelBridgePostMessageListenerHost;
  targetOrigin: string;
  targetWindow: MswPanelBridgePostMessageTarget;
  validateOrigin?: (origin: string) => boolean;
}

createWebSocketMswPanelBridgeTransport(options)

interface CreateWebSocketMswPanelBridgeTransportOptions {
  closeOnDispose?: boolean;
  deserialize?: (value: string) => unknown;
  serialize?: (message: MswPanelBridgeMessage) => string;
  socket: MswPanelBridgeWebSocketLike;
}