Add basic vscode web extension and smoke test (#4498)

Basically just register the extension providing the extension
configuration(tm grammar and other language config like quote style,
matching tokens, etc.)

progress for #4095

---------

Co-authored-by: Christopher Radek <[email protected]>

.chronus/changes/vscode-web-2024-8-23-20-15-22.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: feature
+packages:
+  - typespec-vscode
+---
+
+Make extension web compatible with minimal functionality 

.chronus/changes/vscode-web-2024-8-23-21-44-3.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: fix
+packages:
+  - "@typespec/internal-build-utils"
+---
+
+Ignore test from third party notice generation

.gitignore

@@ -203,6 +203,9 @@ obj/
 packages/*/etc/
 docs/**/js-api/
 
+# VS Code test web temp files
+.vscode-test-web/
+
 # csharp emitter
 !packages/http-client-csharp/package-lock.json
 packages/http-client-csharp/generator/artifacts/

.vscode/launch.json

@@ -144,6 +144,14 @@
       "smartStep": true,
       "sourceMaps": true,
       "skipFiles": ["<node_internals>/**/*.js"]
+    },
+    {
+      "name": "Run Web Extension in VS Code",
+      "type": "extensionHost",
+      "debugWebWorkerHost": true,
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}/packages/typespec-vscode", "--extensionDevelopmentKind=web"],
+      "outFiles": ["${workspaceFolder}/dist/src/web/**/*.js"]
     }
   ],
   "compounds": [

packages/internal-build-utils/src/generate-third-party-notice.ts

@@ -1,7 +1,7 @@
 import { readdir, readFile, stat, writeFile } from "fs/promises";
 import { basename, dirname, join, resolve } from "path";
 
-const skipDirs = new Set(["node_modules", "dist-dev"]);
+const skipDirs = new Set(["node_modules", "dist-dev", "test"]);
 
 export async function generateThirdPartyNotice() {
   const root = resolve("./");

packages/typespec-vscode/.vscodeignore

@@ -10,6 +10,8 @@
 !dist/**/*.cjs
 !dist/**/*.js.map
 !dist/**/language-configuration.json
+dist/test/
+
 !markdown-typespec.json
 !README.md
 !ThirdPartyNotices.txt

packages/typespec-vscode/package.json

@@ -24,6 +24,7 @@
   ],
   "type": "module",
   "main": "./dist/src/extension.cjs",
+  "browser": "./dist/src/web/extension.js",
   "engines": {
     "vscode": "^1.93.0"
   },
@@ -152,20 +153,26 @@
     "generate-language-configuration": "node scripts/generate-language-configuration.js",
     "generate-third-party-notices": "typespec-build-tool generate-third-party-notices",
     "package-vsix": "vsce package",
-    "deploy": "vsce publish"
+    "deploy": "vsce publish",
+    "open-in-browser": "vscode-test-web --extensionDevelopmentPath=. .",
+    "test:e2e": "pnpm test:web",
+    "test:web": "vscode-test-web --extensionDevelopmentPath=. --headless --extensionTestsPath=dist/test/suite.js ./test/data"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "~26.0.1",
     "@rollup/plugin-node-resolve": "~15.2.3",
     "@rollup/plugin-typescript": "~11.1.6",
+    "@types/mocha": "^10.0.8",
     "@types/node": "~22.5.4",
     "@types/vscode": "~1.93.0",
     "@typespec/compiler": "workspace:~",
     "@typespec/internal-build-utils": "workspace:~",
     "@vitest/coverage-v8": "^2.1.0",
     "@vitest/ui": "^2.1.0",
+    "@vscode/test-web": "^0.0.60",
     "@vscode/vsce": "~3.1.0",
     "c8": "^10.1.2",
+    "mocha": "^10.7.3",
     "rimraf": "~6.0.1",
     "rollup": "~4.21.3",
     "typescript": "~5.6.2",

packages/typespec-vscode/rollup.config.ts

@@ -4,16 +4,15 @@ import typescript from "@rollup/plugin-typescript";
 
 import { defineConfig } from "rollup";
 
-export default defineConfig({
+const baseConfig = defineConfig({
   input: "src/extension.ts",
   output: {
     file: "dist/src/extension.cjs",
     format: "commonjs",
     sourcemap: true,
     exports: "named",
-    inlineDynamicImports: true,
   },
-  external: ["fs/promises", "vscode"],
+  external: ["vscode"],
   plugins: [
     (resolve as any)({ preferBuiltins: true }),
     (commonjs as any)(),
@@ -31,3 +30,37 @@ export default defineConfig({
     warn(warning);
   },
 });
+
+export default defineConfig([
+  {
+    ...baseConfig,
+    input: "src/extension.ts",
+    output: {
+      file: "dist/src/extension.cjs",
+      format: "commonjs",
+      sourcemap: true,
+      exports: "named",
+      inlineDynamicImports: true,
+    },
+  },
+  {
+    ...baseConfig,
+    input: "src/web/extension.ts",
+    output: {
+      file: "dist/src/web/extension.js", // VSCode web will add extra .js if you use .cjs
+      format: "commonjs",
+      sourcemap: true,
+      inlineDynamicImports: true,
+    },
+  },
+  {
+    ...baseConfig,
+    input: "test/suite.ts",
+    output: {
+      file: "dist/test/suite.js", // VSCode web will add extra .js if you use .cjs
+      format: "commonjs",
+      sourcemap: true,
+      inlineDynamicImports: true,
+    },
+  },
+]);

packages/typespec-vscode/src/web/extension.ts

@@ -0,0 +1,16 @@
+import type { ExtensionContext } from "vscode";
+import logger from "../extension-logger.js";
+import { TypeSpecLogOutputChannel } from "../typespec-log-output-channel.js";
+
+/**
+ * Workaround: LogOutputChannel doesn't work well with LSP RemoteConsole, so having a customized LogOutputChannel to make them work together properly
+ * More detail can be found at https://github.com/microsoft/vscode-discussions/discussions/1149
+ */
+const outputChannel = new TypeSpecLogOutputChannel("TypeSpec");
+logger.outputChannel = outputChannel;
+
+export async function activate(context: ExtensionContext) {
+  logger.info("Activated TypeSpec Web Extension.");
+}
+
+export async function deactivate(): Promise<void> {}

packages/typespec-vscode/test/data/basic.tsp

@@ -0,0 +1 @@
+model Foo {}

packages/typespec-vscode/test/suite.ts

@@ -0,0 +1,28 @@
+// // imports mocha for the browser, defining the `mocha` global.
+import "mocha/mocha";
+
+mocha.setup({
+  ui: "bdd",
+  reporter: undefined,
+  timeout: 20000,
+});
+
+export async function run(): Promise<void> {
+  await import("./web.test.js");
+  return new Promise((c, e) => {
+    try {
+      // Run the mocha test
+      mocha.run((failures) => {
+        if (failures > 0) {
+          e(new Error(`${failures} tests failed.`));
+        } else {
+          c();
+        }
+      });
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      e(err);
+    }
+  });
+}

packages/typespec-vscode/test/web.test.ts

@@ -0,0 +1,22 @@
+import { assert } from "vitest";
+import * as vscode from "vscode";
+
+describe("Web Extension", () => {
+  vscode.window.showInformationMessage("Start all tests.");
+
+  let basicUri: vscode.Uri;
+  before(async () => {
+    const ext = vscode.extensions.getExtension("typespec.typespec-vscode");
+    assert.ok(ext, "Could not activate extension!");
+    await ext!.activate();
+
+    const scheme = ext?.extensionUri.scheme === "file" ? "file" : "vscode-test-web";
+    const pathPrefix = scheme === "file" ? ext?.extensionUri.fsPath + "/test" : "";
+
+    basicUri = vscode.Uri.from({ scheme, path: pathPrefix + "/basic.tsp" });
+  });
+
+  it("open tsp file", async () => {
+    await vscode.workspace.openTextDocument(basicUri);
+  });
+});

packages/typespec-vscode/tsconfig.build.json

@@ -9,5 +9,5 @@
     "declarationMap": false,
     "sourceRoot": ".."
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "test/**/*.ts"]
 }

packages/typespec-vscode/tsconfig.json

@@ -9,6 +9,8 @@
     "sourceMap": false,
     "resolveJsonModule": true,
     "outDir": "dist",
+    "skipLibCheck": true,
+    "types": ["mocha"],
     "rootDir": "."
   },
   "include": ["rollup.config.ts", "src/**/*.ts", "test/**/*.ts"]