Vue-class-component: Why is 'vue-property-decorator' library not a part of vue-class-component?

[tonypee]

To write vue components using classes, we need to be able to do things such as 'watch' values. It makes sense to me that this should be a part of the same repo?

Looking at vue-property-decorator, since it can export Componenti guess we have this functionality already, just under a different (less appropriate library name)

import { Component, prop, watch } from 'vue-property-decorator';

should be

import { Component, prop, watch } from 'vue-class-component';

or

import { prop, watch }, Component from 'vue-class-component';

[ktsn]

Because when we use prop decorator with Babel, it causes some problems while it really works well with TypeScript.
As vue-class-component also supports Babel users, unfortunately we cannot include it in this library.

[tonypee]

Interesting- I am using babel/esnext so should i not use the library?

What issues are there?

Maybe there should be a warning on the readme of the project.

On 24 December 2016 at 16:21, katashin [e-mail] wrote:

Because when we use prop decorator with Babel, it causes some problems
while it really works well with TypeScript.
As vue-class-component also supports Babel users, unfortunately we cannot
include it in this library.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-class-component/issues/50#issuecomment-269069891,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC8aNakN5d62PuxOQG3UU_FpZg32D4Ibks5rLKu9gaJpZM4LVKUd
.

--
Tony Polinelli

[ktsn]

The issue is caused by the difference of behavior between babel-transform-decorators-legacy and TypeScript's decorators.

For example in the following case:

@Component
class MyComp extends Vue {
  foo = 'foo + ' + this.bar
  @prop(String) bar
  baz = 'baz + ' + this.bar 
}

const c = new MyComp({
  propsData: { bar: 'bar' }
})

In TypeScript, this works as expected foo === 'foo + bar', bar === 'bar', baz === 'baz + bar'.
In Babel, however, foo === 'foo + bar', bar === 'bar', baz === 'baz + undefined'.

This is because Babel decorators will initialize a decorated property as undefined even if it does not have an initializer while TypeScript decorators won't initialize it.

[lbssousa]

Any chance this scenario could change with improved decorators support in upcoming Babel 7?

[davidm-public]

Just curious if this results in odd behaviour with Storybook?

[JessicaSachs]

@davidm-public Are you even able to get storybook working with vue-class-component? I'm struggling with it.

[b0g3r]

FYI: @JessicaSachs @davidm-public
I have the same trouble with vue-class-component + vue + typescript. If my little research is right, __docs is undefined, because component options have strict typing and don't allow any new property without definition.

I just added the file, as in the documentation, and voila.
doc-property.d.ts

import Vue from 'vue'
declare module 'vue/types/options' {
    interface ComponentOptions<V extends Vue> {
      __doc?: string
    }
}

stories/index.js

storiesOf('MyComponent', module)
  .addDecorator(withDocs(MyComponent.options.__docs))
  ...