fix: improve virual vue hmr

Author: antfu

packages/slidev/node/plugins/loaders.ts

@@ -62,16 +62,15 @@ function prepareSlideInfo(data: SlideInfo): SlideInfoExtended {
   }
 }
 
-export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRoot }: ResolvedSlidevOptions, pluginOptions: SlidevPluginOptions): Plugin[] {
+export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRoot }: ResolvedSlidevOptions, pluginOptions: SlidevPluginOptions, VuePlugin: Plugin): Plugin[] {
   const slidePrefix = '/@slidev/slides/'
-  const hmrNextModuleIds: string[] = []
+  const hmrPages = new Set<number>()
 
   const entryId = slash(entry)
 
   return [
     {
       name: 'slidev:loader',
-
       configureServer(server) {
         server.watcher.add(entry)
 
@@ -90,7 +89,7 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRo
             const body = await getBodyJson(req)
             Object.assign(data.slides[idx], body)
 
-            hmrNextModuleIds.push(`${slidePrefix}${idx + 1}.md`)
+            hmrPages.add(idx)
 
             server.ws.send({
               type: 'custom',
@@ -117,11 +116,7 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRo
 
         const newData = await parser.load(entry)
 
-        const moduleIds: (string | false)[] = [
-          ...hmrNextModuleIds,
-        ]
-
-        hmrNextModuleIds.length = 0
+        const moduleIds: string[] = []
 
         if (data.slides.length !== newData.slides.length)
           moduleIds.push('/@slidev/routes')
@@ -138,28 +133,47 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRo
         const length = Math.max(data.slides.length, newData.slides.length)
 
         for (let i = 0; i < length; i++) {
+          if (hmrPages.has(i))
+            continue
+
           const a = data.slides[i]
           const b = newData.slides[i]
-
           if (a?.content.trim() === b?.content.trim() && JSON.stringify(a.frontmatter) === JSON.stringify(b.frontmatter))
             continue
+          hmrPages.add(i)
+        }
 
-          moduleIds.push(
-            `${slidePrefix}${i + 1}.md`,
-            `${slidePrefix}${i + 1}.json`,
+        const modules = (
+          await Promise.all(
+            Array.from(hmrPages)
+              .map(async(i) => {
+                const id = `${slidePrefix}${i + 1}.md`
+                const module = ctx.server.moduleGraph.getModuleById(id)
+
+                return await VuePlugin.handleHotUpdate!({
+                  ...ctx,
+                  modules: Array.from(module?.importedModules || []),
+                  file: id,
+                  read() {
+                    return newData.slides[i - 1]?.raw
+                  },
+                },
+                )
+              }),
           )
-        }
+        ).flatMap(i => i || [])
+
+        hmrPages.clear()
 
         const moduleEntries = moduleIds
           .filter(isTruthy)
-          .map(id => ctx.server.moduleGraph.getModuleById(id as string))
+          .map(id => ctx.server.moduleGraph.getModuleById(id))
           .filter(notNullish)
+          .concat(modules)
 
         pluginOptions.onDataReload?.(newData, data)
-
         Object.assign(data, newData)
 
-        moduleEntries.map(m => ctx.server.moduleGraph.invalidateModule(m))
         return moduleEntries
       },
 
@@ -227,6 +241,13 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRo
         }
       },
     },
+    {
+      name: 'xxx',
+      handleHotUpdate(i) {
+        if (i.file.endsWith('.vue'))
+          console.dir(i.modules)
+      },
+    },
   ]
 
   async function getLayouts() {

packages/slidev/node/plugins/preset.ts

@@ -54,24 +54,27 @@ export async function ViteSlidevPlugin(
     data: { config },
   } = options
 
-  return [
-    createWindiCSSPlugin(options, pluginOptions),
-
-    Vue({
-      include: [/\.vue$/, /\.md$/],
-      exclude: [],
-      template: {
-        compilerOptions: {
-          isCustomElement(tag) {
-            return customElements.has(tag)
-          },
+  const VuePlugin = Vue({
+    include: [/\.vue$/, /\.md$/],
+    exclude: [],
+    template: {
+      compilerOptions: {
+        isCustomElement(tag) {
+          return customElements.has(tag)
         },
       },
-      ...vueOptions,
-    }),
+    },
+    ...vueOptions,
+  })
 
+  return [
+    createWindiCSSPlugin(options, pluginOptions),
     await createMarkdownPlugin(options, pluginOptions),
 
+    VuePlugin,
+
+    createSlidesLoader(options, pluginOptions, VuePlugin),
+
     ViteComponents({
       extensions: ['vue', 'md', 'ts'],
 
@@ -124,7 +127,6 @@ export async function ViteSlidevPlugin(
     }),
     createConfigPlugin(options),
     createEntryPlugin(options),
-    createSlidesLoader(options, pluginOptions),
     createClientSetupPlugin(options),
     createMonacoTypesLoader(),
     createFixPlugins(options),