DevTools <-> VSCode integration (#1497)

Author: phryneas

.gitignore

@@ -5,4 +5,6 @@ build
 *.zip
 .DS_Store
 development/server/db.json
-webpack-stats.json
+webpack-stats.json
+.yalc
+yalc.lock

.semgrepignore

@@ -0,0 +1 @@
+src/extension/vscode/client.ts

README.vscode.md

@@ -0,0 +1 @@
+TODO

package-lock.json

@@ -127,6 +127,7 @@
     "web-ext-plugin": "2.9.0",
     "webextension-polyfill": "0.12.0",
     "webpack": "5.94.0",
-    "webpack-cli": "5.1.4"
+    "webpack-cli": "5.1.4",
+    "ws": "^8.18.0"
   }
 }

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@apollo/client-devtools-vscode",
+  "version": "4.18.4-pre.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apollographql/apollo-client-devtools.git"
+  },
+  "keywords": ["apollo", "apollo-client", "devtools", "vscode"],
+  "type": "module",
+  "exports": {
+    ".": "./vscode-client.js",
+    "./vscode-client": "./vscode-client.js",
+    "./vscode-server": "./vscode-server.js",
+    "./panel": "./panel.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./vscode-client.js",
+  "typings": "./vscode-client.d.ts",
+  "author": "[email protected]",
+  "license": "MIT",
+  "files": [
+    "vscode-client.js",
+    "vscode-server.js",
+    "panel.js",
+    "*.d.ts",
+    "package.json",
+    "LICENSE.md",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@apollo/client": "^3.4.0"
+  },
+  "dependencies": {
+    "zen-observable": "^0.8.0"
+  }
+}

package.vscode.json

@@ -38,7 +38,8 @@ export interface Actor {
     name: TName,
     callback: Extract<ActorMessage, { type: TName }> extends infer Message
       ? (message: Message) => void
-      : never
+      : never,
+    options?: OptionsWithAbortSignal
   ) => () => void;
   send: (message: ActorMessage) => void;
 }
@@ -77,7 +78,7 @@ export function createActor(adapter: MessageAdapter): Actor {
     }
   }
 
