clean up dev script

packages/docs/package.json

@@ -2,12 +2,12 @@
   "name": "reacord-docs-new",
   "type": "module",
   "private": true,
-  "main": "./src/main.tsx",
+  "main": "./dist/main.js",
   "scripts": {
+    "build": "tsup --minify",
     "dev": "esmo --no-warnings scripts/dev.ts | pino-colada",
-    "serve": "esmo --experimental-import-meta-resolve --no-warnings --enable-source-maps src/main.tsx",
+    "start": "NODE_ENV=production pnpm serve | pino-colada",
-    "build": "tsup src/main.tsx --target node16 --format esm --sourcemap --minify",
+    "serve": "node --experimental-import-meta-resolve --experimental-json-modules --no-warnings --enable-source-maps dist/main.js",
-    "start": "NODE_ENV=production node  --experimental-import-meta-resolve --experimental-json-modules --no-warnings --enable-source-maps dist/main.js | pino-colada",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/docs/scripts/dev.ts

@@ -3,83 +3,136 @@ import chokidar from "chokidar"
 import type { ExecaChildProcess } from "execa"
 import { execa } from "execa"
 import pino from "pino"
-import { concatMap, debounceTime, map, Observable, tap } from "rxjs"
+import { concatMap, debounceTime, Observable, tap } from "rxjs"
 import waitOn from "wait-on"
 import packageJson from "../package.json"
 
 const console = pino()
 
-let app: ExecaChildProcess | undefined
+function awaitChildStopped(child: ExecaChildProcess) {
-
+  if (child.killed) return
-async function stopApp() {
+  return new Promise((resolve) => child.once("close", resolve))
-  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() {
+class App {
-  console.info(app ? "Restarting app..." : "Starting app...")
+  app: ExecaChildProcess | undefined
 
-  await stopApp()
+  async start() {
+    console.info(this.app ? "Restarting app..." : "Starting app...")
+
+    await this.stop()
 
     const [command, ...flags] = packageJson.scripts.serve.split(/\s+/)
-  app = execa(command!, flags, {
+    this.app = execa(command!, flags, {
       stdio: "inherit",
       detached: true,
     })
 
-  app.catch((error) => {
+    this.app.catch((error) => {
       if (error.signal !== "SIGINT") {
         console.error(error)
       }
     })
 
+    void this.app.on("close", () => {
+      this.app = undefined
+    })
+
     await waitOn({ resources: ["http-get://localhost:3000"] })
 
     console.info("App running")
+  }
+
+  async stop() {
+    if (this.app) {
+      if (this.app.pid != undefined) {
+        process.kill(-this.app.pid, "SIGINT")
+      } else {
+        this.app.kill("SIGINT")
+      }
+      await awaitChildStopped(this.app)
+    }
+  }
 }
 
-const browser = browserSync.create()
+class Builder {
+  child = execa("tsup", ["--watch"], {
+    stdio: "inherit",
+  })
 
-process.on("SIGINT", async () => {
+  async stop() {
-  console.info("Shutting down...")
+    this.child.kill()
-  await stopApp()
+    await awaitChildStopped(this.child)
-  browser.exit()
+  }
-  process.exit()
+}
-})
 
-await startApp()
+class Browser {
+  browser = browserSync.create()
 
-browser.emitter.on("init", () => {
+  constructor() {
+    this.browser.emitter.on("init", () => {
       console.info("Browsersync started")
-})
+    })
-browser.emitter.on("browser:reload", () => {
+    this.browser.emitter.on("browser:reload", () => {
       console.info("Browser reloaded")
-})
+    })
+  }
 
-browser.init({
+  init() {
+    this.browser.init({
       proxy: "http://localhost:3000",
       port: 3001,
       ui: false,
       logLevel: "silent",
-})
+    })
+  }
 
-new Observable<string>((subscriber) => {
+  reload() {
+    this.browser.reload()
+  }
+
+  stop() {
+    this.browser.exit()
+  }
+}
+
+class Watcher {
+  subscription = new Observable<string>((subscriber) => {
     chokidar
-    .watch(".", { ignored: /node_modules/, ignoreInitial: true })
+      .watch(packageJson.main, { ignored: /node_modules/, ignoreInitial: true })
       .on("all", (_, path) => subscriber.next(path))
-})
+  })
     .pipe(
       tap((path) => console.info(`Changed:`, path)),
       debounceTime(100),
-    concatMap(startApp),
+      concatMap(async () => {
-    map(() => browser.reload()),
+        await this.app.start()
+        this.browser.reload()
+      }),
     )
     .subscribe()
 
-// chokidar.watch(".", { ignored: /node_modules/, ignoreInitial: true }).on('all', )
+  constructor(private app: App, private browser: Browser) {}
+
+  stop() {
+    this.subscription.unsubscribe()
+  }
+}
+
+const app = new App()
+const builder = new Builder()
+const browser = new Browser()
+const watcher = new Watcher(app, browser)
+
+process.on("SIGINT", async () => {
+  console.info("Shutting down...")
+  try {
+    await Promise.all([app, browser, watcher, builder].map((it) => it.stop()))
+  } catch (error) {
+    console.error(error)
+  }
+  process.exit()
+})
+
+await app.start()
+browser.init()

packages/docs/tsup.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from "tsup"
+
+export default defineConfig({
+  entry: ["./src/main.tsx"],
+  target: "node16",
+  format: ["esm"],
+  sourcemap: true,
+})