fix(hmr): track original __vapor state during component mode switching (#14187)

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)
     ? (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,13 @@ export function getVaporInterface(
   return res!
 }
 
+export function isVaporComponent(type: ConcreteComponent): boolean | undefined {
+  if (__DEV__ && isHmrUpdating && hmrDirtyComponentsMode.has(type)) {
+    return hmrDirtyComponentsMode.get(type)
+  }
+  return type.__vapor
+}
+
 /**
  * shared between vdom and vapor
  */

packages/runtime-vapor/__tests__/hmr.spec.ts

@@ -1,6 +1,8 @@
 import {
   type HMRRuntime,
   computed,
+  createApp,
+  h,
   nextTick,
   onActivated,
   onDeactivated,
@@ -20,6 +22,7 @@ import {
   renderEffect,
   setText,
   template,
+  vaporInteropPlugin,
   withVaporCtx,
 } from '@vue/runtime-vapor'
 import { BindingTypes } from '@vue/compiler-core'
@@ -1060,4 +1063,74 @@ describe('hot module replacement', () => {
       `"<div>child changed2</div><div>root changed</div>"`,
     )
   })
+
+  describe('switch vapor/vdom modes', () => {
+    test('vapor -> vdom', async () => {
+      const id = 'vapor-to-vdom'
+      const Comp = {
+        __vapor: true,
+        __hmrId: id,
+        render() {
+          return template('<div>foo</div>')()
+        },
+      }
+      createRecord(id, Comp)
+
+      const App = {
+        render() {
+          return h(Comp as any)
+        },
+      }
+      const root = document.createElement('div')
+      const app = createApp(App)
+      app.use(vaporInteropPlugin)
+      app.mount(root)
+      expect(root.innerHTML).toBe('<div>foo</div>')
+
+      // switch to vdom
+      reload(id, {
+        __hmrId: id,
+        render() {
+          return h('div', 'bar')
+        },
+      })
+
+      await nextTick()
+      expect(root.innerHTML).toBe('<div>bar</div>')
+    })
+
+    test('vdom -> vapor', async () => {
+      const id = 'vdom-to-vapor'
+      const Comp = {
+        __hmrId: id,
+        render() {
+          return h('div', 'foo')
+        },
+      }
+      createRecord(id, Comp)
+
+      const App = {
+        render() {
+          return h(Comp)
+        },
+      }
+      const root = document.createElement('div')
+      const app = createApp(App)
+      app.use(vaporInteropPlugin)
+      app.mount(root)
+      expect(root.innerHTML).toBe('<div>foo</div>')
+
+      // switch to vapor
+      reload(id, {
+        __vapor: true,
+        __hmrId: id,
+        render() {
+          return template('<div>bar</div>')()
+        },
+      })
+
+      await nextTick()
+      expect(root.innerHTML).toBe('<div>bar</div>')
+    })
+  })
 })