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

vitejs · Nov 26, 2021 · 709e4b0 · 709e4b0
1 parent ecafa80
commit 709e4b0
Show file tree

Hide file tree

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