set up dev script with proper termination

packages/docs-new/package.json

@@ -2,12 +2,12 @@
   "name": "reacord-docs-new",
   "type": "module",
   "private": true,
+  "main": "./src/main.tsx",
   "scripts": {
-    "dev": "npm-run-all --parallel --print-label --race dev-*",
+    "dev": "esmo --no-warnings scripts/dev.ts | pino-colada",
-    "dev-nodemon": "nodemon --exec esmo --ext js,ts,tsx --experimental-import-meta-resolve --no-warnings src/main.tsx",
-    "dev-bsync": "wait-on tcp:localhost:3000 && browser-sync start --proxy http://localhost:3000 --watch src",
     "build": "vite build && vite build --ssr",
-    "start": "NODE_ENV=production esmo server.ts",
+    "serve": "esmo --experimental-import-meta-resolve --no-warnings --enable-source-maps src/main.tsx",
+    "start": "NODE_ENV=production pnpm serve",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -18,6 +18,10 @@
     "clsx": "^1.1.1",
     "express": "^4.17.2",
     "gray-matter": "^4.0.3",
+    "http-terminator": "^3.0.4",
+    "pino": "^7.6.2",
+    "pino-colada": "^2.2.2",
+    "pino-pretty": "^7.3.0",
     "reacord": "workspace:*",
     "react": "^18.0.0-rc.0",
     "react-dom": "^18.0.0-rc.0",
@@ -25,9 +29,14 @@
     "react-head": "^3.4.0",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1",
+    "rehype-stringify": "^9.0.2",
     "reload": "^3.2.0",
+    "remark-parse": "^10.0.1",
+    "remark-rehype": "^10.1.0",
     "shrink-ray-current": "^4.1.3",
     "sirv": "^2.0.0",
+    "unified": "^10.1.1",
+    "unified-stream": "^2.0.0",
     "vite-plugin-ssr": "^0.3.42"
   },
   "devDependencies": {
@@ -41,11 +50,14 @@
     "@types/nodemon": "^1.19.1",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.9",
+    "@types/update-notifier": "^5.1.0",
+    "@types/wait-on": "^5.3.1",
     "@vitejs/plugin-react": "^1.1.3",
     "autoprefixer": "^10.4.1",
     "browser-sync": "^2.27.7",
     "compression": "^1.7.4",
     "esno": "^0.13.0",
+    "execa": "^6.0.0",
     "fast-glob": "^3.2.7",
     "markdown-it": "^12.3.0",
     "markdown-it-prism": "^2.2.1",
@@ -56,6 +68,7 @@
     "tailwindcss": "^3.0.8",
     "type-fest": "^2.8.0",
     "typescript": "^4.5.4",
+    "update-notifier": "^5.1.0",
     "vite": "^2.7.10",
     "vite-plugin-markdown": "^2.0.2",
     "wait-on": "^6.0.0"

packages/docs-new/scripts/dev.ts

@@ -0,0 +1,75 @@
+import browserSync from "browser-sync"
+import type { ExecaChildProcess } from "execa"
+import { execa } from "execa"
+import { watch } from "node:fs/promises"
+import pino from "pino"
+import waitOn from "wait-on"
+import packageJson from "../package.json"
+
+const console = pino()
+
+let app: ExecaChildProcess | undefined
+
+async function stopApp() {
+  if (app) {
+    if (app.pid != undefined) {
+      process.kill(-app.pid, "SIGINT")
+    } else {
+      app.kill("SIGINT")
+    }
+    await new Promise((resolve) => app?.once("close", resolve))
+  }
+}
+
+async function startApp() {
+  console.info(app ? "Restarting app..." : "Starting app...")
+
+  await stopApp()
+
+  const [command, ...flags] = packageJson.scripts.serve.split(/\s+/)
+  app = execa(command!, flags, {
+    stdio: "inherit",
+    detached: true,
+  })
+
+  app.catch((error) => {
+    if (error.signal !== "SIGINT") {
+      console.error(error)
+    }
+  })
+
+  await waitOn({ resources: ["tcp:localhost:3000"] })
+
+  console.info("App running")
+}
+
+const browser = browserSync.create()
+
+process.on("SIGINT", async () => {
+  console.info("Shutting down...")
+  await stopApp()
+  browser.exit()
+  process.exit()
+})
+
+await startApp()
+
+browser.emitter.on("init", () => {
+  console.info("Browsersync started")
+})
+browser.emitter.on("browser:reload", () => {
+  console.info("Browser reloaded")
+})
+
+browser.init({
+  proxy: "http://localhost:3000",
+  port: 3001,
+  ui: false,
+  logLevel: "silent",
+})
+
+for await (const info of watch("src", { recursive: true })) {
+  console.info(`Changed: ${info.filename}`)
+  await startApp()
+  browser.reload()
+}

packages/docs-new/src/main.tsx

@@ -7,7 +7,7 @@ import { serveTailwindCss } from "./helpers/tailwind"
 import { Landing } from "./pages/landing"
 
 const projectRoot = new URL("..", import.meta.url).pathname
-
+const logger = pino()
 const port = process.env.PORT || 3000
 
 function sendJsx(res: Response, jsx: React.ReactElement) {
@@ -15,7 +15,7 @@ function sendJsx(res: Response, jsx: React.ReactElement) {
   res.send(`<!DOCTYPE html>\n${renderToStaticMarkup(jsx)}`)
 }
 
-express()
+const app = express()
   .use(compression())
   .get("/tailwind.css", serveTailwindCss())
 
@@ -27,6 +27,22 @@ express()
     res.send("doc: " + req.params.docPath)
   })
 
-  .listen(port, () => {
+const server = app.listen(port, () => {
-    console.info(`Server is running on https://localhost:${port}`)
+  logger.info(`Server is running on https://localhost:${port}`)
+})
+
+const terminator = httpTerminator.createHttpTerminator({ server })
+
+process.on("SIGINT", () => {
+  terminator
+    .terminate()
+    .then(() => {
+      logger.info("Server terminated")
     })
+    .catch((error) => {
+      logger.error(error)
+    })
+    .finally(() => {
+      process.exit()
+    })
+})