webpack update + loading prod files

estruyf · Sep 19, 2024 · b9508df · b9508df
1 parent 0110b73
commit b9508df
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2853,6 +2853,7 @@
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "17.0.0",
     "@types/vscode": "^1.90.0",
+    "@types/webpack-bundle-analyzer": "^4.7.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "@vscode/l10n": "^0.0.14",
@@ -2917,13 +2918,14 @@
     "uniforms-bridge-json-schema": "^3.10.2",
     "uniforms-unstyled": "^3.10.2",
     "url-join-ts": "^1.0.5",
-    "vscrui": "^0.1.0-beta.1092162",
+    "vscrui": "^0.1.0-beta.1093954",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
     "webpack-ignore-dynamic-require": "^1.0.0",
+    "webpack-manifest-plugin": "^5.0.0",
     "yaml": "^2.2.1",
     "yawn-yaml": "^1.5.0"
   },

diff --git a/src/commands/Chatbot.ts b/src/commands/Chatbot.ts
@@ -6,6 +6,7 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { getLocalizationFile } from '../utils/getLocalizationFile';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
+import { getWebviewJsFiles } from '../utils';
 
 export class Chatbot {
   /**
@@ -56,7 +57,7 @@ export class Chatbot {
       }
     });
 
-    const dashboardFile = 'dashboardWebView.js';
+    const webviewFile = 'dashboard.main.js';
     const localPort = `9000`;
     const localServerUrl = `localhost:${localPort}`;
 
@@ -66,7 +67,6 @@ export class Chatbot {
     const isProd = ext.isProductionMode;
     const version = ext.getVersion();
     const isBeta = ext.isBetaVersion();
-    const extensionUri = ext.extensionPath;
 
     const csp = [
       `default-src 'none';`,
@@ -82,13 +82,11 @@ export class Chatbot {
       }`
     ];
 
-    let scriptUri = '';
+    let scriptUris = [];
     if (isProd) {
-      scriptUri = webView.webview
-        .asWebviewUri(Uri.joinPath(extensionUri, 'dist', dashboardFile))
-        .toString();
+      scriptUris = await getWebviewJsFiles('dashboard', webView.webview);
     } else {
-      scriptUri = `http://${localServerUrl}/${dashboardFile}`;
+      scriptUris.push(`http://${localServerUrl}/${webviewFile}`);
     }
 
     // By default, the chatbot is seen as experimental
@@ -111,7 +109,11 @@ export class Chatbot {
       experimental ? `data-experimental="${experimental}"` : ''
     } style="width:100%;height:100%;margin:0;padding:0;"></div>
 
-          <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
+          ${scriptUris
+            .map((uri) => `<script ${isProd ? `nonce="${nonce}"` : ''} src="${uri}"></script>`)
+            .join('\n')}
+
+          <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`chatbot-${version.installedVersion}`}" alt="Daily usage" />
         </body>
       </html>
     `;

diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts
@@ -30,7 +30,7 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
 import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
 import { NavigationType } from '../dashboardWebView/models';
-import { getExtensibilityScripts, ignoreMsgCommand } from '../utils';
+import { getExtensibilityScripts, getWebviewJsFiles, ignoreMsgCommand } from '../utils';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -274,18 +274,17 @@ export class Dashboard {
    * @param webView
    */
   private static async getWebviewContent(webView: Webview, extensionPath: Uri): Promise<string> {
-    const dashboardFile = 'dashboardWebView.js';
+    const webviewFile = 'dashboard.main.js';
     const localPort = `9000`;
     const localServerUrl = `localhost:${localPort}`;
 
-    let scriptUri = '';
     const isProd = Extension.getInstance().isProductionMode;
+
+    let scriptUris = [];
     if (isProd) {
-      scriptUri = webView
-        .asWebviewUri(Uri.joinPath(extensionPath, 'dist', dashboardFile))
-        .toString();
+      scriptUris = await getWebviewJsFiles('dashboard', webView);
     } else {
-      scriptUri = `http://${localServerUrl}/${dashboardFile}`;
+      scriptUris.push(`http://${localServerUrl}/${webviewFile}`);
     }
 
     const nonce = WebviewHelper.getNonce();
@@ -351,7 +350,9 @@ export class Dashboard {
           })
           .join('')}
           
-        <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
+          ${scriptUris
+            .map((uri) => `<script ${isProd ? `nonce="${nonce}"` : ''} src="${uri}"></script>`)
+            .join('\n')}
 
         <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
       </body>

diff --git a/src/commands/Preview.ts b/src/commands/Preview.ts
@@ -29,7 +29,7 @@ import { ParsedFrontMatter } from '../parsers';
 import { getLocalizationFile } from '../utils/getLocalizationFile';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
-import { getTitleField, joinUrl } from '../utils';
+import { getTitleField, getWebviewJsFiles, joinUrl } from '../utils';
 import { i18n } from './i18n';
 
 export class Preview {
@@ -134,7 +134,7 @@ export class Preview {
       }
     });
 
