fix(plugin-vue): invalidate script module cache when it changed in hot update (#11059)

Author: sun0day

packages/plugin-vue/src/handleHotUpdate.ts

@@ -45,7 +45,8 @@ export async function handleHotUpdate(
     })[0]
   const templateModule = modules.find((m) => /type=template/.test(m.url))
 
-  if (hasScriptChanged(prevDescriptor, descriptor)) {
+  const scriptChanged = hasScriptChanged(prevDescriptor, descriptor)
+  if (scriptChanged) {
     let scriptModule: ModuleNode | undefined
     if (
       (descriptor.scriptSetup?.lang && !descriptor.scriptSetup.src) ||
@@ -66,7 +67,7 @@ export async function handleHotUpdate(
     // binding metadata. However, when reloading the template alone the binding
     // metadata will not be available since the script part isn't loaded.
     // in this case, reuse the compiled script from previous descriptor.
-    if (mainModule && !affectedModules.has(mainModule)) {
+    if (!scriptChanged) {
       setResolvedScript(
         descriptor,
         getResolvedScript(prevDescriptor, false)!,

playground/vue/HmrTsx.vue

@@ -0,0 +1,17 @@
+<template>
+  <h2 class="hmr-tsx">HMR</h2>
+  <p>Click the button then edit this message. The count should be preserved.</p>
+  <button class="hmr-tsx-inc" @click="count++">count is {{ count }}</button>
+</template>
+
+<script setup lang="tsx">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<style>
+.hmr-tsx-inc {
+  color: red;
+}
+</style>

playground/vue/Main.vue

@@ -5,6 +5,9 @@
   <div class="hmr-block">
     <Hmr />
   </div>
+  <div class="hmr-tsx-block">
+    <HmrTsx />
+  </div>
   <Syntax />
   <PreProcessors />
   <CssModules />
@@ -27,6 +30,7 @@
 
 <script setup lang="ts">
 import Hmr from './Hmr.vue'
+import HmrTsx from './HmrTsx.vue'
 import Syntax from './Syntax.vue'
 import PreProcessors from './PreProcessors.vue'
 import CssModules from './CssModules.vue'

playground/vue/__tests__/vue.spec.ts

@@ -191,6 +191,14 @@ describe('hmr', () => {
     editFile('Hmr.vue', (code) => code.replace(/<template>.+<\/template>/s, ''))
     await untilUpdated(() => page.innerHTML('.hmr-block'), '<!---->')
   })
+
+  test('should re-render when template and tsx script both changed', async () => {
+    editFile('HmrTsx.vue', (code) => code.replace(/count/g, 'updatedCount'))
+    await untilUpdated(
+      () => page.innerHTML('.hmr-tsx-block .hmr-tsx-inc'),
+      'updatedCount is 0'
+    )
+  })
 })
 
 describe('src imports', () => {