redesign API

Author: yyx990803

README.md

@@ -2,6 +2,24 @@
 
 Simple [RxJS](https://github.com/Reactive-Extensions/RxJS) binding for Vue.js.
 
+### Installation
+
+- With global scripts: just make sure to include `vue-rx.js` after Vue.js and RxJS. It will be installed automatically.
+
+- With NPM:
+
+  ``` js
+  var Vue = require('vue')
+  var Rx = require('rx')
+  var VueRx = require('vue-rx')
+
+  // tada!
+  Vue.use(VueRx, Rx)
+
+  // The second argument is optional if you are not using RxJS but other generic observable implementations:
+  Vue.use(VueRx)
+  ```
+
 ### Usage
 
 With NPM:
@@ -14,16 +32,56 @@ var VueRx = require('vue-rx')
 // tada!
 Vue.use(VueRx, Rx)
 
-// now you can bind to Rx observables directly in `data`
+// provide Rx observables with the `subscriptions` option
 new Vue({
   el: '#app',
-  data: {
+  subscriptions: {
     msg: messageObservable
   }
 })
 ```
 
-With global scripts: just make sure to include `vue-rx.js` after Vue.js and RxJS. It will be installed automatically.
+``` html
+<!-- bind to it normally in templates -->
+<div>{{ msg }}</div>
+```
+
+The `subscriptions` options can also take a function so that you can return unique observables for each component instance:
+
+``` js
+Vue.component('foo', {
+  subscriptions: function () {
+    return {
+      msg: Rx.Observable.create(...)
+    }
+  }
+})
+```
+
+### Using with Alternative Observable Implementations
+
+You can use this plugin with other observable implementations, as long as it implements the `.subscribe` and `.dispose / .unsubscribe` interface. For example, you can use it with `most.js` or Falcor streams.
+
+### `$watchAsObservable`
+
+> This feature requires using RxJS.
+
+This is a prototype method added to instances. You can use it to create an observable from a value watcher:
+
+``` js
+created:function () {
+  this.$watchAsObservable('a')
+    .subscribe(function (val) {
+      console.log('stream value', val)
+    },function (err) {
+      console.error(err)
+    },function () {
+      console.log('complete')
+    })
+}
+```
+
+### Example
 
 See `/example` for a simple example.
 

example/example.html

@@ -60,22 +60,23 @@ <h1>{{ results.term }}</h1>
 var vm = new Vue({
   el: '#el',
   data: {
-    a:5,
+    a: 5
+  },
+  subscriptions: {
     results: dataSource
   }
-});
-
+})
 
 setTimeout(function () {
-  vm.a = 17;
-},5000)
+  vm.a = 17
+}, 5000)
 
-  vm.$watchAsObservable('a')
-          .subscribe(function (val) {
-            console.log('stream value',val);
-          },function (err) {
-            console.error(err)
-          },function () {
-            console.log('complete');
-          })
+vm.$watchAsObservable('a')
+  .subscribe(function (val) {
+    console.log('stream value',val)
+  },function (err) {
+    console.error(err)
+  },function () {
+    console.log('complete')
+  })
 </script>

vue-rx.js

@@ -1,15 +1,36 @@
 (function () {
   function VueRx (Vue, Rx) {
-    if (!Rx) {
-      throw new Error(
-        'vue-rx requires passing the Rx object to Vue.use() as the 2nd argument.'
-      )
-    }
+    var warn = Vue.util.warn || function () {}
 
-    var VueVersion = Number(Vue.version && Vue.version.split('.')[0])
-    var initHook = VueVersion && VueVersion > 1 ? 'beforeCreate' : 'init'
+    function defineReactive (vm, key, val) {
+      if (key in vm) {
+        vm[key] = val
+      } else {
+        Vue.util.defineReactive(vm, key, val)
+      }
+    }
 
-    var mixin = {
+    Vue.mixin({
+      created () {
+        var vm = this
+        var obs = vm.$options.subscriptions
+        if (typeof obs === 'function') {
+          obs = obs.call(vm)
+        }
+        if (!obs) return
+        vm._rxHandles = []
+        Object.keys(obs).forEach(function (key) {
+          defineReactive(vm, key, undefined)
+          var ob = obs[key]
+          if (!ob || typeof ob.subscribe !== 'function') {
+            warn('Invalid Observable found in rx option with key "' + key + '".', vm)
+            return
+          }
+          vm._rxHandles.push(obs[key].subscribe(function (value) {
+            vm[key] = value
+          }))
+        })
+      },
       beforeDestroy: function () {
         if (this._rxHandles) {
           this._rxHandles.forEach(function (handle) {
@@ -21,32 +42,18 @@
           })
         }
       }
-    }
+    })
 
-    mixin[initHook] = function init () {
-      var self = this
-      var dataFn = this.$options.data
-      if (dataFn) {
-        this.$options.data = function () {
-          var raw = dataFn()
-          Object.keys(raw).forEach(function (key) {
-            var val = raw[key]
-            if (val && val.subscribe instanceof Function) {
-              raw[key] = null
-              ;(self._rxHandles || (self._rxHandles = []))
-                .push(val.subscribe(function (value) {
-                  self[key] = raw[key] = value
-                }))
-            }
-          })
-          return raw
-        }
+    Vue.prototype.$watchAsObservable = function (expOrFn, options) {
+      if (!Rx) {
+        warn(
+          '$watchAsObservable requires passing the Rx to Vue.use() as the ' +
+          'second argument.',
+          this
+        )
+        return
       }
-    }
-
-    Vue.mixin(mixin)
 
-    Vue.prototype.$watchAsObservable = function (expOrFn, options) {
       var self = this
 
       var obs$ = Rx.Observable.create(function (observer) {