From 9c749825eee4e548886d9c84e68deaa4e7c0aa9f Mon Sep 17 00:00:00 2001
From: tycho <jh.leong@outlook.com>
Date: Sat, 8 Mar 2025 23:34:31 +0800
Subject: [PATCH 1/2] fix(plugin-vue): ensure HMR updates styles when SFC is
 treated as a type dependency

---
 packages/plugin-vue/src/index.ts     |  6 ++++--
 playground/vue/ExportTypeProps1.vue  | 19 +++++++++++++++++++
 playground/vue/ExportTypeProps2.vue  |  8 ++++++++
 playground/vue/Main.vue              |  4 ++++
 playground/vue/__tests__/vue.spec.ts |  7 +++++++
 5 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 playground/vue/ExportTypeProps1.vue
 create mode 100644 playground/vue/ExportTypeProps2.vue

diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
index 477eda57..ed18e926 100644
--- a/packages/plugin-vue/src/index.ts
+++ b/packages/plugin-vue/src/index.ts
@@ -224,10 +224,12 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
       if (options.value.compiler.invalidateTypeCache) {
         options.value.compiler.invalidateTypeCache(ctx.file)
       }
+      const matchesFilter = filter.value(ctx.file)
       if (typeDepToSFCMap.has(ctx.file)) {
-        return handleTypeDepChange(typeDepToSFCMap.get(ctx.file)!, ctx)
+        const mod = handleTypeDepChange(typeDepToSFCMap.get(ctx.file)!, ctx)
+        if (!matchesFilter) return mod
       }
-      if (filter.value(ctx.file)) {
+      if (matchesFilter) {
         return handleHotUpdate(
           ctx,
           options.value,
diff --git a/playground/vue/ExportTypeProps1.vue b/playground/vue/ExportTypeProps1.vue
new file mode 100644
index 00000000..20b33143
--- /dev/null
+++ b/playground/vue/ExportTypeProps1.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="export-type-props1">foo: {{ title }}</div>
+</template>
+
+<script lang="ts">
+export interface FooProps {
+  title?: string
+}
+</script>
+
+<script setup lang="ts">
+defineProps<FooProps>()
+</script>
+
+<style>
+.export-type-props1 {
+  color: red;
+}
+</style>
diff --git a/playground/vue/ExportTypeProps2.vue b/playground/vue/ExportTypeProps2.vue
new file mode 100644
index 00000000..9ff2d0ec
--- /dev/null
+++ b/playground/vue/ExportTypeProps2.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import type { FooProps } from './ExportTypeProps1.vue'
+defineProps<FooProps>()
+</script>
+
+<template>
+  <div>bar: {{ title }}</div>
+</template>
diff --git a/playground/vue/Main.vue b/playground/vue/Main.vue
index b25b54e9..5791c419 100644
--- a/playground/vue/Main.vue
+++ b/playground/vue/Main.vue
@@ -36,6 +36,8 @@
   <PreCompiledExternalScoped />
   <PreCompiledExternalCssModules />
   <ParserOptions />
+  <ExportTypeProps1 />
+  <ExportTypeProps2 />
 </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
index 13ff034f..e84aad23 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -409,6 +409,13 @@ describe('macro imported types', () => {
       ),
     )
   })
+
+  test('should update style', async () => {
+    const cls = '.export-type-props1'
+    expect(await getColor(cls)).toBe('red')
+    editFile('ExportTypeProps1.vue', (code) => code.replace('red', 'blue'))
+    await untilUpdated(() => getColor(cls), 'blue')
+  })
 })
 
 test('TS with generics', async () => {

From 8d2ff47a9f079cdada93c10a63be642a5baaccae Mon Sep 17 00:00:00 2001
From: tycho <jh.leong@outlook.com>
Date: Mon, 10 Mar 2025 11:17:03 +0800
Subject: [PATCH 2/2] fix: trigger HMR update when modifying type definitions

---
 packages/plugin-vue/src/handleHotUpdate.ts |  5 ++++-
 packages/plugin-vue/src/index.ts           | 12 +++++++++---
 playground/vue/ExportTypeProps1.vue        |  6 +++---
 playground/vue/ExportTypeProps2.vue        | 10 +++++-----
 playground/vue/Main.vue                    |  4 ++--
 playground/vue/__tests__/vue.spec.ts       | 15 +++++++++++----
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index c831785f..a5781a3e 100644
--- 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
index ed18e926..32e1ddf4 100644
--- 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,16 +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)) {
-        const mod = handleTypeDepChange(typeDepToSFCMap.get(ctx.file)!, ctx)
-        if (!matchesFilter) return mod
+        typeDepModules = handleTypeDepChange(
+          typeDepToSFCMap.get(ctx.file)!,
+          ctx,
+        )
+        if (!matchesFilter) return typeDepModules
       }
       if (matchesFilter) {
         return handleHotUpdate(
           ctx,
           options.value,
           customElementFilter.value(ctx.file),
+          typeDepModules,
         )
       }
     },
diff --git a/playground/vue/ExportTypeProps1.vue b/playground/vue/ExportTypeProps1.vue
index 20b33143..29cb1e17 100644
--- a/playground/vue/ExportTypeProps1.vue
+++ b/playground/vue/ExportTypeProps1.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="export-type-props1">foo: {{ title }}</div>
+  <div class="export-type-props1">{{ props }}</div>
 </template>
 
 <script lang="ts">
 export interface FooProps {
-  title?: string
+  msg: string
 }
 </script>
 
 <script setup lang="ts">
-defineProps<FooProps>()
+const props = defineProps<FooProps>()
 </script>
 
 <style>
diff --git a/playground/vue/ExportTypeProps2.vue b/playground/vue/ExportTypeProps2.vue
index 9ff2d0ec..72fa5059 100644
--- a/playground/vue/ExportTypeProps2.vue
+++ b/playground/vue/ExportTypeProps2.vue
@@ -1,8 +1,8 @@
+<template>
+  <div class="export-type-props2">{{ props }}</div>
+</template>
+
 <script setup lang="ts">
 import type { FooProps } from './ExportTypeProps1.vue'
-defineProps<FooProps>()
+const props = defineProps<FooProps>()
 </script>
-
-<template>
-  <div>bar: {{ title }}</div>
-</template>
diff --git a/playground/vue/Main.vue b/playground/vue/Main.vue
index 5791c419..566fec60 100644
--- a/playground/vue/Main.vue
+++ b/playground/vue/Main.vue
@@ -36,8 +36,8 @@
   <PreCompiledExternalScoped />
   <PreCompiledExternalCssModules />
   <ParserOptions />
-  <ExportTypeProps1 />
-  <ExportTypeProps2 />
+  <ExportTypeProps1 msg="msg" />
+  <ExportTypeProps2 msg="msg" />
 </template>
 
 <script setup lang="ts">
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index e84aad23..9bfc9248 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -410,11 +410,18 @@ describe('macro imported types', () => {
     )
   })
 
-  test('should update style', async () => {
-    const cls = '.export-type-props1'
-    expect(await getColor(cls)).toBe('red')
+  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(cls), '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),
+    )
   })
 })