Bundle Codicons using Webpack

This will include the Codicons inside the webview bundle, reducing the number of files that need to be loaded and the resource roots that need to be included.
2022-08-29 14:31:29 +02:00
parent de6c523bad
commit 3749e17769
6 changed files with 125 additions and 18 deletions
--- a/extensions/ql-vscode/gulpfile.ts/webpack.config.ts
+++ b/extensions/ql-vscode/gulpfile.ts/webpack.config.ts
@@ -55,6 +55,19 @@ export const config: webpack.Configuration = {
            loader: 'css-loader'
          }
        ]
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+              esModule: false
+            }
+          },
+        ],
      }
    ]
  },
--- a/extensions/ql-vscode/package-lock.json
+++ b/extensions/ql-vscode/package-lock.json
@@ -93,6 +93,7 @@
        "del": "^6.0.0",
        "eslint": "~6.8.0",
        "eslint-plugin-react": "~7.19.0",
+        "file-loader": "^6.2.0",
        "glob": "^7.1.4",
        "gulp": "^4.0.2",
        "gulp-replace": "^1.1.3",
@@ -6251,6 +6252,70 @@
        "node": ">=4"
      }
    },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/json5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/file-loader/node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
    "node_modules/file-uri-to-path": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -19772,6 +19837,46 @@
        "flat-cache": "^2.0.1"
      }
    },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
    "file-uri-to-path": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
--- a/extensions/ql-vscode/package.json
+++ b/extensions/ql-vscode/package.json
@@ -1282,6 +1282,7 @@
    "del": "^6.0.0",
    "eslint": "~6.8.0",
    "eslint-plugin-react": "~7.19.0",
+    "file-loader": "^6.2.0",
    "glob": "^7.1.4",
    "gulp": "^4.0.2",
    "gulp-replace": "^1.1.3",
--- a/extensions/ql-vscode/src/interface-utils.ts
+++ b/extensions/ql-vscode/src/interface-utils.ts
@@ -121,14 +121,11 @@ export function getHtmlForWebview(
  webview: Webview,
  view: 'results' | 'compare' | 'remote-queries',
  {
-    allowInlineStyles,
-    includeCodicons
+    allowInlineStyles
  }: {
    allowInlineStyles?: boolean;
-    includeCodicons?: boolean;
  } = {
-      allowInlineStyles: false,
-      includeCodicons: false
+      allowInlineStyles: false
    }
 ): string {
  const scriptUriOnDisk = Uri.file(
@@ -139,16 +136,6 @@ export function getHtmlForWebview(
    Uri.file(ctx.asAbsolutePath('out/webview.css'))
  ];

-  if (includeCodicons) {
-    // Allows use of the VS Code "codicons" icon set.
-    // See https://github.com/microsoft/vscode-codicons
-    const codiconsPathOnDisk = Uri.file(
-      ctx.asAbsolutePath('node_modules/@vscode/codicons/dist/codicon.css')
-    );
-
-    stylesheetUrisOnDisk.push(codiconsPathOnDisk);
-  }
-
  // Convert the on-disk URIs into webview URIs.
  const scriptWebviewUri = webview.asWebviewUri(scriptUriOnDisk);
  const stylesheetWebviewUris = stylesheetUrisOnDisk.map(stylesheetUriOnDisk =>
--- a/extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts
+++ b/extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts
@@ -116,8 +116,7 @@ export class RemoteQueriesInterfaceManager {
          retainContextWhenHidden: true,
          localResourceRoots: [
            Uri.file(this.analysesResultsManager.storagePath),
-            Uri.file(path.join(this.ctx.extensionPath, 'out')),
-            Uri.file(path.join(this.ctx.extensionPath, 'node_modules/@vscode/codicons/dist')),
+            Uri.file(path.join(this.ctx.extensionPath, 'out'))
          ],
        }
      ));
@@ -136,7 +135,6 @@ export class RemoteQueriesInterfaceManager {
        panel.webview,
        'remote-queries',
        {
-          includeCodicons: true,
          allowInlineStyles: true,
        }
      );
--- a/extensions/ql-vscode/src/view/webview.tsx
+++ b/extensions/ql-vscode/src/view/webview.tsx
@@ -3,6 +3,9 @@ import { vscode } from './vscode-api';

 import { WebviewDefinition } from './webview-interface';

+// Allow all views to use Codicons
+import '@vscode/codicons/dist/codicon.css';
+
 const render = () => {
  const element = document.getElementById('root');