dev.ts

import { svelte } from "@hyrious/esbuild-plugin-svelte";
import { build, Plugin, serve } from "esbuild";
import { createServer, ServerResponse } from "http";
import { icons } from "./plugins/icons";

let port = 3000;

const clients: ServerResponse[] = [];

const plugins: Plugin[] = [await icons(), svelte()];

const { stop: stopWatch } = await build({
  entryPoints: ["./src/main.ts"],
  bundle: true,
  format: "esm",
  plugins,
  watch: {
    onRebuild() {
      clients.forEach((res) => res.write("data: update\n\n"));
      clients.length = 0;
    },
  },
  logLevel: "silent",
  write: false,
  outdir: "dist",
});

const { stop: stopServe } = await serve(
  {
    host: "localhost",
    port,
    servedir: "./src",
  },
  {
    entryPoints: ["./src/main.ts"],
    bundle: true,
    format: "esm",
    plugins,
    sourcemap: true,
    banner: {
      js: `new EventSource("http://localhost:30000").onmessage = () => location.reload(); console.log("[dev] hot reload enabled");`,
    },
    define: {
      "import.meta.env.DEV": "true",
    },
  }
);

createServer((_, res) => {
  const client = res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    "Access-Control-Allow-Origin": "http://localhost:3000",
    Connection: "keep-alive",
  });
  clients.push(client);
}).listen(30000, () => console.log(`serving http://localhost:${port}`));

process.once("SIGTERM", async () => {
  try {
    stopWatch && stopWatch();
    stopServe && stopServe();
  } finally {
    process.exit(0);
  }
});