fix(plugin-vue): global hmr for some scenarios

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
 

packages/playground/vue/Node.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="node">this is node</div>
+</template>

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

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,13 +170,31 @@ 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
 ): boolean {
   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 &&