Switch from Weback to ESbuild

 - move styles into src and use imports to include
 - add manual shim for Buffer
 - update CI checks to use tsc for typechecking
 - clean up vscodeignore

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Build
         run: |
           yarn install --ignore-scripts
-          yarn build
+          yarn check
           yarn package
       - uses: actions/upload-artifact@v3
         with:

.vscodeignore

@@ -1,8 +1,11 @@
-.github
-.vscode
-src
-*.vsix
-dist/**/*.js.map
-node_modules
-!node_modules/@vscode/codicons/dist/codicon.css
-!node_modules/@vscode/codicons/dist/codicon.ttf
+# Exclude everything
+*
+*/
+
+# Include the following:
+!dist/
+!media/
+!package.json
+!CHANGELOG.md
+!README.md
+!LICENSE.md

esbuild.js

@@ -0,0 +1,65 @@
+// @ts-check
+const esbuild = require('esbuild');
+const path = require('path');
+
+const watch = process.argv.includes('--watch') || process.argv.includes('-w');
+const dev = watch || process.argv.includes('--dev') || process.argv.includes('-d');
+
+const defaults = {
+    bundle: true,
+    minify: !dev,
+    sourcemap: !dev,
+    external: ['vscode']
+}
+
+const srcDir = path.join(__dirname, 'src');
+const distDir = path.join(__dirname, 'dist');
+
+/** @type {import('esbuild').BuildOptions} */
+const desktopPluginConfig = {
+    ...defaults,
+    entryPoints: [path.join(srcDir, 'entry-points', 'desktop', 'extension.ts')],
+    outdir: path.join(distDir, 'desktop'),
+    format: 'cjs',
+    platform: 'node',
+    target: ['es2020'],
+}
+
+/** @type {import('esbuild').BuildOptions} */
+const browserPluginConfig = {
+    ...defaults,
+    entryPoints: [path.join(srcDir, 'entry-points', 'browser', 'extension.ts')],
+    outdir: path.join(distDir, 'browser'),
+    format: 'cjs',
+    platform: 'neutral',
+    mainFields: ['main', 'module'],
+    target: ['es2020'],
+}
+
+/** @type {import('esbuild').BuildOptions} */
+const webviewConfig = {
+    ...defaults,
+    entryPoints: [path.join(srcDir, 'webview', 'memory-webview-view.tsx')],
+    inject: [path.join(srcDir, 'webview', 'buffer-shim.js')],
+    outfile: path.join(distDir, 'views', 'memory.js'),
+    format: 'esm',
+    platform: 'browser',
+    target: ['es2020'],
+    loader: { ".ttf": "copy" },
+}
+
+const allConfigs = [
+    desktopPluginConfig,
+    browserPluginConfig,
+    webviewConfig
+];
+
+async function main() {
+    if (watch) {
+        await Promise.all(allConfigs.map(config => esbuild.context(config).then(context => context.watch())));
+    } else {
+        await Promise.all(allConfigs.map(config => esbuild.build(config)));
+    }
+}
+
+main();

package.json

@@ -22,11 +22,14 @@
     "debug"
   ],
   "scripts": {
+    "vscode:prepublish": "yarn build",
     "prepare": "yarn build",
     "clean": "git clean -f -x ./node_modules ./dist",
-    "build": "webpack --mode production && yarn lint",
-    "watch": "webpack -w",
+    "build": "node esbuild.js",
+    "watch": "node esbuild.js -w",
     "lint": "eslint . --ext .ts,.tsx",
+    "types": "tsc --noEmit -p ./",
+    "check": "yarn types && yarn lint",
     "package": "vsce package --yarn",
     "serve": "serve --cors -p 3333"
   },
@@ -58,20 +61,16 @@
     "@typescript-eslint/parser": "^5.45.0",
     "@vscode/debugprotocol": "^1.55.0",
     "@vscode/vsce": "^2.15.0",
-    "css-loader": "^6.9.0",
+    "esbuild": "^0.20.2",
     "eslint": "^8.29.0",
     "eslint-plugin-deprecation": "^1.3.3",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-no-unsanitized": "^4.0.2",
     "eslint-plugin-react": "^7.31.11",
     "serve": "^14.1.2",
-    "style-loader": "^3.3.4",
-    "ts-loader": "^9.4.2",
     "tslint": "^6.1.3",
-    "typescript": "^4.9.3",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0"
+    "typescript": "^4.9.3"
   },
   "contributes": {
     "commands": [

src/plugin/memory-webview-main.ts

@@ -142,13 +142,11 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
 
     public async show(initialMemory?: MemoryOptions, panel?: vscode.WebviewPanel): Promise<void> {
         const distPathUri = vscode.Uri.joinPath(this.extensionUri, 'dist', 'views');
-        const mediaPathUri = vscode.Uri.joinPath(this.extensionUri, 'media');
-        const codiconPathUri = vscode.Uri.joinPath(this.extensionUri, 'node_modules', '@vscode', 'codicons', 'dist');
 
         const options = {
             retainContextWhenHidden: true,
             enableScripts: true,                            // enable scripts in the webview
-            localResourceRoots: [distPathUri, mediaPathUri, codiconPathUri] // restrict extension's local file access
+            localResourceRoots: [distPathUri] // restrict extension's local file access
         };
 
         if (!panel) {
@@ -171,16 +169,10 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
     }
 
     protected async getWebviewContent(panel: vscode.WebviewPanel): Promise<void> {
-        const mainUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(
-            this.extensionUri,
-            'dist',
-            'views',
-            'memory.js'
-        ));
+        const scriptUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'dist', 'views', 'memory.js'));
+        const styleUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'dist', 'views', 'memory.css'));
 
         const cspSrc = panel.webview.cspSource;
-        const codiconsUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'node_modules', '@vscode/codicons', 'dist', 'codicon.css'));
-        const memoryInspectorCSS = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'media', 'index.css'));
 
         panel.webview.html = `
             <!DOCTYPE html>
@@ -189,9 +181,8 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
                     <meta charset='UTF-8'>
                     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                     <meta http-equiv='Content-Security-Policy' content="default-src 'none'; font-src ${cspSrc}; style-src ${cspSrc} 'unsafe-inline'; script-src ${cspSrc};">
-                    <script type='module' src='${mainUri}'></script>
-                    <link href="${codiconsUri}" rel="stylesheet" />
-                    <link href="${memoryInspectorCSS}" rel="stylesheet" />
+                    <script type='module' src='${scriptUri}'></script>
+                    <link href="${styleUri}" rel="stylesheet" />
                 </head>
                 <body>
                     <div id='root'></div>

src/webview/buffer-shim.js

@@ -0,0 +1 @@
+export const Buffer = require('buffer').Buffer;

src/webview/memory-webview-view.tsx

@@ -15,6 +15,8 @@
  ********************************************************************************/
 
 import 'primeflex/primeflex.css';
+import '../style/index.css';
+import '@vscode/codicons/dist/codicon.css';
 import { debounce } from 'lodash';
 import { PrimeReactProvider } from 'primereact/api';
 import React from 'react';

tsconfig.json

@@ -11,9 +11,10 @@
         "lib": [
             "es2020",
             "dom"
-        ]
+        ],
+        "skipLibCheck": true
     },
     "include": [
         "src"
     ]
-}
+}