Merge pull request #42 from ktsn/warn-class-property

Print warning if class property is used without inheriting Vue class

Author: yyx990803

README.md

@@ -21,6 +21,7 @@ Note:
 5. For all other options, pass them to the decorator function.
 
 ``` js
+import Vue from 'vue'
 import Component from 'vue-class-component'
 
 @Component({
@@ -38,7 +39,7 @@ import Component from 'vue-class-component'
     </div>
   `
 })
-class App {
+class App extends Vue {
   // initial data
   msg = 123
 

package.json

@@ -41,6 +41,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.18.0",
     "chai": "^3.5.0",
+    "chai-spies": "^0.7.1",
     "mocha": "^3.1.2",
     "node-libs-browser": "^1.0.0",
     "rimraf": "^2.5.4",

src/data.ts

@@ -1,6 +1,6 @@
 import * as Vue from 'vue'
 import { VueClass } from './declarations'
-import { noop } from './util'
+import { noop, warn } from './util'
 
 export function collectDataFromConstructor (vm: Vue, Component: VueClass) {
   // override _init to prevent to init as Vue instance
@@ -25,5 +25,14 @@ export function collectDataFromConstructor (vm: Vue, Component: VueClass) {
     }
   })
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (!(Component.prototype instanceof Vue) && Object.keys(plainData).length > 0) {
+      warn(
+        'Component class must inherit Vue or its descendant class ' +
+        'when class property is used.'
+      )
+    }
+  }
+
   return plainData
-}
+}

src/globals.d.ts

@@ -0,0 +1,10 @@
+/**
+ * global type declarations in this project
+ * should not expose to userland
+ */
+
+declare const process: {
+  env: {
+    NODE_ENV: string
+  }
+}

src/util.ts

@@ -19,3 +19,9 @@ export function createDecorator (
     $decoratorQueue.push(options => factory(options, key, index))
   }
 }
+
+export function warn (message: string): void {
+  if (typeof console !== 'undefined') {
+    console.warn('[vue-class-component] ' + message)
+  }
+}

test/test-babel.js

@@ -1,7 +1,10 @@
 import Component, { createDecorator } from '../lib/index'
-import { expect } from 'chai'
+import chai, { expect } from 'chai'
+import spies from 'chai-spies'
 import Vue from 'vue'
 
+chai.use(spies)
+
 describe('vue-class-component with Babel', () => {
   it('should be instantiated without any errors', () => {
     @Component
@@ -10,12 +13,21 @@ describe('vue-class-component with Babel', () => {
   })
 
   it('should collect class properties as data', () => {
-    @Component
-    class MyComp {
+    @Component({
+      props: ['propValue']
+    })
+    class MyComp extends Vue {
       foo = 'hello'
+      bar = 1 + this.propValue
     }
-    const c = new MyComp()
+    const c = new MyComp({
+      propsData: {
+        propValue: 1
+      }
+    })
     expect(c.foo).to.equal('hello')
+    expect(c.propValue).to.equal(1)
+    expect(c.bar).to.equal(2)
   })
 
   it('should not collect uninitialized class properties', () => {
@@ -35,4 +47,26 @@ describe('vue-class-component with Babel', () => {
     expect('foo' in c.$data).to.be.false
     expect('bar' in c.$data).to.be.false
   })
+
+  it('warn if class property is used without inheriting Vue class', () => {
+    const spy = chai.spy.on(console, 'warn')
+
+    @Component({
+      foo: Number
+    })
+    class MyComp {
+      bar = this.foo + 2
+    }
+    const c = new MyComp({
+      propsData: {
+        foo: 1
+      }
+    })
+
+    const message = '[vue-class-component] ' +
+      'Component class must inherit Vue or its descendant class ' +
+      'when class property is used.'
+
+    expect(spy).to.have.been.called.with(message)
+  })
 })