fix(plugin-vue): return rerender function when user empty the template

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 />

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

packages/plugin-vue/src/handleHotUpdate.ts

@@ -1,9 +1,10 @@
 import _debug from 'debug'
-import { SFCBlock, SFCDescriptor } from '@vue/compiler-sfc'
+import { SFCDescriptor } from '@vue/compiler-sfc'
 import {
   createDescriptor,
   getDescriptor,
-  setPrevDescriptor
+  setPrevDescriptor,
+  isEqualBlock
 } from './utils/descriptorCache'
 import { getResolvedScript, setResolvedScript } from './script'
 import { ModuleNode, HmrContext } from 'vite'
@@ -144,20 +145,6 @@ export async function handleHotUpdate({
   return [...affectedModules].filter(Boolean) as ModuleNode[]
 }
 
-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
-  if (a.src && b.src && a.src === b.src) return true
-  if (a.content !== b.content) return false
-  const keysA = Object.keys(a.attrs)
-  const keysB = Object.keys(b.attrs)
-  if (keysA.length !== keysB.length) {
-    return false
-  }
-  return keysA.every((key) => a.attrs[key] === b.attrs[key])
-}
-
 export function isOnlyTemplateChanged(
   prev: SFCDescriptor,
   next: SFCDescriptor

packages/plugin-vue/src/main.ts

@@ -5,7 +5,8 @@ import { ResolvedOptions } from '.'
 import {
   createDescriptor,
   getPrevDescriptor,
-  setDescriptor
+  setDescriptor,
+  isEqualBlock
 } from './utils/descriptorCache'
 import { PluginContext, TransformPluginContext } from 'rollup'
 import { resolveScript } from './script'
@@ -71,11 +72,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)

packages/plugin-vue/src/utils/descriptorCache.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import slash from 'slash'
 import hash from 'hash-sum'
-import { parse, SFCDescriptor } from '@vue/compiler-sfc'
+import { parse, SFCDescriptor, SFCBlock } from '@vue/compiler-sfc'
 
 const cache = new Map<string, SFCDescriptor>()
 const prevCache = new Map<string, SFCDescriptor | undefined>()
@@ -49,3 +49,17 @@ export function getDescriptor(filename: string, errorOnMissing = true) {
 export function setDescriptor(filename: string, entry: SFCDescriptor) {
   cache.set(filename, entry)
 }
+
+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
+  if (a.src && b.src && a.src === b.src) return true
+  if (a.content !== b.content) return false
+  const keysA = Object.keys(a.attrs)
+  const keysB = Object.keys(b.attrs)
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+  return keysA.every((key) => a.attrs[key] === b.attrs[key])
+}