feat: create observable method | mixins

Author: NOPR9D

README.md

@@ -270,6 +270,47 @@ const vm = new Vue({
 
 ---
 
+## `$createObservableMethod(methodName)`
+
+Convert function calls to observable sequence which emits the call arguments.
+
+This is a prototype method added to instances. Use it to create a shared hot observable from a function name. The function will be assigned as a vm method.
+
+```html
+<custom-form :onSubmit="submitHandler"></custom-form>
+```
+
+```js
+const vm = new Vue({
+  subscriptions() {
+    return {
+      // requires `share` operator
+      formData: this.$createObservableMethod("submitHandler"),
+    };
+  },
+});
+```
+
+You can use the `observableMethods` option to make it more declarative:
+
+```js
+new Vue({
+  observableMethods: {
+    submitHandler: "submitHandler$",
+    // or with Array shothand: ['submitHandler']
+  },
+});
+```
+
+The above will automatically create two things on the instance:
+
+1. A `submitHandler` method which can be bound to in template with `v-on`;
+2. A `submitHandler$` observable which will be the stream emitting calls to `submitHandler`.
+
+[example](https://github.com/vuejs/vue-rx/blob/master/example/counter-function.html)
+
+---
+
 ## Example
 
 See `/examples` for some simple examples.

example/createObservableMethod.html

@@ -0,0 +1,42 @@
+<!-- this demo requires a browser that natively supports ES2015 -->
+
+<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
+<script src="https://unpkg.com/vue@next"></script>
+<script src="../dist/vue-next-rx.js"></script>
+<div id="app">
+  <div>{{ count }}</div>
+
+  <!-- callback declared on observableMethods -->
+  <button v-on:click="muchMore(500)">Add 500</button>
+
+  <button v-on:click="minus(minusDelta1)">Minus on Click</button>
+
+  <pre>{{ $data }}</pre>
+</div>
+<script>
+  const { merge } = rxjs;
+  const { startWith, scan } = rxjs.operators;
+  const { ref, watch } = VueNextRx;
+
+  const app = Vue.createApp({
+    observableMethods: {
+      muchMore: "muchMore$",
+      minus: "minus$",
+    },
+    data() {
+      return {
+        minusDelta1: -1,
+        minusDelta2: -1,
+      };
+    },
+    subscriptions() {
+      return {
+        count: merge(this.muchMore$, this.minus$).pipe(
+          startWith(0),
+          scan((total, change) => total + change)
+        ),
+      };
+    },
+  }).use(VueNextRx);
+  app.mount("#app");
+</script>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@nopr3d/vue-next-rx",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "RxJs for Vue 3",
   "author": "Boucham Amine",
   "license": "MIT",

package.json

@@ -33,7 +33,7 @@ module.exports = [
       globals: {
         vue: "Vue",
         rxjs: "rxjs",
-        "rxjs/operators": "rxjs/  operators",
+        "rxjs/operators": "rxjs.operators",
       },
     },
     plugins: [

rollup.config.js

@@ -7,19 +7,19 @@ export default {
     const domStreams = vm.$options.domStreams;
 
     if (domStreams) {
-      domStreams.forEach((key) => {
+      domStreams.forEach(key => {
         vm[key] = new Subject();
       });
     }
 
     const observableMethods = vm.$options.observableMethods;
     if (observableMethods) {
       if (Array.isArray(observableMethods)) {
-        observableMethods.forEach((methodName) => {
+        observableMethods.forEach(methodName => {
           vm[methodName + "$"] = vm.$createObservableMethod(methodName);
         });
       } else {
-        Object.keys(observableMethods).forEach((methodName) => {
+        Object.keys(observableMethods).forEach(methodName => {
           vm[observableMethods[methodName]] = vm.$createObservableMethod(
             methodName
           );
@@ -34,7 +34,7 @@ export default {
     if (obs) {
       vm.$observables = {};
       vm._subscription = new Subscription();
-      Object.keys(obs).forEach((key) => {
+      Object.keys(obs).forEach(key => {
         vm[key] = undefined;
         const ob = (vm.$observables[key] = obs[key]);
         if (!isObservable(ob)) {
@@ -48,11 +48,11 @@ export default {
         }
         vm._subscription.add(
           obs[key].subscribe(
-            (value) => {
+            value => {
               vm[key] = value;
               this.$forceUpdate();
             },
-            (error) => {
+            error => {
               throw error;
             }
           )
@@ -65,5 +65,5 @@ export default {
     if (this._subscription) {
       this._subscription.unsubscribe();
     }
-  },
+  }
 };

src/mixin.js

@@ -325,3 +325,90 @@ test("$subscribeTo()", () => {
   next(2);
   expect(results).toEqual([1]); // should not trigger anymore
 });
+
+test("$createObservableMethod() with no context", (done) => {
+  const { ob, next } = mock();
+  const results = [];
+  const component = {
+    template: defaultTemplate,
+    created() {
+      this.$createObservableMethod("add").subscribe(function (param) {
+        expect(param).toEqual("hola");
+        done();
+      });
+    },
+  };
+
+  const wrapper = mount(component);
+
+  wrapper.componentVM.$nextTick(() => {
+    wrapper.componentVM.add("hola");
+  });
+});
+
+test("$createObservableMethod() with multi params & context", (done) => {
+  const { ob, next } = mock();
+  const results = [];
+  var wrapper = { e: "" };
+  const component = {
+    template: defaultTemplate,
+    created() {
+      this.$createObservableMethod("add", true).subscribe(function (param) {
+        expect(param[0]).toEqual("hola");
+        expect(param[1]).toEqual("mundo");
+        expect(param[2]).toEqual(wrapper.componentVM);
+        done();
+      });
+    },
+  };
+
+  wrapper = mount(component);
+
+  wrapper.componentVM.$nextTick(() => {
+    wrapper.componentVM.add("hola", "mundo");
+  });
+});
+
+test("observableMethods mixin", (done) => {
+  const { ob, next } = mock();
+  const results = [];
+  const component = {
+    template: defaultTemplate,
+    observableMethods: ["add"],
+    created() {
+      this.add$.subscribe(function (param) {
+        expect(param[0]).toEqual("Qué");
+        expect(param[1]).toEqual("tal");
+        done();
+      });
+    },
+  };
+
+  const wrapper = mount(component);
+
+  wrapper.componentVM.$nextTick(() => {
+    wrapper.componentVM.add("Qué", "tal");
+  });
+});
+
+test("observableMethods mixin", (done) => {
+  const { ob, next } = mock();
+  const results = [];
+  const component = {
+    template: defaultTemplate,
+    observableMethods: { add: "plus$" },
+    created() {
+      this.plus$.subscribe(function (param) {
+        expect(param[0]).toEqual("Qué");
+        expect(param[1]).toEqual("tal");
+        done();
+      });
+    },
+  };
+
+  const wrapper = mount(component);
+
+  wrapper.componentVM.$nextTick(() => {
+    wrapper.componentVM.add("Qué", "tal");
+  });
+});