vscode-apollo 2.4.0 → 2.5.0

package/.github/workflows/E2E.yml

@@ -16,7 +16,7 @@ jobs:
           - version: "stable"
             os: "windows-latest"
     steps:
-      - run: sudo apt update && sudo apt install -y libasound2 libgbm1 libgtk-3-0 libnss3 xvfb expect
+      - run: sudo apt update && sudo apt install -y libasound2t64 libgbm1 libgtk-3-0 libnss3 xvfb expect
         if: runner.os == 'Linux'
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

package/.nvmrc

@@ -1 +1 @@
-v20
+22

package/.vscodeignore

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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.5.0
+
+### Minor Changes
+
+- [#188](https://github.com/apollographql/vscode-graphql/pull/188) [`595784f0`](https://github.com/apollographql/vscode-graphql/commit/595784f057de18d987768fa1aaa8c37a5fa802c7) Thanks [@phryneas](https://github.com/phryneas)! - Adds experimental integration of the Apollo Client DevTools
+
 ## 2.4.0
 
 ### Minor Changes

package/images/apollo.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    g {
+      fill: black;
+    }
+    @media (prefers-color-scheme: dark) {
+      g {
+        fill: white;
+      }
+    }
+  </style>
+  <g>
+    <polygon points="112.246 49 88.003 49 53 139.848 74.927 139.848 80.648 124.455 113.724 124.455 107.735 107.431 85.961 107.431 100.125 68.34 125.324 139.848 147.252 139.848"></polygon>
+    <path d="M196.313,73.038 C196.254,72.728 196.17,72.428 196.057,72.141 C196.03,72.041 195.937,71.856 195.937,71.856 C195.148,70.138 193.414,68.942 191.399,68.942 C188.637,68.942 186.399,71.181 186.399,73.942 C186.399,74.504 186.497,75.042 186.667,75.545 L186.653,75.55 C188.859,83.407 189.999,91.615 189.999,100.001 C189.999,124.04 180.637,146.642 163.64,163.641 C146.641,180.641 124.04,190.001 100,190.001 C75.961,190.001 53.358,180.639 36.361,163.641 C19.36,146.642 10,124.04 10,100.001 C10,75.961 19.362,53.36 36.361,36.361 C53.358,19.361 75.961,10.001 100,10.001 C121.466,10.001 141.781,17.471 157.987,31.174 C157.443,32.56 157.139,34.068 157.139,35.648 C157.139,42.399 162.611,47.869 169.363,47.869 C176.113,47.869 181.586,42.399 181.586,35.648 C181.586,28.897 176.113,23.424 169.363,23.424 C167.89,23.424 166.479,23.684 165.171,24.161 C147.666,9.107 124.9,0 100,0 C44.771,0 0,44.772 0,100.001 C0,155.23 44.771,200.002 100,200.002 C155.229,200.002 200,155.231 200,100.001 C200,90.659 198.709,81.617 196.313,73.038 Z"></path>
+  </g>
+</svg>

package/package.json

@@ -2,7 +2,7 @@
   "name": "vscode-apollo",
   "displayName": "Apollo GraphQL",
   "description": "Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "referenceID": "87197759-7617-40d0-b32e-46d378e907c7",
   "author": "Apollo GraphQL <opensource@apollographql.com>",
   "license": "MIT",
@@ -37,7 +37,8 @@
     "vscode": "^1.90.0"
   },
   "dependencies": {
-    "@apollo/client": "3.11.8",
+    "@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",

package/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
+  }
 }

package/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",
     ],

package/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
    */

package/src/devtools/DevToolsViewProvider.ts