-    const dashboardFile = 'dashboardWebView.js';
+    const webviewFile = 'dashboard.main.js';
     const localPort = `9000`;
     const localServerUrl = `localhost:${localPort}`;
 
@@ -144,7 +144,6 @@ export class Preview {
     const isProd = ext.isProductionMode;
     const version = ext.getVersion();
     const isBeta = ext.isBetaVersion();
-    const extensionUri = ext.extensionPath;
 
     const csp = [
       `default-src 'none';`,
@@ -161,13 +160,11 @@ export class Preview {
       `frame-src ${localhostUrl} ${cspSource} http: https:;`
     ];
 
-    let scriptUri = '';
+    let scriptUris = [];
     if (isProd) {
-      scriptUri = webView.webview
-        .asWebviewUri(Uri.joinPath(extensionUri, 'dist', dashboardFile))
-        .toString();
+      scriptUris = await getWebviewJsFiles('dashboard', webView.webview);
     } else {
-      scriptUri = `http://${localServerUrl}/${dashboardFile}`;
+      scriptUris.push(`http://${localServerUrl}/${webviewFile}`);
     }
 
     // Get experimental setting
@@ -193,7 +190,11 @@ export class Preview {
       experimental ? `data-experimental="${experimental}"` : ''
     } style="width:100%;height:100%;margin:0;padding:0;"></div>
 
-          <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
+        ${scriptUris
+          .map((uri) => `<script ${isProd ? `nonce="${nonce}"` : ''} src="${uri}"></script>`)
+          .join('\n')}
+
+          <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`preview-${version.installedVersion}`}" alt="Daily usage" />
         </body>
       </html>
     `;

diff --git a/src/panelWebView/PanelProvider.ts b/src/panelWebView/PanelProvider.ts
@@ -28,7 +28,7 @@ import { Extension } from '../helpers/Extension';
 import { Telemetry } from '../helpers/Telemetry';
 import { GitListener, ModeListener } from '../listeners/general';
 import { basename } from 'path';
-import { getExtensibilityScripts, ignoreMsgCommand } from '../utils';
+import { getExtensibilityScripts, getWebviewJsFiles, ignoreMsgCommand } from '../utils';
 
 export class PanelProvider implements WebviewViewProvider, Disposable {
   public static readonly viewType = 'frontMatter.explorer';
@@ -89,7 +89,7 @@ export class PanelProvider implements WebviewViewProvider, Disposable {
       enableCommandUris: true
     };
 
-    webviewView.webview.html = this.getWebviewContent(webviewView.webview);
+    webviewView.webview.html = await this.getWebviewContent(webviewView.webview);
 
     this.disposable = Disposable.from(
       webviewView.onDidDispose(() => {
@@ -206,12 +206,11 @@ export class PanelProvider implements WebviewViewProvider, Disposable {
    * Retrieve the webview HTML contents
    * @param webView
    */
-  private getWebviewContent(webView: Webview): string {
+  private async getWebviewContent(webView: Webview): Promise<string> {
     const ext = Extension.getInstance();
-    const dashboardFile = 'panelWebView.js';
+    const webviewFile = 'panel.main.js';
     const localPort = `9001`;
     const localServerUrl = `localhost:${localPort}`;
-    const extensionPath = ext.extensionPath;
 
     const styleVSCodeUri = webView.asWebviewUri(
       Uri.joinPath(this.extPath, 'assets/media', 'vscode.css')
@@ -228,14 +227,12 @@ export class PanelProvider implements WebviewViewProvider, Disposable {
     const version = ext.getVersion();
     const isBeta = ext.isBetaVersion();
 
-    let scriptUri = '';
     const isProd = Extension.getInstance().isProductionMode;
+    let scriptUris = [];
     if (isProd) {
-      scriptUri = webView
-        .asWebviewUri(Uri.joinPath(extensionPath, 'dist', dashboardFile))
-        .toString();
+      scriptUris = await getWebviewJsFiles('panel', webView);
     } else {
-      scriptUri = `http://${localServerUrl}/${dashboardFile}`;
+      scriptUris.push(`http://${localServerUrl}/${webviewFile}`);
     }
 
     // Get experimental setting
@@ -252,7 +249,7 @@ export class PanelProvider implements WebviewViewProvider, Disposable {
         isProd ? `'nonce-${nonce}'` : `http://${localServerUrl} http://0.0.0.0:${localPort}`
       }`,
       `style-src ${webView.cspSource} 'self' 'unsafe-inline' https://*`,
-      `font-src ${webView.cspSource}`,
+      `font-src ${webView.cspSource} data:;`,
       `connect-src https://o1022172.ingest.sentry.io https://* ${
         isProd
           ? ``
@@ -285,7 +282,9 @@ export class PanelProvider implements WebviewViewProvider, Disposable {
         })
         .join('')}
 
-        <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
+        ${scriptUris
+          .map((uri) => `<script ${isProd ? `nonce="${nonce}"` : ''} src="${uri}"></script>`)
+          .join('\n')}
 
         <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`panel-${version.installedVersion}`}" alt="Daily usage" />
       </body>