Migrate to esbuild

CONTRIBUTING.md

@@ -37,30 +37,21 @@ To get started clone the repo and get the web application started.
 1.  Run `git clone git@github.com:firefox-devtools/profiler.git`
 2.  Run `cd profiler`
 3.  Run `yarn install`, this will install all of the dependencies.
-4.  Run `yarn start`, this will start up the webpack server.
+4.  Run `yarn start`, this will start up the development server.
 5.  Point your browser to [http://localhost:4242](http://localhost:4242).
 6.  If port `4242` is taken, then you can run the web app on a different port: `FX_PROFILER_PORT=1234 yarn start`
 
-Other [webpack](https://webpack.js.org/configuration/) and [webpack server](https://webpack.js.org/configuration/dev-server/) options can be set in a `webpack.local-config.js` file at the repo root. For example, if you want to disable caching and the server to automatically open the home page, put in there the following code:
-
-```js
-module.exports = function (config, serverConfig) {
-  config.cache = false;
-  serverConfig.open = true;
-};
-```
-
 This project uses [TypeScript](https://www.typescriptlang.org/).
 
 ## Using GitHub Codespaces
 
 Alternatively, you can also develop the Firefox Profiler online in a pre-configured development environment using [GitHub Codespaces](https://github.com/features/codespaces).
 
-GitHub Codespaces will automatically install all dependencies, start the webpack server for you, and forward port 4242 so you can access the web app. Please look at our [GitHub Codespaces documentation](./docs-developer/codespaces.md) for more information.
+GitHub Codespaces will automatically install all dependencies, start the development server for you, and forward port 4242 so you can access the web app. Please look at our [GitHub Codespaces documentation](./docs-developer/codespaces.md) for more information.
 
 ## Loading in profiles for development
 
-The web app doesn't include any performance profiles by default, so you'll need to load some in. Make sure the local Webpack web server is running, and then try one of the following:
+The web app doesn't include any performance profiles by default, so you'll need to load some in. Make sure the local development server is running, and then try one of the following:
 
 #### 1. Record a profile:
 

__mocks__/gecko-profiler-demangle.ts

@@ -1,14 +1,14 @@
 // This module replaces the wasm-pack generated module 'gecko-profiler-demangle'
 // in our tests.
 // The reason for this replacement is the fact that wasm-pack (or rather,
-// wasm-bindgen), when targeting the browser + webpack, generates an ES6 module
+// wasm-bindgen), when targeting the browser + bundlers, generates an ES6 module
 // that node cannot deal with. Most importantly, it uses the syntax
 // "import * as wasm from './gecko_profiler_demangle_bg';" in order to load
-// the wasm module, which is currently only supported by webpack.
+// the wasm module, which is currently only supported by bundlers.
 // The long-term path to make this work correctly is to wait for node to
 // support ES6 modules (and WASM as ES6 modules) natively [1]. It's possible
 // that in the medium term, wasm-bindgen will get support for outputting JS
-// files which work in both webpack and in node natively [2].
+// files which work in both bundlers and in node natively [2].
 // [1] https://medium.com/@giltayar/native-es-modules-in-nodejs-status-and-future-directions-part-i-ee5ea3001f71
 // [2] https://github.com/rustwasm/wasm-bindgen/issues/233
 

netlify.toml

@@ -1,2 +1,2 @@
 [context.l10n]
-  command = "yarn build-l10n-prod:quiet"
+  command = "yarn build-l10n-prod"

package.json

@@ -13,18 +13,15 @@
     "./src/utils/gz.ts": "./src/utils/gz.browser.ts"
   },
   "scripts": {
-    "build:clean": "rimraf dist && mkdirp dist",
-    "build:quiet": "yarn build:clean && cross-env NODE_ENV=development webpack",
-    "build": "yarn build:quiet --progress",
-    "build-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production webpack && yarn build-sw",
-    "build-prod": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production webpack --progress && yarn build-sw",
-    "build-l10n": "yarn build:clean && cross-env NODE_ENV=development L10N=1 webpack --progress",
-    "build-l10n-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production L10N=1 webpack && yarn build-sw",
-    "build-l10n-prod": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production L10N=1 webpack --progress && yarn build-sw",
-    "build-photon": "webpack --config res/photon/webpack.config.js",
+    "build": "cross-env NODE_ENV=development node scripts/build.mjs",
+    "build-prod": "cross-env NODE_ENV=production node scripts/build.mjs && yarn build-sw && yarn build-photon",
+    "build-l10n": "cross-env NODE_ENV=development L10N=1 node scripts/build.mjs",
+    "build-l10n-prod": "cross-env NODE_ENV=production L10N=1 node scripts/build.mjs && yarn build-sw && yarn build-photon",
+    "build-photon": "cross-env NODE_ENV=production node scripts/build-photon.mjs",
     "build-sw": "workbox generateSW workbox-config.js",
-    "build-symbolicator-cli": "yarn build-symbolicator-cli:quiet --progress",
-    "build-symbolicator-cli:quiet": "yarn build:clean && cross-env NODE_ENV=production webpack --config src/symbolicator-cli/webpack.config.js",
+    "build-symbolicator-cli": "cross-env NODE_ENV=production node scripts/build-symbolicator.mjs",
+    "build-prod:quiet": "yarn build-prod",
+    "build-symbolicator-cli:quiet": "yarn build-symbolicator-cli",
     "lint": "node bin/output-fixing-commands.js run-p lint-js lint-css prettier-run",
     "lint-fix": "run-p lint-fix-js lint-fix-css prettier-fix",
     "lint-js": "node bin/output-fixing-commands.js eslint . --report-unused-disable-directives --cache --cache-strategy content",
@@ -39,13 +36,13 @@
     "preinstall": "node bin/pre-install.js",
     "publish": "rimraf public_html && cp -r dist public_html",
     "serve-static": "ws -d dist/ -s index.html -p 4243",
-    "start": "yarn build:clean && cross-env NODE_ENV=development node server.js",
+    "start": "cross-env NODE_ENV=development node scripts/run-dev-server.mjs",
     "start-prod": "yarn build-prod && yarn serve-static",
-    "start-l10n": "yarn build:clean && cross-env NODE_ENV=development L10N=1 node server.js",
+    "start-l10n": "cross-env NODE_ENV=development L10N=1 node scripts/run-dev-server.mjs",
     "start-l10n-prod": "yarn build-l10n-prod && yarn serve-static",
     "start-examples": "ws -d examples/ -s index.html -p 4244",
     "start-docs": "ws -d docs-user/ -p 3000",
-    "start-photon": "node res/photon/server",
+    "start-photon": "node scripts/run-photon-dev-server.mjs",
     "test": "node bin/output-fixing-commands.js cross-env LC_ALL=C TZ=UTC NODE_ENV=test jest",
     "test-node": "node bin/output-fixing-commands.js cross-env LC_ALL=C TZ=UTC NODE_ENV=test JEST_ENVIRONMENT=node jest",
     "test-all": "run-p --max-parallel 4 ts license-check lint test test-alex test-lockfile",
@@ -140,18 +137,15 @@
     "@typescript-eslint/eslint-plugin": "^8.51.0",
     "@typescript-eslint/parser": "^8.51.0",
     "alex": "^11.0.1",
-    "autoprefixer": "^10.4.23",
     "babel-jest": "^30.2.0",
-    "babel-loader": "^10.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "browserslist": "^4.28.1",
     "caniuse-lite": "^1.0.30001762",
-    "circular-dependency-plugin": "^5.2.1",
-    "copy-webpack-plugin": "^13.0.1",
     "cross-env": "^10.1.0",
-    "css-loader": "^7.1.2",
-    "cssnano": "^7.1.2",
     "devtools-license-check": "^0.9.0",
+    "esbuild": "^0.27.0",
+    "esbuild-plugin-copy": "^2.1.1",
+    "esbuild-plugin-wasm": "^1.1.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -163,34 +157,26 @@
     "eslint-plugin-testing-library": "^7.15.4",
     "fake-indexeddb": "^6.2.5",
     "fetch-mock": "^12.6.0",
-    "file-loader": "^6.2.0",
     "globals": "^17.0.0",
-    "html-webpack-plugin": "^5.6.6",
     "husky": "^4.3.8",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-extended": "^7.0.0",
-    "json-loader": "^0.5.7",
     "local-web-server": "^5.4.0",
     "lockfile-lint": "^5.0.0",
     "mkdirp": "^3.0.1",
     "npm-run-all2": "^8.0.4",
     "open": "^11.0.0",
     "patch-package": "^8.0.1",
     "postcss": "^8.5.6",
-    "postcss-loader": "^8.2.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.8.1",
     "rimraf": "^6.1.2",
-    "style-loader": "^4.0.0",
     "stylelint": "^17.0.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^40.0.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
-    "webpack": "^5.104.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.3",
     "workbox-cli": "^7.4.0",
     "yargs": "^18.0.0"
   },

res/index.html

@@ -21,6 +21,7 @@
         background-color: var(--body-background-color);
       }
     </style>
+    <link rel="icon" type="image/png" href="/res/img/favicon.png" />
   </head>
   <body>
     <svg id="svg-filters"></svg>

scripts/build-photon.mjs

@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+import esbuild from 'esbuild';
+import { photonConfig } from './lib/esbuild-configs.mjs';
+
+async function buildPhoton() {
+  console.log('Building Photon...');
+  await esbuild.build(photonConfig);
+  console.log('✅ Photon build completed');
+}
+
+buildPhoton().catch(console.error);

scripts/build-symbolicator.mjs

@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+import esbuild from 'esbuild';
+import { nodeBaseConfig } from './lib/esbuild-configs.mjs';
+
+const symbolicatorConfig = {
+  ...nodeBaseConfig,
+  metafile: true,
+  entryPoints: ['src/symbolicator-cli/index.ts'],
+  outfile: 'dist/symbolicator-cli.js',
+};
+
+async function build() {
+  await esbuild.build(symbolicatorConfig);
+  console.log('✅ Symbolicator-cli build completed');
+}
+
+build().catch(console.error);

scripts/build.mjs

@@ -0,0 +1,16 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+import esbuild from 'esbuild';
+
+import { mainBundleConfig } from './lib/esbuild-configs.mjs';
+import { cleanDist, saveMetafile } from './lib/build-utils.mjs';
+
+async function build() {
+  cleanDist();
+  const buildResult = await esbuild.build(mainBundleConfig);
+  saveMetafile(buildResult);
+  console.log('✅ Main browser build completed');
+}
+
+build().catch(console.error);

scripts/lib/build-utils.mjs

@@ -0,0 +1,17 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+import fs from 'fs';
+
+export function cleanDist(distDir = 'dist') {
+  if (fs.existsSync(distDir)) {
+    fs.rmSync(distDir, { recursive: true });
+  }
+}
+
+export function saveMetafile(buildResult, outputPath = 'dist/metafile.json') {
+  if (buildResult.metafile) {
+    fs.writeFileSync(outputPath, JSON.stringify(buildResult.metafile, null, 2));
+    console.log(`📊 Metafile saved to ${outputPath}`);
+  }
+}