From 1370302691d63b5a3319aab24a6e24154e1f481f Mon Sep 17 00:00:00 2001
From: ivan <ivan.xu@applovin.com>
Date: Fri, 25 Nov 2022 00:33:56 +0800
Subject: [PATCH 1/3] fix(plugin-vue): invalidate script module cache when it
 changed in hot update (fix #11008)

---
 packages/plugin-vue/src/handleHotUpdate.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index 5569f0dfbe02ae..58554eabe3de90 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -44,8 +44,8 @@ export async function handleHotUpdate(
       return m1.url.length - m2.url.length
     })[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 +66,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 (mainModule && !scriptChanged) {
       setResolvedScript(
         descriptor,
         getResolvedScript(prevDescriptor, false)!,

From 86385ec6659e13ae96fe8d6c676cd0827c1d9619 Mon Sep 17 00:00:00 2001
From: ivan <ivan.xu@applovin.com>
Date: Fri, 25 Nov 2022 17:10:03 +0800
Subject: [PATCH 2/3] refactor(plugin-vue): handleHotUpdate judge cache
 prevDescriptor without mainModule

---
 packages/plugin-vue/src/handleHotUpdate.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index 58554eabe3de90..d1dde364eb7f10 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -44,6 +44,7 @@ export async function handleHotUpdate(
       return m1.url.length - m2.url.length
     })[0]
   const templateModule = modules.find((m) => /type=template/.test(m.url))
+
   const scriptChanged = hasScriptChanged(prevDescriptor, descriptor)
   if (scriptChanged) {
     let scriptModule: ModuleNode | undefined
@@ -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 && !scriptChanged) {
+    if (!scriptChanged) {
       setResolvedScript(
         descriptor,
         getResolvedScript(prevDescriptor, false)!,

From 6a1077feec2818e91aa66d6745e04bca09625733 Mon Sep 17 00:00:00 2001
From: ivan <ivan.xu@applovin.com>
Date: Fri, 25 Nov 2022 17:14:59 +0800
Subject: [PATCH 3/3] test(vue): add tsx script hmr e2e case

---
 playground/vue/HmrTsx.vue            | 17 +++++++++++++++++
 playground/vue/Main.vue              |  4 ++++
 playground/vue/__tests__/vue.spec.ts |  8 ++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 playground/vue/HmrTsx.vue

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