ui: Migrate build.js commonjs -> ESM and rename to build.mjs (#5848)

Migrate build.js commonjs -> ESM and rename to build.mjs

- Migrate build.js to use ESM imports rather than commonjs `require`.
- Rename to .mjs in order to get node.js to run it as an ESM module.
- s/build.js/build.mjs/g everywhere to update the state.

Author: stevegolton

ui/.prettierignore

@@ -6,6 +6,7 @@ src/test/diff_viewer
 out
 config
 build.js
+build.mjs
 eslint.config.js
 **/*.grammar.js
 **/*.grammar.terms.js

ui/BUILD.gn

@@ -45,11 +45,11 @@ action("ui_build") {
   outputs = [ "$target_out_dir/never_written_always_execute_rule.stamp" ]
   inputs = [
     "../tools/node",
-    "build.js",
+    "build.mjs",
   ]
   args = [
     nodejs_bin,
-    rebase_path("build.js", root_build_dir),
+    rebase_path("build.mjs", root_build_dir),
     "--out",
     ".",
   ]

ui/build

@@ -15,4 +15,4 @@
 
 UI_DIR="$(cd -P ${BASH_SOURCE[0]%/*}; pwd)"
 
-$UI_DIR/node $UI_DIR/build.js "$@"
+$UI_DIR/node $UI_DIR/build.mjs "$@"

ui/build.js ui/build.mjsui/build.js renamed to ui/build.mjs

@@ -12,9 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-'use strict';
-
-
 // This script takes care of:
 // - The build process for the whole UI and the chrome extension.
 // - The HTTP dev-server with live-reload capabilities.
@@ -65,14 +62,18 @@
 // +----------------------+   | +----------+             +--------------------+|
 //                            +------------------------------------------------+
 
-const argparse = require('argparse');
-const childProcess = require('child_process');
-const crypto = require('crypto');
-const fs = require('fs');
-const http = require('http');
-const path = require('path');
-const zlib = require('zlib');
+import argparse from 'argparse';
+import childProcess from 'node:child_process';
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import http from 'node:http';
+import path from 'node:path';
+import zlib from 'node:zlib';
+import {fileURLToPath} from 'node:url';
+
 const pjoin = path.join;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const ROOT_DIR = path.dirname(__dirname);  // The repo root.
 const VERSION_SCRIPT = pjoin(ROOT_DIR, 'tools/write_version_header.py');
@@ -1213,7 +1214,7 @@ function prepareBuildLock() {
       running = false;
     }
     if (running) {
-      console.error(`Error: a build.js instance is already running (${cfg.lockFile} PID=${oldPid}).`);
+      console.error(`Error: a build.mjs instance is already running (${cfg.lockFile} PID=${oldPid}).`);
       console.error('Hint: use --no-build (-n) to skip the build and avoid the lock.');
       process.exit(1);
     } else {

ui/package.json

@@ -82,8 +82,8 @@
     "typescript": "5.5.2"
   },
   "scripts": {
-    "build": "node build.js",
-    "test": "node build.js --run-unittests",
+    "build": "node build.mjs",
+    "test": "node build.mjs --run-unittests",
     "lint": "npx eslint . --ext .js,.ts"
   }
 }

ui/run-all-tests

@@ -15,6 +15,6 @@
 
 UI_DIR="$(cd -P ${BASH_SOURCE[0]%/*}; pwd)"
 
-$UI_DIR/node $UI_DIR/build.js --only-wasm-memory64 "$@"  # Build just once.
-$UI_DIR/node $UI_DIR/build.js --no-build --run-unittests "$@"
+$UI_DIR/node $UI_DIR/build.mjs --only-wasm-memory64 "$@"  # Build just once.
+$UI_DIR/node $UI_DIR/build.mjs --no-build --run-unittests "$@"
 $UI_DIR/run-integrationtests --no-build "$@"

ui/run-dev-server

@@ -14,4 +14,4 @@
 # limitations under the License.
 
 UI_DIR="$(cd -P ${BASH_SOURCE[0]%/*}; pwd)"
-$UI_DIR/node $UI_DIR/build.js --only-wasm-memory64 --serve --watch "$@"
+$UI_DIR/node $UI_DIR/build.mjs --only-wasm-memory64 --serve --watch "$@"

ui/run-unittests

@@ -14,4 +14,4 @@
 # limitations under the License.
 
 UI_DIR="$(cd -P ${BASH_SOURCE[0]%/*}; pwd)"
-$UI_DIR/node $UI_DIR/build.js --only-wasm-memory64 --run-unittests "$@"
+$UI_DIR/node $UI_DIR/build.mjs --only-wasm-memory64 --run-unittests "$@"

ui/src/engine/wasm_bridge.ts

@@ -20,7 +20,7 @@ import {assertExists, assertTrue} from '../base/assert';
 import TraceProcessor64 from '../gen/trace_processor_memory64';
 
 // The 32-bit variant may or may not be part of the build, depending on whether
-// the user passes --only-wasm-memory64 to ui/build.js. When we are building
+// the user passes --only-wasm-memory64 to ui/build.mjs. When we are building
 // also the 32-bit (e.g., in production builds) the import below will be
 // redirected by rollup to '../gen/trace_processor' (The 32-bit module).
 import TraceProcessor32 from './trace_processor_32_stub';