feat: Add web extension support for syntax highlighting

.github/workflows/build.yml

@@ -125,6 +125,11 @@ jobs:
         run: |
           npm ci
           npm run test
+      - name: Unit Test COBOL LS Web extension
+        working-directory: clients/cobol-lsp-vscode-extension
+        run: |
+          npm ci
+          npm run test:web
       - name: Package IDMS vsix
         working-directory: clients/idms-dialect-support
         run: |
@@ -341,6 +346,11 @@ jobs:
         run: |
           npm run package  -- --target ${{ env.target }}
           cp *.vsix ../../.
+      - name: Package COBOL LS vsix for Web
+        working-directory: clients/cobol-lsp-vscode-extension
+        run: |
+          npm run package:web
+          cp *.vsix ../../.
       - uses: actions/upload-artifact@v3
         with:
           if-no-files-found: warn

.gitignore

@@ -131,6 +131,7 @@ local.properties
 out
 *.vsix
 .vscode-test
+.vscode-test-web
 node_modules
 tools
 logs/app.log

BUILD.sh

@@ -53,5 +53,11 @@ npm ci
 npm run package
 cd -
 
+# Build COBOL LS Web extension
+cd clients/cobol-lsp-vscode-extension
+npm ci
+npm run build:web
+cd -
+
 # Done
 echo "Done building COBOL LS"

clients/cobol-lsp-vscode-extension/.vscodeignore

@@ -37,6 +37,8 @@
 # * bundled extension code
 !dist/extension.js
 !dist/extension.js.map
+!dist/web/extension.js
+!dist/web/extension.js.map
 # ** server implementation 
 !server/native/*
 !server/jar/server.jar

clients/cobol-lsp-vscode-extension/esbuild.js

@@ -0,0 +1,100 @@
+const esbuild = require('esbuild');
+const glob = require('glob');
+const path = require('path');
+const polyfill = require('@esbuild-plugins/node-globals-polyfill');
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * This plugin hooks into the build process to print errors in a format that the problem matcher in
+ * Visual Studio Code can understand.
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+    name: 'esbuild-problem-matcher',
+
+    setup(build) {
+        build.onStart(() => {
+            console.log('[watch] build started');
+        });
+        build.onEnd((result) => {
+            result.errors.forEach(({ text, location }) => {
+                console.error(`✘ [ERROR] ${text}`);
+                console.error(`    ${location.file}:${location.line}:${location.column}:`);
+            });
+            console.log('[watch] build finished');
+        });
+    },
+};
+
+
+/**
+ * For web extension, all tests, including the test runner, need to be bundled into
+ * a single module that has a exported `run` function .
+ * This plugin bundles implements a virtual file extensionTests.ts that bundles all these together.
+ * @type {import('esbuild').Plugin}
+ */
+const testBundlePlugin = {
+    name: 'testBundlePlugin',
+    setup(build) {
+        build.onResolve({ filter: /[\/\\]extensionTests\.ts$/ }, args => {
+            if (args.kind === 'entry-point') {
+                return { path: path.resolve(args.path) };
+            }
+        });
+        build.onLoad({ filter: /[\/\\]extensionTests\.ts$/ }, async args => {
+            const testsRoot = path.join(__dirname, 'src/web/test/suite');
+            const files = await glob.glob('*.test.{ts,tsx}', { cwd: testsRoot, posix: true });
+            return {
+                contents:
+                    `export { run } from './mochaTestRunner.ts';` +
+                    files.map(f => `import('./${f}');`).join(''),
+                watchDirs: files.map(f => path.dirname(path.resolve(testsRoot, f))),
+                watchFiles: files.map(f => path.resolve(testsRoot, f))
+            };
+        });
+    }
+};
+
+async function main() {
+    const ctx = await esbuild.context({
+        entryPoints: [
+            'src/web/extension.ts',
+            'src/web/test/suite/extensionTests.ts'
+        ],
+        bundle: true,
+        format: 'cjs',
+        minify: production,
+        sourcemap: !production,
+        sourcesContent: false,
+        platform: 'browser',
+        outdir: 'dist/web',
+        external: ['vscode'],
+        logLevel: 'silent',
+        // Node.js global to browser globalThis
+        define: {
+            global: 'globalThis',
+        },
+
+        plugins: [
+            polyfill.NodeGlobalsPolyfillPlugin({
+                process: true,
+                buffer: true,
+            }),
+            testBundlePlugin,
+            esbuildProblemMatcherPlugin, /* add to the end of plugins array */
+        ],
+    });
+    if (watch) {
+        await ctx.watch();
+    } else {
+        await ctx.rebuild();
+        await ctx.dispose();
+    }
+}
+
+main().catch(e => {
+    console.error(e);
+    process.exit(1);
+});