Create single message bridge and simplify message types (#1461)

Author: jerelmiller

.changeset/lazy-teachers-roll.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Create a universal message bridge to handle both actor and rpc messages.

src/extension/__tests__/actor.test.ts

@@ -222,38 +222,3 @@ test("re-adds listener on adapter when subscribing actor listener after disconne
   actor.on("connect", handleConnect);
   expect(adapter.addListener).toHaveBeenCalledTimes(1);
 });
-
-test("forwards messages to another actor", () => {
-  type Message = { type: "connect"; payload: string } | { type: "disconnect" };
-
-  const proxyAdapter = createTestAdapter<Message>();
-  const actorAdapter = createTestAdapter<Message>();
-  const proxy = createActor<Message>(proxyAdapter);
-  const actor = createActor<Message>(actorAdapter);
-
-  proxy.forward("connect", actor);
-  proxy.forward("disconnect", actor);
-
-  proxyAdapter.simulateDevtoolsMessage({ type: "connect", payload: "Hello!" });
-
-  expect(actorAdapter.postMessage).toHaveBeenCalledTimes(1);
-  expect(actorAdapter.postMessage).toHaveBeenCalledWith({
-    id: expect.any(String),
-    source: "apollo-client-devtools",
-    type: MessageType.Event,
-    message: {
-      type: "connect",
-      payload: "Hello!",
-    },
-  });
-
-  proxyAdapter.simulateDevtoolsMessage({ type: "disconnect" });
-
-  expect(actorAdapter.postMessage).toHaveBeenCalledTimes(2);
-  expect(actorAdapter.postMessage).toHaveBeenCalledWith({
-    id: expect.any(String),
-    source: "apollo-client-devtools",
-    type: MessageType.Event,
-    message: { type: "disconnect" },
-  });
-});

src/extension/__tests__/rpc.test.ts

@@ -1,9 +1,10 @@
 import type { DistributiveOmit } from "../../types";
 import { RPC_MESSAGE_TIMEOUT } from "../errorMessages";
 import type { MessageAdapter } from "../messageAdapters";
+import { createMessageBridge } from "../messageAdapters";
 import type { RPCMessage, RPCRequestMessage } from "../messages";
 import { MessageType } from "../messages";
-import { createRPCBridge, createRpcClient, createRpcHandler } from "../rpc";
+import { createRpcClient, createRpcHandler } from "../rpc";
 
 interface TestAdapter extends MessageAdapter<RPCMessage> {
   mocks: { listeners: Set<(message: unknown) => void>; messages: unknown[] };
@@ -524,7 +525,7 @@ test("forwards rpc messages from one adapter to another with bridge", () => {
   const adapter1 = createTestAdapter();
   const adapter2 = createTestAdapter();
 
-  createRPCBridge(adapter1, adapter2);
+  createMessageBridge(adapter1, adapter2);
 
   adapter1.simulateRPCMessage({
     id: "abc",
@@ -563,7 +564,7 @@ test("unsubscribes connection on bridge when calling returned function", () => {
   const adapter1 = createTestAdapter();
   const adapter2 = createTestAdapter();
 
-  const unsubscribe = createRPCBridge(adapter1, adapter2);
+  const unsubscribe = createMessageBridge(adapter1, adapter2);
 
   adapter1.simulateRPCMessage({
     id: "abc",
@@ -601,21 +602,3 @@ test("unsubscribes connection on bridge when calling returned function", () => {
   });
   expect(adapter1.postMessage).not.toHaveBeenCalled();
 });
-
-test.each([MessageType.Event])(
-  "does not forward %s messages",
-  (messageType) => {
-    const adapter1 = createTestAdapter();
-    const adapter2 = createTestAdapter();
-
-    createRPCBridge(adapter1, adapter2);
-
-    adapter1.simulateMessage({
-      id: 1,
-      type: messageType,
-      payload: { type: "add", params: { x: 1, y: 2 } },
-    });
-
-    expect(adapter2.postMessage).not.toHaveBeenCalled();
-  }
-);

src/extension/actor.ts

@@ -3,7 +3,6 @@ import type {
   MessageFormat,
 } from "./messages";
 import { MessageType, isEventMessage } from "./messages";
-import type { NoInfer } from "../types";
 import type { MessageAdapter } from "./messageAdapters";
 import { createWindowMessageAdapter } from "./messageAdapters";
 import { createId } from "../utils/createId";
@@ -16,10 +15,6 @@ export interface Actor<Messages extends MessageFormat> {
       : never
   ) => () => void;
   send: (message: Messages) => void;
-  forward: <TName extends Messages["type"]>(
-    name: TName,
-    actor: Actor<Extract<Messages, { type: NoInfer<TName> }>>
-  ) => () => void;
 }
 
 export function createActor<
@@ -96,8 +91,6 @@ export function createActor<
         message,
       });
     },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    forward: (name, actor) => on(name, actor.send as unknown as any),
   };
 }
 

src/extension/devtools/devtools.ts

@@ -1,22 +1,19 @@
 import browser from "webextension-polyfill";
 import type { Actor } from "../actor";
-import { createActor } from "../actor";
-import type { ClientMessage, PanelMessage } from "../messages";
+import type { PanelMessage } from "../messages";
 import { getPanelActor } from "./panelActor";
 import {
+  createMessageBridge,
   createPortMessageAdapter,
   createWindowMessageAdapter,
 } from "../messageAdapters";
-import { createRPCBridge } from "../rpc";
 
 const inspectedTabId = browser.devtools.inspectedWindow.tabId;
 
 const portAdapter = createPortMessageAdapter(() =>
   browser.runtime.connect({ name: inspectedTabId.toString() })
 );
 
-const clientPort = createActor<ClientMessage>(portAdapter);
-
 let connectedToPanel = false;
 let panelWindow: Actor<PanelMessage>;
 
@@ -33,14 +30,7 @@ async function createDevtoolsPanel() {
     if (connectedToPanel) {
       panelWindow.send({ type: "panelShown" });
     } else {
-      createRPCBridge(createWindowMessageAdapter(window), portAdapter);
-
-      clientPort.forward("explorerResponse", panelWindow);
-      clientPort.forward("registerClient", panelWindow);
-      clientPort.forward("clientTerminated", panelWindow);
-
-      panelWindow.forward("explorerRequest", clientPort);
-      panelWindow.forward("explorerSubscriptionTermination", clientPort);
+      createMessageBridge(createWindowMessageAdapter(window), portAdapter);
 
       panelWindow.send({ type: "initializePanel" });
 

src/extension/messageAdapters.ts

@@ -1,5 +1,7 @@
 import type browser from "webextension-polyfill";
+import { isDevtoolsMessage } from "./messages";
 import type { ApolloClientDevtoolsMessage } from "./messages";
+import type { SafeAny } from "../types";
 
 export interface MessageAdapter<
   PostMessageFormat extends ApolloClientDevtoolsMessage<
@@ -88,3 +90,25 @@ export function createWindowMessageAdapter<
     },
   };
 }
