test(hmr): port hmr tests (#14109)

packages/compiler-vapor/src/generators/component.ts

@@ -40,7 +40,7 @@ import { genEventHandler } from './event'
 import { genDirectiveModifiers, genDirectivesForElement } from './directive'
 import { genBlock } from './block'
 import { genModelHandler } from './vModel'
-import { isBuiltInComponent } from '../utils'
+import { isBuiltInComponent, isKeepAliveTag } from '../utils'
 
 export function genCreateComponent(
   operation: CreateComponentIRNode,
@@ -460,7 +460,7 @@ function genSlotBlockWithProps(oper: SlotBlockIRNode, context: CodegenContext) {
     ]
   }
 
-  if (node.type === NodeTypes.ELEMENT) {
+  if (node.type === NodeTypes.ELEMENT && !isKeepAliveTag(node.tag)) {
     // wrap with withVaporCtx to ensure correct currentInstance inside slot
     blockFn = [`${context.helper('withVaporCtx')}(`, ...blockFn, `)`]
   }

packages/runtime-core/src/hmr.ts

@@ -97,7 +97,7 @@ function rerender(id: string, newRender?: Function): void {
     // this flag forces child components with slot content to update
     isHmrUpdating = true
     if (instance.vapor) {
-      instance.hmrRerender!()
+      if (!instance.isUnmounted) instance.hmrRerender!()
     } else {
       const i = instance as ComponentInternalInstance
       // #13771 don't update if the job is already disposed

packages/runtime-vapor/__tests__/_utils.ts

@@ -1,11 +1,19 @@
 import { createVaporApp, vaporInteropPlugin } from '../src'
 import { type App, type Component, createApp } from '@vue/runtime-dom'
-import type { VaporComponent, VaporComponentInstance } from '../src/component'
+import type {
+  ObjectVaporComponent,
+  VaporComponent,
+  VaporComponentInstance,
+} from '../src/component'
 import type { RawProps } from '../src/componentProps'
 import { compileScript, parse } from '@vue/compiler-sfc'
 import * as runtimeVapor from '../src'
 import * as runtimeDom from '@vue/runtime-dom'
 import * as VueServerRenderer from '@vue/server-renderer'
+import {
+  type CompilerOptions,
+  compile as compileVapor,
+} from '@vue/compiler-vapor'
 
 export interface RenderContext {
   component: VaporComponent
@@ -187,6 +195,29 @@ export function compile(
   )
 }
 
+export function compileToVaporRender(
+  template: string,
+  options?: CompilerOptions,
+): ObjectVaporComponent['render'] {
+  let { code } = compileVapor(template, {
+    mode: 'module',
+    prefixIdentifiers: true,
+    hmr: true,
+    ...options,
+  })
+
+  const transformed = code
+    .replace(/\bimport {/g, 'const {')
+    .replace(/ as _/g, ': _')
+    .replace(/} from ['"]vue['"];/g, '} = Vue;')
+    .replace(/export function render/, 'function render')
+
+  return new Function('Vue', `${transformed}\nreturn render`)({
+    ...runtimeDom,
+    ...runtimeVapor,
+  })
+}
+
 export function shuffle(array: Array<any>): any[] {
   let currentIndex = array.length
   let temporaryValue

packages/runtime-vapor/src/apiDefineAsyncComponent.ts

@@ -181,12 +181,14 @@ function createInnerComp(
   parent: VaporComponentInstance & TransitionOptions,
   frag?: DynamicFragment,
 ): VaporComponentInstance {
-  const { rawProps, rawSlots, isSingleRoot, appContext, $transition } = parent
+  const { rawProps, rawSlots, appContext, $transition } = parent
   const instance = createComponent(
     comp,
     rawProps,
     rawSlots,
-    isSingleRoot,
+    // rawProps is shared and already contains fallthrough attrs.
+    // so isSingleRoot should be undefined
+    undefined,
     undefined,
     appContext,
   )

packages/runtime-vapor/src/component.ts

@@ -272,14 +272,12 @@ export function createComponent(
   const prevSlotConsumer = setCurrentSlotConsumer(null)
 
   // HMR
-  if (__DEV__ && component.__hmrId) {
+  if (__DEV__) {
     registerHMR(instance)
     instance.isSingleRoot = isSingleRoot
     instance.hmrRerender = hmrRerender.bind(null, instance)
     instance.hmrReload = hmrReload.bind(null, instance)
-  }
 
-  if (__DEV__) {
     pushWarningContext(instance)
     startMeasure(instance, `init`)
 

packages/runtime-vapor/src/hmr.ts

@@ -1,4 +1,5 @@
 import {
+  isKeepAlive,
   popWarningContext,
   pushWarningContext,
   setCurrentInstance,
@@ -35,6 +36,11 @@ export function hmrReload(
   instance: VaporComponentInstance,
   newComp: VaporComponent,
 ): void {
+  // if parent is KeepAlive, we need to rerender it
+  if (instance.parent && isKeepAlive(instance.parent)) {
+    instance.parent.hmrRerender!()
+    return
+  }
   const normalized = normalizeBlock(instance.block)
   const parent = normalized[0].parentNode!
   const anchor = normalized[normalized.length - 1].nextSibling