Merge pull request #790 from tszhong0411/dev

feat(mdx): improve dev server

.github/workflows/lint.yml

@@ -15,7 +15,7 @@ jobs:
         uses: ./.github/actions/check-setup
 
       - name: Build the app
-        run: pnpm --filter=web build
+        run: pnpm build:apps
 
       - name: Check
         run: pnpm check

.github/workflows/unit-tests.yml

@@ -15,4 +15,4 @@ jobs:
         uses: ./.github/actions/check-setup
 
       - name: Run unit tests
-        run: pnpm run test:unit
+        run: pnpm test:unit

package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "turbo build",
+    "build:apps": "turbo build --filter=./apps/*",
     "build:packages": "turbo build --filter=./packages/*",
     "check": "turbo lint && turbo type-check && pnpm format:check && pnpm check:spelling && pnpm check:knip",
     "check:knip": "VITE_CJS_IGNORE_WARNING=true dotenv -e .env.local -- knip",

packages/mdx/package.json

@@ -28,6 +28,7 @@
     "chokidar": "^3.6.0",
     "commander": "^12.1.0",
     "cosmiconfig": "^9.0.0",
+    "debounce": "^2.1.0",
     "fast-glob": "^3.3.2",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",

packages/mdx/src/cli/commands/build.ts

@@ -23,7 +23,9 @@ type Error = {
 }
 
 export const build = async () => {
-  const { contentDirPath, defs } = await getConfig(process.cwd())
+  const {
+    config: { contentDirPath, defs }
+  } = await getConfig(process.cwd())
 
   try {
     await ensureDirectoryExists(contentDirPath)

packages/mdx/src/cli/commands/dev.ts

@@ -1,39 +1,18 @@
-import * as chokidar from 'chokidar'
+import { type ChildProcess, spawn } from 'node:child_process'
+import path from 'node:path'
 
-import { LOG_PREFIX } from '../constants'
-import { getConfig } from '../get-config'
-import { build } from './build'
+let serverProcess: ChildProcess | undefined
 
-export const dev = async () => {
-  const { contentDirPath } = await getConfig(process.cwd())
+export const dev = () => {
+  const startServerPath = path.resolve(import.meta.dirname, 'start-server')
 
-  // Initial build
-  await build()
-
-  const watcher = chokidar.watch(`${contentDirPath}/**/*.mdx`, {
-    persistent: true
-  })
-
-  watcher.on('change', (path) => {
-    console.log(`${LOG_PREFIX}${path} has changed. Rebuilding...`)
-    void build()
+  serverProcess = spawn('node', [startServerPath], {
+    stdio: 'inherit'
   })
 
-  console.log(`${LOG_PREFIX}Watching for file changes...`)
-
-  const handleTermination = async () => {
-    console.log(`${LOG_PREFIX}Terminating watcher...`)
-
-    await watcher.close()
-
-    console.log(`${LOG_PREFIX}Watcher closed.`)
-    console.log(`${LOG_PREFIX}Exiting...`)
-  }
-
-  process.on('SIGINT', () => {
-    void handleTermination()
-  })
-  process.on('SIGTERM', () => {
-    void handleTermination()
+  serverProcess.on('exit', (code) => {
+    if (code === 99) {
+      dev()
+    }
   })
 }

packages/mdx/src/cli/get-config.ts

@@ -15,5 +15,8 @@ export const getConfig = async (cwd: string) => {
     throw new Error(`${LOG_PREFIX}No configuration found`)
   }
 
-  return configResult.config as MakeSourceOptions
+  return {
+    config: configResult.config as MakeSourceOptions,
+    filepath: configResult.filepath
+  }
 }

packages/mdx/src/cli/start-server.ts

@@ -0,0 +1,52 @@
+import * as chokidar from 'chokidar'
+import debounce from 'debounce'
+import { exit } from 'node:process'
+
+import { build } from './commands'
+import { LOG_PREFIX } from './constants'
+import { getConfig } from './get-config'
+
+const startServer = async () => {
+  const {
+    config: { contentDirPath },
+    filepath
+  } = await getConfig(process.cwd())
+
+  // Initial build
+  await build()
+
+  const watcher = chokidar.watch(`${contentDirPath}/**/*.mdx`)
+  const configWatcher = chokidar.watch(filepath)
+
+  const debounceBuild = debounce((path) => {
+    console.log(`${LOG_PREFIX}${path} has changed. Rebuilding...`)
+    void build()
+  }, 500)
+
+  watcher.on('change', debounceBuild)
+  configWatcher.on('change', () => {
+    console.log(`${LOG_PREFIX}Config file changed. Restarting...`)
+    exit(99)
+  })
+
+  console.log(`${LOG_PREFIX}Watching for file changes...`)
+
+  const handleTermination = async () => {
+    console.log(`${LOG_PREFIX}Terminating watcher...`)
+
+    await watcher.close()
+    await configWatcher.close()
+
+    console.log(`${LOG_PREFIX}Watcher closed.`)
+    console.log(`${LOG_PREFIX}Exiting...`)
+  }
+
+  process.on('SIGINT', () => {
+    void handleTermination()
+  })
+  process.on('SIGTERM', () => {
+    void handleTermination()
+  })
+}
+
+startServer()

packages/mdx/src/tests/cli/get-config.test.ts

@@ -18,13 +18,16 @@ describe('getConfig', () => {
     const config = await getConfig(path.resolve(import.meta.dirname, '../fixtures/config'))
 
     expect(config).toEqual({
-      contentDirPath: 'content',
-      defs: [
-        {
-          name: 'Page',
-          filePathPattern: 'pages/*.mdx'
-        }
-      ]
+      config: {
+        contentDirPath: 'content',
+        defs: [
+          {
+            name: 'Page',
+            filePathPattern: 'pages/*.mdx'
+          }
+        ]
+      },
+      filepath: path.resolve(import.meta.dirname, '../fixtures/config/mdx.config.ts')
     })
   })
 })

packages/mdx/tsup.config.ts

@@ -3,7 +3,8 @@ import { defineConfig } from 'tsup'
 export default defineConfig({
   entry: {
     index: 'src/index.ts',
-    cli: 'src/cli/index.ts'
+    cli: 'src/cli/index.ts',
+    'start-server': 'src/cli/start-server.ts'
   },
   dts: true,
   format: ['esm'],