ref(admin): Switch to esbuild

webpack takes more than a minute, esbuild takes 2 seconds. esbuild has
reasonable defaults wrt building css imports, webpack needs two
additional plugins for that.

esbuild has no file-watching support, but node has. since the build is
now fast, we can just do a full rebuild when any file changes.

there are other, newer, cooler runtimes (bun, rome, biome, idk), but
esbuild has not changed in the past 2 years and is the one I know.

.envrc

@@ -19,4 +19,6 @@ else
     unset PS1
 fi
 
+export PATH="$PWD/snuba/admin/node_modules/.bin/:$PATH"
+
 . scripts/rust-envvars

.gitignore

@@ -12,6 +12,7 @@ snuba.egg-info/
 node_modules
 .vscode/*.log
 snuba/admin/dist/bundle.js*
+snuba/admin/dist/bundle.css*
 tmp/
 gocd/templates/vendor/
 gocd/generated-pipelines/

snuba/admin/build.mjs

@@ -0,0 +1,20 @@
+import * as esbuild from 'esbuild';
+import { sentryEsbuildPlugin } from '@sentry/esbuild-plugin';
+
+await esbuild.build({
+  entryPoints: ['./static/index.tsx'],
+  bundle: true,
+  outfile: 'dist/bundle.js',
+  sourcemap: true, // Source map generation must be turned on
+  plugins: [
+    // Put the Sentry esbuild plugin after all other plugins
+    sentryEsbuildPlugin({
+      org: process.env.SENTRY_ORGANIZATION,
+      project: process.env.SENTRY_PROJECT,
+
+      // Auth tokens can be obtained from https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      telemetry: false,
+    }),
+  ],
+});

snuba/admin/package.json

@@ -2,8 +2,8 @@
   "name": "snuba-admin",
   "version": "1.0.0",
   "scripts": {
-    "build": "webpack --config webpack.config.js --mode production",
-    "watch": "webpack --config webpack.config.js --mode development --watch",
+    "build": "node build.mjs",
+    "watch": "node --watch-path=static/ build.mjs",
     "test": "jest"
   },
   "dependencies": {
@@ -17,7 +17,6 @@
     "@mantine/prism": "^6.0.15",
     "@mantine/tiptap": "^6.0.15",
     "@sentry/react": "^7.88.0",
-    "@sentry/webpack-plugin": "^2.4.0",
     "@tiptap/extension-code-block-lowlight": "^2.0.3",
     "@tiptap/extension-link": "^2.0.3",
     "@tiptap/extension-placeholder": "^2.0.3",
@@ -35,7 +34,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-select-event": "^5.5.1",
-    "ts-loader": "^9.4.1",
     "typescript": "^4.8.3",
     "ws": "^8.18.0"
   },
@@ -46,6 +44,7 @@
     "@mantine/hooks": "^6.0.15",
     "@mantine/prism": "^6.0.15",
     "@mantine/tiptap": "^6.0.15",
+    "@sentry/esbuild-plugin": "^2.22.7",
     "@tabler/icons-react": "^3.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -55,15 +54,13 @@
     "@types/jest": "^29.5.1",
     "@types/prismjs": "^1.26.0",
     "bootstrap": "^5.2.3",
+    "esbuild": "^0.24.2",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.5.0",
     "react-bootstrap": "^2.10.5",
     "resize-observer-polyfill": "^1.5.1",
-    "style-loader": "^4.0.0",
     "ts-jest": "^29.2.5",
-    "use-resize-observer": "^9.1.0",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4"
+    "use-resize-observer": "^9.1.0"
   },
   "volta": {
     "node": "20.8.1",

snuba/admin/static/index.tsx

@@ -96,3 +96,5 @@ function getTab(locationHash: string): string {
 
   return navItem.id;
 }
+
+export default {};