@@ -0,0 +1,182 @@
+import * as vscode from "vscode";
+import { devtoolsEvents, sendToDevTools, serverState } from "./server";
+
+type ActorMessage = { type: "actor"; message: unknown };
+
+export function isActorMessage(message: any): message is ActorMessage {
+  return message && message.type === "actor";
+}
+
+type DevToolsOpenCommandMessage = {
+  type: "vscode:executeCommand";
+  command: string;
+  arguments?: unknown[];
+};
+
+export function isDevToolsExecuteCommandMessage(
+  message: any,
+): message is DevToolsOpenCommandMessage {
+  return message && message.type === "vscode:executeCommand";
+}
+
+type DevToolsOpenExternalMessage = {
+  type: "vscode:openExternal";
+  uri: string;
+};
+
+export function isDevToolsOpenExternalMessage(
+  message: any,
+): message is DevToolsOpenExternalMessage {
+  return message && message.type === "vscode:openExternal";
+}
+
+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,
+    );
+    const panelDisposables: vscode.Disposable[] = [];
+    panel.webview.onDidReceiveMessage(
+      (data) => {
+        if (data.source === "apollo-client-devtools") {
+          devtoolsEvents.emit("fromDevTools", data);
+        }
+        if (data.source === "vscode-panel") {
+          if (data.type === "mounted") {
+            sendToDevTools({
+              type: "initializePanel",
+              initialContext: {
+                port:
+                  serverState?.port ||
+                  vscode.workspace
+                    .getConfiguration("apollographql")
+                    .get("devTools.serverPort", 0),
+                listening: !!serverState?.port,
+              },
+            });
+          }
+        }
+      },
+      this,
+      panelDisposables,
+    );
+    function forwardToDevTools(data: unknown) {
+      panel.webview.postMessage(data);
+    }
+    devtoolsEvents.addListener("toDevTools", forwardToDevTools);
+    panel.onDidDispose(() => {
+      devtoolsEvents.removeListener("toDevTools", forwardToDevTools);
+      for (const disposable of panelDisposables) {
+        disposable.dispose();
+      }
+    });
+  }
+
+  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.postMessage({
+        source: "vscode-panel",
+        type: "mounted",
+      });
+    </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;
+}

package/src/devtools/server.ts

@@ -0,0 +1,86 @@
+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.traceMessage(
+    `WS > DevTools: ${
+      msg && typeof msg === "object" && "type" in msg ? msg.type : "unknown"
+    }`,
+    "WS > DevTools: %o",
+    msg,
+  );
+});
+devtoolsEvents.addListener("fromDevTools", (msg) => {
+  Debug.traceMessage(
+    `DevTools > WS: ${
+      msg && typeof msg === "object" && "type" in msg ? msg.type : "unknown"
+    }`,
+    "DevTools > WS: %o",
+    msg,
+  );
+});
+
+let id = 1;
+
+export function sendToDevTools(message: unknown) {
+  devtoolsEvents.emit("toDevTools", {
+    id: `vscode-${id++}`,
+    source: "apollo-client-devtools",
+    type: "actor",
+    message,
+  });
+}
+
+export let serverState:
+  | { port: false | number; disposable: Disposable }
+  | undefined = undefined;
+
+export function startServer(port: number) {
+  const state = {
+    port: false as false | number,
+    disposable: new Disposable(() => {
+      if (wss) {
+        wss.close();
+        wss = null;
+      }
+      if (serverState === state) {
+        serverState = undefined;
+      }
+      sendToDevTools({ type: "port.changed", port, listening: false });
+    }),
+  };
+
+  if (serverState?.port === port) {
+    // nothing to do
+    return;
+  }
+  // changing port, stop the old server
+  serverState?.disposable.dispose();
+  serverState = state;
+  let wss: WebSocketServer | null = new WebSocketServer({ port });
+  wss.on("listening", () => {
+    state.port = port;
+    sendToDevTools({ type: "port.changed", port, listening: true });
+  });
+  wss.on("close", () => {
+    state.disposable.dispose();
+  });
+  runServer(wss, {
+    addListener: (listener) => {
+      devtoolsEvents.addListener("fromDevTools", listener);
+      return () => {
+        devtoolsEvents.removeListener("fromDevTools", listener);
+      };
+    },
+    postMessage: (message) => {
+      devtoolsEvents.emit("toDevTools", message);
+    },
+  });
+}

package/src/extension.ts

@@ -8,10 +8,10 @@ import {
   DecorationOptions,
   commands,
   QuickPickItem,
-  Disposable,
   OutputChannel,
   MarkdownString,
   Range,
+  env,
 } from "vscode";
 import StatusBar from "./statusBar";
 import { getLanguageServerClient } from "./languageServerClient";
@@ -27,6 +27,13 @@ import {
   printStatsToClientOutputChannel,
 } from "./utils";
 import { Debug } from "./debug";
+import {
+  DevToolsViewProvider,
+  isActorMessage,
+  isDevToolsExecuteCommandMessage,
+  isDevToolsOpenExternalMessage,
+} from "./devtools/DevToolsViewProvider";
+import { devtoolsEvents, serverState, startServer } from "./devtools/server";
 
 const { version } = require("../package.json");
 
@@ -157,6 +164,17 @@ export async function activate(
       } else {
         statusBar.showLoadedState({ hasActiveTextEditor });
       }
