fix(plugin-vue): fix hmr when emptying sfc file (#2142)

fix #2128
vitejs · Feb 24, 2021 · 493b942 · 493b942
1 parent a0d922e
commit 493b942
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue
@@ -2,7 +2,9 @@
   <div class="comments"><!--hello--></div>
   <h1>Vue SFCs</h1>
   <pre>{{ time }}</pre>
-  <Hmr />
+  <div class="hmr-block">
+    <Hmr />
+  </div>
   <Syntax />
   <PreProcessors />
   <CssModules />

diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
@@ -133,6 +133,11 @@ describe('hmr', () => {
     )
     await untilUpdated(() => page.textContent('.hmr-inc'), 'count is 100')
   })
+
+  test('should re-render when template is emptied', async () => {
+    editFile('Hmr.vue', () => '')
+    await untilUpdated(() => page.innerHTML('.hmr-block'), '<!---->')
+  })
 })
 
 describe('src imports', () => {

diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -144,7 +144,7 @@ export async function handleHotUpdate({
   return [...affectedModules].filter(Boolean) as ModuleNode[]
 }
 
-function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null) {
+export function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null) {
   if (!a && !b) return true
   if (!a || !b) return false
   // src imports will trigger their own updates

diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
@@ -10,7 +10,7 @@ import {
 import { PluginContext, TransformPluginContext } from 'rollup'
 import { resolveScript } from './script'
 import { transformTemplateInMain } from './template'
-import { isOnlyTemplateChanged } from './handleHotUpdate'
+import { isOnlyTemplateChanged, isEqualBlock } from './handleHotUpdate'
 import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map'
 import { createRollupError } from './utils/error'
 
@@ -71,11 +71,23 @@ export async function transformMain(
     ))
   }
 
-  const renderReplace = hasTemplateImport
-    ? ssr
+  let renderReplace = ''
+  if (hasTemplateImport) {
+    renderReplace = ssr
       ? `_sfc_main.ssrRender = _sfc_ssrRender`
       : `_sfc_main.render = _sfc_render`
-    : ''
+  } else {
+    // #2128
+    // User may empty the template but we didn't provide rerender function before
+    if (
+      prevDescriptor &&
+      !isEqualBlock(descriptor.template, prevDescriptor.template)
+    ) {
+      renderReplace = ssr
+        ? `_sfc_main.ssrRender = () => {}`
+        : `_sfc_main.render = () => {}`
+    }
+  }
 
   // styles
   const stylesCode = await genStyleCode(descriptor, pluginContext)