{"_id":"@azure06/vue-rx","_rev":"1-315f88fe3918c24473fa5f7e944748c5","name":"@azure06/vue-rx","dist-tags":{"latest":"6.2.0"},"versions":{"6.2.0":{"name":"@azure06/vue-rx","version":"6.2.0","private":false,"description":"RxJS bindings for Vue","main":"dist/vue-rx.js","module":"dist/vue-rx.esm.js","sideEffects":false,"typings":"types/index.d.ts","repository":{"type":"git","url":"git+https://github.com/azure06/vue-rx.git"},"keywords":["vue","rx","rxjs"],"author":{"name":"Evan You"},"license":"MIT","bugs":{"url":"https://github.com/vuejs/vue-rx/issues"},"homepage":"https://github.com/vuejs/vue-rx#readme","scripts":{"dev":"rollup -c rollup.config.js -w","build":"rollup -c rollup.config.js","lint":"eslint src test example","test":"npm run test:unit && npm run test:types","test:unit":"jest","test:types":"tsc -p types/test","dev:test":"jest --watch","prebuild":"npm run lint","pretest":"npm run build","prepublishOnly":"npm run build"},"devDependencies":{"buble":"^0.19.3","eslint":"^4.19.1","eslint-plugin-vue-libs":"^3.0.0","jest":"^23.1.0","rollup":"^0.59.4","rollup-plugin-alias":"^1.4.0","rollup-plugin-buble":"^0.19.2","rollup-watch":"^4.3.1","rxjs":"^7.4.0","typescript":"^4.5.2","vue":"^2.5.16"},"peerDependencies":{"rxjs":"^7.4.0"},"eslintConfig":{"root":true,"extends":["plugin:vue-libs/recommended"]},"gitHead":"529fd6497c9f54c1d52ce09ab689cb6470df1664","_id":"@azure06/vue-rx@6.2.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.3","dist":{"integrity":"sha512-AzdI4EsLphS9V5XdQvfPtt9kAdxFbE/sm+Ld36O9849WwUeIIfxdeEDaPVcqCyKXxq9s5SieABg9zLP+aKFKVQ==","shasum":"57da53f50b75ca60866d4c83ba3b25f3c60d0b66","tarball":"https://registry.npmjs.org/@azure06/vue-rx/-/vue-rx-6.2.0.tgz","fileCount":6,"unpackedSize":32165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlk8MCRA9TVsSAnZWagAAM44P/1lyCkf0xnG3VZZgaS6H\nPQxtfC/j/FMhOPoMMq8RwuWX/YiGSH2HBkWaMW0mQMXOluZ4Zfaj7HVHwvaP\nVGo6IJHhPBpwIs9+MJ4gfAmMBbVnwnuw0udVheWKJ8anVZaYhzEmgysvYwXi\nOnWC3Pe3Jqy1gsdXIMB7d6a6NTIG0wCuVZ573d8LKrOTFI4dnGKYy6lckTIQ\naB3DEJObjU1yqUlgUb0/T6fm9DbYHLO9+hrz4sgn2ZhQtT9N7hPhRDXk+wwT\nmajPwCaJebFi1oHTLL8zQ6iIB5UeenWX+JeSsU9MVZ8uKJWcPBRn/9FfSW3b\nsnbZYYaMrE8ydPn4xnKUE97x1HNuFf6E/8scFPFDnlbTW6dIF+2U12Mt+T8/\nNvVu/HXQCcemR6TRky1qiFem7vekdWYAKuFM+0OIcU3pP6Aoc4XwjwraxO5Q\nEcVVleriacituz2A7REcML58l+r+t5Y+f/tLSB+ilJpA26KK1IQvjgUOaTUt\n7Z2PqTCTADwd/Ik4n1UQljZkz7nOv4ExLq4y+uvTOQoT1WC2P4EPVp8cUCX+\nQfgZbKD6QZ83cW1iq5EswfyPfEPHM1FYMJOOyhml+Du3oeqh9HfcreQqUK4E\nq7C3OvzTrJLSlQh86d83owc5Dp/l8cSxl9KkweLEzRk0ITVcQdgi2xpRc3Jq\nHJAB\r\n=r5lg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6+ZI0Od9UZbPNxyQp698Keqv6G7OzmtP3J2bjEVbPxgIgSZmFXfIgmO1dLlFQw6FRO/z0INQDKDt7KhMBecszUJU="}]},"_npmUser":{"name":"azure06","email":"gabri06e@gmail.com"},"directories":{},"maintainers":[{"name":"azure06","email":"gabri06e@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-rx_6.2.0_1637240587972_0.05560435823784804"},"_hasShrinkwrap":false}},"time":{"created":"2021-11-18T13:03:07.918Z","6.2.0":"2021-11-18T13:03:08.162Z","modified":"2022-04-04T17:23:02.505Z"},"maintainers":[{"name":"azure06","email":"gabri06e@gmail.com"}],"description":"RxJS bindings for Vue","homepage":"https://github.com/vuejs/vue-rx#readme","keywords":["vue","rx","rxjs"],"repository":{"type":"git","url":"git+https://github.com/azure06/vue-rx.git"},"author":{"name":"Evan You"},"bugs":{"url":"https://github.com/vuejs/vue-rx/issues"},"license":"MIT","readme":"# vue-rx [](https://circleci.com/gh/vuejs/vue-rx/tree/master)\n\nEnglish | [简体中文](README-CN.md)\n\n[RxJS v6](https://github.com/ReactiveX/rxjs) integration for Vue.js.\n\n> **BREAKING CHANGES from 5.0**\n> - vue-rx v6 now only works with RxJS v6 by default. If you want to keep using RxJS v5 style code, install `rxjs-compat`.\n\n### Installation\n\n#### NPM + ES2015\n\n**`rxjs` is required as a peer dependency.**\n\n``` bash\nnpm install vue vue-rx rxjs --save\n```\n\n``` js\nimport Vue from 'vue'\nimport VueRx from 'vue-rx'\n\nVue.use(VueRx)\n```\n\nWhen bundling via webpack, `dist/vue-rx.esm.js` is used by default. It imports the minimal amount of Rx operators and ensures small bundle sizes.\n\n#### Global Script\n\nTo use in a browser environment, use the UMD build `dist/vue-rx.js`. When in a browser environment, the UMD build assumes `window.rxjs` to be already present, so make sure to include `vue-rx.js` after Vue.js and RxJS. It also installs itself automatically if `window.Vue` is present.\n\nExample:\n\n``` html\n\n\n\n```\n\n### Usage\n\n``` js\n// provide Rx observables with the `subscriptions` option\nnew Vue({\n el: '#app',\n subscriptions: {\n msg: messageObservable\n }\n})\n```\n\n``` html\n\n
{{ msg }}
\n```\n\nThe `subscriptions` options can also take a function so that you can return unique observables for each component instance:\n\n``` js\nimport { Observable } from 'rxjs'\n\nVue.component('foo', {\n subscriptions: function () {\n return {\n msg: new Observable(...)\n }\n }\n})\n```\n\nThe observables are exposed as `vm.$observables`:\n\n``` js\nconst vm = new Vue({\n subscriptions: {\n msg: messageObservable\n }\n})\n\nvm.$observables.msg.subscribe(msg => console.log(msg))\n```\n\n### `v-stream`: Streaming DOM Events\n\n`vue-rx` provides the `v-stream` directive which allows you to stream DOM events to an Rx Subject. The syntax is similar to `v-on` where the directive argument is the event name, and the binding value is the target Rx Subject.\n\n``` html\n\n```\n\nNote that you need to declare `plus$` as an instance of `rxjs.Subject` on the vm instance before the render happens, just like you need to declare data. You can do that right in the `subscriptions` function:\n\n``` js\nimport { Subject } from 'rxjs'\nimport { map, startWith, scan } from 'rxjs/operators'\n\nnew Vue({\n subscriptions () {\n // declare the receiving Subjects\n this.plus$ = new Subject()\n // ...then create subscriptions using the Subjects as source stream.\n // the source stream emits in the format of `{ event: HTMLEvent, data?: any }`\n return {\n count: this.plus$.pipe(\n map(() => 1),\n startWith(0),\n scan((total, change) => total + change)\n )\n }\n }\n})\n```\n\nOr, use the `domStreams` convenience option:\n\n``` js\nnew Vue({\n // requires `Rx` passed to Vue.use() to expose `Subject`\n domStreams: ['plus$'],\n subscriptions () {\n // use this.plus$\n }\n})\n```\n\nFinally, you can pass additional data to the stream using the alternative syntax:\n\n``` html\n\n```\n\nThis is useful when you need to pass along temporary variables like `v-for` iterators. You can get the data by simply plucking it from the source stream:\n\n``` js\nconst plusData$ = this.plus$.pipe(pluck('data'))\n```\n\nStarting in 3.1 you can also pass along extra options (passed along to native `addEventListener` as the 3rd argument):\n\n``` html\n\n```\n\nSee [example](https://github.com/vuejs/vue-rx/blob/master/example/counter.html) for actual usage.\n\n### `v-stream`: Streaming Custom Events from Child Components\n\nSimilar to streaming `DOM` events, `v-stream` can be used on components as well and will create observables from custom events emitted by the child component. It works similar to `v-on`:\n\n```html\n
\n \n \n\n \n \n
\n```\n\n### Other API Methods\n\n#### `$watchAsObservable(expOrFn, [options])`\n\nThis is a prototype method added to instances. You can use it to create an observable from a value watcher. The emitted value is in the format of `{ newValue, oldValue }`:\n\n``` js\nimport { pluck, map } from 'rxjs/operators'\n\nconst vm = new Vue({\n data: {\n a: 1\n },\n subscriptions () {\n // declaratively map to another property with Rx operators\n return {\n aPlusOne: this.$watchAsObservable('a').pipe(\n pluck('newValue'),\n map(a => a + 1)\n )\n }\n }\n})\n\n// or produce side effects...\nvm.$watchAsObservable('a')\n .subscribe(\n ({ newValue, oldValue }) => console.log('stream value', newValue, oldValue),\n err => console.error(err),\n () => console.log('complete')\n )\n```\n\nThe optional `options` object accepts the same options as `vm.$watch`.\n\n#### `$eventToObservable(event)`\n\nConvert vue.$on (including lifecycle events) to Observables. The emitted value is in the format of `{ name, msg }`:\n\n``` js\nimport { interval } from 'rxjs'\nimport { take, takeUntil } from 'rxjs/operators'\n\nconst vm = new Vue({\n created () {\n this.$eventToObservable('customEvent')\n\t .subscribe((event) => console.log(event.name,event.msg))\n }\n})\n\n// vm.$once vue-rx version\nthis.$eventToObservable('customEvent').pipe(\n take(1)\n)\n\n// Another way to auto unsub:\nlet beforeDestroy$ = this.$eventToObservable('hook:beforeDestroy').pipe(take(1))\n\ninterval(500)\n .pipe(takeUntil(beforeDestroy$))\n```\n\n#### `$subscribeTo(observable, next, error, complete)`\n\nThis is a prototype method added to instances. You can use it to subscribe to an observable, but let VueRx manage the dispose/unsubscribe.\n\n``` js\nimport { interval } from 'rxjs'\n\nconst vm = new Vue({\n mounted () {\n this.$subscribeTo(interval(1000), function (count) {\n console.log(count)\n })\n }\n})\n```\n\n#### `$fromDOMEvent(selector, event)`\n\nThis is a prototype method added to instances. Use it to create an observable from DOM events within the instances' element. This is similar to `Rx.Observable.fromEvent`, but usable inside the `subscriptions` function even before the DOM is actually rendered.\n\n`selector` is for finding descendant nodes under the component root element, if you want to listen to events from root element itself, pass `null` as first argument.\n\n``` js\nimport { pluck } from 'rxjs/operators'\n\nconst vm = new Vue({\n subscriptions () {\n return {\n inputValue: this.$fromDOMEvent('input', 'keyup').pipe(\n pluck('target', 'value')\n )\n }\n }\n})\n```\n\n#### `$createObservableMethod(methodName)`\n\nConvert function calls to observable sequence which emits the call arguments.\n\nThis 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.\n\n```html\n\n```\n``` js\nconst vm = new Vue({\n subscriptions () {\n return {\n // requires `share` operator\n formData: this.$createObservableMethod('submitHandler')\n }\n }\n})\n```\n\nYou can use the `observableMethods` option to make it more declarative:\n\n``` js\nnew Vue({\n observableMethods: {\n submitHandler: 'submitHandler$'\n // or with Array shothand: ['submitHandler']\n }\n})\n```\n\nThe above will automatically create two things on the instance:\n\n1. A `submitHandler` method which can be bound to in template with `v-on`;\n2. A `submitHandler$` observable which will be the stream emitting calls to `submitHandler`.\n\n[example](https://github.com/vuejs/vue-rx/blob/master/example/counter-function.html)\n\n### Caveats\n\nYou cannot use the `watch` option to watch subscriptions, because it is processed before the subscriptions are set up. But you can use `$watch` in the `created` hook instead.\n\n### Example\n\nSee `/examples` for some simple examples.\n\n### License\n\n[MIT](http://opensource.org/licenses/MIT)\n","readmeFilename":"README.md"}