From 709e4b0428d8cdc8299b22898c76e58d66ca92c9 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 26 Nov 2021 14:54:00 +0800
Subject: [PATCH] fix(plugin-vue): fix hmr issue in vuejs/vue-next#4358

---
 packages/playground/vue/Hmr.vue               |  1 +
 packages/playground/vue/__tests__/vue.spec.ts |  7 +++++
 packages/plugin-vue/src/handleHotUpdate.ts    | 30 +++++++++++++++----
 packages/plugin-vue/src/script.ts             |  1 -
 4 files changed, 32 insertions(+), 7 deletions(-)

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/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
index 11049e3b5ff76e..3a7264b2dfc850 100644
--- a/packages/playground/vue/__tests__/vue.spec.ts
+++ b/packages/playground/vue/__tests__/vue.spec.ts
@@ -157,6 +157,13 @@ 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'), '<!---->')
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index 88f44a37bd7b2b..4f472114e637cb 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -38,10 +38,7 @@ export async function handleHotUpdate(
   )
   const templateModule = modules.find((m) => /type=template/.test(m.url))
 
-  if (
-    !isEqualBlock(descriptor.script, prevDescriptor.script) ||
-    !isEqualBlock(descriptor.scriptSetup, prevDescriptor.scriptSetup)
-  ) {
+  if (hasScriptChanged(prevDescriptor, descriptor)) {
     let scriptModule: ModuleNode | undefined
     if (descriptor.script?.lang && !descriptor.script.src) {
       const scriptModuleRE = new RegExp(
@@ -174,11 +171,32 @@ export function isOnlyTemplateChanged(
   next: SFCDescriptor
 ): boolean {
   return (
-    isEqualBlock(prev.script, next.script) &&
-    isEqualBlock(prev.scriptSetup, next.scriptSetup) &&
+    !hasScriptChanged(prev, next) &&
     prev.styles.length === next.styles.length &&
     prev.styles.every((s, i) => isEqualBlock(s, next.styles[i])) &&
     prev.customBlocks.length === next.customBlocks.length &&
     prev.customBlocks.every((s, i) => isEqualBlock(s, next.customBlocks[i]))
   )
 }
+
+function hasScriptChanged(prev: SFCDescriptor, next: SFCDescriptor): boolean {
+  if (!isEqualBlock(prev.script, next.script)) {
+    return true
+  }
+  if (!isEqualBlock(prev.scriptSetup, next.scriptSetup)) {
+    return true
+  }
+
+  // vue core #3176
+  // <script setup lang="ts"> prunes non-unused imports
+  // the imports pruning depends on template, so script may need to re-compile
+  // based on template changes
+  const prevResolvedScript = getResolvedScript(prev, false)
+  // this is only available in vue@^3.2.23
+  const prevImports = prevResolvedScript?.imports
+  if (prevImports) {
+    return next.shouldForceReload(prevImports)
+  }
+
+  return false
+}
diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts
index 1302282c84676a..bda618c46ff6cd 100644
--- a/packages/plugin-vue/src/script.ts
+++ b/packages/plugin-vue/src/script.ts
@@ -56,7 +56,6 @@ export function resolveScript(
     inlineTemplate: isUseInlineTemplate(descriptor, !options.devServer),
     refTransform: options.refTransform !== false,
     templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
-    // @ts-ignore TODO remove ignore when we support this in @vue/compiler-sfc
     sourceMap: options.sourceMap
   })