From 7e7e4e37a7f7ad4cb6c547827d589dc41af273fc Mon Sep 17 00:00:00 2001
From: ktsn <ktsn55@gmail.com>
Date: Sat, 10 Dec 2016 17:51:55 +0900
Subject: [PATCH 1/2] warn if class property is used without inheriting Vue
 class

---
 README.md          |  3 ++-
 package.json       |  1 +
 src/data.ts        | 11 +++++++++--
 src/util.ts        |  6 ++++++
 test/test-babel.js | 42 ++++++++++++++++++++++++++++++++++++++----
 5 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 019cdfd..74a9a32 100644
--- a/README.md
+++ b/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
 
diff --git a/package.json b/package.json
index fe8c3de..34e2876 100644
--- a/package.json
+++ b/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",
diff --git a/src/data.ts b/src/data.ts
index 2e226d4..4967826 100644
--- a/src/data.ts
+++ b/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,12 @@ export function collectDataFromConstructor (vm: Vue, Component: VueClass) {
     }
   })
 
+  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
-}
\ No newline at end of file
+}
diff --git a/src/util.ts b/src/util.ts
index 385230b..5424868 100644
--- a/src/util.ts
+++ b/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)
+  }
+}
diff --git a/test/test-babel.js b/test/test-babel.js
index 2a4be82..68bd7d8 100644
--- a/test/test-babel.js
+++ b/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)
+  })
 })
\ No newline at end of file

From 1911fdf32dbe4eee1708d20c9fb143454c030f4c Mon Sep 17 00:00:00 2001
From: ktsn <ktsn55@gmail.com>
Date: Sun, 11 Dec 2016 17:11:56 +0900
Subject: [PATCH 2/2] add env check before warning

---
 src/data.ts      | 12 +++++++-----
 src/globals.d.ts | 10 ++++++++++
 2 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 src/globals.d.ts

diff --git a/src/data.ts b/src/data.ts
index 4967826..7541e6f 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -25,11 +25,13 @@ export function collectDataFromConstructor (vm: Vue, Component: VueClass) {
     }
   })
 
-  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.'
-    )
+  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
diff --git a/src/globals.d.ts b/src/globals.d.ts
new file mode 100644
index 0000000..89a7ede
--- /dev/null
+++ b/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
+  }
+}
\ No newline at end of file