fix(hmr): should reload if relies file changed after re-render

Author: zstings

playground/hmr/TestHmr.vue

@@ -1,8 +1,10 @@
 <script>
+import { test } from './lib.js'
 export default {
   data() {
     return {
       count: 0,
+      number: test()
     }
   },
 }
@@ -20,5 +22,6 @@ export default {
         &gt;&gt;&gt; {{ count }} &lt;&lt;&lt;
       </button>
     </p>
+    <span class="hmr-number">{{ number }}</span>
   </div>
 </template>

playground/hmr/lib.js

@@ -0,0 +1,3 @@
+export function test() {
+  return 100
+}

src/index.ts

@@ -1,5 +1,5 @@
 import fs from 'node:fs'
-import { createFilter } from 'vite'
+import { createFilter, normalizePath } from 'vite'
 import type { Plugin, ViteDevServer } from 'vite'
 import type {
   SFCBlock,
@@ -85,6 +85,12 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
     name: 'vite:vue2',
 
     handleHotUpdate(ctx) {
+      ctx.server.ws.send({
+        type: 'custom',
+        event: 'file-changed',
+        data: { file: normalizePath(ctx.file) },
+      })
+
       if (!filter(ctx.file)) {
         return
       }

src/main.ts

@@ -2,7 +2,7 @@ import path from 'node:path'
 import type { SFCBlock, SFCDescriptor } from 'vue/compiler-sfc'
 import type { PluginContext, TransformPluginContext } from 'rollup'
 import type { RawSourceMap } from 'source-map'
-import { transformWithEsbuild } from 'vite'
+import { transformWithEsbuild, normalizePath } from 'vite'
 import {
   createDescriptor,
   getPrevDescriptor,
@@ -110,12 +110,24 @@ var __component__ = /*#__PURE__*/__normalizer(
       `  __VUE_HMR_RUNTIME__.createRecord(${id}, __component__.options)`,
       `}`
     )
+    output.push(
+      `import.meta.hot.on('file-changed', ({ file }) => {`,
+      `  __VUE_HMR_RUNTIME__.CHANGED_FILE = file`,
+      `})`,
+    )
     // check if the template is the only thing that changed
     if (
       hasFunctional ||
       (prevDescriptor && isOnlyTemplateChanged(prevDescriptor, descriptor))
     ) {
-      output.push(`export const _rerender_only = true`)
+      // https://github.com/vitejs/vite-plugin-vue/issues/7
+      // #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))}`,
+      )
     }
     output.push(
       `import.meta.hot.accept(mod => {`,

test/test.spec.ts

@@ -80,6 +80,14 @@ export function declareTests(isBuild: boolean) {
       )
       await expectByPolling(() => getText('.hmr-increment'), 'count is 1337')
     })
+
+    test('should reload when relies file changed', async () => {
+      await expectByPolling(() => getText('.hmr-number'), '100')
+      await updateFile('hmr/lib.js', content =>
+        content.replace('100', '200')
+      )
+      await expectByPolling(() => getText('.hmr-number'), '200')
+    })
   }
 
   test('SFC <style scoped>', async () => {