emitted cannot capture events for for functional components

[cuixiaorui]

hi

I found no way to test emit today when Adding tests to FunctionalComponents

it.only('functional emit', () => {
    const Component = (props, ctx) => {
      return h('div', [
        h('button', {
          onClick() {
            console.log("click")
            return ctx.emit('hello', 'foo', 'bar')
          }
        })
      ])
    }
    const wrapper = mount(Component)
    expect(wrapper.emitted()).toEqual({})
    expect(wrapper.emitted().hello).toEqual(undefined)

    wrapper.find('button').trigger('click')
    // Here is a failure
    expect(wrapper.emitted().hello[0]).toEqual(['foo', 'bar'])

    wrapper.find('button').trigger('click')
    expect(wrapper.emitted().hello[1]).toEqual(['foo', 'bar'])
  })

The previous processing of the emit was done a layer of packaging in Mixin's hook function beforeCreate

But if it is functional Components it will not trigger beforeCreate

The logical implementation in vue-next is that if it is STATEFUL_COMPONENT, it will call applyOptions, and the beforeCreate that calls mixin is at that time

// vue-next/runtime-cor/renderer.js

 const setupResult = isStateful
    ? setupStatefulComponent(instance, isSSR)
    : undefined

setupStatefulComponent() -> finishComponentSetup() -> applyOptions()

But applyOptions is not called if you are functional Components

So the beforeCreate hook for mixin will not be triggered

vue-next does not give us any hooks for Functional Components before calling renderComponentRoot

setupComponent(instance) -> setupRenderEffect() -> renderComponentRoot()

Therefore, there is no way for us to wrap one layer for the emit

I think we should give the vue-next a PR

It is recommended to add a lifecycle hook before calling Render

such as "createdComponentInstance"

I'd like your advice

[lmiller1990]

Interesting... I guess this makes sense, functional components don't have any lifecycle methods, so beforeCreated isn't called. I am not sure making a change in vue-next just for this edge case makes sense; ideally, we should try and fix it in this codebase. I wonder if we can use some combination of getCurrentInstance().emit.

I would say if we cannot solve it here, then we can open an issue in vue-next and see what the options are. Great job finding this before release, making changes before Vue 3 is live is much better than making them after.

[cuixiaorui]

I found something interesting again

if such

  it('should propagate the original event with functional component', () => {
    const Component = (props, { emit }) => {
      return () =>
        h('div', [h('button', { onClick: () => emit('hello', 'foo', 'bar') })])
    }

    const Parent = defineComponent({
      name: 'Parent',

      setup(props, { emit }) {
        return () =>
          h(Component, { onHello: (...events) => emit('parent', ...events) })
      }
    })
    const wrapper = mount(Parent)
    expect(wrapper.emitted()).toEqual({})
    expect(wrapper.emitted().hello).toEqual(undefined)

    wrapper.find('button').trigger('click')
    expect(wrapper.emitted().parent[0]).toEqual(['foo', 'bar'])

    wrapper.find('button').trigger('click')
    expect(wrapper.emitted().parent[1]).toEqual(['foo', 'bar'])
  })

The parent component is an Options Component，while the child is a Functional Component

There is also a problem , and the problem is the same as what I described earlier

Emit was not packaged at the appropriate time

Because vue-core traverses the vNode Tree when mount is called, all functional Components are called directly during that time

So if there is no corresponding hook, then we have no way to deal with this matter

[lmiller1990]

I see, we can accomplish it with a wrapper component. Still not ideal.

We do have some test-utils specific thing in Vue core, specifically for this emitted feature. See here.

Maybe you could try your original ideal, which is some kind hook in vue-core, where call to apply the mixin to function components. You could put it behind a __DEV__ flag, like the code above. This would be a good chance to contribute to vue-core. You could open an issue there and we can ask Evan for his input before making the PR. What do you think?

[cuixiaorui]

Haha

That's what I thought

Let's look at Evan's suggestion first

making a PR if that's ok.

to the issue See here

[lmiller1990]

This will go out in the next release, this weekend.