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

jh-leong · web-flow · commit 4abe3be06e96 · 2025-03-10T16:02:56.000+08:00
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/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 {
diff --git a/packages/plugin-vue/src/index.ts b/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,
         )
       }
     },
diff --git a/playground/vue/ExportTypeProps1.vue b/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>
diff --git a/playground/vue/ExportTypeProps2.vue b/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>
diff --git a/playground/vue/Main.vue b/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'))
 
diff --git a/playground/vue/__tests__/vue.spec.ts b/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 () => {

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ export async function handleHotUpdate(`
`31`	`31`	`{ file, modules, read }: HmrContext,`
`32`	`32`	`options: ResolvedOptions,`
`33`	`33`	`customElement: boolean,`
	`34`	`+ typeDepModules?: ModuleNode[],`
`34`	`35`	`): Promise<ModuleNode[] \| void> {`
`35`	`36`	`const prevDescriptor = getDescriptor(file, options, false, true)`
`36`	`37`	`if (!prevDescriptor) {`
`@@ -172,7 +173,9 @@ export async function handleHotUpdate(`
`172`	`173`	`}`
`173`	`174`	debug(`[vue:update(${updateType.join('&')})] ${file}`)
`174`	`175`	`}`
`175`		`- return [...affectedModules].filter(Boolean) as ModuleNode[]`
	`176`	`+ return [...affectedModules, ...(typeDepModules \|\| [])].filter(`
	`177`	`+ Boolean,`
	`178`	`+ ) as ModuleNode[]`
`176`	`179`	`}`
`177`	`180`
`178`	`181`	`export function isEqualBlock(a: SFCBlock \| null, b: SFCBlock \| null): boolean {`