From 71901b3161540bc4248c241c412c4fb836e20a9a Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 8 Nov 2024 22:32:20 +0800
Subject: [PATCH 1/4] fix(HMR): hmr reload if relies file changed

---
 packages/plugin-vue/src/index.ts     |  6 ++++++
 packages/plugin-vue/src/main.ts      | 12 +++++++++++-
 playground/vue/Hmr.vue               |  3 +++
 playground/vue/__tests__/vue.spec.ts | 11 +++++++++++
 playground/vue/lib.js                |  3 +++
 5 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 playground/vue/lib.js

diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
index 2ac6d5b8..a38ca355 100644
--- a/packages/plugin-vue/src/index.ts
+++ b/packages/plugin-vue/src/index.ts
@@ -200,6 +200,12 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
     },
 
     handleHotUpdate(ctx) {
+      ctx.server.ws.send({
+        type: 'custom',
+        event: 'file-changed',
+        data: { file: ctx.file },
+      })
+
       if (options.value.compiler.invalidateTypeCache) {
         options.value.compiler.invalidateTypeCache(ctx.file)
       }
diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index fce8c8ea..a039f179 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -148,9 +148,19 @@ export async function transformMain(
       `typeof __VUE_HMR_RUNTIME__ !== 'undefined' && ` +
         `__VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)`,
     )
+    output.push(
+      `import.meta.hot.on('file-changed', ({ file }) => {`,
+      `  window.__VUE_HMR_CHANGED_FILE = file`,
+      `})`,
+    )
     // check if the template is the only thing that changed
     if (prevDescriptor && isOnlyTemplateChanged(prevDescriptor, descriptor)) {
-      output.push(`export const _rerender_only = true`)
+      // #7 vite will cache the transform result. If the current hot update
+      // is triggered by changes in other files that the current component
+      // relies on, a reload is required.
+      output.push(
+        `export const _rerender_only = window.__VUE_HMR_CHANGED_FILE === ${JSON.stringify(filename)}`,
+      )
     }
     output.push(
       `import.meta.hot.accept(mod => {`,
diff --git a/playground/vue/Hmr.vue b/playground/vue/Hmr.vue
index 5535467a..541929d4 100644
--- a/playground/vue/Hmr.vue
+++ b/playground/vue/Hmr.vue
@@ -2,11 +2,14 @@
   <h2 class="hmr">HMR</h2>
   <p>Click the button then edit this message. The count should be preserved.</p>
   <button class="hmr-inc" @click="count++">count is {{ count }}</button>
+  <span class="hmr-number">{{ number }}</span>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import Node from './Node.vue'
+import { test } from './lib.js'
+const number = test()
 
 let foo: number = 0
 
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index aa88ec19..665ae84f 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -206,6 +206,17 @@ describe('hmr', () => {
     await untilUpdated(() => page.textContent('.hmr-inc'), 'count is 100')
   })
 
+  test('should reload when relies file changed', async () => {
+    // rerender
+    editFile('Hmr.vue', (code) => code.replace('HMR', 'HMR updated'))
+    await untilUpdated(() => page.textContent('h2.hmr'), 'HMR updated')
+    await untilUpdated(() => page.textContent('.hmr-number'), '100')
+
+    // reload
+    editFile('lib.js', (code) => code.replace('return 100', 'return 200'))
+    await untilUpdated(() => page.textContent('.hmr-number'), '200')
+  })
+
   test('global hmr for some scenarios', async () => {
     editFile('Hmr.vue', (code) =>
       code.replace('</template>', '  <Node/>\n' + '</template>'),
diff --git a/playground/vue/lib.js b/playground/vue/lib.js
new file mode 100644
index 00000000..7291725f
--- /dev/null
+++ b/playground/vue/lib.js
@@ -0,0 +1,3 @@
+export function test() {
+  return 100
+}

From 018cfdc3a220737681687d31dbea2bd6d1985b93 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 8 Nov 2024 22:50:51 +0800
Subject: [PATCH 2/4] chore: update

---
 packages/plugin-vue/src/main.ts      | 4 ++--
 playground/vue/__tests__/vue.spec.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index a039f179..92f667fc 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -150,7 +150,7 @@ export async function transformMain(
     )
     output.push(
       `import.meta.hot.on('file-changed', ({ file }) => {`,
-      `  window.__VUE_HMR_CHANGED_FILE = file`,
+      `  __VUE_HMR_RUNTIME__.CHANGED_FILE = file`,
       `})`,
     )
     // check if the template is the only thing that changed
@@ -159,7 +159,7 @@ export async function transformMain(
       // is triggered by changes in other files that the current component
       // relies on, a reload is required.
       output.push(
-        `export const _rerender_only = window.__VUE_HMR_CHANGED_FILE === ${JSON.stringify(filename)}`,
+        `export const _rerender_only = __VUE_HMR_RUNTIME__.CHANGED_FILE === ${JSON.stringify(filename)}`,
       )
     }
     output.push(
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index 665ae84f..31191203 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -213,7 +213,7 @@ describe('hmr', () => {
     await untilUpdated(() => page.textContent('.hmr-number'), '100')
 
     // reload
-    editFile('lib.js', (code) => code.replace('return 100', 'return 200'))
+    editFile('lib.js', (code) => code.replace('100', '200'))
     await untilUpdated(() => page.textContent('.hmr-number'), '200')
   })
 

From da0b64c44c51469706f9a1e50c1dd91b92a0aa1c Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sat, 9 Nov 2024 09:43:31 +0800
Subject: [PATCH 3/4] fix: normalize path

---
 packages/plugin-vue/src/index.ts | 4 ++--
 packages/plugin-vue/src/main.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
index a38ca355..3db98370 100644
--- a/packages/plugin-vue/src/index.ts
+++ b/packages/plugin-vue/src/index.ts
@@ -1,6 +1,6 @@
 import fs from 'node:fs'
 import type { Plugin, ViteDevServer } from 'vite'
-import { createFilter } from 'vite'
+import { createFilter, normalizePath } from 'vite'
 /* eslint-disable import/no-duplicates */
 import type {
   SFCBlock,
@@ -203,7 +203,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
       ctx.server.ws.send({
         type: 'custom',
         event: 'file-changed',
-        data: { file: ctx.file },
+        data: { file: normalizePath(ctx.file) },
       })
 
       if (options.value.compiler.invalidateTypeCache) {
diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index 92f667fc..06d82d80 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -159,7 +159,7 @@ export async function transformMain(
       // is triggered by changes in other files that the current component
       // relies on, a reload is required.
       output.push(
-        `export const _rerender_only = __VUE_HMR_RUNTIME__.CHANGED_FILE === ${JSON.stringify(filename)}`,
+        `export const _rerender_only = __VUE_HMR_RUNTIME__.CHANGED_FILE === ${JSON.stringify(normalizePath(filename))}`,
       )
     }
     output.push(

From 8939c881ce7f5bc3e1e21fd795679249405dd60f Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sat, 9 Nov 2024 09:57:04 +0800
Subject: [PATCH 4/4] chore: add comments

---
 packages/plugin-vue/src/main.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index 06d82d80..eddcfff3 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -155,9 +155,10 @@ export async function transformMain(
     )
     // check if the template is the only thing that changed
     if (prevDescriptor && isOnlyTemplateChanged(prevDescriptor, descriptor)) {
-      // #7 vite will cache the transform result. If the current hot update
-      // is triggered by changes in other files that the current component
-      // relies on, a reload is required.
+      // #7 only consider re-render if the HMR is triggered by the current component,
+      // otherwise reload. Due to vite will cache the transform result. If the HMR
+      // is triggered by other files that the current component relies on, a reload
+      // is required.
       output.push(
         `export const _rerender_only = __VUE_HMR_RUNTIME__.CHANGED_FILE === ${JSON.stringify(normalizePath(filename))}`,
       )