add feature eventToObservable

Author: wx-ps

README.md

@@ -183,6 +183,30 @@ vm.$watchAsObservable('a')
 
 The optional `options` object accepts the same options as `vm.$watch`.
 
+#### `$eventToObservable(event)`
+
+> This feature requires RxJS.
+
+Convert vue.$on (including lifecycle events) to Observables. The emitted value is in the format of `{ name, msg }`:
+
+``` js
+var vm = new Vue({
+  created () {
+    this.$eventToObservable('customEvent')
+	  .subscribe((event) => console.log(event.name,event.msg))	
+  }
+})
+
+// vm.$once vue-rx version
+this.$eventToObservable('customEvent')
+  .take(1)
+  
+// Another way to auto unsub:
+let beforeDestroy$ = this.$eventToObservable('hook:beforeDestroy')
+this.$eventToObservable('customEvent')
+  .takeUntil(beforeDestroy$)
+```
+
 #### `$subscribeTo(observable, next, error, complete)`
 
 This is a prototype method added to instances. You can use it to subscribe to an observable, but let VueRx manage the dispose/unsubscribe.

src/index.js

@@ -4,6 +4,7 @@ import streamDirective from './directives/stream'
 import watchAsObservable from './methods/watchAsObservable'
 import fromDOMEvent from './methods/fromDOMEvent'
 import subscribeTo from './methods/subscribeTo'
+import eventToObservable from './methods/eventToObservable'
 
 export default function VueRx (Vue, Rx) {
   install(Vue, Rx)
@@ -12,6 +13,7 @@ export default function VueRx (Vue, Rx) {
   Vue.prototype.$watchAsObservable = watchAsObservable
   Vue.prototype.$fromDOMEvent = fromDOMEvent
   Vue.prototype.$subscribeTo = subscribeTo
+  Vue.prototype.$eventToObservable = eventToObservable
 }
 
 // auto install

src/methods/eventToObservable.js

@@ -0,0 +1,28 @@
+import { Rx, hasRx } from '../util'
+
+/**
+ * @see {@link https://vuejs.org/v2/api/#vm-on}
+ * @param {String||Array} evtName Event name
+ * @return {Observable} Event stream
+ */
+export default function eventToObservable (evtName) {
+  if (!hasRx()) {
+    return
+  }
+  const vm = this
+  let evtNames = Array.isArray(evtName) ? evtName : [evtName]
+  const obs$ = Rx.Observable.create(observer => {
+    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
+      eventPairs.forEach(pair => vm.$off(pair.name, pair.callback))
+    }
+  })
+
+  ;(vm._obSubscriptions || (vm._obSubscriptions = [])).push(obs$)
+  return obs$
+}

test/test.js

@@ -284,3 +284,43 @@ test('$subscribeTo()', () => {
   next(2)
   expect(results).toEqual([1]) // should not trigger anymore
 })
+
+
+test('$eventToObservable()', done => {
+  let calls = 0;
+  const vm = new Vue({
+    created(){
+      let ob = this.$eventToObservable('ping')
+        .subscribe(function (event) {
+          expect(event.name).toEqual('ping');
+          expect(event.msg).toEqual('ping message');
+          calls++
+        });
+    }
+  });
+  vm.$emit('ping','ping message');
+
+  nextTick(()=>{
+    vm.$destroy();
+    //Should not emit
+    vm.$emit('pong','pong message');
+    expect(calls).toEqual(1);
+    done()
+  });
+});
+
+
+test('$eventToObservable() with lifecycle hooks', done => {
+  const vm = new Vue({
+    created(){
+      this.$eventToObservable('hook:beforeDestroy')
+        .subscribe(function (event) {
+          console.log(event);
+          done(event)
+        });
+    }
+  });
+  nextTick(()=>{
+    vm.$destroy()
+  })
+});