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

Author: edison1105

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