From 54df8922cbeac61b50f48d2c308d2f21edfa746c Mon Sep 17 00:00:00 2001 From: Kuitos Date: Mon, 11 Jun 2018 18:21:54 +0800 Subject: [PATCH 1/2] bugfix: collect decorated class properties --- src/component.ts | 15 +++++++++++++-- test/test-babel.js | 42 ++++++++++++++++++++++++++++++++++++++++++ test/test.ts | 42 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 97 insertions(+), 2 deletions(-) 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..5ffbb76 100644 --- a/test/test-babel.js +++ b/test/test-babel.js @@ -28,6 +28,48 @@ describe('vue-class-component with Babel', () => { expect(c.bar).to.equal(2) }) + it('should collect decorated class properties', () => { + + const decorator1 = (value) => () => { + return { + enumerable: true, + value: value + } + } + + const decorator2 = (value) => () => { + return { + enumerable: true, + get() { + return value; + } + } + } + + @Component({ + props: ['foo'] + }) + class MyComp extends Vue { + + @decorator1('field1') + field1 + + @decorator2('field2') + field2 + + foo + } + + const c = new MyComp({ + propsData: { + foo: 1 + } + }) + expect(c.field1).to.equal('field1') + expect(c.field2).to.equal('field2') + expect(c.foo).to.equal(1) + }) + 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..c3a9bf5 100644 --- a/test/test.ts +++ b/test/test.ts @@ -60,6 +60,48 @@ describe('vue-class-component', () => { expect(c.b).to.equal(2) }) + it('data: should collect from decorated class properties', () => { + + const decorator1 = (value: any) => (_: any, __:any ): any => { + return { + enumerable: true, + value + } + } + + const decorator2 = (value: any) => (_: any, __:any ): any => { + return { + enumerable: true, + get() { + return value; + } + } + } + + @Component({ + props: ['foo'] + }) + class MyComp extends Vue { + + @decorator1('field1') + field1!: string + + @decorator2('field2') + field2!: string + + foo!: number + } + + const c = new MyComp({ + propsData: { + foo: 1 + } + }) + expect(c.field1).to.equal('field1') + expect(c.field2).to.equal('field2') + expect(c.foo).to.equal(1) + }) + it('data: should collect custom property defined on beforeCreate', () => { @Component class MyComp extends Vue { From 555e78a53f2805aa5aba9a9ee71aeafb76a60289 Mon Sep 17 00:00:00 2001 From: Kuitos Date: Thu, 21 Jun 2018 10:53:31 +0800 Subject: [PATCH 2/2] :ok_hand: --- test/test-babel.js | 20 ++++++-------------- test/test.ts | 20 ++++++-------------- 2 files changed, 12 insertions(+), 28 deletions(-) diff --git a/test/test-babel.js b/test/test-babel.js index 5ffbb76..1d6ca45 100644 --- a/test/test-babel.js +++ b/test/test-babel.js @@ -30,14 +30,14 @@ describe('vue-class-component with Babel', () => { it('should collect decorated class properties', () => { - const decorator1 = (value) => () => { + const valueDecorator = (value) => () => { return { enumerable: true, value: value } } - const decorator2 = (value) => () => { + const getterDecorator = (value) => () => { return { enumerable: true, get() { @@ -46,28 +46,20 @@ describe('vue-class-component with Babel', () => { } } - @Component({ - props: ['foo'] - }) + @Component class MyComp extends Vue { - @decorator1('field1') + @valueDecorator('field1') field1 - @decorator2('field2') + @getterDecorator('field2') field2 - foo } - const c = new MyComp({ - propsData: { - foo: 1 - } - }) + const c = new MyComp() expect(c.field1).to.equal('field1') expect(c.field2).to.equal('field2') - expect(c.foo).to.equal(1) }) it('should not collect uninitialized class properties', () => { diff --git a/test/test.ts b/test/test.ts index c3a9bf5..3f4dd42 100644 --- a/test/test.ts +++ b/test/test.ts @@ -62,14 +62,14 @@ describe('vue-class-component', () => { it('data: should collect from decorated class properties', () => { - const decorator1 = (value: any) => (_: any, __:any ): any => { + const valueDecorator = (value: any) => (_: any, __: any): any => { return { enumerable: true, value } } - const decorator2 = (value: any) => (_: any, __:any ): any => { + const getterDecorator = (value: any) => (_: any, __: any): any => { return { enumerable: true, get() { @@ -78,28 +78,20 @@ describe('vue-class-component', () => { } } - @Component({ - props: ['foo'] - }) + @Component class MyComp extends Vue { - @decorator1('field1') + @valueDecorator('field1') field1!: string - @decorator2('field2') + @getterDecorator('field2') field2!: string - foo!: number } - const c = new MyComp({ - propsData: { - foo: 1 - } - }) + const c = new MyComp() expect(c.field1).to.equal('field1') expect(c.field2).to.equal('field2') - expect(c.foo).to.equal(1) }) it('data: should collect custom property defined on beforeCreate', () => {