Switch from webpack to esbuild for bundling webviews

.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`)
+    ),
+]);