support separate data + docs

Author: yyx990803

README.md

@@ -28,9 +28,14 @@ import Vue from 'vue'
 import VueRx from 'vue-rx'
 import { Observable } from 'rxjs/Observable'
 import { Subscription } from 'rxjs/Subscription' // Disposable if using RxJS4
+import { Subject } from 'rxjs/Subject' // required for domStreams option
 
 // tada!
-Vue.use(VueRx, { Observable, Subscription })
+Vue.use(VueRx, {
+  Observable,
+  Subscription,
+  Subject
+})
 ```
 
 #### Global Script
@@ -78,6 +83,64 @@ var vm = new Vue({
 vm.$observables.msg.subscribe(msg => console.log(msg))
 ```
 
+### `v-stream`: Streaming DOM Events
+
+> New in 3.0
+
+> This feature requires RxJS.
+
+`vue-rx` provides the `v-stream` directive which allows you to stream DOM events to an Rx Subject. The syntax is similar to `v-on` where the directive argument is the event name, and the binding value is the target Rx Subject.
+
+``` html
+<button v-stream:click="plus$">+</button>
+```
+
+Note that you need to declare `plus$` as an instance of `Rx.Subject` on the vm instance before the render happens, just like you need to declare data. You can do that right in the `subscriptions` function:
+
+``` js
+new Vue({
+  subscriptions () {
+    // declare the receiving Subjects
+    this.plus$ = new Rx.Subject()
+    // ...then create subscriptions using the Subjects as source stream.
+    // the source stream emits in the form of { event: HTMLEvent, data?: any }
+    return {
+      count: this.plus$.map(() => 1)
+        .startWith(0)
+        .scan((total, change) => total + change)
+    }
+  }
+})
+```
+
+Or, use the `domStreams` convenience option:
+
+``` js
+new Vue({
+  // requires `Rx` passed to Vue.use() to expose `Subject`
+  domStreams: ['plus$'],
+  subscriptions () {
+    // use this.plus$
+  }
+})
+```
+
+Finally, you can pass additional data to the stream using the alternative syntax:
+
+``` html
+<button v-stream:click="{ subject: plus$, data: someData }">+</button>
+```
+
+This is useful when you need to pass along temporary variables like `v-for` iterators. You can get the data by simply plucking it from the source stream:
+
+``` js
+const plusData$ = this.plus$.pluck('data')
+```
+
+See [example](https://github.com/vuejs/vue-rx/blob/master/example/counter.html) for actual usage.
+
+### Other API Methods
+
 #### `$watchAsObservable(expOrFn, [options])`
 
 > This feature requires RxJS.
@@ -126,6 +189,8 @@ var vm = new Vue({
 
 #### `$fromDOMEvent(selector, event)`
 
+> Deprecated in 3.0+. Prefer `v-stream` instead.
+
 > This feature requires RxJS.
 
 This is a prototype method added to instances. Use it to create an observable from DOM events within the instances' element. This is similar to `Rx.Observable.fromEvent`, but usable inside the `subscriptions` function even before the DOM is actually rendered.

example/counter-simple.html

@@ -0,0 +1,31 @@
+<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
+<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="../vue-rx.js"></script>
+
+<div id="app">
+  <div>{{ count }}</div>
+  <button v-stream:click="plus$">+</button>
+  <button v-stream:click="minus$">-</button>
+</div>
+
+<script>
+new Vue({
+  el: '#app',
+
+  // declare dom stream Subjects
+  domStreams: ['plus$', 'minus$'],
+
+  subscriptions () {
+    var plus$ = this.plus$.map(() => 1)
+    var minus$ = this.minus$.map(() => -1)
+    var count$ = Rx.Observable
+      .merge(plus$, minus$)
+      .startWith(0)
+      .scan((total, change) => total + change)
+
+    return {
+      count: count$
+    }
+  }
+})
+</script>

example/counter.html

@@ -1,20 +1,52 @@
+<!-- this demo requires a browser that natively supports ES2015 -->
+
 <script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="../vue-rx.js"></script>
 
 <div id="app">
-  {{ count }}
-  <button class="plus">+</button>
-  <button class="minus">-</button>
+  <div>{{ count }}</div>
+
+  <!-- simple usage -->
+  <button v-stream:click="plus$">Add on Click</button>
+
+  <!-- you can also stream to the same subject with different events/data -->
+  <button
+    v-stream:click="{ subject: minus$, data: minusDelta1 }"
+    v-stream:mousemove="{ subject: minus$, data: minusDelta2 }">
+    Minus on Click &amp; Mousemove
+  </button>
+
+  <pre>{{ $data }}</pre>
 </div>
 
 <script>
 new Vue({
   el: '#app',
+
+  data () {
+    return {
+      minusDelta1: -1,
+      minusDelta2: -1
+    }
+  },
+
+  created () {
+    //Speed up mousemove minus delta after 5s
+    setTimeout(() => {
+      this.minusDelta2 = -5
+    }, 5000)
+  },
+
+  // declare dom stream Subjects
+  domStreams: ['plus$', 'minus$'],
+
   subscriptions () {
-    var plus$ = this.$fromDOMEvent('.plus', 'click').map(e => 1)
-    var minus$ = this.$fromDOMEvent('.minus', 'click').map(e => -1)
-    var count$ = Rx.Observable.merge(plus$, minus$)
+    var count$ = Rx.Observable
+      .merge(
+        this.plus$.map(() => 1),
+        this.minus$.pluck('data')
+      )
       .startWith(0)
       .scan((total, change) => total + change)
 

example/couter-with-directive.html

@@ -26,7 +26,7 @@
     }
 
     function unsub (handle) {
-      if (!handle) { return }
+      if (!handle) return
       if (handle.dispose) {
         handle.dispose()
       } else if (handle.unsubscribe) {
@@ -50,14 +50,22 @@
       }
     }
 
+    function getKey (binding) {
+      return [binding.arg].concat(Object.keys(binding.modifiers)).join(':')
+    }
+
     Vue.mixin({
       created: function init () {
         var vm = this
-        var domStreams = vm.$option.domStreams
+        var domStreams = vm.$options.domStreams
         if (domStreams) {
-          domStreams.forEach(function (key) {
-            vm[key] = new Rx.Subject()
-          })
+          if (!Rx.Subject) {
+            warn('Rx.Subject is required to use the "domStreams" option.')
+          } else {
+            domStreams.forEach(function (key) {
+              vm[key] = new Rx.Subject()
+            })
+          }
         }
 
         var obs = vm.$options.subscriptions
@@ -83,6 +91,7 @@
           })
         }
       },
+
       beforeDestroy: function () {
         if (this._obSubscriptions) {
           this._obSubscriptions.forEach(unsub)
@@ -165,26 +174,51 @@
         if (!hasRx()) {
           return
         }
+
+        var handle = binding.value
         var event = binding.arg
-        var stream = binding.value
         var streamName = binding.expression
 
-        if (isSubject(stream)) {
-          var onNext = (stream.next || stream.onNext).bind(stream) // Rx4 Rx5
-          el._ob$ = Rx.Observable.fromEvent(el, event).subscribe(function (evt) {
-            onNext({ event: evt })
-          })
-        } else {
+        if (isSubject(handle)) {
+          handle = { subject: handle }
+        } else if (!handle || !isSubject(handle.subject)) {
           warn(
             'Invalid Subject found in directive with key "' + streamName + '".' +
-            streamName + ' should be an instance of Rx.Subject',
+            streamName + ' should be an instance of Rx.Subject or have the ' +
+            'type { subject: Rx.Subject, data: any }.',
             vnode.context
           )
+          return
+        }
+
+        var subject = handle.subject
+        var next = (subject.next || subject.onNext).bind(subject)
+        handle.subscription = Rx.Observable.fromEvent(el, event).subscribe(function (e) {
+          next({
+            event: e,
+            data: handle.data
+          })
+        })
+
+        // store handle on element with a unique key for identifying
+        // multiple v-stream directives on the same node
+        ;(el._rxHandles || (el._rxHandles = {}))[getKey(binding)] = handle
+      },
+
+      update: function (el, binding) {
+        var handle = binding.value
+        var _handle = el._rxHandles && el._rxHandles[getKey(binding)]
+        if (_handle && handle && isSubject(handle.subject)) {
+          _handle.data = handle.data
         }
       },
-      unbind: function (el, binding, vnode) {
-        if (el._ob$) {
-          unsub(el._ob$)
+
+      unbind: function (el, binding) {
+        var key = getKey(binding)
+        var handle = el._rxHandles && el._rxHandles[key]
+        if (handle) {
+          unsub(handle.subscription)
+          el._rxHandles[key] = null
         }
       }
     })