vscode-apollo 1.19.3 → 2.0.0

package/src/extension.ts

@@ -9,21 +9,28 @@ import {
   commands,
   QuickPickItem,
   Disposable,
-  OutputChannel
+  OutputChannel,
+  MarkdownString,
+  Range,
 } from "vscode";
 import StatusBar from "./statusBar";
 import { getLanguageServerClient } from "./languageServerClient";
-import { LanguageClient, NotificationType } from "vscode-languageclient";
+import { LanguageClient } from "vscode-languageclient/node";
+import {
+  type EngineDecoration,
+  LanguageServerCommands as LSCommands,
+  LanguageServerNotifications as LSNotifications,
+  LanguageServerRequests as LSRequests,
+} from "./messages";
 import {
   printNoFileOpenMessage,
-  printStatsToClientOutputChannel
+  printStatsToClientOutputChannel,
 } from "./utils";
 import { Debug } from "./debug";
 
 const { version } = require("../package.json");
 
-let client: LanguageClient;
-let clientDisposable: Disposable;
+let globalClient: LanguageClient | null = null;
 let statusBar: StatusBar;
 let outputChannel: OutputChannel;
 let schemaTagItems: QuickPickItem[] = [];
@@ -41,215 +48,303 @@ function isError(response: any): response is ErrorShape {
   );
 }
 
