3.0

Author: yyx990803

README.md

@@ -2,22 +2,24 @@
 
 > Experimental ES2016/TypeScript decorator for class-style Vue components.
 
-### Example Usage with Babel stage=0:
+### Usage
+
+Required: Babel with stage 1 transforms (for [decorators](https://github.com/wycats/javascript-decorators/blob/master/README.md)).
 
 Note:
 
 1. `data`, `el` and all Vue lifecycle hooks can be directly declared as class member methods, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.
 
-2. For all other options, declare them as **static properties**.
+2. For all other options, pass them to the decorator function.
 
 ``` js
-import VueComponent from 'vue-class-component'
-
-@VueComponent
-export default class Component {
+import Component from 'vue-class-component'
 
-  // template
-  static template = `
+@Component({
+  props: {
+    propMessage: String
+  },
+  template: `
     <div>
       <input v-model="msg">
       <p>prop: {{propMessage}}</p>
@@ -26,12 +28,8 @@ export default class Component {
       <button @click="greet">Greet</button>
     </div>
   `
-
-  // props
-  static props = {
-    propMessage: String
-  }
-
+})
+class App {
   // return initial data
   data () {
     return {

example/example.js

@@ -1,10 +1,10 @@
-import VueCompoent from '../'
+import Component from '../'
 
-@VueCompoent
-class App {
-
-// template
-  static template = `
+@Component({
+  props: {
+    propMessage: String
+  },
+  template: `
     <div>
       <input v-model="msg">
       <p>prop: {{propMessage}}</p>
@@ -13,12 +13,8 @@ class App {
       <button @click="greet">Greet</button>
     </div>
   `
-
-  // props
-  static props = {
-    propMessage: String
-  }
-
+})
+class App {
   // return initial data
   data () {
     return {

index.js

@@ -15,42 +15,39 @@ var internalHooks = [
   'activate'
 ]
 
-function decorator (Component) {
-  var options = {}
-  options.name = Component.name
-  // prototype props.
-  var proto = Component.prototype
-  Object.getOwnPropertyNames(proto).forEach(function (key) {
-    if (key === 'constructor') {
-      return
-    }
-    // hooks
-    if (internalHooks.indexOf(key) > -1) {
-      options[key] = proto[key]
-      return
-    }
-    var descriptor = Object.getOwnPropertyDescriptor(proto, key)
-    if (typeof descriptor.value === 'function') {
-      // methods
-      (options.methods || (options.methods = {}))[key] = descriptor.value
-    } else if (descriptor.get || descriptor.set) {
-      // computed properties
-      (options.computed || (options.computed = {}))[key] = {
-        get: descriptor.get,
-        set: descriptor.set
+function decorator (options) {
+  return function (Component) {
+    options.name = options.name || Component.name
+    // prototype props.
+    var proto = Component.prototype
+    Object.getOwnPropertyNames(proto).forEach(function (key) {
+      if (key === 'constructor') {
+        return
+      }
+      // hooks
+      if (internalHooks.indexOf(key) > -1) {
+        options[key] = proto[key]
+        return
+      }
+      var descriptor = Object.getOwnPropertyDescriptor(proto, key)
+      if (typeof descriptor.value === 'function') {
+        // methods
+        (options.methods || (options.methods = {}))[key] = descriptor.value
+      } else if (descriptor.get || descriptor.set) {
+        // computed properties
+        (options.computed || (options.computed = {}))[key] = {
+          get: descriptor.get,
+          set: descriptor.set
+        }
       }
+    })
+    // find super
+    var Super = proto.__proto__.constructor
+    if (!(Super instanceof Vue)) {
+      Super = Vue
     }
-  })
-  // copy static options
-  Object.keys(Component).forEach(function (key) {
-    options[key] = Component[key]
-  })
-  // find super
-  var Super = proto.__proto__.constructor
-  if (!(Super instanceof Vue)) {
-    Super = Vue
+    return Super.extend(options)
   }
-  return Super.extend(options)
 }
 
 module.exports = decorator

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-class-component",
-  "version": "2.0.1",
-  "description": "ES7/TypeScript class decorator for Vue components",
+  "version": "3.0.0",
+  "description": "ES201X/TypeScript class decorator for Vue components",
   "main": "index.js",
   "scripts": {
     "build": "webpack --config example/webpack.config.js",