From 48806dede5d6c8ac3f2a4436a5a2a80c44f289a9 Mon Sep 17 00:00:00 2001
From: ygj6 <chieffochen2021>
Date: Fri, 5 Nov 2021 19:37:18 +0800
Subject: [PATCH] fix(plugin-vue): global hmr for some scenarios

---
 packages/playground/vue/Hmr.vue               |  1 +
 packages/playground/vue/Node.vue              |  3 +++
 packages/playground/vue/__tests__/vue.spec.ts | 14 +++++++++++
 packages/plugin-vue/src/handleHotUpdate.ts    | 23 +++++++++++++++++--
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 packages/playground/vue/Node.vue

diff --git a/packages/playground/vue/Hmr.vue b/packages/playground/vue/Hmr.vue
index 89dade2c4f5879..5535467af3858f 100644
--- a/packages/playground/vue/Hmr.vue
+++ b/packages/playground/vue/Hmr.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import Node from './Node.vue'
 
 let foo: number = 0
 
diff --git a/packages/playground/vue/Node.vue b/packages/playground/vue/Node.vue
new file mode 100644
index 00000000000000..246442d29f522c
--- /dev/null
+++ b/packages/playground/vue/Node.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="node">this is node</div>
+</template>
diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
index 11049e3b5ff76e..9729e1b8b66fac 100644
--- a/packages/playground/vue/__tests__/vue.spec.ts
+++ b/packages/playground/vue/__tests__/vue.spec.ts
@@ -157,10 +157,24 @@ describe('hmr', () => {
     await untilUpdated(() => page.textContent('.hmr-inc'), 'count is 100')
   })
 
+  test('global hmr for some scenarios', async () => {
+    editFile('Hmr.vue', (code) =>
+      code.replace('</template>', '  <Node/>\n' + '</template>')
+    )
+    await untilUpdated(() => page.innerHTML('.node'), 'this is node')
+  })
+
   test('should re-render when template is emptied', async () => {
     editFile('Hmr.vue', () => '')
     await untilUpdated(() => page.innerHTML('.hmr-block'), '<!---->')
   })
+
+  test('should global hmr when setup with lang=ts or lang=tsx', async () => {
+    editFile('Hmr.vue', (code) =>
+      code.replace('</template>', '  <Node/>\n' + '</template>')
+    )
+    await untilUpdated(() => page.innerHTML('.node'), 'this is node')
+  })
 })
 
 describe('src imports', () => {
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index 88f44a37bd7b2b..6a9d96b9dcc9c8 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -1,5 +1,5 @@
 import _debug from 'debug'
-import { SFCBlock, SFCDescriptor } from '@vue/compiler-sfc'
+import { SFCBlock, SFCDescriptor, resolveTemplateUsageCheckString } from '@vue/compiler-sfc'
 import {
   createDescriptor,
   getDescriptor,
@@ -40,7 +40,8 @@ export async function handleHotUpdate(
 
   if (
     !isEqualBlock(descriptor.script, prevDescriptor.script) ||
-    !isEqualBlock(descriptor.scriptSetup, prevDescriptor.scriptSetup)
+    !isEqualBlock(descriptor.scriptSetup, prevDescriptor.scriptSetup) ||
+    needGlobHMR(descriptor, prevDescriptor)
   ) {
     let scriptModule: ModuleNode | undefined
     if (descriptor.script?.lang && !descriptor.script.src) {
@@ -169,6 +170,23 @@ export function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null): boolean {
   return keysA.every((key) => a.attrs[key] === b.attrs[key])
 }
 
+// fix vue issue #3176
+function needGlobHMR(
+  prev: SFCDescriptor | null,
+  next: SFCDescriptor | null
+): boolean {
+  const isDynamicUpdate = resolveTemplateUsageCheckString(prev!) !== resolveTemplateUsageCheckString(next!)
+  const prevSetup = prev!.scriptSetup
+  const nextSetup = next!.scriptSetup
+  const isSetupWithTS = !!(
+    prevSetup?.setup &&
+    nextSetup?.setup &&
+    (prevSetup.lang === 'ts' || prevSetup.lang === 'tsx')
+    && (nextSetup.lang === 'ts' || nextSetup.lang === 'tsx')
+  )
+  return isDynamicUpdate && isSetupWithTS
+}
+
 export function isOnlyTemplateChanged(
   prev: SFCDescriptor,
   next: SFCDescriptor
@@ -176,6 +194,7 @@ export function isOnlyTemplateChanged(
   return (
     isEqualBlock(prev.script, next.script) &&
     isEqualBlock(prev.scriptSetup, next.scriptSetup) &&
+    !needGlobHMR(prev, next) &&
     prev.styles.length === next.styles.length &&
     prev.styles.every((s, i) => isEqualBlock(s, next.styles[i])) &&
     prev.customBlocks.length === next.customBlocks.length &&