fix(hmr): track original __vapor state of components during HMR reload

Author: edison1105

packages/runtime-core/src/components/BaseTransition.ts

@@ -21,7 +21,11 @@ import { ErrorCodes, callWithAsyncErrorHandling } from '../errorHandling'
 import { PatchFlags, ShapeFlags, isArray, isFunction } from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
 import { isTeleport } from './Teleport'
-import { type RendererElement, getVaporInterface } from '../renderer'
+import {
+  type RendererElement,
+  getVaporInterface,
+  isVaporComponent,
+} from '../renderer'
 import { SchedulerJobFlags } from '../scheduler'
 
 type Hook<T = () => void> = T | T[]
@@ -140,7 +144,7 @@ export const BaseTransitionPropsValidators: Record<string, any> = {
 }
 
 const recursiveGetSubtree = (instance: ComponentInternalInstance): VNode => {
-  const subTree = instance.type.__vapor
+  const subTree = isVaporComponent(instance.type as ConcreteComponent)
     ? (instance as any).block
     : instance.subTree
   return subTree.component ? recursiveGetSubtree(subTree.component) : subTree
@@ -559,7 +563,7 @@ function getInnerChild(vnode: VNode): VNode | undefined {
 
 export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks): void {
   if (vnode.shapeFlag & ShapeFlags.COMPONENT && vnode.component) {
-    if ((vnode.type as ConcreteComponent).__vapor) {
+    if (isVaporComponent(vnode.type as ConcreteComponent)) {
       getVaporInterface(vnode.component, vnode).setTransitionHooks(
         vnode.component,
         hooks,

packages/runtime-core/src/hmr.ts

@@ -20,6 +20,17 @@ export const hmrDirtyComponents: Map<
   Set<GenericComponentInstance>
 > = new Map<ConcreteComponent, Set<GenericComponentInstance>>()
 
+// During HMR reload, `updateComponentDef` mutates the old component definition
+// with the new one's properties (including `__vapor`). This causes issues when
+// a component switches between vapor and vdom modes, because the renderer still
+// holds references to the old VNodes whose `type` now has an incorrect `__vapor`
+// value. This Map tracks the original `__vapor` state of dirty components so
+// that operations like unmount/move/getNextHostNode can use the correct mode.
+export const hmrDirtyComponentsMode: Map<ConcreteComponent, boolean> = new Map<
+  ConcreteComponent,
+  boolean
+>()
+
 export interface HMRRuntime {
   createRecord: typeof createRecord
   rerender: typeof rerender
@@ -152,6 +163,7 @@ function reload(id: string, newComp: HMRComponent): void {
         hmrDirtyComponents.set(oldComp, (dirtyInstances = new Set()))
       }
       dirtyInstances.add(instance)
+      hmrDirtyComponentsMode.set(oldComp, !!isVapor)
 
       // 3. invalidate options resolution cache
       instance.appContext.propsCache.delete(instance.type as any)
@@ -206,6 +218,7 @@ function reload(id: string, newComp: HMRComponent): void {
   // 5. make sure to cleanup dirty hmr components after update
   queuePostFlushCb(() => {
     hmrDirtyComponents.clear()
+    hmrDirtyComponentsMode.clear()
   })
 }
 

packages/runtime-core/src/renderer.ts

@@ -83,7 +83,12 @@ import {
   type TeleportVNode,
 } from './components/Teleport'
 import { type KeepAliveContext, isKeepAlive } from './components/KeepAlive'
-import { isHmrUpdating, registerHMR, unregisterHMR } from './hmr'
+import {
+  hmrDirtyComponentsMode,
+  isHmrUpdating,
+  registerHMR,
+  unregisterHMR,
+} from './hmr'
 import { type RootHydrateFunction, createHydrationFunctions } from './hydration'
 import { invokeDirectiveHook } from './directives'
 import { endMeasure, startMeasure } from './profiling'
@@ -2177,7 +2182,7 @@ function baseCreateRenderer(
   ) => {
     const { el, type, transition, children, shapeFlag } = vnode
     if (shapeFlag & ShapeFlags.COMPONENT) {
-      if ((type as ConcreteComponent).__vapor) {
+      if (isVaporComponent(type as ConcreteComponent)) {
         getVaporInterface(parentComponent, vnode).move(vnode, container, anchor)
       } else {
         move(
@@ -2309,7 +2314,7 @@ function baseCreateRenderer(
     }
 
     if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
-      if ((vnode.type as ConcreteComponent).__vapor) {
+      if (isVaporComponent(vnode.type as ConcreteComponent)) {
         getVaporInterface(parentComponent!, vnode).deactivate(
           vnode,
           (parentComponent!.ctx as KeepAliveContext).getStorageContainer(),
@@ -2332,7 +2337,7 @@ function baseCreateRenderer(
     }
 
     if (shapeFlag & ShapeFlags.COMPONENT) {
-      if ((type as ConcreteComponent).__vapor) {
+      if (isVaporComponent(type as ConcreteComponent)) {
         getVaporInterface(parentComponent, vnode).unmount(vnode, doRemove)
         return
       } else {
@@ -2539,7 +2544,7 @@ function baseCreateRenderer(
 
   const getNextHostNode: NextFn = vnode => {
     if (vnode.shapeFlag & ShapeFlags.COMPONENT) {
-      if ((vnode.type as ConcreteComponent).__vapor) {
+      if (isVaporComponent(vnode.type as ConcreteComponent)) {
         return hostNextSibling(vnode.anchor!)
       }
       return getNextHostNode(vnode.component!.subTree)
@@ -2828,6 +2833,15 @@ export function getVaporInterface(
   return res!
 }
 
+export function isVaporComponent(type: ConcreteComponent): boolean | undefined {
+  if (__DEV__ && isHmrUpdating) {
+    if (hmrDirtyComponentsMode.has(type)) {
+      return hmrDirtyComponentsMode.get(type)
+    }
+  }
+  return type.__vapor
+}
+
 /**
  * shared between vdom and vapor
  */