+
+      const containsClientConfig = response.some(
+        (item) => item && !isError(item) && "client" in item,
+      );
+      if (containsClientConfig) {
+        commands.executeCommand(
+          "setContext",
+          "vscode-apollo.hasClientProject",
+          true,
+        );
+      }
     } else {
       Debug.error(
         `Invalid response type in message apollographql/configFilesFound:\n${JSON.stringify(
@@ -329,6 +347,67 @@ export async function activate(
     },
   });
 
+  const provider = new DevToolsViewProvider(context.extensionUri);
+  context.subscriptions.push(
+    window.registerWebviewViewProvider(DevToolsViewProvider.viewType, provider),
+  );
+
+  function devToolsEventListener(event: unknown) {
+    if (!isActorMessage(event)) return;
+    const message = event.message;
+    if (isDevToolsExecuteCommandMessage(message)) {
+      commands.executeCommand(message.command, ...(message.arguments || []));
+    }
+    if (isDevToolsOpenExternalMessage(message)) {
+      env.openExternal(
+        // if we `Uri.parse` here, we end up with something that somehow double-encodes some things like `#`
+        // interestingly enough, the implementation of `openExternal` also allows for strings to be passed in
+        // directly, and that works - so we just pass in the string directly
+        message.uri as any as Uri,
+      );
+    }
+  }
+  devtoolsEvents.addListener("fromDevTools", devToolsEventListener);
+  context.subscriptions.push({
+    dispose: () =>
+      devtoolsEvents.removeListener("fromDevTools", devToolsEventListener),
+  });
+
+  context.subscriptions.push(
+    commands.registerCommand("apollographql/startDevToolsServer", () => {
+      const port = workspace
+        .getConfiguration("apollographql")
+        .get("devTools.serverPort", 0);
+      startServer(port);
+    }),
+  );
+  context.subscriptions.push({
+    dispose() {
+      if (serverState) {
+        serverState.disposable.dispose();
+      }
+    },
+  });
+  context.subscriptions.push(
+    commands.registerCommand("apollographql/stopDevToolsServer", () => {
+      serverState?.disposable.dispose();
+    }),
+  );
+
+  Debug.traceLevel = workspace
+    .getConfiguration("apollographql")
+    .get("trace.server");
+  context.subscriptions.push(
+    workspace.onDidChangeConfiguration((event) => {
+      const affected = event.affectsConfiguration("apollographql.trace.server");
+      if (affected) {
+        Debug.traceLevel = workspace
+          .getConfiguration("apollographql")
+          .get("trace.server");
+      }
+    }),
+  );
+
   await client.start();
   return {
     outputChannel,

package/start-ac.mjs

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+// for testing, start a few of these, e.g. with
+// while true; do echo "foo\nbar\nbaz" | parallel ./start-ac.mjs; sleep 1; done
+
+import { connectApolloClientToVSCodeDevTools } from "@apollo/client-devtools-vscode";
+import WebSocket from "ws";
+import { ApolloClient, InMemoryCache } from "@apollo/client/core/index.js";
+import { MockLink } from "@apollo/client/testing/core/index.js";
+import gql from "graphql-tag";
+
+globalThis.WebSocket ||= WebSocket;
+
+const helloWorld = gql`
+  query {
+    hello
+  }
+`;
+
+const link = new MockLink([
+  {
+    request: { query: helloWorld },
+    result: { data: { hello: "world" } },
+    maxUsageCount: 1000,
+  },
+  {
+    request: {
+      query: gql`
+        query {
+          hi
+        }
+      `,
+    },
+    result: { data: { hi: "universe" } },
+    maxUsageCount: 1000,
+  },
+]);
+const client = new ApolloClient({
+  link,
+  cache: new InMemoryCache(),
+  devtools: { name: process.argv[2] },
+});
+client.watchQuery({ query: helloWorld }).subscribe({ next() {} });
+const { connectedPromise, disconnect, onCleanup } =
+  connectApolloClientToVSCodeDevTools(
+    client,
+    "ws://localhost:7095", // nosemgrep
+  );
+console.log("connecting...");
+onCleanup((reason) =>
+  console.log(
+    "disconnected",
+    reason,
+    /* referencing client here to prevent it from getting garbage connected */ client.version,
+  ),
+);
+connectedPromise.then(() => {
+  console.log("connected");
+  //  setTimeout(unregister, 5000, "USERLAND_TIMEOUT");
+});