improved dev script with debounce

packages/docs-new/package.json

@@ -55,7 +55,9 @@
     "@vitejs/plugin-react": "^1.1.3",
     "autoprefixer": "^10.4.1",
     "browser-sync": "^2.27.7",
+    "chokidar": "^3.5.2",
     "compression": "^1.7.4",
+    "debounce-fn": "^5.1.0",
     "esno": "^0.13.0",
     "execa": "^6.0.0",
     "fast-glob": "^3.2.7",
@@ -65,6 +67,10 @@
     "npm-run-all": "^4.1.5",
     "polka": "^0.5.2",
     "postcss": "^8.4.5",
+    "rehype-highlight": "^5.0.2",
+    "rehype-prism-plus": "^1.1.3",
+    "remark-frontmatter": "^4.0.1",
+    "rxjs": "^7.5.1",
     "tailwindcss": "^3.0.8",
     "type-fest": "^2.8.0",
     "typescript": "^4.5.4",

packages/docs-new/scripts/dev.ts

@@ -1,8 +1,9 @@
 import browserSync from "browser-sync"
+import chokidar from "chokidar"
 import type { ExecaChildProcess } from "execa"
 import { execa } from "execa"
-import { watch } from "node:fs/promises"
 import pino from "pino"
+import { concatMap, debounceTime, map, Observable, tap } from "rxjs"
 import waitOn from "wait-on"
 import packageJson from "../package.json"
 
@@ -38,7 +39,7 @@ async function startApp() {
     }
   })
 
-  await waitOn({ resources: ["tcp:localhost:3000"] })
+  await waitOn({ resources: ["http-get://localhost:3000"] })
 
   console.info("App running")
 }
@@ -68,8 +69,17 @@ browser.init({
   logLevel: "silent",
 })
 
-for await (const info of watch("src", { recursive: true })) {
-  console.info(`Changed: ${info.filename}`)
-  await startApp()
-  browser.reload()
-}
+new Observable<string>((subscriber) => {
+  chokidar
+    .watch(".", { ignored: /node_modules/, ignoreInitial: true })
+    .on("all", (_, path) => subscriber.next(path))
+})
+  .pipe(
+    tap((path) => console.info(`Changed:`, path)),
+    debounceTime(100),
+    concatMap(startApp),
+    map(() => browser.reload()),
+  )
+  .subscribe()
+
+// chokidar.watch(".", { ignored: /node_modules/, ignoreInitial: true }).on('all', )