Fix to webview-ui-toolkit with webpack

codefori · Jun 15, 2022 · 8961ea2 · 8961ea2
1 parent b66f82b
commit 8961ea2
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 47 deletions.
diff --git a/src/panels/procedure/index.js b/src/panels/procedure/index.js
@@ -1,4 +1,6 @@
 
+const WebToolkit = require(`@vscode/webview-ui-toolkit/dist/toolkit.min.js`);
+
 const vscode = require(`vscode`);
 const Tools = require(`../tools`);
 
@@ -45,14 +47,6 @@ module.exports = class ViewPanel {
   }
 
   async _getContent() {
-    const toolkitUri = Tools.getUri(this.panel.webview, this.extensionUri, [
-      `node_modules`,
-      `@vscode`,
-      `webview-ui-toolkit`,
-      `dist`,
-      `toolkit.js`,
-    ]);
-
     const proc = new Procedure(this.schema, this.procedure)
 
     Tools.setLoadingText(this.panel.webview, `Fetching base info`);
@@ -75,7 +69,7 @@ module.exports = class ViewPanel {
         <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <script type="module" src="${toolkitUri}"></script>
+          <script type="module">${WebToolkit}</script>
           <style type="text/css">
             .component {
               margin-bottom: 0.5rem;

diff --git a/src/panels/table/index.js b/src/panels/table/index.js
@@ -1,4 +1,6 @@
 
+const WebToolkit = require(`@vscode/webview-ui-toolkit/dist/toolkit.min.js`);
+
 const vscode = require(`vscode`);
 const Tools = require(`../tools`);
 
@@ -38,14 +40,6 @@ module.exports = class TablePanel {
   }
 
   async _getContent() {
-    const toolkitUri = Tools.getUri(this.panel.webview, this.extensionUri, [
-      `node_modules`,
-      `@vscode`,
-      `webview-ui-toolkit`,
-      `dist`,
-      `toolkit.js`,
-    ]);
-
     const table = new Table(this.schema, this.table);
 
     // TODO: each await should also send an update to the frontend loading screen (below)
@@ -105,7 +99,7 @@ module.exports = class TablePanel {
         <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <script type="module" src="${toolkitUri}"></script>
+          <script type="module">${WebToolkit}</script>
           <style type="text/css">
             .component {
               margin-bottom: 0.5rem;

diff --git a/src/panels/tools.js b/src/panels/tools.js
@@ -1,6 +1,8 @@
 
 const vscode = require(`vscode`);
 
+const WebToolkit = require(`@vscode/webview-ui-toolkit/dist/toolkit.min.js`);
+
 module.exports = class {
   /**
    * @param {vscode.Webview} webview 
@@ -19,21 +21,13 @@ module.exports = class {
   }
 
   static getLoadingHTML(webview, extensionUri) {
-    const toolkitUri = this.getUri(webview, extensionUri, [
-      `node_modules`,
-      `@vscode`,
-      `webview-ui-toolkit`,
-      `dist`,
-      `toolkit.js`,
-    ]);
-
     return /*html*/ `
       <!DOCTYPE html>
       <html lang="en">
         <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <script type="module" src="${toolkitUri}"></script>
+          <script type="module">${WebToolkit}</script>
           <script>
             window.addEventListener("message", (event) => {
               const command = event.data.command;

diff --git a/src/panels/trigger/index.js b/src/panels/trigger/index.js
@@ -1,4 +1,6 @@
 
+const WebToolkit = require(`@vscode/webview-ui-toolkit/dist/toolkit.min.js`);
+
 const vscode = require(`vscode`);
 const Tools = require(`../tools`);
 
@@ -44,14 +46,6 @@ module.exports = class ViewPanel {
   }
 
   async _getContent() {
-    const toolkitUri = Tools.getUri(this.panel.webview, this.extensionUri, [
-      `node_modules`,
-      `@vscode`,
-      `webview-ui-toolkit`,
-      `dist`,
-      `toolkit.js`,
-    ]);
-
     const trigger = new Trigger(this.schema, this.trigger);
 
     Tools.setLoadingText(this.panel.webview, `Fetching base info`);
@@ -65,7 +59,7 @@ module.exports = class ViewPanel {
         <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <script type="module" src="${toolkitUri}"></script>
+          <script type="module">${WebToolkit}</script>
           <style type="text/css">
             .component {
               margin-bottom: 0.5rem;

diff --git a/src/panels/view/index.js b/src/panels/view/index.js
@@ -1,4 +1,6 @@
 
+const WebToolkit = require(`@vscode/webview-ui-toolkit/dist/toolkit.min.js`);
+
 const vscode = require(`vscode`);
 const Tools = require(`../tools`);
 
@@ -45,14 +47,6 @@ module.exports = class ViewPanel {
   }
 
   async _getContent() {
-    const toolkitUri = Tools.getUri(this.panel.webview, this.extensionUri, [
-      `node_modules`,
-      `@vscode`,
-      `webview-ui-toolkit`,
-      `dist`,
-      `toolkit.js`,
-    ]);
-
     const view = new View(this.schema, this.view);
 
     Tools.setLoadingText(this.panel.webview, `Fetching base info`);
@@ -75,7 +69,7 @@ module.exports = class ViewPanel {
         <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <script type="module" src="${toolkitUri}"></script>
+          <script type="module">${WebToolkit}</script>
           <style type="text/css">
             .component {
               margin-bottom: 0.5rem;

diff --git a/webpack.config.js b/webpack.config.js
@@ -25,11 +25,10 @@ const config = {
     extensions: [`.ts`, `.js`, `.svg`],
   },
   module: {
-
     rules: [
       {
         test: /\.js$/,
-        include: path.resolve(__dirname, `node_modules/@bendera/vscode-webview-elements/dist`),
+        include: path.resolve(__dirname, `node_modules/@vscode/webview-ui-toolkit/dist/toolkit.min.js`),
         type: `asset/source`
       }
     ]