At least for a small site, you don't actually need a plugin to get hot reloading using esbuild:

  "scripts": {
    "build": "esbuild src/app.ts src/app.css --bundle --sourcemap --outdir=site",
    "dev": "npm run build -- --servedir=site",
  }

Unless you mean something different by "hot reloading" than "recompile on page reload?"

No tools like vite will detect changes, rebuild/bundle/transform, and then inject the changed HTML, JS, and CSS into the page you're viewing automatically. They work by injecting a script into the HTML they serve which connects over a websocket or SSE to monitor changes and slurp them up when notified by the dev server.

It's really a magical experience to have your code open in one window, your browser open next to it, and as soon as you hit ctrl-s instantly see the page change. I won't tweak CSS any other way, changing sizes, colors, etc is amazing with hot reload.

They mean recompile on file save and hot-patch the frontend without reloading. See: https://main.vitejs.dev/guide/features.html#hot-module-repla...

Esbuild works just fine with browsersync proxy. Simpler approach.