$createObservableFunction

Author: wx-ps

example/counter-function.html

@@ -0,0 +1,73 @@
+<!-- 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="../dist/vue-rx.js"></script>
+
+<div id="app">
+  <div>{{ count }}</div>
+
+  <!-- simple usage -->
+  <button v-on:click="plus(500)">Add 500</button>
+
+  <button v-stream:click="{ subject: plus$, data: minusDelta1, options:{once:true} }">Add on Click (Option once:true)</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>
+
+  <my-button v-stream:click="plus$"></my-button>
+</div>
+
+<script>
+new Vue({
+  el: '#app',
+
+  data () {
+    return {
+      minusDelta1: -1,
+      minusDelta2: -1
+    }
+  },
+
+  components: {
+    myButton: {
+      template: '<button>MyButton</button>'
+    }
+  },
+
+  created () {
+    //Speed up mousemove minus delta after 5s
+    setTimeout(() => {
+      this.minusDelta2 = -5
+    }, 5000);
+
+  },
+
+  // declare dom stream Subjects
+  domStreams: ['plus$', 'minus$'],
+
+  methods:{
+  },
+
+  subscriptions () {
+    var count$ = Rx.Observable
+      .merge(
+      	this.$createObservableFunction('plus'),
+        this.plus$.map(() => 1),
+        this.minus$.pluck('data')
+      )
+      .startWith(0)
+      .scan((total, change) => total + change)
+
+    return {
+      count: count$
+    }
+  }
+})
+</script>

src/index.js

@@ -7,6 +7,7 @@ import watchAsObservable from './methods/watchAsObservable'
 import fromDOMEvent from './methods/fromDOMEvent'
 import subscribeTo from './methods/subscribeTo'
 import eventToObservable from './methods/eventToObservable'
+import createObservableFunction from './methods/createObservableFunction'
 
 export default function VueRx (Vue, Rx) {
   install(Vue, Rx)
@@ -16,6 +17,7 @@ export default function VueRx (Vue, Rx) {
   Vue.prototype.$fromDOMEvent = fromDOMEvent
   Vue.prototype.$subscribeTo = subscribeTo
   Vue.prototype.$eventToObservable = eventToObservable
+  Vue.prototype.$createObservableFunction = createObservableFunction
 }
 
 // auto install

src/methods/createObservableFunction.js

@@ -0,0 +1,57 @@
+import { Rx, hasRx, warn } from '../util'
+
+/**
+ * @name vue.prototype.$createObservableFunction
+ * @description Creates an observable from a given function name.
+ * @param {String} functionName Function name
+ * @param {Boolean} [passContext] Append the call context at the end of emit data?
+ * @return {Observable} Hot stream
+ */
+export default function createObservableFunction (functionName, passContext) {
+  if (!hasRx()) {
+    return
+  }
+  const vm = this
+
+  if (!Rx.Observable.prototype.share) {
+    warn(
+      `No 'share' operator. ` +
+      `$createObservableFunction returns a shared hot observable. ` +
+      `Try import 'rxjs/add/operator/share' for creating ${functionName}`,
+      vm
+    )
+    return
+  }
+
+  if(vm[functionName] !== undefined){
+    warn(
+      'Potential bug: ' +
+      `Method ${functionName} already defined on vm and has been overwritten by $createObservableFunction.` +
+      String(vm[functionName]),
+      vm
+    )
+  }
+
+  let creator = function (observer) {
+
+    vm[functionName] = function () {
+      let args = Array.from(arguments);
+      if(passContext){
+        args.push(this);
+        observer.next(args);
+      }else{
+        if (args.length <= 1) {
+          observer.next(args[0]);
+        } else {
+          observer.next(args);
+        }
+      }
+    };
+    return function() {
+      delete vm[functionName];
+    };
+  };
+
+  //Must be a hot stream otherwise function context may overwrite over and over again
+  return Rx.Observable.create(creator).share();
+}

test/test.js

@@ -10,6 +10,7 @@ const Observable = require('rxjs/Observable').Observable
 const Subject = require('rxjs/Subject').Subject
 const Subscription = require('rxjs/Subscription').Subscription
 require('rxjs/add/observable/fromEvent')
+require('rxjs/add/operator/share')
 
 // user
 require('rxjs/add/operator/map')
@@ -316,3 +317,36 @@ test('$eventToObservable() with lifecycle hooks', done => {
     vm.$destroy()
   })
 })
+
+
+test('$createObservableFunction() with no context', done => {
+  const vm = new Vue({
+    created () {
+      this.$createObservableFunction('add')
+        .subscribe(function (param) {
+          expect(param).toEqual('hola')
+          done(param)
+        })
+    }
+  })
+  nextTick(() => {
+    vm.add('hola')
+  })
+})
+
+test('$createObservableFunction() with muli params & context', done => {
+  const vm = new Vue({
+    created () {
+      this.$createObservableFunction('add',true)
+        .subscribe(function (param) {
+          expect(param[0]).toEqual('hola')
+          expect(param[1]).toEqual('mundo')
+          expect(param[2]).toEqual(vm)
+          done(param)
+        })
+    }
+  })
+  nextTick(() => {
+    vm.add('hola','mundo')
+  })
+})