From 9d0b9d834bd4fe0b16d18eeb7af10742c278673b Mon Sep 17 00:00:00 2001
From: sun0day <ivan.xu@applovin.com>
Date: Fri, 25 Nov 2022 23:53:50 +0800
Subject: [PATCH] fix(plugin-vue): invalidate script module cache when it
 changed in hot update (#11059)

---
 packages/plugin-vue/src/handleHotUpdate.ts |  5 +++--
 playground/vue/HmrTsx.vue                  | 17 +++++++++++++++++
 playground/vue/Main.vue                    |  4 ++++
 playground/vue/__tests__/vue.spec.ts       |  8 ++++++++
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 playground/vue/HmrTsx.vue

diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index 5569f0dfbe02ae..d1dde364eb7f10 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/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)!,
diff --git a/playground/vue/HmrTsx.vue b/playground/vue/HmrTsx.vue
new file mode 100644
index 00000000000000..c1a2331da6a6be
--- /dev/null
+++ b/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>
diff --git a/playground/vue/Main.vue b/playground/vue/Main.vue
index 521bbbff08a3ce..b91d50f9287a31 100644
--- a/playground/vue/Main.vue
+++ b/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'
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index 001e59b0a2a235..feaeb42b8f7a6c 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/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', () => {