fix: make hmr work with imported code snippets and included markdown …

…files
vuejs · Jul 9, 2022 · 7dbceaa · 7dbceaa
1 parent 18997b1
commit 7dbceaa
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/src/node/markdown/plugins/snippet.ts b/src/node/markdown/plugins/snippet.ts
@@ -135,15 +135,15 @@ export const snippetPlugin = (md: MarkdownIt, srcDir: string) => {
   const fence = md.renderer.rules.fence!
 
   md.renderer.rules.fence = (...args) => {
-    const [tokens, idx, , { loader }] = args
+    const [tokens, idx, , { includes }] = args
     const token = tokens[idx]
     // @ts-ignore
     const tokenSrc = token.src
     const [src, regionName] = tokenSrc ? tokenSrc.split('#') : ['']
 
     if (src) {
-      if (loader) {
-        loader.addDependency(src)
+      if (includes) {
+        includes.push(src)
       }
       const isAFile = fs.lstatSync(src).isFile()
       if (fs.existsSync(src) && isAFile) {

diff --git a/src/node/markdownToVue.ts b/src/node/markdownToVue.ts
@@ -37,7 +37,8 @@ export async function createMarkdownToVueRenderFn(
 
   const replaceRegex = genReplaceRegexp(userDefines, isBuild)
 
-  return async (
+  return {
+    markdownToVue: async (
       src: string,
       file: string,
       publicDir: string
@@ -77,7 +78,8 @@ export async function createMarkdownToVueRenderFn(
         path: file,
         relativePath,
         cleanUrls,
-      frontmatter
+        frontmatter,
+        includes
       })
       const data = md.__data
 
@@ -157,6 +159,16 @@ export async function createMarkdownToVueRenderFn(
       }
       cache.set(cacheKey, result)
       return result
+    },
+
+    invalidateMdCache: (files: string[]) => {
+      const keys = files.map((file) => JSON.stringify({ file }).slice(1))
+      ;[...cache.keys()].forEach((key) => {
+        if (keys.some((file) => key.endsWith(file))) {
+          cache.delete(key)
+        }
+      })
+    }
   }
 }
 

diff --git a/src/node/plugin.ts b/src/node/plugin.ts
@@ -50,7 +50,12 @@ export async function createVitePressPlugin(
     cleanUrls
   } = siteConfig
 
-  let markdownToVue: Awaited<ReturnType<typeof createMarkdownToVueRenderFn>>
+  let markdownToVue: Awaited<
+    ReturnType<typeof createMarkdownToVueRenderFn>
+  >['markdownToVue']
+  let invalidateMdCache: Awaited<
+    ReturnType<typeof createMarkdownToVueRenderFn>
+  >['invalidateMdCache']
 
   // lazy require plugin-vue to respect NODE_ENV in @vue/compiler-x
   const vuePlugin = await import('@vitejs/plugin-vue').then((r) =>
@@ -73,12 +78,17 @@ export async function createVitePressPlugin(
   let hasDeadLinks = false
   let config: ResolvedConfig
 
+  let moduleMap: Record<string, string[]> = {}
+
   const vitePressPlugin: Plugin = {
     name: 'vitepress',
 
     async configResolved(resolvedConfig) {
       config = resolvedConfig
-      markdownToVue = await createMarkdownToVueRenderFn(
+      let {
+        markdownToVue: _markdownToVue,
+        invalidateMdCache: _invalidateMdCache
+      } = await createMarkdownToVueRenderFn(
         srcDir,
         markdown,
         pages,
@@ -88,6 +98,8 @@ export async function createVitePressPlugin(
         lastUpdated,
         cleanUrls
       )
+      markdownToVue = _markdownToVue
+      invalidateMdCache = _invalidateMdCache
     },
 
     config() {
@@ -149,6 +161,9 @@ export async function createVitePressPlugin(
         }
         if (includes.length) {
           includes.forEach((i) => {
+            i = slash(i)
+            if (!moduleMap[i]) moduleMap[i] = [id]
+            else if (!moduleMap[i].includes(id)) moduleMap[i].push(id)
             this.addWatchFile(i)
           })
         }
@@ -290,6 +305,13 @@ export async function createVitePressPlugin(
         // overwrite src so vue plugin can handle the HMR
         ctx.read = () => vueSrc
       }
+
+      if (moduleMap[file]) {
+        invalidateMdCache(moduleMap[file])
+        return moduleMap[file].map(
+          (id) => server.moduleGraph.getModuleById(id)!
+        )
+      }
     }
   }