build.js: esbuild-wasm, build duration, fix sourcemap

build.js

@@ -1,19 +1,23 @@
 #!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
+
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
 
 import copy from 'esbuild-plugin-copy';
-import esbuild from "esbuild";
+import { replace } from 'esbuild-plugin-replace';
 
 import { cockpitCompressPlugin } from './pkg/lib/esbuild-compress-plugin.js';
 import { cockpitPoEsbuildPlugin } from './pkg/lib/cockpit-po-plugin.js';
 import { cockpitRsyncEsbuildPlugin } from './pkg/lib/cockpit-rsync-plugin.js';
 import { cleanPlugin } from './pkg/lib/esbuild-cleanup-plugin.js';
 import { eslintPlugin } from './pkg/lib/esbuild-eslint-plugin.js';
 import { stylelintPlugin } from './pkg/lib/esbuild-stylelint-plugin.js';
-import { replace } from 'esbuild-plugin-replace';
 import { esbuildStylesPlugins } from './pkg/lib/esbuild-common.js';
 
+const useWasm = os.arch() !== 'x64';
+const esbuild = (await import(useWasm ? 'esbuild-wasm' : 'esbuild'));
+
 const production = process.env.NODE_ENV === 'production';
 const watchMode = process.env.ESBUILD_WATCH === "true" || false;
 // linters dominate the build time, so disable them for production builds by default, but enable in watch mode
@@ -25,8 +29,24 @@ const outdir = 'dist';
 // Obtain package name from package.json
 const packageJson = JSON.parse(fs.readFileSync('package.json'));
 
-const getTime = () => new Date().toTimeString()
-        .split(' ')[0];
+function notifyEndPlugin() {
+    return {
+        name: 'notify-end',
+        setup(build) {
+            let startTime;
+
+            build.onStart(() => {
+                startTime = new Date();
+            });
+
+            build.onEnd(() => {
+                const endTime = new Date();
+                const timeStamp = endTime.toTimeString().split(' ')[0];
+                console.log(`${timeStamp}: Build finished in ${endTime - startTime} ms`);
+            });
+        }
+    };
+}
 
 const cwd = process.cwd();
 
@@ -54,7 +74,7 @@ function watch_dirs(dir, on_change) {
 }
 
 const context = await esbuild.context({
-    ...!production ? { sourcemap: "external" } : {},
+    ...!production ? { sourcemap: "linked" } : {},
     bundle: true,
     entryPoints: ["./src/index.js"],
     external: ['*.woff', '*.woff2', '*.jpg', '*.svg', '../../assets*'], // Allow external font files which live in ../../static/fonts
@@ -98,12 +118,7 @@ const context = await esbuild.context({
         ...production ? [cockpitCompressPlugin()] : [],
         cockpitRsyncEsbuildPlugin({ dest: packageJson.name }),
 
-        {
-            name: 'notify-end',
-            setup(build) {
-                build.onEnd(() => console.log(`${getTime()}: Build finished`));
-            }
-        },
+        notifyEndPlugin(),
     ]
 });
 

package.json

@@ -18,10 +18,11 @@
     "argparse": "^2.0.1",
     "buffer": "^6.0.3",
     "chrome-remote-interface": "^0.32.1",
-    "esbuild": "0.17.10",
+    "esbuild": "^0.17.16",
     "esbuild-plugin-copy": "^2.0.2",
     "esbuild-plugin-replace": "^1.3.0",
     "esbuild-sass-plugin": "2.6.0",
+    "esbuild-wasm": "^0.17.16",
     "eslint": "^8.29.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-config-standard-jsx": "^11.0.0",