fix(build): recreate server on config change (#1132)

Author: brc-dd

src/node/build/bundle.ts

@@ -21,7 +21,6 @@ export async function bundle(
   serverResult: RollupOutput
   pageToHashMap: Record<string, string>
 }> {
-  const { root, srcDir } = config
   const pageToHashMap = Object.create(null)
   const clientJSMap = Object.create(null)
 
@@ -35,18 +34,17 @@ export async function bundle(
   config.pages.forEach((file) => {
     // page filename conversion
     // foo/bar.md -> foo_bar.md
-    input[slash(file).replace(/\//g, '_')] = path.resolve(srcDir, file)
+    input[slash(file).replace(/\//g, '_')] = path.resolve(config.srcDir, file)
   })
 
   // resolve options to pass to vite
   const { rollupOptions } = options
 
   const resolveViteConfig = async (ssr: boolean): Promise<ViteUserConfig> => ({
-    root: srcDir,
+    root: config.srcDir,
     base: config.site.base,
     logLevel: 'warn',
     plugins: await createVitePressPlugin(
-      root,
       config,
       ssr,
       pageToHashMap,

src/node/cli.ts

@@ -14,16 +14,19 @@ if (root) {
 }
 
 if (!command || command === 'dev') {
-  createServer(root, argv)
-    .then((server) => server.listen())
-    .then((server) => {
-      console.log()
-      server.printUrls()
-    })
-    .catch((err) => {
-      console.error(c.red(`failed to start server. error:\n`), err)
-      process.exit(1)
+  const createDevServer = async () => {
+    const server = await createServer(root, argv, async () => {
+      await server.close()
+      await createDevServer()
     })
+    await server.listen()
+    console.log()
+    server.printUrls()
+  }
+  createDevServer().catch((err) => {
+    console.error(c.red(`failed to start server. error:\n`), err)
+    process.exit(1)
+  })
 } else if (command === 'build') {
   build(root, argv).catch((err) => {
     console.error(c.red(`build error:\n`), err)

src/node/markdownToVue.ts

@@ -21,6 +21,10 @@ export interface MarkdownCompileResult {
   includes: string[]
 }
 
+export function clearCache() {
+  cache.reset()
+}
+
 export async function createMarkdownToVueRenderFn(
   srcDir: string,
   options: MarkdownOptions = {},
@@ -31,9 +35,7 @@ export async function createMarkdownToVueRenderFn(
   includeLastUpdatedData = false
 ) {
   const md = await createMarkdownRenderer(srcDir, options, base)
-
   pages = pages.map((p) => slash(p.replace(/\.md$/, '')))
-
   const replaceRegex = genReplaceRegexp(userDefines, isBuild)
 
   return async (

src/node/plugin.ts

@@ -1,7 +1,8 @@
 import path from 'path'
+import c from 'picocolors'
 import { defineConfig, mergeConfig, Plugin, ResolvedConfig } from 'vite'
-import { SiteConfig, resolveSiteData } from './config'
-import { createMarkdownToVueRenderFn } from './markdownToVue'
+import { SiteConfig } from './config'
+import { createMarkdownToVueRenderFn, clearCache } from './markdownToVue'
 import { DIST_CLIENT_PATH, APP_PATH, SITE_DATA_REQUEST_PATH } from './alias'
 import { slash } from './utils/slash'
 import { OutputAsset, OutputChunk } from 'rollup'
@@ -30,11 +31,11 @@ const isPageChunk = (
   )
 
 export async function createVitePressPlugin(
-  root: string,
   siteConfig: SiteConfig,
   ssr = false,
   pageToHashMap?: Record<string, string>,
-  clientJSMap?: Record<string, string>
+  clientJSMap?: Record<string, string>,
+  recreateServer?: () => Promise<void>
 ) {
   const {
     srcDir,
@@ -244,17 +245,23 @@ export async function createVitePressPlugin(
     },
 
     async handleHotUpdate(ctx) {
-      // handle config hmr
       const { file, read, server } = ctx
       if (file === configPath || configDeps.includes(file)) {
-        const newData = await resolveSiteData(root)
-        if (newData.base !== siteData.base) {
-          console.warn(
-            `[vitepress]: config.base has changed. Please restart the dev server.`
+        console.log(
+          c.green(
+            `\n${path.relative(
+              process.cwd(),
+              file
+            )} changed, restarting server...`
           )
+        )
+        try {
+          clearCache()
+          await recreateServer!()
+        } catch (err) {
+          console.error(c.red(`failed to restart server. error:\n`), err)
         }
-        siteData = newData
-        return [server.moduleGraph.getModuleById(SITE_DATA_REQUEST_PATH)!]
+        return
       }
 
       // hot reload .md files as .vue files

src/node/server.ts

@@ -4,7 +4,8 @@ import { createVitePressPlugin } from './plugin'
 
 export async function createServer(
   root: string = process.cwd(),
-  serverOptions: ServerOptions = {}
+  serverOptions: ServerOptions = {},
+  recreateServer: () => Promise<void>
 ) {
   const config = await resolveConfig(root)
 
@@ -17,7 +18,7 @@ export async function createServer(
     root: config.srcDir,
     base: config.site.base,
     // logLevel: 'warn',
-    plugins: await createVitePressPlugin(root, config),
+    plugins: await createVitePressPlugin(config, false, {}, {}, recreateServer),
     server: serverOptions
   })
 }