diff --git a/src/component.ts b/src/component.ts index d110df1..551b979 100644 --- a/src/component.ts +++ b/src/component.ts @@ -36,9 +36,20 @@ export function componentFactory ( return } const descriptor = Object.getOwnPropertyDescriptor(proto, key)! - if (typeof descriptor.value === 'function') { + if (descriptor.value !== void 0) { + // methods - (options.methods || (options.methods = {}))[key] = descriptor.value + if(typeof descriptor.value === 'function') { + (options.methods || (options.methods = {}))[key] = descriptor.value + } else { + // typescript decorated data + (options.mixins || (options.mixins = [])).push({ + data (this: Vue) { + return { [key]: descriptor.value } + } + }) + } + } else if (descriptor.get || descriptor.set) { // computed properties (options.computed || (options.computed = {}))[key] = { diff --git a/test/test-babel.js b/test/test-babel.js index f42cccb..1d6ca45 100644 --- a/test/test-babel.js +++ b/test/test-babel.js @@ -28,6 +28,40 @@ describe('vue-class-component with Babel', () => { expect(c.bar).to.equal(2) }) + it('should collect decorated class properties', () => { + + const valueDecorator = (value) => () => { + return { + enumerable: true, + value: value + } + } + + const getterDecorator = (value) => () => { + return { + enumerable: true, + get() { + return value; + } + } + } + + @Component + class MyComp extends Vue { + + @valueDecorator('field1') + field1 + + @getterDecorator('field2') + field2 + + } + + const c = new MyComp() + expect(c.field1).to.equal('field1') + expect(c.field2).to.equal('field2') + }) + it('should not collect uninitialized class properties', () => { const Prop = createDecorator((options, key) => { if (!options.props) { diff --git a/test/test.ts b/test/test.ts index 9ff686c..3f4dd42 100644 --- a/test/test.ts +++ b/test/test.ts @@ -60,6 +60,40 @@ describe('vue-class-component', () => { expect(c.b).to.equal(2) }) + it('data: should collect from decorated class properties', () => { + + const valueDecorator = (value: any) => (_: any, __: any): any => { + return { + enumerable: true, + value + } + } + + const getterDecorator = (value: any) => (_: any, __: any): any => { + return { + enumerable: true, + get() { + return value; + } + } + } + + @Component + class MyComp extends Vue { + + @valueDecorator('field1') + field1!: string + + @getterDecorator('field2') + field2!: string + + } + + const c = new MyComp() + expect(c.field1).to.equal('field1') + expect(c.field2).to.equal('field2') + }) + it('data: should collect custom property defined on beforeCreate', () => { @Component class MyComp extends Vue {