use esbuild live reload (#49999)

Now, after you save a file in your editor, the web browser will
automatically perform a full-page reload so that your changes are
reflected. See https://esbuild.github.io/api/#live-reload.

(Note: Unlike "hot module reloading", this performs a full-page reload,
not an in-place reload. It's still a nice time-saver.)

client/web/dev/esbuild/server.ts

@@ -28,6 +28,8 @@ export const esbuildDevelopmentServer = async (
 
     const ctx = await esbuildContext(BUILD_OPTIONS)
 
+    await ctx.watch()
+
     // Start esbuild's server on a random local port.
     const { host: esbuildHost, port: esbuildPort } = await ctx.serve({
         host: 'localhost',

client/web/src/enterprise/main.tsx

@@ -35,3 +35,9 @@ window.addEventListener('DOMContentLoaded', async () => {
         logger.error('Failed to initialize the app shell', error)
     }
 })
+
+if (process.env.DEV_WEB_BUILDER === 'esbuild' && process.env.NODE_ENV === 'development') {
+    new EventSource('/.assets/esbuild').addEventListener('change', () => {
+        location.reload()
+    })
+}

package.json

@@ -244,7 +244,7 @@
     "css-loader": "^6.7.2",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "envalid": "^7.3.1",
-    "esbuild": "^0.17.7",
+    "esbuild": "^0.17.14",
     "eslint": "^8.13.0",
     "eslint-plugin-monorepo": "^0.3.2",
     "events": "^3.3.0",