DevTools <-> VSCode integration (#188)

Co-authored-by: Jerel Miller <[email protected]>

.changeset/stale-bears-perform.md

@@ -0,0 +1,5 @@
+---
+"vscode-apollo": minor
+---
+
+Adds experimental integration of the Apollo Client DevTools

.gitignore

@@ -18,3 +18,5 @@ vscode-apollo-*.vsix
 # files generated from tests
 __tmp__*
 .vscode-test
+.yalc
+yalc.lock

.vscodeignore

@@ -25,3 +25,6 @@ sampleWorkspace
 renovate.json
 images/**/*.gif
 images/marketplace
+.yalc
+yalc.lock
+start-ac.mjs

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.12.2",
+    "@apollo/client-devtools-vscode": "^4.19.0",
     "@apollo/subgraph": "2.9.1",
     "@graphql-tools/schema": "10.0.6",
     "@wry/equality": "0.5.7",
@@ -62,6 +63,7 @@
     "vscode-languageserver-textdocument": "1.0.12",
     "vscode-uri": "3.0.8",
     "which": "4.0.0",
+    "ws": "8.18.0",
     "zod": "3.23.8",
     "zod-validation-error": "3.4.0"
   },
@@ -138,6 +140,23 @@
           "default": true,
           "markdownDescription": "Show a \"Run in Studio\" button to the right of Operation Signatures.",
           "scope": "window"
+        },
+        "apollographql.devTools.showPanel": {
+          "type": "string",
+          "enum": [
+            "always",
+            "never",
+            "detect"
+          ],
+          "default": "never",
+          "markdownDescription": "[Experimental Feature] If the Apollo Client DevTools panel should be shown. If set to `detect`, the panel will only be shown if a configuration file with a client project is found in the workspace.",
+          "scope": "window"
+        },
+        "apollographql.devTools.serverPort": {
+          "type": "number",
+          "default": 7095,
+          "markdownDescription": "The Apollo Client DevTools server port. The server will be started as soon as you start using the DevTools panels.",
+          "scope": "window"
         }
       }
     },
@@ -279,8 +298,40 @@
         "command": "apollographql/showStats",
         "title": "Show Status",
         "category": "Apollo"
+      },
+      {
+        "command": "apollographql/startDevToolsServer",
+        "title": "Start Apollo Client DevTools Server",
+        "category": "Apollo",
+        "when": "config.apollographql.devTools.showPanel=='always' || (config.apollographql.devTools.showPanel=='detect' && vscode-apollo.hasClientProject)"
+      },
+      {
+        "command": "apollographql/stopDevToolsServer",
+        "title": "Stop Apollo Client DevTools Server",
+        "category": "Apollo",
+        "when": "config.apollographql.devTools.showPanel=='always' || (config.apollographql.devTools.showPanel=='detect' && vscode-apollo.hasClientProject)"
       }
-    ]
+    ],
+    "viewsContainers": {
+      "panel": [
+        {
+          "id": "client-devtools",
+          "title": "Apollo Client DevTools",
+          "icon": "images/apollo.svg"
+        }
+      ]
+    },
+    "views": {
+      "client-devtools": [
+        {
+          "type": "webview",
+          "id": "vscode-apollo-client-devtools",
+          "name": "Apollo Client DevTools",
+          "icon": "images/apollo.svg",
+          "when": "config.apollographql.devTools.showPanel=='always' || (config.apollographql.devTools.showPanel=='detect' && vscode-apollo.hasClientProject)"
+        }
+      ]
+    }
   },
   "galleryBanner": {
     "color": "#1d127d",

sampleWorkspace/sampleWorkspace.code-workspace

@@ -25,5 +25,8 @@
       "path": "../src/language-server/__tests__/fixtures/documents"
     }
   ],
-  "settings": {}
+  "settings": {
+    "apollographql.devTools.showPanel": "detect",
+    "apollographql.devTools.serverPort": 7095
+  }
 }

src/build.js

@@ -11,6 +11,10 @@ async function main() {
     entryPoints: [
       "src/extension.ts",
       "src/language-server/server.ts",
+      {
+        in: require.resolve("@apollo/client-devtools-vscode/panel"),
+        out: "panel",
+      },
       "src/language-server/config/config.ts",
       "src/language-server/config/cache-busting-resolver.js",
     ],

src/debug.ts

@@ -1,4 +1,6 @@
 import { OutputChannel } from "vscode";
+import { TraceValues } from "vscode-languageclient";
+import { format } from "node:util";
 
 /**
  * for errors (and other logs in debug mode) we want to print
@@ -21,6 +23,21 @@ export class Debug {
     this.outputConsole = outputConsole;
   }
 
+  private static _traceLevel: Exclude<TraceValues, "compact"> = "off";
+  public static get traceLevel(): TraceValues {
+    return Debug._traceLevel;
+  }
+  public static set traceLevel(value: TraceValues | undefined) {
+    console.log("setting trace level to", value);
+    if (value === "compact") {
+      // we do not handle "compact" and it's not possible to set in settings, but it doesn't hurt to at least map
+      // it to another value
+      this._traceLevel = "messages";
+    } else {
+      this._traceLevel = value || "off";
+    }
+  }
+
   /**
    * Displays an info message prefixed with [INFO]
    */
@@ -55,6 +72,28 @@ export class Debug {
     this.outputConsole.appendLine(`[WARN] ${message}`);
   }
 
+  public static traceMessage(
+    short: string,
+    verbose = short,
+    ...verboseParams: any[]
+  ) {
+    if (!this.outputConsole) return;
+    if (Debug.traceLevel === "verbose") {
+      this.outputConsole.appendLine(
+        `[Trace] ${format(verbose, ...verboseParams)}`,
+      );
+    } else if (Debug.traceLevel === "messages") {
+      this.outputConsole.appendLine(`[Trace] ${short}`);
+    }
+  }
+
+  public static traceVerbose(message: string, ...params: any[]) {
+    if (!this.outputConsole) return;
+    if (Debug.traceLevel === "verbose") {
+      this.outputConsole.appendLine(`[Trace] ${format(message, ...params)}`);
+    }
+  }
+
   /**
    * TODO: enable error reporting and telemetry
    */