fix: allow to create a custom class decorator (#157)

* fix: allow to create a custom class decorator

* test: add a custom class decorator test for babel

Author: ktsn

src/util.ts

@@ -3,17 +3,22 @@ import { DecoratedClass } from './declarations'
 
 export const noop = () => {}
 
-export function createDecorator (
-  factory: (options: ComponentOptions<any, any, any, any>, key: string) => void
-): (target: Vue, key: string) => void
-export function createDecorator (
-  factory: (options: ComponentOptions<any, any, any, any>, key: string, index: number) => void
-): (target: Vue, key: string, index: number) => void
-export function createDecorator (
-  factory: (options: ComponentOptions<any, any, any, any>, key: string, index: number) => void
-): (target: Vue, key: string, index: any) => void {
-  return (target, key, index) => {
-    const Ctor = target.constructor as DecoratedClass
+export interface VueDecorator {
+  // Class decorator
+  (Ctor: typeof Vue): void
+
+  // Property decorator
+  (target: Vue, key: string): void
+
+  // Parameter decorator
+  (target: Vue, key: string, index: number): void
+}
+
+export function createDecorator (factory: (options: ComponentOptions<any, any, any, any>, key: string, index: number) => void): VueDecorator {
+  return (target: Vue | typeof Vue, key?: any, index?: any) => {
+    const Ctor = typeof target === 'function'
+      ? target as DecoratedClass
+      : target.constructor as DecoratedClass
     if (!Ctor.__decorators__) {
       Ctor.__decorators__ = []
     }

test/test-babel.js

@@ -72,4 +72,22 @@ describe('vue-class-component with Babel', () => {
       console.warn = originalWarn
     }
   })
+
+  // #155
+  it('createDecrator: create a class decorator', () => {
+    const DataMixin = createDecorator(options => {
+      options.data = function () {
+        return {
+          test: 'foo'
+        }
+      }
+    })
+
+    @Component
+    @DataMixin
+    class MyComp extends Vue {}
+
+    const vm = new MyComp()
+    expect(vm.test).to.equal('foo')
+  })
 })

test/test.ts

@@ -256,4 +256,22 @@ describe('vue-class-component', () => {
     expect(parent.value).to.equal('parent')
     expect(child.value).to.equal('child')
   })
+
+  // #155
+  it('createDecrator: create a class decorator', () => {
+    const DataMixin = createDecorator(options => {
+      options.data = function () {
+        return {
+          test: 'foo'
+        }
+      }
+    })
+
+    @Component
+    @DataMixin
+    class MyComp extends Vue {}
+
+    const vm: any = new MyComp()
+    expect(vm.test).to.equal('foo')
+  })
 })