fix(plugin-vue): fix hmr issue in vuejs/core#4358

vitejs · Nov 26, 2021 · 7a52d98 · 7a52d98
1 parent cab434e
commit 7a52d98
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git 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
@@ -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
   })