Move $decoratorQueue under each component constructor (fix #104) (#110)

* add test script for dev

* move decorator queue under each constructor

Author: ktsn

build/dev-test.js

@@ -0,0 +1,17 @@
+const fs = require('fs')
+const spawn = require('child_process').spawn
+
+run('tsc -w -p .')
+run('webpack --config test/webpack.config.js --watch')
+
+fs.watch('test/test.build.js', () => {
+  run('mocha --reporter min test/test.build.js')
+})
+
+function run(command) {
+  const [name, ...args] = command.split(' ')
+  spawn(`node_modules/.bin/${name}`, args, {
+    shell: true,
+    stdio: 'inherit'
+  })
+}

package.json

@@ -15,6 +15,7 @@
     "clean": "rimraf ./lib",
     "example": "npm run build && webpack --config example/webpack.config.js",
     "dev": "webpack --config example/webpack.config.js --watch",
+    "dev:test": "node build/dev-test.js",
     "test": "npm run build && webpack --config test/webpack.config.js && mocha test/test.build.js"
   },
   "repository": {

src/component.ts

@@ -1,5 +1,5 @@
 import Vue, { ComponentOptions } from 'vue'
-import { VueClass } from './declarations'
+import { VueClass, DecoratedClass } from './declarations'
 import { collectDataFromConstructor } from './data'
 
 export const $internalHooks = [
@@ -17,11 +17,6 @@ export const $internalHooks = [
   'render'
 ]
 
-// Property, method and parameter decorators created by `createDecorator` helper
-// will enqueue functions that update component options for lazy processing.
-// They will be executed just before creating component constructor.
-export let $decoratorQueue: ((options: ComponentOptions<Vue>) => void)[] = []
-
 export function componentFactory (
   Component: VueClass,
   options: ComponentOptions<any> = {}
@@ -59,9 +54,10 @@ export function componentFactory (
   })
 
   // decorate options
-  $decoratorQueue.forEach(fn => fn(options))
-  // reset for other component decoration
-  $decoratorQueue = []
+  const decorators = (Component as DecoratedClass).__decorators__
+  if (decorators) {
+    decorators.forEach(fn => fn(options))
+  }
 
   // find super
   const superProto = Object.getPrototypeOf(Component.prototype)

src/declarations.ts

@@ -1,3 +1,10 @@
 import Vue from 'vue'
 
 export type VueClass = { new (): Vue } & typeof Vue
+
+export type DecoratedClass = VueClass & {
+  // Property, method and parameter decorators created by `createDecorator` helper
+  // will enqueue functions that update component options for lazy processing.
+  // They will be executed just before creating component constructor.
+  __decorators__?: ((options: Vue.ComponentOptions<Vue>) => void)[]
+}

src/util.ts

@@ -1,5 +1,5 @@
 import Vue, { ComponentOptions } from 'vue'
-import { $decoratorQueue } from './component'
+import { DecoratedClass } from './declarations'
 
 export const noop = () => {}
 
@@ -12,11 +12,15 @@ export function createDecorator (
 export function createDecorator (
   factory: (options: ComponentOptions<Vue>, key: string, index: number) => void
 ): (target: Vue, key: string, index: any) => void {
-  return (_, key, index) => {
+  return (target, key, index) => {
+    const Ctor = target.constructor as DecoratedClass
+    if (!Ctor.__decorators__) {
+      Ctor.__decorators__ = []
+    }
     if (typeof index !== 'number') {
       index = undefined
     }
-    $decoratorQueue.push(options => factory(options, key, index))
+    Ctor.__decorators__.push(options => factory(options, key, index))
   }
 }
 

test/test-babel.js

@@ -1,4 +1,4 @@
-import Component, { createDecorator } from '../'
+import Component, { createDecorator } from '../lib'
 import chai, { expect } from 'chai'
 import spies from 'chai-spies'
 import Vue from 'vue'

test/test.ts

@@ -1,4 +1,4 @@
-import Component, { createDecorator } from '../'
+import Component, { createDecorator } from '../lib'
 import { expect } from 'chai'
 import Vue from 'vue'
 
@@ -218,4 +218,42 @@ describe('vue-class-component', () => {
     expect(c.bar).to.equal('world')
     expect((MyComp as any).options.computed.bar.cache).to.be.false
   })
+
+  // #104
+  it('createDecorator: decorate correctly even if a component is created in another @Component decorator', () => {
+    // Just assigns the given value to the decorated property
+    const Value = (value: any) => createDecorator((options, key) => {
+      const data = options.data as Function || (() => ({}))
+      options.data = function () {
+        return {
+          ...data.call(this),
+          [key]: value
+        }
+      }
+    })
+
+    const createChild = () => {
+      @Component
+      class Child extends Vue {
+        @Value('child')
+        value: string
+      }
+      return Child
+    }
+
+    @Component({
+      components: {
+        Child: createChild()
+      }
+    })
+    class Parent extends Vue {
+      @Value('parent')
+      value: string
+    }
+
+    const parent = new Parent()
+    const child = new (parent as any).$options.components.Child()
+    expect(parent.value).to.equal('parent')
+    expect(child.value).to.equal('child')
+  })
 })