Refactor webview

CONTRIBUTING.md

@@ -177,14 +177,14 @@ Names of files and subdirectories are usually self-descriptive. Here're the most
 - `src/main.ts` — This is the starting point of the extension. It sets things up when the extension is loaded.
 - `src/main.browser.ts` — Starting point for the extension in a browser environment.
 - `src/tla2tools.ts` — All calls to `tla2tools.jar` go through methods from this file.
-- `src/checkResultView.ts` — The main functions that are responsible for interaction between the main extension code and the Check Result View panel.
+- `src/panels/checkResultView.ts` — The main functions that are responsible for interaction between the main extension code and the Check Result View panel.
 - `src/commands/` — This directory contains implementation of all the [VS Code commands](https://code.visualstudio.com/api/extension-guides/command) that the extension provides.
 - `src/completions/` — The [code completion providers](https://code.visualstudio.com/api/references/vscode-api#CompletionItemProvider).
 - `src/formatters/` — Classes that provide auto-formatting functionality.
 - `src/model/` — The classes that describe model check results. Objects of these classes are used by the Check Result View panel.
 - `src/parsers/` — Set of classes that parse output of the various TLA+ tools.
 - `src/symbols/` — The classes that extract symbol information from files (constants, variables, operators etc.)
-- Files `resources/check-result-view.*` implement the Check Result View panel using [Webview API](https://code.visualstudio.com/api/extension-guides/webview).
+- `src/webview/check-result-view.tsx` implement the Check Result View panel using [Webview API](https://code.visualstudio.com/api/extension-guides/webview).
 
 ## Tests
 

esbuild.js

@@ -36,6 +36,20 @@ const extensionBrowserConfig = {
     external: ['vscode'],
 };
 
+// Config for webview source code (to be run in a web-based context)
+/** @type BuildOptions */
+const webviewConfig = {
+    ...baseConfig,
+    target: 'es2020',
+    format: 'esm',
+    tsconfig: 'tsconfig.webview.json',
+    entryPoints: ['./src/webview/check-result-view.tsx'],
+    outfile: './out/check-result-view.js',
+    loader: {
+        '.ttf': 'copy', // use the file loader to handle .ttf files
+    }
+};
+
 const watchPlugin = (name) => [{
     name: 'watch-plugin',
     setup(build) {
@@ -51,10 +65,12 @@ const watchPlugin = (name) => [{
             // Build and watch extension
             (await context({...extensionConfig, plugins: watchPlugin('extensionConfig')})).watch();
             (await context({...extensionBrowserConfig, plugins: watchPlugin('extensionBrowserConfig')})).watch();
+            (await context({...webviewConfig, plugins: watchPlugin('webviewConfig')})).watch();
         } else {
             // Build extension
             await build(extensionConfig);
             await build(extensionBrowserConfig);
+            await build(webviewConfig);
             console.log('build complete');
         }
     } catch (err) {