Reintroduce change to automatically reconnect the ports when they dis…

…connect (#1404)

.changeset/giant-papayas-ring.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Reintroduce change to automatically reconnect the ports when they disconnect.

src/extension/actor.ts

@@ -103,14 +103,6 @@ export function createActor<
   };
 }
 
-export function createPortActor<
-  Messages extends MessageFormat = {
-    type: "Error: Pass <Messages> to `createPortActor<Messages>()`";
-  },
->(port: browser.Runtime.Port) {
-  return createActor<Messages>(createPortMessageAdapter(port));
-}
-
 export function createWindowActor<
   Messages extends MessageFormat = {
     type: "Error: Pass <Messages> to `createWindowActor<Messages>()`";

src/extension/background/errorcodes.ts

@@ -11,7 +11,7 @@ export type ErrorCodesHandler = {
 browser.runtime.onConnect.addListener((port) => {
   if (port.name === "tab") {
     const handleRpc = createRpcHandler<ErrorCodesHandler>(
-      createPortMessageAdapter(port)
+      createPortMessageAdapter(() => port)
     );
     handleRpc("getErrorCodes", (version) => {
       if (version in allErrorCodes.byVersion) {

src/extension/devtools/devtools.ts

@@ -1,7 +1,7 @@
 import browser from "webextension-polyfill";
 import { createDevtoolsMachine } from "../../application/machines";
 import type { Actor } from "../actor";
-import { createPortActor } from "../actor";
+import { createActor } from "../actor";
 import type {
   ClientMessage,
   DevtoolsRPCMessage,
@@ -42,15 +42,13 @@ let panelHidden = true;
 let connectTimeoutId: NodeJS.Timeout;
 let disconnectTimeoutId: NodeJS.Timeout;
 
-const port = browser.runtime.connect({
-  name: inspectedTabId.toString(),
-});
-
-const clientPort = createPortActor<ClientMessage>(port);
-const rpcClient = createRpcClient<DevtoolsRPCMessage>(
-  createPortMessageAdapter(port)
+const portAdapter = createPortMessageAdapter(() =>
+  browser.runtime.connect({ name: inspectedTabId.toString() })
 );
 
+const clientPort = createActor<ClientMessage>(portAdapter);
+const rpcClient = createRpcClient<DevtoolsRPCMessage>(portAdapter);
+
 devtoolsMachine.subscribe(({ value }) => {
   if (value === "connected") {
     clearTimeout(disconnectTimeoutId);

src/extension/messageAdapters.ts

@@ -13,13 +13,36 @@ export interface MessageAdapter<
 export function createPortMessageAdapter<
   PostMessageFormat extends Record<string, unknown> = Record<string, unknown>,
 >(
-  port: browser.Runtime.Port
+  createPort: () => browser.Runtime.Port
 ): MessageAdapter<ApolloClientDevtoolsMessage<PostMessageFormat>> {
+  let port = createPort();
+  const listeners = new Set<(message: unknown) => void>();
+
+  function handleDisconnect() {
+    listeners.forEach((listener) => {
+      port.onMessage.removeListener(listener);
+    });
+
+    port.onDisconnect.removeListener(handleDisconnect);
+    port = createPort();
+
+    initializePort();
+  }
+
+  function initializePort() {
+    listeners.forEach((listener) => port.onMessage.addListener(listener));
+    port.onDisconnect.addListener(handleDisconnect);
+  }
+
+  initializePort();
+
   return {
     addListener(listener) {
+      listeners.add(listener);
       port.onMessage.addListener(listener);
 
       return () => {
+        listeners.delete(listener);
         port.onMessage.removeListener(listener);
       };
     },

src/extension/tab/tab.ts

@@ -1,7 +1,7 @@
 // This script is injected into each tab.
 import browser from "webextension-polyfill";
 import type { ClientMessage } from "../messages";
-import { createPortActor, createWindowActor } from "../actor";
+import { createActor, createWindowActor } from "../actor";
 import {
   createPortMessageAdapter,
   createWindowMessageAdapter,
@@ -10,14 +10,14 @@ import { createRPCBridge } from "../rpc";
 
 declare const __IS_FIREFOX__: boolean;
 
-const port = browser.runtime.connect({ name: "tab" });
+const portAdapter = createPortMessageAdapter(() =>
+  browser.runtime.connect({ name: "tab" })
+);
+
 const tab = createWindowActor<ClientMessage>(window);
-const devtools = createPortActor<ClientMessage>(port);
+const devtools = createActor<ClientMessage>(portAdapter);
 
-createRPCBridge(
-  createPortMessageAdapter(port),
-  createWindowMessageAdapter(window)
-);
+createRPCBridge(portAdapter, createWindowMessageAdapter(window));
 
 devtools.forward("connectToClient", tab);
 devtools.forward("explorerSubscriptionTermination", tab);