DevTools <-> VSCode integration

.gitignore

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

.vscodeignore

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

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.11.4",
+    "@apollo/client-devtools-vscode": "file:.yalc/@apollo/client-devtools-vscode",
     "@apollo/subgraph": "2.8.4",
     "@graphql-tools/schema": "10.0.5",
     "@wry/context": "0.7.4",
@@ -60,6 +61,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.3.1"
   },
@@ -132,6 +134,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"
         }
       }
     },
@@ -246,8 +265,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

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

src/build.js

@@ -5,7 +5,14 @@ const watch = process.argv.includes("--watch");
 
 async function main() {
   const ctx = await esbuild.context({
-    entryPoints: ["src/extension.ts", "src/language-server/server.ts"],
+    entryPoints: [
+      "src/extension.ts",
+      "src/language-server/server.ts",
+      {
+        in: require.resolve("@apollo/client-devtools-vscode/panel"),
+        out: "panel",
+      },
+    ],
     bundle: true,
     format: "cjs",
     minify: production,

src/devtools/DevToolsViewProvider.ts

@@ -0,0 +1,129 @@
+import * as vscode from "vscode";
+import { devtoolsEvents } from "./server";
+export class DevToolsViewProvider implements vscode.WebviewViewProvider {
+  public static readonly viewType = "vscode-apollo-client-devtools";
+
+  constructor(private readonly _extensionUri: vscode.Uri) {}
+  async resolveWebviewView(
+    panel: vscode.WebviewView,
+    context: vscode.WebviewViewResolveContext,
+    token: vscode.CancellationToken,
+  ): Promise<void> {
+    vscode.commands.executeCommand("apollographql/startDevToolsServer");
+    panel.webview.options = {
+      enableScripts: true,
+      localResourceRoots: [this._extensionUri],
+    };
+    panel.webview.html = DevToolsViewProvider._getHtmlForWebview(
+      panel.webview,
+      this._extensionUri,
+    );
+
+    panel.webview.onDidReceiveMessage((data) => {
+      devtoolsEvents.emit("fromDevTools", data);
+    });
+    function forwardToDevTools(data: unknown) {
+      panel.webview.postMessage(data);
+    }
+    devtoolsEvents.addListener("toDevTools", forwardToDevTools);
+    panel.onDidDispose(() => {
+      devtoolsEvents.removeListener("toDevTools", forwardToDevTools);
+    });
+  }
+
+  private static _getHtmlForWebview(
+    webview: vscode.Webview,
+    extensionUri: vscode.Uri,
+  ) {
+    // Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
+    const scriptUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(extensionUri, "lib", "panel.js"),
+    );
+
+    // Use a nonce to only allow a specific script to be run.
+    const nonce = getNonce();
+
+    return `
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <!--
+					Use a content security policy to only allow loading images from https or from our extension directory,
+					and only allow scripts that have a specific nonce.
+		-->
+		<meta http-equiv="Content-Security-Policy" content="
+      default-src 'none';
+      style-src ${webview.cspSource} https://fonts.googleapis.com 'unsafe-inline';
+      font-src ${webview.cspSource} https://fonts.gstatic.com;
+      img-src ${webview.cspSource} https:;
+      connect-src ${webview.cspSource} https://*.github.com;
+      script-src 'nonce-${nonce}';
+      frame-src https://*.apollographql.com/;
+    ">
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Apollo Client DevTools</title>
+    <style>
+      html,
+      body {
+        overflow: hidden;
+        font-size: var(--vscode-font-size);
+      }
+      ::-webkit-scrollbar {
+        display: none;
+      }
+      #devtools {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="text-primary dark:text-primary-dark">
+    <div id="devtools"></div>
+    <script nonce="${nonce}">
+      const vscode = acquireVsCodeApi();
+      try {
+        // remove VSCode default styles
+        _defaultStyles.remove();
+      } catch {}
+      window.originalPostMessage = window.postMessage;
+      window.postMessage = function wrapPostMessage (...args) {
+        if (args.length>1 && args[1].startsWith("vscode-webview://")) {
+          return window.originalPostMessage(...args);
+        }
+        return vscode.postMessage(...args);
+      };
+
+      window.addEventListener("message", (event) => {  console.debug(event); });
+    </script>
+    <script nonce="${nonce}" src="${scriptUri}"></script>
+    <script nonce="${nonce}">
+      window.originalPostMessage({
+        id: 123,
+        source: "apollo-client-devtools",
+        type: "actor",
+        message: { type: "initializePanel" },
+      });
+    </script>
+  </body>
+</html>
+`;
+  }
+}
+
+function getNonce() {
+  let text = "";
+  const possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (let i = 0; i < 32; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return text;
+}

src/devtools/server.ts

@@ -0,0 +1,36 @@
+import { WebSocketServer } from "ws";
+import { Disposable } from "vscode";
+import { runServer } from "@apollo/client-devtools-vscode/vscode-server";
+import { Debug } from "../debug";
+import { EventEmitter } from "node:events";
+
+export const devtoolsEvents = new EventEmitter<{
+  toDevTools: [unknown];
+  fromDevTools: [unknown];
+}>();
+devtoolsEvents.addListener("toDevTools", (msg) => {
+  Debug.info("WS > DevTools: " + JSON.stringify(msg));
+});
+devtoolsEvents.addListener("fromDevTools", (msg) => {
+  Debug.info("DevTools > WS: " + JSON.stringify(msg));
+});
+
+export function startServer(port: number): Disposable {
+  let wss: WebSocketServer | null = new WebSocketServer({ port });
+  runServer(wss, {
+    addListener: (listener) => {
+      devtoolsEvents.addListener("fromDevTools", listener);
+      return () => {
+        devtoolsEvents.removeListener("fromDevTools", listener);
+      };
+    },
+    postMessage: (message) => {
+      devtoolsEvents.emit("toDevTools", message);
+    },
+  });
+
+  return new Disposable(() => {
+    wss?.close();
+    wss = null;
+  });
+}