init

yyx990803 · yyx990803 · commit 13158deb5b13 · 2015-06-25T16:09:46.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+example/build.js
diff --git a/README.md b/README.md
@@ -0,0 +1,57 @@
+# vue-classy
+
+> Experimental ES7 / TypeScript decorator for class-style Vue components.
+
+### Example Usage with Babel stage=0:
+
+``` js
+import Vue from 'vue'
+import VueClassy from 'vue-classy'
+
+Vue.use(VueClassy)
+
+@Vue.componentClass
+export default class Component extends Vue {
+
+  // template
+  static template = `
+    <div>
+      <input v-model="msg">
+      <p>msg: {{msg}}</p>
+      <p>computed msg: {{computedMsg}}</p>
+      <button v-on="click:greet">Greet</button>
+    </div>
+  `
+
+  // data
+  msg = 'hello'
+
+  // computed
+  get computedMsg() {
+    return 'computed ' + this.msg
+  }
+
+  // method
+  greet() {
+    alert('greeting: ' + this.msg)
+  }
+
+  // lifecycle hook
+  ready() {
+    this.greet()
+  }
+}
+
+// mount
+new Component({
+  el: '#el'
+})
+```
+
+### Build the Example
+
+``` bash
+$ npm install && npm run build
+```
+
+Theoretically, this should also work properly as a TypeScript 1.5+ decorator. If you'd like to make it work properly with TypeScript, feel free to contribute!
diff --git a/example/example.es b/example/example.es
@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import VueClassy from '../'
+
+Vue.use(VueClassy)
+
+@Vue.componentClass
+export default class Component extends Vue {
+
+  // template
+  static template = `
+    <div>
+      <input v-model="msg">
+      <p>msg: {{msg}}</p>
+      <p>computed msg: {{computedMsg}}</p>
+      <button v-on="click:greet">Greet</button>
+    </div>
+  `
+
+  // data
+  msg = 'hello'
+
+  // computed
+  get computedMsg() {
+    return 'computed ' + this.msg
+  }
+
+  // method
+  greet() {
+    alert('greeting: ' + this.msg)
+  }
+
+  // lifecycle hook
+  ready() {
+    this.greet()
+  }
+}
+
+// mount
+new Component({
+  el: '#el'
+})
diff --git a/example/example.html b/example/example.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <div id="el"></div>
+    <script src="build.js"></script>
+  </body>
+</html>
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  entry: './example/example.es',
+  output: {
+    path: './example',
+    filename: 'build.js'
+  },
+  module: {
+    loaders: [
+      { test: /\.es$/, loader: 'babel?stage=0' }
+    ]
+  }
+}
diff --git a/index.js b/index.js
@@ -0,0 +1,77 @@
+var Vue
+
+var internalHooks = [
+  'created',
+  'ready',
+  'beforeCompile',
+  'compiled', 
+  'beforeDestroy',
+  'destroyed',
+  'attached', 
+  'detached'
+]
+
+function decorate (Component) {
+  var capture = new Component(false)
+  var options = {}
+  // instance properties are data
+  var fields = Object.keys(capture)
+  if (fields.length) {
+    options.data = function () {
+      return clone(capture)
+    }
+  }
+  // prototype props.
+  // only need to identify hooks and methods.
+  // computed properties just work!
+  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
+    }
+    // methods
+    var descriptor = Object.getOwnPropertyDescriptor(proto, key)
+    if (typeof descriptor.value === 'function') {
+      (options.methods || (options.methods = {}))[key] = descriptor.value
+    }
+  })
+  // copy static options
+  Object.keys(Component).forEach(function (key) {
+    options[key] = Component[key]
+  })
+  // set options
+  var Super = proto.__proto__.constructor
+  Component.options = Vue.util.mergeOptions(Super.options, options)
+  Component['super'] = Super
+  Component.extend = Super.extend
+  // asset registers
+  Vue.config._assetTypes.forEach(function (type) {
+    Component[type] = Super[type]
+  })
+}
+
+function clone (val) {
+  if (typeof val !== 'object') {
+    return val
+  } else if (Array.isArray(val)) {
+    return val.map(clone)
+  } else {
+    var res = {}
+    Object.keys(val).forEach(function (key) {
+      res[key] = clone(val[key])
+    })
+    return res
+  }
+}
+
+function install (externalVue) {
+  Vue = externalVue
+  Vue.componentClass = decorate
+}
+
+module.exports = install
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "vue-classy",
+  "version": "1.0.0",
+  "description": "ES7/TypeScript class decorator for Vue components",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --config example/webpack.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vue-classy.git"
+  },
+  "keywords": [
+    "vue",
+    "class",
+    "babel",
+    "typescript"
+  ],
+  "author": "Evan You",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuejs/vue-classy/issues"
+  },
+  "homepage": "https://github.com/vuejs/vue-classy#readme",
+  "devDependencies": {
+    "babel-core": "^5.6.7",
+    "babel-loader": "^5.2.0",
+    "node-libs-browser": "^0.5.2",
+    "vue": "^0.12.3",
+    "webpack": "^1.9.12"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  entry: './test/test.js',
+  output: {
+    path: './test',
+    filename: 'build.js'
+  },
+  module: {
+    loaders: [
+      { test: /\.es$/, loader: 'babel?stage=0' }
+    ]
+  }
+}
