vue-rx - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

dist/vue-rx.js

@@ -83,2 +83,15 @@ (function (global, factory) {
 
+    var observableMethods = vm.$options.observableMethods;
+    if (observableMethods) {
+      if (Array.isArray(observableMethods)) {
+        observableMethods.forEach(function (methodName) {
+          vm[ methodName + '$' ] = vm.$createObservableMethod(methodName);
+        });
+      } else {
+        Object.keys(observableMethods).forEach(function (methodName) {
+          vm[observableMethods[methodName]] = vm.$createObservableMethod(methodName);
+        });
+      }
+    }
+
     var obs = vm.$options.subscriptions;
@@ -284,2 +297,57 @@ if (typeof obs === 'function') {
 
+/**
+ * @name Vue.prototype.$createObservableMethod
+ * @description Creates an observable from a given function name.
+ * @param {String} methodName Function name
+ * @param {Boolean} [passContext] Append the call context at the end of emit data?
+ * @return {Observable} Hot stream
+ */
+function createObservableMethod (methodName, passContext) {
+  if (!hasRx()) {
+    return
+  }
+  var vm = this;
+
+  if (!Rx$1.Observable.prototype.share) {
+    warn(
+      "No 'share' operator. " +
+      "$createObservableMethod returns a shared hot observable. " +
+      "Try import 'rxjs/add/operator/share' for creating " + methodName,
+      vm
+    );
+    return
+  }
+
+  if (vm[methodName] !== undefined) {
+    warn(
+      'Potential bug: ' +
+      "Method " + methodName + " already defined on vm and has been overwritten by $createObservableMethod." +
+      String(vm[methodName]),
+      vm
+    );
+  }
+
+  var creator = function (observer) {
+    vm[methodName] = function () {
+      var 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[methodName];
+    }
+  };
+
+  // Must be a hot stream otherwise function context may overwrite over and over again
+  return Rx$1.Observable.create(creator).share()
+}
+
 /* global Vue, Rx */
@@ -295,2 +363,3 @@
   Vue$$1.prototype.$eventToObservable = eventToObservable;
+  Vue$$1.prototype.$createObservableMethod = createObservableMethod;
 }
@@ -297,0 +366,0 @@

package.json

 {
   "name": "vue-rx",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "RxJS bindings for Vue",
@@ -39,2 +39,3 @@ "main": "dist/vue-rx.js",
     "jest": "^19.0.2",
+    "jest-cli": "^19.0.2",
     "rollup": "^0.41.6",
@@ -41,0 +42,0 @@ "rollup-plugin-buble": "^0.15.0",

README.md

 # vue-rx [![Build Status](https://circleci.com/gh/vuejs/vue-rx/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-rx/tree/master)
 
+English | [简体中文](README-CN.md)
+
 Simple [RxJS](https://github.com/Reactive-Extensions/RxJS) binding for Vue.js. It also supports subscriptions for generic observables that implement the `.subscribe` and `.unsubscribe` (or `.dispose`) interface. For example, you can use it to subscribe to `most.js` or Falcor streams, but some features require RxJS to work.
@@ -196,3 +198,3 @@
     this.$eventToObservable('customEvent')
-	  .subscribe((event) => console.log(event.name,event.msg))	
+	  .subscribe((event) => console.log(event.name,event.msg))
   }
@@ -204,3 +206,3 @@ })
   .take(1)
-  
+
 // Another way to auto unsub:
@@ -244,2 +246,42 @@ let beforeDestroy$ = this.$eventToObservable('hook:beforeDestroy').take(1)
 
+#### `$createObservableMethod(methodName)`
+
+> This feature requires RxJS.
+
+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
+var 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)
+
 ### Caveats
@@ -246,0 +288,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19953

increased by18.61%

Lines of code

329

increased by23.68%

Number of lines in readme file

295

increased by16.6%

Worsened metrics

Dev dependency count

10

increased by11.11%

No dependency changes