fix(runtime-vapor): component emits vdom interop

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

@@ -4,12 +4,18 @@
 // ./rendererAttrsFallthrough.spec.ts.
 
 import {
+  createApp,
+  h,
   isEmitListener,
   nextTick,
   onBeforeUnmount,
   toHandlers,
 } from '@vue/runtime-dom'
-import { createComponent, defineVaporComponent } from '../src'
+import {
+  createComponent,
+  defineVaporComponent,
+  vaporInteropPlugin,
+} from '../src'
 import { makeRender } from './_utils'
 
 const define = makeRender()
@@ -425,3 +431,28 @@ describe('component: emit', () => {
     expect(fn).not.toHaveBeenCalled()
   })
 })
+
+describe('vdom interop', () => {
+  test('vdom parent > vapor child', () => {
+    const VaporChild = defineVaporComponent({
+      emits: ['click'],
+      setup(_, { emit }) {
+        emit('click')
+        return []
+      },
+    })
+
+    const fn = vi.fn()
+    const App = {
+      setup() {
+        return () => h(VaporChild as any, { onClick: fn })
+      },
+    }
+
+    const root = document.createElement('div')
+    createApp(App).use(vaporInteropPlugin).mount(root)
+
+    // fn should be called once
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+})

packages/runtime-vapor/src/componentEmits.ts

@@ -2,6 +2,7 @@ import { type ObjectEmitsOptions, baseEmit } from '@vue/runtime-dom'
 import type { VaporComponent, VaporComponentInstance } from './component'
 import { EMPTY_OBJ, hasOwn, isArray } from '@vue/shared'
 import { resolveSource } from './componentProps'
+import { interopKey } from './vdomInterop'
 
 /**
  * The logic from core isn't too reusable so it's better to duplicate here
@@ -46,7 +47,11 @@ function propGetter(rawProps: Record<string, any>, key: string) {
     let i = dynamicSources.length
     while (i--) {
       const source = resolveSource(dynamicSources[i])
-      if (hasOwn(source, key)) return resolveSource(source[key])
+      if (hasOwn(source, key))
+        // for props passed from VDOM component, no need to resolve
+        return dynamicSources[interopKey]
+          ? source[key]
+          : resolveSource(source[key])
     }
   }
   return rawProps[key] && resolveSource(rawProps[key])

packages/runtime-vapor/src/componentProps.ts

@@ -26,7 +26,7 @@ import { renderEffect } from './renderEffect'
 
 export type RawProps = Record<string, () => unknown> & {
   // generated by compiler for :[key]="x" or v-bind="x"
-  $?: DynamicPropsSource[]
+  $?: DynamicPropsSource[] & { __interop?: boolean }
 }
 
 export type DynamicPropsSource =

packages/runtime-vapor/src/vdomInterop.ts

@@ -34,6 +34,8 @@ import { renderEffect } from './renderEffect'
 import { createTextNode } from './dom/node'
 import { optimizePropertyLookup } from './dom/prop'
 
+export const interopKey: unique symbol = Symbol(`interop`)
+
 // mounting vapor components and slots in vdom
 const vaporInteropImpl: Omit<
   VaporInteropInterface,
@@ -48,11 +50,16 @@ const vaporInteropImpl: Omit<
     const propsRef = shallowRef(vnode.props)
     const slotsRef = shallowRef(vnode.children)
 
+    const dynamicPropSource: (() => any)[] & { [interopKey]?: boolean } = [
+      () => propsRef.value,
+    ]
+    // mark as interop props
+    dynamicPropSource[interopKey] = true
     // @ts-expect-error
     const instance = (vnode.component = createComponent(
       vnode.type as any as VaporComponent,
       {
-        $: [() => propsRef.value],
+        $: dynamicPropSource,
       } as RawProps,
       {
         _: slotsRef, // pass the slots ref