fix(runtime-vapor): should not fallthrough emit handlers to vdom child
This commit is contained in:
parent
88ef97ffd3
commit
c59a9406e8
|
@ -557,3 +557,7 @@ export { startMeasure, endMeasure } from './profiling'
|
||||||
* @internal
|
* @internal
|
||||||
*/
|
*/
|
||||||
export { initFeatureFlags } from './featureFlags'
|
export { initFeatureFlags } from './featureFlags'
|
||||||
|
/**
|
||||||
|
* @internal
|
||||||
|
*/
|
||||||
|
export { createInternalObject } from './internalObject'
|
||||||
|
|
|
@ -1,4 +1,11 @@
|
||||||
import { type Ref, nextTick, ref } from '@vue/runtime-dom'
|
import {
|
||||||
|
type Ref,
|
||||||
|
createApp,
|
||||||
|
defineComponent,
|
||||||
|
h,
|
||||||
|
nextTick,
|
||||||
|
ref,
|
||||||
|
} from '@vue/runtime-dom'
|
||||||
import {
|
import {
|
||||||
createComponent,
|
createComponent,
|
||||||
defineVaporComponent,
|
defineVaporComponent,
|
||||||
|
@ -8,6 +15,7 @@ import {
|
||||||
setProp,
|
setProp,
|
||||||
setStyle,
|
setStyle,
|
||||||
template,
|
template,
|
||||||
|
vaporInteropPlugin,
|
||||||
} from '../src'
|
} from '../src'
|
||||||
import { makeRender } from './_utils'
|
import { makeRender } from './_utils'
|
||||||
import { stringifyStyle } from '@vue/shared'
|
import { stringifyStyle } from '@vue/shared'
|
||||||
|
@ -361,4 +369,42 @@ describe('attribute fallthrough', () => {
|
||||||
const el = host.children[0]
|
const el = host.children[0]
|
||||||
expect(el.classList.length).toBe(0)
|
expect(el.classList.length).toBe(0)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should not fallthrough emit handlers to vdom child', () => {
|
||||||
|
const VDomChild = defineComponent({
|
||||||
|
emits: ['click'],
|
||||||
|
setup(_, { emit }) {
|
||||||
|
return () => h('button', { onClick: () => emit('click') }, 'click me')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const fn = vi.fn()
|
||||||
|
const VaporChild = defineVaporComponent({
|
||||||
|
emits: ['click'],
|
||||||
|
setup() {
|
||||||
|
return createComponent(
|
||||||
|
VDomChild as any,
|
||||||
|
{ onClick: () => fn },
|
||||||
|
null,
|
||||||
|
true,
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
return () => h(VaporChild as any)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = document.createElement('div')
|
||||||
|
createApp(App).use(vaporInteropPlugin).mount(root)
|
||||||
|
|
||||||
|
expect(root.innerHTML).toBe('<button>click me</button>')
|
||||||
|
const button = root.querySelector('button')!
|
||||||
|
button.dispatchEvent(new Event('click'))
|
||||||
|
|
||||||
|
// fn should be called once
|
||||||
|
expect(fn).toHaveBeenCalledTimes(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -9,9 +9,11 @@ import {
|
||||||
type Slots,
|
type Slots,
|
||||||
type VNode,
|
type VNode,
|
||||||
type VaporInteropInterface,
|
type VaporInteropInterface,
|
||||||
|
createInternalObject,
|
||||||
createVNode,
|
createVNode,
|
||||||
currentInstance,
|
currentInstance,
|
||||||
ensureRenderer,
|
ensureRenderer,
|
||||||
|
isEmitListener,
|
||||||
onScopeDispose,
|
onScopeDispose,
|
||||||
renderSlot,
|
renderSlot,
|
||||||
shallowRef,
|
shallowRef,
|
||||||
|
@ -162,7 +164,14 @@ function createVDOMComponent(
|
||||||
// overwrite how the vdom instance handles props
|
// overwrite how the vdom instance handles props
|
||||||
vnode.vi = (instance: ComponentInternalInstance) => {
|
vnode.vi = (instance: ComponentInternalInstance) => {
|
||||||
instance.props = wrapper.props
|
instance.props = wrapper.props
|
||||||
instance.attrs = wrapper.attrs
|
|
||||||
|
const attrs = (instance.attrs = createInternalObject())
|
||||||
|
for (const key in wrapper.attrs) {
|
||||||
|
if (!isEmitListener(instance.emitsOptions, key)) {
|
||||||
|
attrs[key] = wrapper.attrs[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
instance.slots =
|
instance.slots =
|
||||||
wrapper.slots === EMPTY_OBJ
|
wrapper.slots === EMPTY_OBJ
|
||||||
? EMPTY_OBJ
|
? EMPTY_OBJ
|
||||||
|
|
Loading…
Reference in New Issue