fix(hmr): make hmr working with class components (#2144)

packages/runtime-core/src/component.ts

@@ -800,3 +800,7 @@ export function formatComponentName(
 
   return name ? classify(name) : isRoot ? `App` : `Anonymous`
 }
+
+export function isClassComponent(value: unknown): value is ClassComponent {
+  return isFunction(value) && '__vccOpts' in value
+}

packages/runtime-core/src/hmr.ts

@@ -3,7 +3,9 @@ import {
   ConcreteComponent,
   ComponentInternalInstance,
   ComponentOptions,
-  InternalRenderFunction
+  InternalRenderFunction,
+  ClassComponent,
+  isClassComponent
 } from './component'
 import { queueJob, queuePostFlushCb } from './scheduler'
 import { extend } from '@vue/shared'
@@ -83,7 +85,7 @@ function rerender(id: string, newRender?: Function) {
   })
 }
 
-function reload(id: string, newComp: ComponentOptions) {
+function reload(id: string, newComp: ComponentOptions | ClassComponent) {
   const record = map.get(id)
   if (!record) return
   // Array.from creates a snapshot which avoids the set being mutated during
@@ -92,6 +94,7 @@ function reload(id: string, newComp: ComponentOptions) {
     const comp = instance.type
     if (!hmrDirtyComponents.has(comp)) {
       // 1. Update existing comp definition to match new one
+      newComp = isClassComponent(newComp) ? newComp.__vccOpts : newComp
       extend(comp, newComp)
       for (const key in comp) {
         if (!(key in newComp)) {

packages/runtime-core/src/vnode.ts

@@ -17,7 +17,8 @@ import {
   Data,
   ConcreteComponent,
   ClassComponent,
-  Component
+  Component,
+  isClassComponent
 } from './component'
 import { RawSlots } from './componentSlots'
 import { isProxy, Ref, toRaw, ReactiveFlags } from '@vue/reactivity'
@@ -340,7 +341,7 @@ function _createVNode(
   }
 
   // class component normalization.
-  if (isFunction(type) && '__vccOpts' in type) {
+  if (isClassComponent(type)) {
     type = type.__vccOpts
   }