Switch from webpack to esbuild for bundling webviews

This PR uses esbuild instead of webpack to bundle the webviews.
This dramatically reduces the time it takes to bundle the webviews,
from >50 seconds to <1 second.

This PR also modifies the npm scripts and VS Code launch configurations
to always recompile the webviews before launching.

I also set up eslint to be run before launching the extension.
If the extension seems slower to launch in debug mode, this is why.

Closes #2875

Signed-off-by: David Thompson <davthomp@redhat.com>

Author: datho7561

.vscode/launch.json

@@ -16,7 +16,7 @@
             "outFiles": [
                 "${workspaceFolder}/out/src/**/*.js"
             ],
-            "preLaunchTask": "npm: watch",
+            "preLaunchTask": "compile",
             "env": {
                 "VSCODE_REDHAT_TELEMETRY_DEBUG":"true"
             }
@@ -31,9 +31,10 @@
                 "--extensionTestsPath=${workspaceFolder}/out/test/unit"
             ],
             "outFiles": [
-                "${workspaceFolder}/out/test/unit/**/*.js"
+                "${workspaceFolder}/out/**/*.js"
             ],
-            "preLaunchTask": "npm: watch",
+            "sourceMaps": true,
+            "preLaunchTask": "compile",
             "env": {
                 "OST_DISABLE_COVERAGE": "yes",
                 "VSCODE_REDHAT_TELEMETRY_DEBUG":"true"
@@ -68,8 +69,9 @@
                 "--extensionTestsPath=${workspaceFolder}/out/test/integration"
             ],
             "outFiles": [
-                "${workspaceFolder}/out/test/integration/**/*.js"
+                "${workspaceFolder}/out/**/*.js"
             ],
+            "sourceMaps": true,
             "preLaunchTask": "instrument",
             "env": {
                 "VSCODE_REDHAT_TELEMETRY_DEBUG":"true"
@@ -89,7 +91,11 @@
                 "--mocha_config",
                 "${workspaceFolder}/test/ui/.mocharc.js"
             ],
-            "preLaunchTask": "npm: watch",
+            "outFiles": [
+                "${workspaceFolder}/out/**/*.js"
+            ],
+            "sourceMaps": true,
+            "preLaunchTask": "compile",
             "console": "integratedTerminal",
             "internalConsoleOptions": "neverOpen",
             "env": {
@@ -110,7 +116,11 @@
                 "--mocha_config",
                 "${workspaceFolder}/test/ui/.mocharc.js"
             ],
-            "preLaunchTask": "npm: watch",
+            "outFiles": [
+                "${workspaceFolder}/out/**/*.js"
+            ],
+            "sourceMaps": true,
+            "preLaunchTask": "compile",
             "console": "integratedTerminal",
             "internalConsoleOptions": "neverOpen"
         },
@@ -123,12 +133,12 @@
             "trace": true
         },
         {
-              "type": "pwa-chrome",
-              "request": "launch",
-              "name": "Launch 'Devfile Registry viewer' in Chrome",
-              "file": "${workspaceFolder}/out/devFileRegistryViewer/index.html",
-              "webRoot": "${workspaceFolder}",
-              "trace": true
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch 'Devfile Registry viewer' in Chrome",
+            "file": "${workspaceFolder}/out/devFileRegistryViewer/index.html",
+            "webRoot": "${workspaceFolder}",
+            "trace": true
         }
     ]
 }

.vscode/tasks.json

@@ -4,24 +4,13 @@
     "version": "2.0.0",
     "tasks": [
         {
+            "label": "compile",
             "type": "npm",
-            "script": "watch",
-            "problemMatcher": "$tsc-watch",
-            "isBackground": true,
+            "script": "compile",
+            "problemMatcher": "$tsc",
             "presentation": {
-                "reveal": "never"
+                "reveal": "silent",
             },
-            "group": {
-                "kind": "build",
-                "isDefault": true
-            }
-        },
-        {
-            "label": "compile",
-            "type": "typescript",
-            "problemMatcher": "$tsc",
-            "group": "build",
-            "tsconfig": "tsconfig.json"
         },
         {
             "label": "instrument",

CONTRIBUTING.md

@@ -29,17 +29,10 @@ There are only a few guidelines that we need contributors to follow.
    $ npm run build
    ```
 
-   * This downloads the `oc` and `odo` binaries and compiles webviews.
+   * This downloads the `oc` and `odo` binaries and compiles the code.
 2. The extension can now be launched with the `Extension` launch option in the Run and Debug tab (`Ctrl+Shift+D`) in VS Code.
    * Note: breakpoints in webview code will not work
 3. After making any changes, consider the following before relaunching the extension to ensure the changes are recompiled:
-   * Changes made to webviews in `src/webview/$WEBVIEW_NAME/app` can be compiled with the corresponding command:
-
-      ```bash
-      $ npm run dev:compile:$WEBVIEW_NAME
-      ```
-
-     * The list of commands to build the webviews can be found in `package.json` or by running `npm run`
    * Changes in version of one of the required tools in `src/tools.json`, run:
 
       ```bash

build/esbuild.mjs

@@ -0,0 +1,48 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+import * as esbuild from 'esbuild';
+import { sassPlugin } from 'esbuild-sass-plugin';
+import * as fs from 'fs/promises';
+
+const webviews = [
+    'cluster',
+    'create-service',
+    'describe',
+    'devfile-registry',
+    'git-import',
+    'helm-chart',
+    'log',
+    'welcome',
+];
+
+function kebabToCamel(text) {
+    return text.replace(/-./g, searchResult => searchResult.substring(1).toUpperCase());
+}
+
+await Promise.all([
+    ...webviews.map(webview =>
+        esbuild.build({
+            entryPoints: [
+                `./src/webview/${webview}/app/index.tsx`,
+            ],
+            bundle: true,
+            outfile: `./out/${kebabToCamel(webview)}Viewer/index.js`,
+            platform: 'browser',
+            target: 'chrome108',
+            sourcemap: true,
+            loader: {
+                '.png': 'file',
+                '.svg': 'file',
+            },
+            plugins: [
+                sassPlugin(),
+            ]
+        })
+    ),
+    ...webviews.map(webview =>
+        fs.cp(`./src/webview/${webview}/app/index.html`, `./out/${kebabToCamel(webview)}Viewer/index.html`)
+    ),
+]);