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

Author: edison1105

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,
@@ -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: normalizePath(ctx.file) },
+      })
+
       if (options.value.compiler.invalidateTypeCache) {
         options.value.compiler.invalidateTypeCache(ctx.file)
       }

packages/plugin-vue/src/main.ts

@@ -148,9 +148,20 @@ 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 }) => {`,
+      `  __VUE_HMR_RUNTIME__.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 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 => {`,

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
 

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('100', '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>'),

playground/vue/lib.js

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