diff --git a/package.json b/package.json index 4dd40397..b3baa3ea 100644 --- a/package.json +++ b/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", diff --git a/src/ros/ros1/core-helper.ts b/src/ros/ros1/core-helper.ts index 2628fe2e..11ecb519 100644 --- a/src/ros/ros1/core-helper.ts +++ b/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); diff --git a/src/ros/ros1/core-monitor/main.ts b/src/ros/ros1/webview/ros1_webview_main.ts similarity index 96% rename from src/ros/ros1/core-monitor/main.ts rename to src/ros/ros1/webview/ros1_webview_main.ts index 2c8aac27..45893d9e 100644 --- a/src/ros/ros1/core-monitor/main.ts +++ b/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"; } }); diff --git a/src/ros/ros2/ros2-monitor.ts b/src/ros/ros2/ros2-monitor.ts index e09e7242..19d95289 100644 --- a/src/ros/ros2/ros2-monitor.ts +++ b/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); diff --git a/src/ros/ros2/webview/main.ts b/src/ros/ros2/webview/ros2_webview_main.ts similarity index 100% rename from src/ros/ros2/webview/main.ts rename to src/ros/ros2/webview/ros2_webview_main.ts diff --git a/webpack.config.js b/webpack.config.js index 646ccae2..2df93019 100644 --- a/webpack.config.js +++ b/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]; \ No newline at end of file