Language service for VS Code and Playground

npm/package.json

@@ -17,7 +17,8 @@
       "node": "./dist/main.js",
       "default": "./dist/browser.js"
     },
-    "./worker": "./dist/compiler/worker-browser.js"
+    "./compiler-worker": "./dist/compiler/worker-browser.js",
+    "./language-service-worker": "./dist/language-service/worker-browser.js"
   },
   "scripts": {
     "build": "npm run generate && npm run build:tsc",

npm/src/browser.ts

@@ -122,3 +122,4 @@ export { default as samples } from "./samples.generated.js";
 export { type VSDiagnostic } from "./vsdiagnostic.js";
 export { log, type LogLevel };
 export type { ICompilerWorker };
+export type { ILanguageServiceWorker, ILanguageService };

npm/src/compiler/compiler.ts

@@ -1,12 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import type { IDiagnostic, ICompletionList } from "../../lib/node/qsc_wasm.cjs";
 import { log } from "../log.js";
+import { VSDiagnostic } from "../vsdiagnostic.js";
+import { IServiceProxy, ServiceState } from "../worker-proxy.js";
 import { eventStringToMsg } from "./common.js";
-import { mapDiagnostics, VSDiagnostic } from "../vsdiagnostic.js";
 import { IQscEventTarget, QscEvents, makeEvent } from "./events.js";
-import { IServiceProxy, ServiceState } from "../worker-proxy.js";
 
 // The wasm types generated for the node.js bundle are just the exported APIs,
 // so use those as the set used by the shared compiler
@@ -15,9 +14,7 @@ type Wasm = typeof import("../../lib/node/qsc_wasm.cjs");
 // These need to be async/promise results for when communicating across a WebWorker, however
 // for running the compiler in the same thread the result will be synchronous (a resolved promise).
 export interface ICompiler {
-  checkCode(code: string): Promise<VSDiagnostic[]>;
   getHir(code: string): Promise<string>;
-  getCompletions(): Promise<ICompletionList>;
   run(
     code: string,
     expr: string,
@@ -63,32 +60,10 @@ export class Compiler implements ICompiler {
     globalThis.qscGitHash = this.wasm.git_hash();
   }
 
-  async checkCode(code: string): Promise<VSDiagnostic[]> {
-    // Temporary implementation until we have the language
-    // service notifications properly wired up to the editor.
-    let diags: IDiagnostic[] = [];
-    const languageService = new this.wasm.LanguageService(
-      (uri: string, version: number, errors: IDiagnostic[]) => {
-        diags = errors;
-      }
-    );
-    languageService.update_document("code", 1, code);
-    return mapDiagnostics(diags, code);
-  }
-
   async getHir(code: string): Promise<string> {
     return this.wasm.get_hir(code);
   }
 
-  async getCompletions(): Promise<ICompletionList> {
-    // Temporary implementation until we have the language
-    // service properly wired up to the editor.
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const languageService = new this.wasm.LanguageService(() => {});
-    languageService.update_document("code", 1, "");
-    return languageService.get_completions("code", 1);
-  }
-
   async run(
     code: string,
     expr: string,

npm/src/compiler/worker-proxy.ts

@@ -13,9 +13,7 @@ import { ICompiler } from "./compiler.js";
 import { QscEventData } from "./events.js";
 
 const requests: MethodMap<ICompiler> = {
-  checkCode: "request",
   getHir: "request",
-  getCompletions: "request",
   run: "requestWithProgress",
   runKata: "requestWithProgress",
 };

npm/test/basics.js

@@ -18,13 +18,6 @@ import samples from "../dist/samples.generated.js";
 
 log.setLogLevel("warn");
 
-/**
- *
- * @param {string} code
- * @param {string} expr
- * @param {boolean} useWorker
- * @returns {Promise<import("../dist/common.js").ShotResult>}
- */
 export function runSingleShot(code, expr, useWorker) {
   return new Promise((resolve, reject) => {
     const resultsHandler = new QscEventTarget(true);
@@ -66,38 +59,6 @@ namespace Test {
   assert(result.result === "Zero");
 });
 
-test("one syntax error", async () => {
-  const compiler = getCompiler();
-
-  const diags = await compiler.checkCode("namespace Foo []");
-  assert.equal(diags.length, 1);
-  assert.equal(diags[0].start_pos, 14);
-  assert.equal(diags[0].end_pos, 15);
-});
-
-test("error with newlines", async () => {
-  const compiler = getCompiler();
-
-  const diags = await compiler.checkCode(
-    "namespace input { operation Foo(a) : Unit {} }"
-  );
-  assert.equal(diags.length, 1);
-  assert.equal(diags[0].start_pos, 32);
-  assert.equal(diags[0].end_pos, 33);
-  assert.equal(
-    diags[0].message,
-    "type error: missing type in item signature\n\nhelp: types cannot be inferred for global declarations"
-  );
-});
-
-test("completions include CNOT", async () => {
-  const compiler = getCompiler();
-
-  let results = await compiler.getCompletions();
-  let cnot = results.items.find((x) => x.label === "CNOT");
-  assert.ok(cnot);
-});
-
 test("dump and message output", async () => {
   let code = `namespace Test {
         function Answer() : Int {
@@ -117,27 +78,6 @@ test("dump and message output", async () => {
   assert(result.events[1].message == "hello, qsharp");
 });
 
-test("type error", async () => {
-  let code = `namespace Sample {
-        operation main() : Result[] {
-            use q1 = Qubit();
-            Ry(q1);
-            let m1 = M(q1);
-            return [m1];
-        }
-    }`;
-  const compiler = getCompiler();
-  let result = await compiler.checkCode(code);
-
-  assert.equal(result.length, 1);
-  assert.equal(result[0].start_pos, 99);
-  assert.equal(result[0].end_pos, 105);
-  assert.equal(
-    result[0].message,
-    "type error: expected (Double, Qubit), found Qubit"
-  );
-});
-
 test("kata success", async () => {
   const evtTarget = new QscEventTarget(true);
   const compiler = getCompiler();
@@ -208,28 +148,6 @@ namespace Kata {
   assert.equal(results[0].result.message, "Error: syntax error");
 });
 
-test("worker check", async () => {
-  let code = `namespace Sample {
-        operation main() : Result[] {
-            use q1 = Qubit();
-            Ry(q1);
-            let m1 = M(q1);
-            return [m1];
-        }
-    }`;
-  const compiler = getCompilerWorker();
-  let result = await compiler.checkCode(code);
-  compiler.terminate();
-
-  assert.equal(result.length, 1);
-  assert.equal(result[0].start_pos, 99);
-  assert.equal(result[0].end_pos, 105);
-  assert.equal(
-    result[0].message,
-    "type error: expected (Double, Qubit), found Qubit"
-  );
-});
-
 test("worker 100 shots", async () => {
   let code = `namespace Test {
         function Answer() : Int {
@@ -316,7 +234,7 @@ test("cancel worker", () => {
     compiler.run(code, "", 10, resultsHandler).catch((err) => {
       cancelledArray.push(err);
     });
-    compiler.checkCode(code).catch((err) => {
+    compiler.getHir(code).catch((err) => {
       cancelledArray.push(err);
     });
 
@@ -327,11 +245,11 @@ test("cancel worker", () => {
 
       // Start a new compiler and ensure that works fine
       const compiler2 = getCompilerWorker();
-      const result = await compiler2.checkCode(code);
+      const result = await compiler2.getHir(code);
       compiler2.terminate();
 
-      // New 'check' result is good
-      assert(Array.isArray(result) && result.length === 0);
+      // getHir should have worked
+      assert(typeof result === "string" && result.length > 0);
 
       // Old requests were cancelled
       assert(cancelledArray.length === 2);

playground/build.js

@@ -18,7 +18,11 @@ const outdir = join(thisDir, "public/libs");
 
 /** @type {import("esbuild").BuildOptions} */
 const buildOptions = {
-  entryPoints: [join(thisDir, "src/main.tsx"), join(thisDir, "src/worker.ts")],
+  entryPoints: [
+    join(thisDir, "src/main.tsx"),
+    join(thisDir, "src/compiler-worker.ts"),
+    join(thisDir, "src/language-service-worker.ts"),
+  ],
   outdir,
   bundle: true,
   target: ["es2020", "chrome64", "edge79", "firefox62", "safari11.1"],

playground/src/compiler-worker.ts

@@ -0,0 +1,3 @@
+import { messageHandler } from "qsharp/compiler-worker";
+
+self.onmessage = messageHandler;

playground/src/editor.tsx

@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import {
   CompilerState,
   ICompilerWorker,
+  ILanguageServiceWorker,
   QscEventTarget,
   VSDiagnostic,
   log,
@@ -24,10 +25,23 @@ function VSDiagsToMarkers(
   srcModel: monaco.editor.ITextModel
 ): monaco.editor.IMarkerData[] {
   return errors.map((err) => {
+    let severity = monaco.MarkerSeverity.Error;
+    switch (err.severity) {
+      case "error":
+        severity = monaco.MarkerSeverity.Error;
+        break;
+      case "warning":
+        severity = monaco.MarkerSeverity.Warning;
+        break;
+      case "info":
+        severity = monaco.MarkerSeverity.Info;
+        break;
+    }
+
     const startPos = srcModel.getPositionAt(err.start_pos);
     const endPos = srcModel.getPositionAt(err.end_pos);
     const marker: monaco.editor.IMarkerData = {
-      severity: monaco.MarkerSeverity.Error,
+      severity,
       message: err.message,
       startLineNumber: startPos.lineNumber,
       startColumn: startPos.column,
@@ -52,13 +66,14 @@ export function Editor(props: {
   showShots: boolean;
   setHir: (hir: string) => void;
   activeTab: ActiveTab;
+  languageService: ILanguageServiceWorker;
 }) {
   const editor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const errMarks = useRef<ErrCollection>({ checkDiags: [], shotDiags: [] });
   const editorDiv = useRef<HTMLDivElement>(null);
 
-  // Maintain a ref to the latest check function, as it closes over a bunch of stuff
-  const checkRef = useRef(async () => {
+  // Maintain a ref to the latest getHir function, as it closes over a bunch of stuff
+  const hirRef = useRef(async () => {
     return;
   });
 
@@ -69,10 +84,15 @@ export function Editor(props: {
   );
   const [hasCheckErrors, setHasCheckErrors] = useState(false);
 
-  function markErrors() {
+  function markErrors(version?: number) {
     const model = editor.current?.getModel();
     if (!model) return;
 
+    if (version != null && version !== model.getVersionId()) {
+      // Diagnostics event received for an outdated model
+      return;
+    }
+
     const errs = [
       ...errMarks.current.checkDiags,
       ...errMarks.current.shotDiags,
@@ -88,16 +108,14 @@ export function Editor(props: {
     setErrors(errList);
   }
 
-  checkRef.current = async function onCheck() {
+  hirRef.current = async function updateHir() {
+    // This should get called on initial load and on every document update.
     const code = editor.current?.getValue();
-    if (code == null) return;
-    const diags = await props.compiler.checkCode(code);
+    if (code == null) throw new Error("Why is code null?");
+
     if (props.activeTab === "hir-tab") {
       props.setHir(await props.compiler.getHir(code));
     }
-    errMarks.current.checkDiags = diags;
-    markErrors();
-    setHasCheckErrors(diags.length > 0);
   };
 
   async function onRun() {
@@ -132,7 +150,14 @@ export function Editor(props: {
     editor.current = newEditor;
     const srcModel = monaco.editor.createModel(props.code, "qsharp");
     newEditor.setModel(srcModel);
-    srcModel.onDidChangeContent(() => checkRef.current());
+    srcModel.onDidChangeContent(() => hirRef.current());
+    srcModel.onDidChangeContent(async () => {
+      await props.languageService.updateDocument(
+        srcModel.uri.toString(),
+        srcModel.getVersionId(),
+        srcModel.getValue()
+      );
+    });
 
     function onResize() {
       newEditor.layout();
@@ -147,6 +172,20 @@ export function Editor(props: {
     };
   }, []);
 
+  useEffect(() => {
+    props.languageService.addEventListener("diagnostics", (evt) => {
+      const diagnostics = evt.detail.diagnostics;
+      errMarks.current.checkDiags = diagnostics;
+      markErrors(evt.detail.version);
+      setHasCheckErrors(diagnostics.length > 0);
+    });
+  }, [props.languageService]);
+
+  useEffect(() => {
+    // Whenever the active tab changes, run check again.
+    hirRef.current();
+  }, [props.activeTab]);
+
   useEffect(() => {
     const theEditor = editor.current;
     if (!theEditor) return;
@@ -164,7 +203,7 @@ export function Editor(props: {
 
   useEffect(() => {
     // Whenever the active tab changes, run check again.
-    checkRef.current();
+    hirRef.current();
   }, [props.activeTab]);
 
   // On reset, reload the initial code

playground/src/kata.tsx

@@ -2,7 +2,13 @@
 // Licensed under the MIT License.
 
 import { useEffect, useRef } from "preact/hooks";
-import { CompilerState, ICompilerWorker, Kata, QscEventTarget } from "qsharp";
+import {
+  CompilerState,
+  ICompilerWorker,
+  ILanguageServiceWorker,
+  Kata,
+  QscEventTarget,
+} from "qsharp";
 import { Editor } from "./editor.js";
 import { OutputTabs } from "./tabs.js";
 
@@ -11,6 +17,7 @@ export function Kata(props: {
   compiler: ICompilerWorker;
   compilerState: CompilerState;
   onRestartCompiler: () => void;
+  languageService: ILanguageServiceWorker;
 }) {
   const kataContent = useRef<HTMLDivElement>(null);
   const itemContent = useRef<(HTMLDivElement | null)[]>([]);
@@ -81,6 +88,7 @@ export function Kata(props: {
               key={item.id}
               setHir={() => ({})}
               activeTab="results-tab"
+              languageService={props.languageService}
             ></Editor>
             <OutputTabs
               key={item.id + "-results"}