Convert Web Dashboards to Webpack (#928)

package.json

@@ -428,6 +428,7 @@
     "dependencies": {
         "@vscode/debugadapter": "^1.59.0",
         "@vscode/extension-telemetry": "^0.6.2",
+        "@vscode/webview-ui-toolkit": "^1.2.2",
         "assert": "^2.0.0",
         "buffer": "^6.0.3",
         "console-browserify": "^1.2.0",

src/ros/ros1/core-helper.ts

@@ -51,7 +51,7 @@ export function launchMonitor(context: vscode.ExtensionContext) {
     );
 
     let stylesheet = panel.webview.asWebviewUri(vscode.Uri.file(path.join(context.extensionPath, "assets", "ros", "core-monitor", "style.css")));
-    let script = panel.webview.asWebviewUri(vscode.Uri.file(path.join(context.extensionPath, "out", "src", "ros", "ros1", "core-monitor", "main.js")));
+    let script = panel.webview.asWebviewUri(vscode.Uri.file(path.join(context.extensionPath, "dist", "ros1_webview_main.js")));
 
     panel.webview.html = getCoreStatusWebviewContent(stylesheet, script);
 

src/ros/ros1/core-monitor/main.ts → src/ros/ros1/webview/ros1_webview_main.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import * as extension from "../../../extension";
-
 function removeAllChildElements(e) {
     while (e.firstChild) {
         e.removeChild(e.firstChild);
@@ -132,7 +130,6 @@ function initializeCoreMonitor() {
         removeAllChildElements(servicesElement);
 
         if (message.status) {
-            extension.outputChannel.appendLine("ROS online");
             coreStatus.textContent = "online";
 
             let parameters = JSON.parse(message.parameters);
@@ -153,7 +150,6 @@ function initializeCoreMonitor() {
             servicesElement.appendChild(generateServicesTable(systemState.services));
         }
         else {
-            extension.outputChannel.appendLine("ROS offline");
             coreStatus.textContent = "offline";
         }
     });

src/ros/ros2/ros2-monitor.ts

@@ -33,7 +33,7 @@ export function launchMonitor(context: vscode.ExtensionContext) {
 
     const stylesheet = panel.webview.asWebviewUri(vscode.Uri.file(path.join(context.extensionPath, "assets", "ros", "core-monitor", "style.css")));
 
-    const script = panel.webview.asWebviewUri(vscode.Uri.file(path.join(context.extensionPath, "out", "src", "ros", "ros2", "webview", "main.js")));
+    const script = panel.webview.asWebviewUri(vscode.Uri.file(path.join(context.extensionPath, "dist", "ros2_webview_main.js")));
 
     panel.webview.html = getCoreStatusWebviewContent(stylesheet, script);
 

webpack.config.js

@@ -4,45 +4,83 @@
 
 const path = require('path');
 
-/**@type {import('webpack').Configuration}*/
-const config = {
-  target: 'node',
+/** @typedef {import('webpack').Configuration} WebpackConfig **/
 
-  entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
-  output: {
-    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'extension.js',
-    libraryTarget: 'commonjs2',
-    devtoolModuleFilenameTemplate: '../[resource-path]'
+/** @type WebpackConfig */
+const baseConfig = {
+  mode: "none", // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
+  externals: {
+    vscode: "commonjs vscode", // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
+    // modules added here also need to be added in the .vscodeignore file
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+  },
+  devtool: "source-map",
+  infrastructureLogging: {
+    level: "log", // enables logging required for problem matchers
   },
-  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [{ loader: "ts-loader" }],
+      },
+    ],
+  }
+};
+
+// Config for extension source code (to be run in a Node-based context)
+/** @type WebpackConfig */
+const extensionConfig = {
+  ...baseConfig,
+  target: "node",
+  entry: "./src/extension.ts",
   externals: {
     vscode: 'commonjs vscode', // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
     'applicationinsights-native-metrics': 'commonjs applicationinsights-native-metrics' // ignored because we don't ship native module
   },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "extension.js",
+    libraryTarget: "commonjs2",
+    devtoolModuleFilenameTemplate: '../[resource-path]'
+  },
+};
+
+/** @type WebpackConfig */
+const ros1_webview_config = {
+  ...baseConfig,
+  target: ["web", "es2022"],
+  entry: "./src/ros/ros1/webview/ros1_webview_main.ts",
+  experiments: { outputModule: true, topLevelAwait: true },
   resolve: {
-    extensions: ['.ts', '.js'],
-//    preferRelative: true,
-    fallback: {
-      // Webpack 5 no longer polyfills Node.js core modules automatically.
-      // see https://webpack.js.org/configuration/resolve/#resolvefallback
-      // for the list of Node.js core module polyfills.
-    }  },
-    module: {
-      rules: [{
-        test: /\.ts$/,
-        exclude: /node_modules/,
-        use: [{
-            loader: 'ts-loader',
-            options: {
-                compilerOptions: {
-                    "module": "es6" // override `tsconfig.json` so that TypeScript emits native JavaScript modules.
-                }
-            }
-        }]
-      }]
-    },
+    extensions: [".ts", ".tsx", ".js"],
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "ros1_webview_main.js",
+    libraryTarget: "module",
+    chunkFormat: "module",
+  },
+};
+
+/** @type WebpackConfig */
+const ros2_webview_config = {
+  ...baseConfig,
+  target: ["web", "es2022"],
+  entry: "./src/ros/ros2/webview/ros2_webview_main.ts",
+  experiments: { outputModule: true, topLevelAwait: true },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "ros2_webview_main.js",
+    libraryTarget: "module",
+    chunkFormat: "module",
+  },
 };
 
-module.exports = config;
+module.exports = [extensionConfig, ros1_webview_config, ros2_webview_config];