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

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [2.3.4](https://github.com/vitejs/vite-plugin-vue2/compare/v2.3.3...v2.3.4) (2025-01-06)
+
+### Bug Fixes
+热更新失效 #7 ([#7](https://github.com/vitejs/vite-plugin-vue/issues/7))
+
+fix(hmr): should reload if relies file changed after re-render #471 ([#471](https://github.com/vitejs/vite-plugin-vue/pull/471))
+
+Fix description: The bugs in vite-plugin-vue also occur in vite-plugin-vue2, and the same solution can be used to fix them.
+
+### Features
+
+* feat: Upgrade from version 2.7.0-beta.8 to version 2.7.16.
+
+
+
 ## [2.3.3](https://github.com/vitejs/vite-plugin-vue2/compare/v2.3.2...v2.3.3) (2024-11-26)
 
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@vitejs/plugin-vue2",
-  "version": "2.3.3",
+  "name": "@zstings/vite-plugin-vue2",
+  "version": "2.3.4",
   "license": "MIT",
   "author": "Evan You",
   "packageManager": "[email protected]",
@@ -29,13 +29,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vitejs/vite-plugin-vue2.git",
+    "url": "git+https://github.com/zstings/vite-plugin-vue2.git",
     "directory": "packages/plugin-vue"
   },
   "bugs": {
-    "url": "https://github.com/vitejs/vite-plugin-vue2/issues"
+    "url": "https://github.com/zstings/vite-plugin-vue2/issues"
   },
-  "homepage": "https://github.com/vitejs/vite-plugin-vue2/#readme",
+  "homepage": "https://github.com/zstings/vite-plugin-vue2/#readme",
   "peerDependencies": {
     "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
     "vue": "^2.7.0-0"
@@ -61,5 +61,9 @@
     "vite": "^3.0.0",
     "vitest": "^0.15.1",
     "vue": "^2.7.0-beta.8"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   }
 }

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 () => {