Enable to collect inital class properties as vue instance data (vuejs#29)

ktsn · yyx990803 · commit c14d73e795b7 · 2016-11-13T13:13:24.000-05:00
* collect inital class properties as vue instance data

* update example

* update readme to describe data can be declared as class properties

* add class property example using props value

* use vm instance as prototype instead of Component.prototype
diff --git a/README.md b/README.md
@@ -14,9 +14,11 @@ Note:
 
 2. Computed properties can be declared as class property accessors.
 
-3. `data`, `render` and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.
+3. Initial `data` can be declared as class properties ([babel-plugin-transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) is required if you use Babel).
 
-4. For all other options, pass them to the decorator function.
+4. `data`, `render` and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.
+
+5. For all other options, pass them to the decorator function.
 
 ``` js
 import Component from 'vue-class-component'
@@ -30,18 +32,18 @@ import Component from 'vue-class-component'
       <input v-model="msg">
       <p>prop: {{propMessage}}</p>
       <p>msg: {{msg}}</p>
+      <p>helloMsg: {{helloMsg}}</p>
       <p>computed msg: {{computedMsg}}</p>
       <button @click="greet">Greet</button>
     </div>
   `
 })
 class App {
-  // return initial data
-  data () {
-    return {
-      msg: 123
-    }
-  }
+  // initial data
+  msg = 123
+
+  // use prop values for initial data
+  helloMsg = 'Hello, ' + this.propMessage
 
   // lifecycle hook
   mounted () {
diff --git a/example/example.ts b/example/example.ts
@@ -8,14 +8,8 @@ import Component from '../lib/index'
 })
 class App extends Vue {
   propMessage: string
-  msg: number
-
-  // return initial data
-  data () {
-    return {
-      msg: 123
-    }
-  }
+  msg: number = 123
+  helloMsg: string = 'Hello, ' + this.propMessage
 
   // lifecycle hook
   mounted () {
@@ -45,6 +39,7 @@ class App extends Vue {
         }),
         h('p', ['prop: ', this.propMessage]),
         h('p', ['msg: ', this.msg]),
+        h('p', ['helloMsg: ', this.helloMsg]),
         h('p', ['computed msg: ', this.computedMsg]),
         h('button', { on: { click: this.greet }}, ['Greet'])
       ])
@@ -55,5 +50,5 @@ class App extends Vue {
 // mount
 new App({
   el: '#el',
-  render: h => h(App, { props: { propMessage: 'Hello!' }})
+  render: h => h(App, { props: { propMessage: 'World!' }})
 })
diff --git a/src/component.ts b/src/component.ts
@@ -1,5 +1,6 @@
 import * as Vue from 'vue'
 import { VueClass } from './declarations'
+import { collectDataFromConstructor } from './data'
 
 const internalHooks = [
   'data',
@@ -44,6 +45,14 @@ export function componentFactory (
       }
     }
   })
+
+  // add data hook to collect class properties as Vue instance's data
+  ;(options.mixins || (options.mixins = [])).push({
+    data (this: Vue) {
+      return collectDataFromConstructor(this, Component)
+    }
+  })
+
   // find super
   const superProto = Object.getPrototypeOf(Component.prototype)
   const Super: VueClass = superProto instanceof Vue
diff --git a/src/data.ts b/src/data.ts
@@ -0,0 +1,28 @@
+import * as Vue from 'vue'
+import { VueClass } from './declarations'
+
+const noop = () => {}
+
+export function collectDataFromConstructor (vm: Vue, Component: VueClass) {
+  // Create dummy Vue instance to collect
+  // initial class properties from the component constructor.
+  // To prevent to print warning,
+  // the data object should inherit Vue.prototype.
+  const data = Object.create(vm, {
+    _init: {
+      get: () => noop
+    }
+  })
+
+  // call constructor with passing dummy instance
+  // `data` object will have initial data
+  Component.call(data)
+
+  // create plain data object
+  const plainData = {}
+  Object.keys(data).forEach(key => {
+    plainData[key] = data[key]
+  })
+
+  return plainData
+}
diff --git a/test/test.ts b/test/test.ts
@@ -25,6 +25,44 @@ describe('vue-class-component', () => {
     expect(destroyed).to.be.true
   })
 
+  it('data: should collect from class properties', () => {
+    @Component({
+      props: ['foo']
+    })
+    class MyComp extends Vue {
+      foo: number
+      a: string = 'hello'
+      b: number = this.foo + 1
+    }
+
+    const c = new MyComp({
+      propsData: {
+        foo: 1
+      }
+    })
+    expect(c.a).to.equal('hello')
+    expect(c.b).to.equal(2)
+  })
+
+  it('data: should collect custom property defined on beforeCreate', () => {
+    @Component
+    class MyComp extends Vue {
+      $store: any
+      foo: string = 'Hello, ' + this.$store.state.msg
+
+      beforeCreate () {
+        this.$store = {
+          state: {
+            msg: 'world'
+          }
+        }
+      }
+    }
+
+    const c = new MyComp()
+    expect(c.foo).to.equal('Hello, world')
+  })
+
   it('methods', () => {
     let msg: string = ''
 
