fix: use vite to dev to fix live reload

moonbitlang · Jan 9, 2025 · 5633682 · 5633682
1 parent a5fc73e
commit 5633682
Show file tree

Hide file tree

Showing 3 changed files with 1,399 additions and 75 deletions.
diff --git a/moonbit-tour/build/build.mts b/moonbit-tour/build/build.mts
@@ -2,7 +2,6 @@ import * as chokidar from "chokidar";
 import * as esbuild from "esbuild";
 import { tailwindPlugin } from "esbuild-plugin-tailwindcss";
 import * as fs from "fs/promises";
-import * as http from "http";
 import * as path from "path";
 import * as page from "./page";
 
@@ -72,11 +71,6 @@ const ctx = await esbuild.context({
   },
   drop: isDev ? [] : ["console", "debugger"],
   dropLabels: isDev ? [] : ["DEV"],
-  banner: isDev
-    ? {
-        js: '(() => new EventSource("/esbuild").onmessage = () => location.reload())();',
-      }
-    : undefined,
   plugins: [tailwindPlugin(), plugin()],
 });
 
@@ -86,44 +80,6 @@ if (isBuild) {
   process.exit(0);
 }
 
-const clients: http.ServerResponse[] = [];
-
-if (isDev) {
-  const { host, port } = await ctx.serve({
-    servedir: "dist",
-  });
-  const server = http.createServer((req, res) => {
-    if (req.url === "/esbuild") {
-      clients.push(
-        res.writeHead(200, {
-          "Content-Type": "text/event-stream",
-          "Cache-Control": "no-cache",
-          Connection: "keep-alive",
-        }),
-      );
-      return;
-    }
-    req.pipe(
-      http.request(
-        {
-          host,
-          port,
-          path: req.url,
-          method: req.method,
-          headers: req.headers,
-        },
-        (prxRes) => {
-          res.writeHead(prxRes.statusCode || 0, prxRes.headers);
-          prxRes.pipe(res, { end: true });
-        },
-      ),
-      { end: true },
-    );
-  });
-  server.listen(3000);
-  console.log(`Local: http://localhost:3000`);
-}
-
 if (isWatch) {
   chokidar
     .watch(["index.html", "src", "tour"], {
@@ -132,7 +88,5 @@ if (isWatch) {
     .on("all", async (e, path) => {
       console.log(`[watch] ${e} ${path}`);
       await ctx.rebuild();
-      clients.forEach((res) => res.write("data: update\n\n"));
-      clients.length = 0;
     });
 }
diff --git a/moonbit-tour/package.json b/moonbit-tour/package.json
@@ -4,7 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "DEV=true tsx ./build/build.mts --watch",
+    "dev:build": "DEV=true tsx ./build/build.mts --watch",
+    "dev:serve": "vite -l silent dist --open",
+    "dev": "run-p dev:build dev:serve",
     "build": "tsc && DEV=false tsx ./build/build.mts --build",
     "preview": "serve dist",
     "format": "prettier --write ."
@@ -16,6 +18,7 @@
     "chokidar": "^4.0.3",
     "esbuild": "^0.24.2",
     "esbuild-plugin-tailwindcss": "^1.2.1",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
@@ -28,7 +31,8 @@
     "tailwindcss": "^3.4.16",
     "tsx": "^4.19.2",
     "typescript": "~5.6.2",
-    "unified": "^11.0.5"
+    "unified": "^11.0.5",
+    "vite": "^6.0.7"
   },
   "dependencies": {
     "@moonbit/moonpad-monaco": "^0.1.202501070",