fix(plugin-vue): ensure HMR updates styles when SFC is treated as a type dependency (#541)

Author: jh-leong

packages/plugin-vue/src/handleHotUpdate.ts

@@ -31,6 +31,7 @@ export async function handleHotUpdate(
   { file, modules, read }: HmrContext,
   options: ResolvedOptions,
   customElement: boolean,
+  typeDepModules?: ModuleNode[],
 ): Promise<ModuleNode[] | void> {
   const prevDescriptor = getDescriptor(file, options, false, true)
   if (!prevDescriptor) {
@@ -172,7 +173,9 @@ export async function handleHotUpdate(
     }
     debug(`[vue:update(${updateType.join('&')})] ${file}`)
   }
-  return [...affectedModules].filter(Boolean) as ModuleNode[]
+  return [...affectedModules, ...(typeDepModules || [])].filter(
+    Boolean,
+  ) as ModuleNode[]
 }
 
 export function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null): boolean {

packages/plugin-vue/src/index.ts

@@ -1,5 +1,5 @@
 import fs from 'node:fs'
-import type { Plugin, ViteDevServer } from 'vite'
+import type { ModuleNode, Plugin, ViteDevServer } from 'vite'
 import { createFilter, normalizePath } from 'vite'
 import type {
   SFCBlock,
@@ -224,14 +224,22 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
       if (options.value.compiler.invalidateTypeCache) {
         options.value.compiler.invalidateTypeCache(ctx.file)
       }
+
+      let typeDepModules: ModuleNode[] | undefined
+      const matchesFilter = filter.value(ctx.file)
       if (typeDepToSFCMap.has(ctx.file)) {
-        return handleTypeDepChange(typeDepToSFCMap.get(ctx.file)!, ctx)
+        typeDepModules = handleTypeDepChange(
+          typeDepToSFCMap.get(ctx.file)!,
+          ctx,
+        )
+        if (!matchesFilter) return typeDepModules
       }
-      if (filter.value(ctx.file)) {
+      if (matchesFilter) {
         return handleHotUpdate(
           ctx,
           options.value,
           customElementFilter.value(ctx.file),
+          typeDepModules,
         )
       }
     },

playground/vue/ExportTypeProps1.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="export-type-props1">{{ props }}</div>
+</template>
+
+<script lang="ts">
+export interface FooProps {
+  msg: string
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<FooProps>()
+</script>
+
+<style>
+.export-type-props1 {
+  color: red;
+}
+</style>

playground/vue/ExportTypeProps2.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="export-type-props2">{{ props }}</div>
+</template>
+
+<script setup lang="ts">
+import type { FooProps } from './ExportTypeProps1.vue'
+const props = defineProps<FooProps>()
+</script>

playground/vue/Main.vue

@@ -36,6 +36,8 @@
   <PreCompiledExternalScoped />
   <PreCompiledExternalCssModules />
   <ParserOptions />
+  <ExportTypeProps1 msg="msg" />
+  <ExportTypeProps2 msg="msg" />
 </template>
 
 <script setup lang="ts">
@@ -66,6 +68,8 @@ import PreCompiledExternalScoped from './pre-compiled/external-scoped.vue'
 import PreCompiledExternalCssModules from './pre-compiled/external-cssmodules.vue'
 import ParserOptions from './ParserOptions.vue'
 import HmrCircularReference from './HmrCircularReference.vue'
+import ExportTypeProps1 from './ExportTypeProps1.vue'
+import ExportTypeProps2 from './ExportTypeProps2.vue'
 
 const TsGeneric = defineAsyncComponent(() => import('./TsGeneric.vue'))
 

playground/vue/__tests__/vue.spec.ts

@@ -409,6 +409,20 @@ describe('macro imported types', () => {
       ),
     )
   })
+
+  test('should hmr when SFC is treated as a type dependency', async () => {
+    const cls1 = '.export-type-props1'
+    expect(await getColor(cls1)).toBe('red')
+    editFile('ExportTypeProps1.vue', (code) => code.replace('red', 'blue'))
+    await untilUpdated(() => getColor(cls1), 'blue')
+
+    const cls2 = '.export-type-props2'
+    editFile('ExportTypeProps1.vue', (code) => code.replace('msg: string', ''))
+    await untilUpdated(
+      () => page.textContent(cls2),
+      JSON.stringify({}, null, 2),
+    )
+  })
 })
 
 test('TS with generics', async () => {