wip: handle config hmr

src/client/app/composables/siteData.ts

@@ -16,7 +16,7 @@ function parse(data: string): SiteData {
 
 // hmr
 if (import.meta.hot) {
-  import.meta.hot!.accept('/@siteData', (m) => {
+  import.meta.hot.accept('/@siteData', (m) => {
     siteDataRef.value = parse(m.default)
   })
 }

src/client/theme-default/components/LastUpdated.vue

@@ -12,8 +12,6 @@ import { useSiteDataByRoute, usePageData } from 'vitepress'
 const site = useSiteDataByRoute()
 const page = usePageData()
 
-const datetime = ref('')
-
 const hasLastUpdated = computed(() => {
   const lu = site.value.themeConfig.lastUpdated
 
@@ -22,12 +20,11 @@ const hasLastUpdated = computed(() => {
 
 const prefix = computed(() => {
   const p = site.value.themeConfig.lastUpdated
-
   return p === true ? 'Last Updated' : p
 })
 
-onMounted(() => {
+const datetime = computed(() => {
-  datetime.value = new Date(page.value.lastUpdated).toLocaleString('en-US')
+  return new Date(page.value.lastUpdated).toLocaleString('en-US')
 })
 </script>
 

src/node/cli.ts

@@ -15,13 +15,7 @@ if (root) {
 
 if (!command || command === 'dev') {
   createServer(root, argv)
-    .then((server) => {
+    .then((server) => server.listen())
-      return server.listen().then(() => {
-        console.log(
-          `listening at http://localhost:${server.config.server.port}`
-        )
-      })
-    })
     .catch((err) => {
       console.error(chalk.red(`failed to start server. error:\n`), err)
       process.exit(1)

src/node/markdownToVue.ts

@@ -8,12 +8,7 @@ import { PageData, HeadConfig } from '../../types/shared'
 import slash from 'slash'
 
 const debug = require('debug')('vitepress:md')
-const cache = new LRUCache<string, MarkdownCompileCachedResult>({ max: 1024 })
+const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 })
-
-interface MarkdownCompileCachedResult extends MarkdownCompileResult {
-  tagsWithPageData: string
-  tagsWithoutPageData: string
-}
 
 interface MarkdownCompileResult {
   vueSrc: string
@@ -26,17 +21,13 @@ export function createMarkdownToVueRenderFn(
 ) {
   const md = createMarkdownRenderer(options)
 
-  return (
+  return (src: string, file: string): MarkdownCompileResult => {
-    src: string,
-    file: string,
-    injectData = true
-  ): MarkdownCompileResult => {
     const relativePath = slash(path.relative(root, file))
 
     const cached = cache.get(src)
     if (cached) {
       debug(`[cache hit] ${relativePath}`)
-      return pickResult(cached, injectData)
+      return cached
     }
 
     const start = Date.now()
@@ -44,8 +35,6 @@ export function createMarkdownToVueRenderFn(
     const { content, data: frontmatter } = matter(src)
     const { html, data } = md.render(content)
 
-    const vueSrc = `\n<template><div>${html}</div></template>`
-
     // TODO validate data.links?
     const pageData: PageData = {
       title: inferTitle(frontmatter, content),
@@ -54,38 +43,21 @@ export function createMarkdownToVueRenderFn(
       headers: data.headers,
       relativePath,
       // TODO use git timestamp?
-      lastUpdated: fs.statSync(file).mtimeMs
+      lastUpdated: Math.round(fs.statSync(file).mtimeMs)
     }
 
-    const tagsWithPageData = genPageDataCode(
+    const vueSrc =
-      data.hoistedTags || [],
+      genPageDataCode(data.hoistedTags || [], pageData).join('\n') +
-      pageData
+      `\n<template><div>${html}</div></template>`
-    ).join('\n')
-
-    const tagsWithoutPageData = (data.hoistedTags || []).join('\n')
 
     debug(`[render] ${file} in ${Date.now() - start}ms.`)
 
     const result = {
       vueSrc,
-      pageData,
+      pageData
-      tagsWithPageData,
-      tagsWithoutPageData
     }
     cache.set(src, result)
-    return pickResult(result, injectData)
+    return result
-  }
-}
-
-function pickResult(
-  res: MarkdownCompileCachedResult,
-  injectData: boolean
-): MarkdownCompileResult {
-  return {
-    vueSrc:
-      res.vueSrc +
-      (injectData ? res.tagsWithPageData : res.tagsWithoutPageData),
-    pageData: res.pageData
   }
 }
 

src/node/plugin.ts

@@ -17,7 +17,6 @@ export function createVitePressPlugin(
   })
 
   let siteData = initialSiteData
-  let stringifiedData = JSON.stringify(JSON.stringify(initialSiteData))
 
   const vitePressPlugin: Plugin = {
     name: 'vitepress',
@@ -37,7 +36,7 @@ export function createVitePressPlugin(
 
     load(id) {
       if (id === SITE_DATA_REQUEST_PATH) {
-        return `export default ${stringifiedData}`
+        return `export default ${JSON.stringify(JSON.stringify(siteData))}`
       }
     },
 
@@ -62,30 +61,22 @@ export function createVitePressPlugin(
     },
 
     async handleHotUpdate(file, mods, read, server) {
+      // handle config hmr
       if (file === configPath) {
         const newData = await resolveSiteData(root)
-        stringifiedData = JSON.stringify(JSON.stringify(newData))
         if (newData.base !== siteData.base) {
           console.warn(
             `[vitepress]: config.base has changed. Please restart the dev server.`
           )
         }
         siteData = newData
-        return
+        return [server.moduleGraph.getModuleById(SITE_DATA_REQUEST_PATH)!]
       }
 
       // hot reload .md files as .vue files
       if (file.endsWith('.md')) {
         const content = await read()
-        const { pageData, vueSrc } = markdownToVue(
+        const { pageData, vueSrc } = markdownToVue(content, file)
-          content.toString(),
-          file,
-          // do not inject pageData on HMR
-          // it leads to plugin-vue to think <script> has changed and reloads
-          // the component instead of re-rendering.
-          // pageData needs separate HMR logic anyway (see below)
-          false
-        )
 
         // notify the client to update page data
         server.ws.send({

src/node/server.ts

@@ -10,7 +10,7 @@ export async function createServer(
 
   return createViteServer({
     root,
-    logLevel: 'warn',
+    // logLevel: 'warn',
     plugins: createVitePressPlugin(root, config),
     server: serverOptions
   })