custom event support

Author: regou

example/counter-simple.html

@@ -6,20 +6,31 @@
   <div>{{ count }}</div>
   <button v-stream:click="plus$">+</button>
   <button v-stream:click="minus$">-</button>
+  <my-component v-stream:more="more$"></my-component>
 </div>
 
 <script>
+Vue.component('my-component', {
+  template: '<button v-on:click="more">Iwant more!</button>',
+  methods:{
+    more:function(){
+      this.$emit('more',100)
+    }
+  }
+})
+
 new Vue({
   el: '#app',
 
   // declare dom stream Subjects
-  domStreams: ['plus$', 'minus$'],
+  domStreams: ['plus$', 'minus$','more$'],
 
   subscriptions () {
     var plus$ = this.plus$.map(() => 1)
     var minus$ = this.minus$.map(() => -1)
+    var more$ = this.more$.map(() => 100)
     var count$ = Rx.Observable
-      .merge(plus$, minus$)
+      .merge(plus$, minus$, more$)
       .startWith(0)
       .scan((total, change) => total + change)
 
@@ -28,4 +39,4 @@
     }
   }
 })
-</script>
+</script>

src/directives/stream.js

@@ -11,15 +11,6 @@ export default {
     const event = binding.arg
     const streamName = binding.expression
 
-    if (!Rx.Observable.fromEvent) {
-      warn(
-        `No 'fromEvent' method on Observable class. ` +
-        `v-stream directive requires Rx.Observable.fromEvent method. ` +
-        `Try import 'rxjs/add/observable/fromEvent' for ${streamName}`,
-        vnode.context
-      )
-      return
-    }
     if (isSubject(handle)) {
       handle = { subject: handle }
     } else if (!handle || !isSubject(handle.subject)) {
@@ -34,17 +25,36 @@ export default {
 
     const subject = handle.subject
     const next = (subject.next || subject.onNext).bind(subject)
-    let fromEventArgs = handle.options ? [el, event, handle.options] : [el, event]
-    handle.subscription = Rx.Observable.fromEvent(...fromEventArgs).subscribe(e => {
-      next({
-        event: e,
-        data: handle.data
+
+    if (vnode.componentInstance) {
+      handle.subscription = vnode.componentInstance.$eventToObservable(event).subscribe(e => {
+        next({
+          event: e,
+          data: handle.data
+        })
+      })
+    } else {
+      if (!Rx.Observable.fromEvent) {
+        warn(
+          `No 'fromEvent' method on Observable class. ` +
+          `v-stream directive requires Rx.Observable.fromEvent method. ` +
+          `Try import 'rxjs/add/observable/fromEvent' for ${streamName}`,
+          vnode.context
+        )
+        return
+      }
+      let fromEventArgs = handle.options ? [el, event, handle.options] : [el, event]
+      handle.subscription = Rx.Observable.fromEvent(...fromEventArgs).subscribe(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
+      // 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 (el, binding) {

src/methods/eventToObservable.js

@@ -12,13 +12,13 @@ export default function eventToObservable (evtName) {
   const vm = this
   let evtNames = Array.isArray(evtName) ? evtName : [evtName]
   const obs$ = Rx.Observable.create(observer => {
-    let eventPairs = evtNames.map(name =>{
+    let eventPairs = evtNames.map(name => {
       let callback = msg => observer.next({name, msg})
       vm.$on(name, callback)
       return {name, callback}
     })
     return () => {
-      //Only remove the specific callback
+      // Only remove the specific callback
       eventPairs.forEach(pair => vm.$off(pair.name, pair.callback))
     }
   })

test/test.js

@@ -315,7 +315,6 @@ test('$eventToObservable() with lifecycle hooks', done => {
     created(){
       this.$eventToObservable('hook:beforeDestroy')
         .subscribe(function (event) {
-          console.log(event);
           done(event)
         });
     }