+
+export function createMessageBridge(
+  adapter1: MessageAdapter<SafeAny>,
+  adapter2: MessageAdapter<SafeAny>
+) {
+  const removeListener1 = adapter1.addListener((message) => {
+    if (isDevtoolsMessage(message)) {
+      adapter2.postMessage(message);
+    }
+  });
+
+  const removeListener2 = adapter2.addListener((message) => {
+    if (isDevtoolsMessage(message)) {
+      adapter1.postMessage(message);
+    }
+  });
+
+  return () => {
+    removeListener1();
+    removeListener2();
+  };
+}

src/extension/messages.ts

@@ -119,7 +119,7 @@ export type DevtoolsRPCMessage = {
   getCache(clientId: string): JSONObject;
 };
 
-function isDevtoolsMessage<Message extends Record<string, unknown>>(
+export function isDevtoolsMessage<Message extends Record<string, unknown>>(
   message: unknown
 ): message is ApolloClientDevtoolsMessage<Message> {
   return (
@@ -142,10 +142,6 @@ export function isRPCResponseMessage(
   return isDevtoolsMessage(message) && message.type === MessageType.RPCResponse;
 }
 
-export function isRPCMessage(message: unknown): message is RPCMessage {
-  return isRPCRequestMessage(message) || isRPCResponseMessage(message);
-}
-
 export function isEventMessage<Message extends Record<string, unknown>>(
   message: unknown
 ): message is ApolloClientDevtoolsEventMessage<Message> {

src/extension/rpc.ts

@@ -3,14 +3,9 @@ import { createId } from "../utils/createId";
 import { RPC_MESSAGE_TIMEOUT } from "./errorMessages";
 import { deserializeError, serializeError } from "./errorSerialization";
 import type { MessageAdapter } from "./messageAdapters";
-import type {
-  RPCMessage,
-  RPCRequestMessage,
-  RPCResponseMessage,
-} from "./messages";
+import type { RPCRequestMessage, RPCResponseMessage } from "./messages";
 import {
   MessageType,
-  isRPCMessage,
   isRPCRequestMessage,
   isRPCResponseMessage,
 } from "./messages";
@@ -144,25 +139,3 @@ export function createRpcHandler<Messages extends MessageCollection>(
     };
   };
 }
-
-export function createRPCBridge(
-  adapter1: MessageAdapter<RPCMessage>,
-  adapter2: MessageAdapter<RPCMessage>
-) {
-  const removeListener1 = adapter1.addListener((message) => {
-    if (isRPCMessage(message)) {
-      adapter2.postMessage(message);
-    }
-  });
-
-  const removeListener2 = adapter2.addListener((message) => {
-    if (isRPCMessage(message)) {
-      adapter1.postMessage(message);
-    }
-  });
-
-  return () => {
-    removeListener1();
-    removeListener2();
-  };
-}

src/extension/tab/tab.ts

@@ -1,30 +1,18 @@
 // This script is injected into each tab.
 import browser from "webextension-polyfill";
-import type { ClientMessage } from "../messages";
-import { createActor, createWindowActor } from "../actor";
 import {
+  createMessageBridge,
   createPortMessageAdapter,
   createWindowMessageAdapter,
 } from "../messageAdapters";
-import { createRPCBridge } from "../rpc";
 
 declare const __IS_FIREFOX__: boolean;
 
 const portAdapter = createPortMessageAdapter(() =>
   browser.runtime.connect({ name: "tab" })
 );
 
-const tab = createWindowActor<ClientMessage>(window);
-const devtools = createActor<ClientMessage>(portAdapter);
-
-createRPCBridge(portAdapter, createWindowMessageAdapter(window));
-
-devtools.forward("explorerSubscriptionTermination", tab);
-devtools.forward("explorerRequest", tab);
-
-tab.forward("registerClient", devtools);
-tab.forward("clientTerminated", devtools);
-tab.forward("explorerResponse", devtools);
+createMessageBridge(portAdapter, createWindowMessageAdapter(window));
 
 // We run the hook.js script on the page as a content script in Manifest v3
 // extensions (chrome for now). We do this using execution world MAIN.