bugfix: collect decorated class properties

kuitos · kuitos · commit 54df8922cbea · 2018-06-11T18:21:54.000+08:00
diff --git 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
@@ -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
@@ -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 {