-export function activate(context: ExtensionContext) {
+export interface VSCodeGraphQLExtension {
+  outputChannel: OutputChannel;
+  client: LanguageClient;
+  LanguageServerCommands: typeof LSCommands;
+  LanguageServerNotifications: typeof LSNotifications;
+  LanguageServerRequests: typeof LSRequests;
+}
+
+export async function activate(
+  context: ExtensionContext,
+): Promise<VSCodeGraphQLExtension> {
   const serverModule = context.asAbsolutePath(
-    join("node_modules/apollo-language-server/lib", "server.js")
+    join("lib/language-server", "server.js"),
   );
-
-  // Initialize language client
-  client = getLanguageServerClient(serverModule, outputChannel);
+  outputChannel ||= window.createOutputChannel("Apollo GraphQL");
+  const client = getLanguageServerClient(serverModule, outputChannel);
+  globalClient = client;
   client.registerProposedFeatures();
 
   // Initialize disposables
   statusBar = new StatusBar({
-    hasActiveTextEditor: Boolean(window.activeTextEditor)
+    hasActiveTextEditor: Boolean(window.activeTextEditor),
   });
-  outputChannel = window.createOutputChannel("Apollo GraphQL");
   Debug.SetOutputConsole(outputChannel);
-  clientDisposable = client.start();
-
   // Handoff disposables for cleanup
-  context.subscriptions.push(statusBar, outputChannel, clientDisposable);
-
-  var serverDebugMessage: NotificationType<
-    { type: string; message: string; stack?: string },
-    any
-  > = new NotificationType("serverDebugMessage");
-
-  // Once client is ready, we can send messages and add listeners for various notifications
-  client.onReady().then(() => {
-    client.onNotification(serverDebugMessage, message => {
-      switch (message.type) {
-        case "info":
-          Debug.info(message.message, message.stack);
-          break;
-        case "error":
-          Debug.error(message.message, message.stack);
-          break;
-        case "warning":
-          Debug.warning(message.message, message.stack);
-          break;
-        default:
-          Debug.info(message.message, message.stack);
-          break;
-      }
-    });
+  context.subscriptions.push(statusBar, outputChannel);
 
-    commands.registerCommand("apollographql/showStats", () => {
-      const fileUri = window.activeTextEditor
-        ? window.activeTextEditor.document.uri.fsPath
-        : null;
+  client.onNotification(LSNotifications.ServerDebugMessage, (message) => {
+    switch (message.type) {
+      case "info":
+        Debug.info(message.message, message.stack);
+        break;
+      case "error":
+        Debug.error(message.message, message.stack);
+        break;
+      case "warning":
+        Debug.warning(message.message, message.stack);
+        break;
+      default:
+        Debug.info(message.message, message.stack);
+        break;
+    }
+  });
 
-      // if no editor is open, but an output channel is, vscode returns something like
-      // output:extension-output-%234. If an editor IS open, this is something like file://Users/...
-      // This check is just for either a / or a \ anywhere in a fileUri
-      const fileOpen = fileUri && /[\/\\]/.test(fileUri);
+  commands.registerCommand("apollographql/showStats", () => {
+    const fileUri = window.activeTextEditor
+      ? window.activeTextEditor.document.uri.fsPath
+      : null;
 
-      if (fileOpen) {
-        client.sendNotification("apollographql/getStats", { uri: fileUri });
-        return;
-      }
-      printNoFileOpenMessage(client, version);
-      client.outputChannel.show();
-    });
+    // if no editor is open, but an output channel is, vscode returns something like
+    // output:extension-output-%234. If an editor IS open, this is something like file://Users/...
+    // This check is just for either a / or a \ anywhere in a fileUri
+    // TODO: this should probably be `registerTextEditorCommand` instead of `registerCommand`
+    const fileOpen = fileUri && /[\/\\]/.test(fileUri);
 
-    client.onNotification("apollographql/statsLoaded", params => {
-      printStatsToClientOutputChannel(client, params, version);
-      client.outputChannel.show();
-    });
-    // For some reason, non-strings can only be sent in one direction. For now, messages
-    // coming from the language server just need to be stringified and parsed.
-    client.onNotification(
-      "apollographql/configFilesFound",
-      (params: string) => {
-        const response = JSON.parse(params) as Array<any> | ErrorShape;
-
-        const hasActiveTextEditor = Boolean(window.activeTextEditor);
-        if (isError(response)) {
+    if (fileOpen) {
+      client.sendNotification(LSCommands.GetStats, {
+        uri: fileUri,
+      });
+      return;
+    }
+    printNoFileOpenMessage(client, version);
+    client.outputChannel.show();
+  });
+
+  client.onNotification(LSNotifications.StatsLoaded, (params) => {
+    printStatsToClientOutputChannel(client, params, version);
+    client.outputChannel.show();
+  });
+
+  commands.registerCommand("apollographql/fileStats", (uri: string) => {
+    // this has been introduced to check the LSP loading status in tests right now
+    // TODO: "apollographql/showStats" should use this request as well instead of notifications
+    return client.sendRequest(LSRequests.FileStats, { uri });
+  });
+
+  // For some reason, non-strings can only be sent in one direction. For now, messages
+  // coming from the language server just need to be stringified and parsed.
+  client.onNotification(LSNotifications.ConfigFilesFound, (params: string) => {
+    const response = JSON.parse(params) as Array<any> | ErrorShape;
+
+    const hasActiveTextEditor = Boolean(window.activeTextEditor);
+    if (Array.isArray(response)) {
+      const errors = response.filter((item) => isError(item));
+      if (errors.length) {
+        errors.forEach((response) => {
           statusBar.showWarningState({
             hasActiveTextEditor,
-            tooltip: "Configuration Error"
+            tooltip: "Configuration Error",
           });
-          outputChannel.append(response.stack);
+          outputChannel.appendLine("---\n" + response.stack + "\n---");
 
           const infoButtonText = "More Info";
           window
             .showInformationMessage(response.message, infoButtonText)
-            .then(clicked => {
+            .then((clicked) => {
               if (clicked === infoButtonText) {
                 outputChannel.show();
               }
             });
-        } else if (Array.isArray(response)) {
-          if (response.length === 0) {
-            statusBar.showWarningState({
-              hasActiveTextEditor,
-              tooltip: "No apollo.config.js file found"
-            });
-          } else {
-            statusBar.showLoadedState({ hasActiveTextEditor });
-          }
-        } else {
-          Debug.error(
-            `Invalid response type in message apollographql/configFilesFound:\n${JSON.stringify(
-              response
-            )}`
-          );
-        }
+        });
+      } else if (response.length === 0) {
+        statusBar.showWarningState({
+          hasActiveTextEditor,
+          tooltip: "No apollo.config.js file found",
+        });
+      } else {
+        statusBar.showLoadedState({ hasActiveTextEditor });
       }
-    );
+    } else {
+      Debug.error(
+        `Invalid response type in message apollographql/configFilesFound:\n${JSON.stringify(
+          response,
+        )}`,
+      );
+    }
+  });
 
-    commands.registerCommand("apollographql/reloadService", () => {
-      // wipe out tags when reloading
-      // XXX we should clean up this handling
-      schemaTagItems = [];
-      client.sendNotification("apollographql/reloadService");
-    });
+  commands.registerCommand("apollographql/reloadService", () => {
+    // wipe out tags when reloading
+    // XXX we should clean up this handling
+    schemaTagItems = [];
+    client.sendNotification(LSCommands.ReloadService);
+  });
 
-    // For some reason, non-strings can only be sent in one direction. For now, messages
-    // coming from the language server just need to be stringified and parsed.
-    client.onNotification("apollographql/tagsLoaded", params => {
-      const [serviceID, tags]: [string, string[]] = JSON.parse(params);
-      const items = tags.map(tag => ({
-        label: tag,
-        description: "",
-        detail: serviceID
-      }));
-
-      schemaTagItems = [...items, ...schemaTagItems];
-    });
+  // For some reason, non-strings can only be sent in one direction. For now, messages
+  // coming from the language server just need to be stringified and parsed.
+  client.onNotification(LSNotifications.TagsLoaded, (params) => {
+    const [serviceID, tags]: [string, string[]] = JSON.parse(params);
+    const items = tags.map((tag) => ({
+      label: tag,
+      description: "",
+      detail: serviceID,
+    }));
 
-    commands.registerCommand("apollographql/selectSchemaTag", async () => {
-      const selection = await window.showQuickPick(schemaTagItems);
-      if (selection) {
-        client.sendNotification("apollographql/tagSelected", selection);
-      }
-    });
+    schemaTagItems = [...items, ...schemaTagItems];
+  });
 
-    let currentLoadingResolve: Map<number, () => void> = new Map();
+  commands.registerCommand("apollographql/selectSchemaTag", async () => {
+    const selection = await window.showQuickPick(schemaTagItems);
+    if (selection) {
+      client.sendNotification(LSCommands.TagSelected, selection);
+    }
+  });
 
-    client.onNotification("apollographql/loadingComplete", token => {
-      statusBar.showLoadedState({
-        hasActiveTextEditor: Boolean(window.activeTextEditor)
-      });
-      const inMap = currentLoadingResolve.get(token);
-      if (inMap) {
-        inMap();
-        currentLoadingResolve.delete(token);
-      }
+  let currentLoadingResolve: Map<number, () => void> = new Map();
+
+  client.onNotification(LSNotifications.LoadingComplete, (token) => {
+    statusBar.showLoadedState({
+      hasActiveTextEditor: Boolean(window.activeTextEditor),
     });
+    const inMap = currentLoadingResolve.get(token);
+    if (inMap) {
+      inMap();
+      currentLoadingResolve.delete(token);
+    }
+  });
+
+  client.onNotification(LSNotifications.Loading, ({ message, token }) => {
+    window.withProgress(
+      {
+        location: ProgressLocation.Notification,
+        title: message,
+        cancellable: false,
+      },
+      () => {
+        return new Promise<void>((resolve) => {
+          currentLoadingResolve.set(token, resolve);
+        });
+      },
+    );
+  });
+
+  const runIconOnDiskPath = Uri.file(
+    join(context.extensionPath, "images", "IconRun.svg"),
+  );
+
+  const textDecorationType = window.createTextEditorDecorationType({});
+  const runGlyphDecorationType = window.createTextEditorDecorationType({});
+  let latestDecorations: EngineDecoration[] | undefined = undefined;
 
-    client.onNotification("apollographql/loading", ({ message, token }) => {
-      window.withProgress(
-        {
-          location: ProgressLocation.Notification,
-          title: message,
-          cancellable: false
+  const updateDecorations = () => {
+    if (window.activeTextEditor && latestDecorations) {
+      const editor = window.activeTextEditor!;
+
+      const decorationsForDocument = latestDecorations.filter(
+        (decoration) =>
+          decoration.document ===
+          window.activeTextEditor!.document.uri.toString(),
+      );
+
+      const textDecorations = decorationsForDocument.flatMap(
+        (decoration): DecorationOptions | DecorationOptions[] => {
+          if (decoration.type !== "text") {
+            return [];
+          }
+
+          return {
+            range: editor.document.lineAt(decoration.range.start.line).range,
+            renderOptions: {
+              after: {
+                contentText: decoration.message,
+                textDecoration: "none; padding-left: 15px; opacity: .5",
+              },
+            },
+          };
         },
-        () => {
-          return new Promise<void>(resolve => {
-            currentLoadingResolve.set(token, resolve);
-          });
-        }
       );
-    });
 
-    const engineDecoration = window.createTextEditorDecorationType({});
-    let latestDecs: any[] | undefined = undefined;
-
-    const updateDecorations = () => {
-      if (window.activeTextEditor && latestDecs) {
-        const editor = window.activeTextEditor!;
-        const decorations: DecorationOptions[] = latestDecs
-          .filter(
-            d => d.document === window.activeTextEditor!.document.uri.toString()
-          )
-          .map(dec => {
-            return {
-              range: editor.document.lineAt(dec.range.start.line).range,
-              renderOptions: {
-                after: {
-                  contentText: `${dec.message}`,
-                  textDecoration: "none; padding-left: 15px; opacity: .5"
-                }
-              }
-            };
-          });
+      const runGlyphDecorations = decorationsForDocument.flatMap(
+        (decoration): DecorationOptions | DecorationOptions[] => {
+          if (decoration.type !== "runGlyph") {
+            return [];
+          }
+
+          const hoverMessage =
+            decoration.hoverMessage === undefined
+              ? undefined
+              : new MarkdownString(decoration.hoverMessage);
+          if (hoverMessage) {
+            hoverMessage.isTrusted = true;
+          }
 
-        window.activeTextEditor!.setDecorations(engineDecoration, decorations);
+          const endOfLinePosition = editor.document.lineAt(
+            decoration.range.start.line,
+          ).range.end;
+          return {
+            // Hover range of just the end of the line (and the icon) so the hover shows above the icon,
+            // not over at the start of the line
+            range: new Range(endOfLinePosition, endOfLinePosition),
+            renderOptions: {
+              after: {
+                contentIconPath: runIconOnDiskPath,
+                textDecoration:
+                  "none; border-radius: .20rem; margin-left: 8px; text-align: center;",
+                backgroundColor: "#2075D6",
+                width: "18px",
+                height: "18px",
+              },
+            },
+            hoverMessage,
+          };
+        },
+      );
+
+      window.activeTextEditor!.setDecorations(
+        textDecorationType,
+        textDecorations,
+      );
+      if (
+        workspace
+          .getConfiguration("apollographql")
+          .get("display.showRunInStudioButton")
+      ) {
+        window.activeTextEditor!.setDecorations(
+          runGlyphDecorationType,
+          runGlyphDecorations,
+        );
       }
-    };
+    }
+  };
 
-    client.onNotification("apollographql/engineDecorations", (...decs) => {
-      latestDecs = decs;
+  client.onNotification(
+    LSNotifications.EngineDecorations,
+    ({ decorations }) => {
+      latestDecorations = decorations;
       updateDecorations();
-    });
+    },
+  );
 
-    window.onDidChangeActiveTextEditor(() => {
-      updateDecorations();
-    });
+  window.onDidChangeActiveTextEditor(() => {
+    updateDecorations();
+  });
 
-    workspace.registerTextDocumentContentProvider("graphql-schema", {
-      provideTextDocumentContent(uri: Uri) {
-        // the schema source is provided inside the URI, just return that here
-        return uri.query;
-      }
-    });
+  workspace.registerTextDocumentContentProvider("graphql-schema", {
+    provideTextDocumentContent(uri: Uri) {
+      // the schema source is provided inside the URI, just return that here
+      return uri.query;
+    },
   });
+
+  await client.start();
+  return {
+    outputChannel,
+    client,
+    LanguageServerCommands: LSCommands,
+    LanguageServerNotifications: LSNotifications,
+    LanguageServerRequests: LSRequests,
+  };
 }
 
 export function deactivate(): Thenable<void> | void {
-  if (client) {
-    return client.stop();
+  if (globalClient) {
+    try {
+      return globalClient.stop();
+    } finally {
+      globalClient = null;
+    }
   }
 }

package/src/language-server/__e2e__/clientSchema.e2e.ts

@@ -0,0 +1,147 @@
+import { TextEditor } from "vscode";
+import { closeAllEditors, openEditor, testCompletion, getHover } from "./utils";
+
+let editor: TextEditor;
+beforeAll(async () => {
+  closeAllEditors();
+  editor = await openEditor("clientSchema/src/test.js");
+});
+
+test("completion", async () => {
+  // dro|id
+  await testCompletion(editor, [4, 7], [["droid", "Droid"]]);
+  // na|me
+  await testCompletion(editor, [5, 8], [["name", "String!"]]);
+  // mo|del
+  await testCompletion(editor, [6, 8], [["model", "String"]]);
+});
+
+test("hover", async () => {
+  // featu|reFlagDefer
+  expect(await getHover(editor, [3, 10])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+Query.featureFlagDefer: Boolean!
+\`\`\`
+
+---
+
+\`Client-Only Field\` \`Resolved locally\`
+
+---
+
+Whether to use defer"
+`);
+
+  // @c|lient(always: false)
+  expect(await getHover(editor, [3, 24])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+@client(always: Boolean)
+\`\`\`
+
+---
+
+Direct the client to resolve this field locally, either from the cache or local resolvers."
+`);
+
+  // @client(alwa|ys: false)
+  expect(await getHover(editor, [3, 33])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+always: Boolean
+\`\`\`
+
+---
+
+When true, the client will never use the cache for this value. See
+https://www.apollographql.com/docs/react/local-state/local-resolvers/#forcing-resolvers-with-clientalways-true"
+`);
+
+  // @expo|rt(as: "defer")
+  expect(await getHover(editor, [3, 49])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+@export(as: String!)
+\`\`\`
+
+---
+
+Export this locally resolved field as a variable to be used in the remainder of this query. See
+https://www.apollographql.com/docs/react/local-state/local-resolvers/#using-client-fields-as-variables"
+`);
+  expect(await getHover(editor, [3, 53])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+as: String!
+\`\`\`
+
+---
+
+The variable name to export this field as."
+`);
+
+  // @nonre|active
+  expect(await getHover(editor, [7, 28])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+@nonreactive
+\`\`\`
+
+---
+
+The @nonreactive directive can be used to mark query fields or fragment spreads and is used to indicate that changes to the data contained within the subtrees marked @nonreactive should not trigger rerendering.
+This allows parent components to fetch data to be rendered by their children without rerendering themselves when the data corresponding with fields marked as @nonreactive change.
+https://www.apollographql.com/docs/react/data/directives#nonreactive"
+`);
+
+  // @def|er(if: $defer, label: "fc")
+  expect(await getHover(editor, [8, 14])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+@defer(if: Boolean, label: String)
+\`\`\`
+
+---
+
+This directive enables your queries to receive data for specific fields incrementally, instead of receiving all field data at the same time.
+This is helpful whenever some fields in a query take much longer to resolve than others.
+https://www.apollographql.com/docs/react/data/directives#defer"
+`);
+  //@defer(i|f: $defer, label: "fc")
+  expect(await getHover(editor, [8, 18])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+if: Boolean
+\`\`\`
+
+---
+
+When true fragment may be deferred, if omitted defaults to true."
+`);
+  //@defer(if: $defer, labe|l: "fc")
+  expect(await getHover(editor, [8, 33])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+label: String
+\`\`\`
+
+---
+
+A unique label across all @defer and @stream directives in an operation.
+This label should be used by GraphQL clients to identify the data from patch responses and associate it with the correct fragment.
+If provided, the GraphQL Server must add it to the payload."
+`);
+  // @connec|tion(key: "feed")
+  expect(await getHover(editor, [9, 53])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+@connection(key: String!, filter: [String!])
+\`\`\`
+
+---
+
+Specify a custom store key for this result. See
+https://www.apollographql.com/docs/react/caching/advanced-topics/#the-connection-directive"
+`);
+  // @connection(ke|y: "feed")
+  expect(await getHover(editor, [9, 61])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+key: String!
+\`\`\`
+
+---
+
+Specify the store key."
+`);
+});

package/src/language-server/__e2e__/httpSchema.e2e.ts

@@ -0,0 +1,21 @@
+import { TextEditor } from "vscode";
+import { closeAllEditors, openEditor, testCompletion, getHover } from "./utils";
+
+let editor: TextEditor;
+beforeAll(async () => {
+  closeAllEditors();
+  editor = await openEditor("httpSchema/src/test.js");
+});
+
+test("completion", async () => {
+  await testCompletion(editor, [3, 7], [["books", "[Book]"]]);
+  await testCompletion(editor, [5, 9], [["author", "String"]]);
+});
+
+test("hover", async () => {
+  expect(await getHover(editor, [5, 9])).toMatchInlineSnapshot(`
+"\`\`\`graphql
+Book.author: String
+\`\`\`"
+`);
+});