-  const on: Actor["on"] = (name, callback) => {
+  const on: Actor["on"] = (name, callback, options = {}) => {
     let listeners = messageListeners.get(name) as Set<typeof callback>;
 
     if (!listeners) {
@@ -88,7 +89,7 @@ export function createActor(adapter: MessageAdapter): Actor {
     listeners.add(callback);
     startListening();
 
-    return () => {
+    const cleanup = () => {
       listeners!.delete(callback);
 
       if (listeners.size === 0) {
@@ -99,6 +100,10 @@ export function createActor(adapter: MessageAdapter): Actor {
         stopListening();
       }
     };
+    if (options.signal) {
+      options.signal.addEventListener("abort", cleanup, { once: true });
+    }
+    return cleanup;
   };
 
   return {
@@ -123,3 +128,7 @@ function isActorMessage(
 ): message is ApolloClientDevtoolsActorMessage {
   return isDevtoolsMessage(message) && message.type === MessageType.Actor;
 }
+
+export interface OptionsWithAbortSignal {
+  signal?: AbortSignal;
+}

src/extension/actor.ts

@@ -127,7 +127,8 @@ export function createRpcHandler(adapter: MessageAdapter) {
       ...params: Parameters<RPCRequest[TName]>
     ) =>
       | NoInfer<Awaited<ReturnType<RPCRequest[TName]>>>
-      | Promise<NoInfer<Awaited<ReturnType<RPCRequest[TName]>>>>
+      | Promise<NoInfer<Awaited<ReturnType<RPCRequest[TName]>>>>,
+    options: { signal?: AbortSignal } = {}
   ) {
     if (listeners.has(name)) {
       throw new Error("Only one rpc handler can be registered per type");
@@ -159,13 +160,17 @@ export function createRpcHandler(adapter: MessageAdapter) {
 
     startListening();
 
-    return () => {
+    const cleanup = () => {
       listeners.delete(name);
 
       if (listeners.size === 0) {
         stopListening();
       }
     };
+    if (options.signal) {
+      options.signal.addEventListener("abort", cleanup, { once: true });
+    }
+    return cleanup;
   };
 }
 

src/extension/rpc.ts

@@ -0,0 +1,136 @@
+import type { Actor, OptionsWithAbortSignal } from "../actor";
+import type { QueryResult, SafeAny } from "../../types";
+import type { ApolloClient, ApolloError } from "@apollo/client";
+
+// Note that we are intentionally not using Apollo Client's gql and
+// Observable exports, as we don't want Apollo Client and its dependencies
+// to be loaded into each browser tab, when this hook triggered.
+import Observable from "zen-observable";
+import type { DefinitionNode } from "graphql/language";
+import { getMainDefinition } from "./helpers";
+
+type Writable<T> = { -readonly [P in keyof T]: T[P] };
+
+export function handleExplorerRequests(
+  actor: Actor,
+  getClientById: (
+    clientId: string
+  ) => Pick<ApolloClient<SafeAny>, "mutate" | "watchQuery"> | undefined,
+  options: OptionsWithAbortSignal = {}
+) {
+  return actor.on(
+    "explorerRequest",
+    (message) => {
+      const {
+        clientId,
+        operation: queryAst,
+        operationName,
+        fetchPolicy,
+        variables,
+      } = message.payload;
+
+      const client = getClientById(clientId);
+
+      if (!client) {
+        throw new Error("Could not find selected client");
+      }
+
+      const clonedQueryAst = structuredClone(queryAst) as Writable<
+        typeof queryAst
+      >;
+
+      const filteredDefinitions = clonedQueryAst.definitions.reduce(
+        (acumm: DefinitionNode[], curr) => {
+          if (
+            (curr.kind === "OperationDefinition" &&
+              curr.name?.value === operationName) ||
+            curr.kind !== "OperationDefinition"
+          ) {
+            acumm.push(curr);
+          }
+
+          return acumm;
+        },
+        []
+      );
+
+      clonedQueryAst.definitions = filteredDefinitions;
+
+      const definition = getMainDefinition(clonedQueryAst);
+
+      const operation = (() => {
+        if (
+          definition.kind === "OperationDefinition" &&
+          definition.operation === "mutation"
+        ) {
+          return new Observable<QueryResult>((observer) => {
+            client
+              .mutate({ mutation: clonedQueryAst, variables })
+              .then((result) => {
+                observer.next(result as QueryResult);
+              });
+          });
+        } else {
+          return client.watchQuery({
+            query: clonedQueryAst,
+            variables,
+            fetchPolicy,
+          });
+        }
+      })();
+
+      const operationObservable = operation?.subscribe(
+        (response: QueryResult) => {
+          actor.send({
+            type: "explorerResponse",
+            payload: { operationName, response },
+          });
+        },
+        (error: ApolloError) => {
+          actor.send({
+            type: "explorerResponse",
+            payload: {
+              operationName,
+              response: {
+                errors: error.graphQLErrors.length
+                  ? error.graphQLErrors
+                  : error.networkError && "result" in error.networkError
+                    ? typeof error.networkError?.result === "string"
+                      ? error.networkError?.result
+                      : error.networkError?.result.errors ?? []
+                    : [],
+                error: error,
+                data: null,
+                loading: false,
+                networkStatus: 8, // NetworkStatus.error - we want to prevent importing the enum here
+              },
+            },
+          });
+        }
+      );
+
+      if (
+        definition.kind === "OperationDefinition" &&
+        definition.operation === "subscription"
+      ) {
+        actor.on(
+          "explorerSubscriptionTermination",
+          () => {
+            operationObservable?.unsubscribe();
+          },
+          options
+        );
+        if (options.signal) {
+          options.signal.addEventListener(
+            "abort",
+            () => {
+              operationObservable?.unsubscribe();
+            },
+            { once: true }
+          );
+        }
+      }
+    },
+    options
+  );
+}