Add support for analyzing vue-class-component and vue-property-decorator

[yoyo930021]

Fixed #1105.
Fixed #864.

I want to support vue-property-decorator.
Reason:

1. Vue 3.0 isn't built-in class component. rfc
2. vue-property-decorator is built-in vue-cli 3 typescript plugin.
3. vue-typescript project latest update was three years ago.

I'm not add test.
I will try to add.

[yoyo930021]

I will disappear for two weeks.
If this PR can help this project, you can edit it directly.

[yoyo930021]

I fixed the test error.

[antsteyer]

Please merge it

[qwqcode]

Please merge it!!

[Angeart]

Please merge it!!!!

[lbland94]

Testing locally, this appears to work perfectly for properties defined on the class. It does seem to exclude both @Injected properties or properties like $route defined by a vue plugin. Are those out of scope for this feature?

[yoyo930021]

@lbland94
The component data only has props, data, computed and methods by design in Vetur.
I don't know where the inject data is placed. @octref

The Vue defined property isn't supported in the template for now.

[antsteyer]

@yoyo930021 is it possible for you to publish your repo as VS Code extension ? So boring to not have this feature merged yet

[yoyo930021]

@antsteyer
I think you can clone this PR by using it.

1. compile

git clone https://github.com/yoyo930021/vetur.git
git checkout support-class-component
yarn
cd server && yarn && cd ..
yarn compile

2. set the vetur config to using it
   vetur.dev.vlsPath set to <projectUrl>/server in vscode config.

PS. https://github.com/vuejs/vetur/blob/master/.github/CONTRIBUTING.md

[SaphuA]

I just tried out this branch and it's working quite well on first glance! Great work!

I'm using Vuex in combination with vuex-class-components and it seems this version of Vetur is unable to intellisence beyond "this.store", even though it displays the type correctly. Is this as expected or should this work as well?

[theoribeiro]

Is there a reason why this still wasn't merged or is it just due to maintainers' capacity?

[annnoo]

@SaphuA Got the same issue, but I guess this should get fixed :( I could maybe take a look, but I've never done any vscode extension development and I don't think I am able to fix this

[yoyo930021]

@SaphuA @annnoo I think #1446 can fix it.

[ZhengXiaowei]

wasn't merged ? how to solve this problem? complie this branch?

[yoyo930021]

#1323 (comment)

[ZhengXiaowei]

#1323 (comment)

thx, it's work great

[yoyo930021]

@octref Oh I know.
It's wrong tests about kind when we replace typescript info to vueFileInfo.

I will fix it.

[tjhiggins]

@yoyo930021 will this also work for https://github.com/nuxt-community/nuxt-property-decorator?

[yoyo930021]

@yoyo930021 will this also work for https://github.com/nuxt-community/nuxt-property-decorator?

I don't know this library existed.
I don't think there's anything wrong with a quick scan.

[octref]

Great work 👍 Sorry it took me this long.

[aziztitu]

When using the Emit decorator, I get this weird issue when providing an inline event callback in the template.

Here's how the event is declared using Emit decorator:

@Component()
export default class LeaveApplicationForm extends Vue {
  @Emit()
  private onSubmit() {
    this.reset();
    return;
  }
}

And this is how I'm providing the event callback in the template:

<LeaveApplicationForm
  @on-submit="showLeaveApplicationDialog = false"    // If I pass a function here, the error disappears
>
</LeaveApplicationForm>

And this is the error I get:

(property) 'on-submit'?: (($event: any) => (arg: undefined) => any) | undefined

Type 'typeof "on-submit"' is not assignable to type '($event: any) => (arg: undefined) => any'.
  Type '"on-submit"' is not assignable to type '(arg: undefined) => any'.
    Type '"on-submit"' provides no match for the signature '(arg: undefined): any'.Vetur(2322)

Note: This error does not show up if I pass a function as the callback instead.

I think the reason is that when using the Emit decorator, the type of the event is being recognized as (($event: any) => (arg: undefined) => any) | undefined.
But it should be something like ($event: any) => void or ($event: any) => CallableFunction | undefined

Not quite sure if the issue is with Vetur or the vue-property-decorator library.

Does anyone else have this same issue?

How does Vetur find the type of the events?

[yoyo930021]

When using the Emit decorator, I get this weird issue when providing an inline event callback in the template.

Here's how the event is declared using Emit decorator:

@Component()
export default class LeaveApplicationForm extends Vue {
  @Emit()
  private onSubmit() {
    this.reset();
    return;
  }
}

And this is how I'm providing the event callback in the template:

<LeaveApplicationForm
  @on-submit="showLeaveApplicationDialog = false"    // If I pass a function here, the error disappears
>
</LeaveApplicationForm>

And this is the error I get:

(property) 'on-submit'?: (($event: any) => (arg: undefined) => any) | undefined

Type 'typeof "on-submit"' is not assignable to type '($event: any) => (arg: undefined) => any'.
  Type '"on-submit"' is not assignable to type '(arg: undefined) => any'.
    Type '"on-submit"' provides no match for the signature '(arg: undefined): any'.Vetur(2322)

Note: This error does not show up if I pass a function as the callback instead.

I think the reason is that when using the Emit decorator, the type of the event is being recognized as (($event: any) => (arg: undefined) => any) | undefined.
But it should be something like ($event: any) => void or ($event: any) => CallableFunction | undefined

Not quite sure if the issue is with Vetur or the vue-property-decorator library.

Does anyone else have this same issue?

How does Vetur find the type of the events?

Please open a new issue.