Custom event auto complete

[sapphi-red]

This PR implements custom event auto complete.

Obtains data from

emits: {
  foo: () => true,
}

and

emits: ['foo']

.

Validations are not implemented.

close #2392

[yoyo930021]

We miss a type check feature in event.
Location of the related code:

vetur/server/src/services/typescriptService/preprocess.ts

Line 327 in b7ca396

props: { ${propTypeStrings.join(', ')} }

vetur/server/src/services/typescriptService/bridge.ts

Line 16 in b7ca396

on: ComponentListeners<T>;

You can try to study it or I do it.

Thanks for your PR.
We originally expected to change to a full type implementation.
But I think your implementation is perfect for the transition period.

[sapphi-red]

I added features below!

• type check
• @Emit support
  • If there is multiple @Emit with same emit name, it infers that it returns the union type of those return type.
    • For example if @Emit('foo') foo() {return 1} and @Emit('foo') foo2() {return true} exists, @foo becomes (arg: number | boolean) => any.
  • If emits option is set also, it will not obtain info from @Emit.

[yoyo930021]

LGTM, but I need some time for test.
Thanks for your help.

[bissolli]

It doesn't give us type hints on what is coming from the event right? I've trying to find a good way to add a typed event but couldn't get anywhere close to a complete solution!

Found this very nice package, but I think it's not supported by Vetur - in the component where you use the event, it's not able to recognize the payload of the event!

Is there any good solution for that?

[sapphi-red]

How about using emits option? See https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md#type-inference.
This PR obtains type data from this.

[bissolli]

How about using emits option? See https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md#type-inference.
This PR obtains type data from this.

If I want to use it only for typing purpose I would need only to return true, right?
Any guesses on how long this PR will take to merge?

const Foo = defineComponent({
  emits: {
    submit: (payload: { email: string; password: string }) => true
  },

  methods: {
    onSubmit() {
      this.$emit('submit', {
        email: '[email protected]',
        password: 123 // Type error!
      })

      this.$emit('non-declared-event') // Type error!
    }
  }
})

Also I am not very familiar with VSCode extensions, is there a way to use you PR to test it out?

[yoyo930021]

Also I am not very familiar with VSCode extensions, is there a way to use you PR to test it out?

https://github.com/vuejs/vetur/wiki/Developing-Language-Server-Features

[yoyo930021]

LGTM, I will merge it when weekend.

The transforming template logic is changed in this PR.
@ktsn @octref can read it when you have time.

[sapphi-red]

I fixed the test with class components with @Options since it was changed forVue 3.
Also added the test with property decorator with Vue 2.