Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NOPR9D/vue-next-rx
RxJS integration for Vue next
https://github.com/NOPR9D/vue-next-rx
composition-api rxjs rxjs7 vue vue-hooks vue-next vue-next-rx vue-plugin vue-plugins vue-rx vue-rxjs vue3 vuejs
Last synced: about 2 months ago
JSON representation
RxJS integration for Vue next
- Host: GitHub
- URL: https://github.com/NOPR9D/vue-next-rx
- Owner: mylabz-xyz
- License: mit
- Archived: true
- Created: 2020-12-12T11:10:36.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-16T12:45:49.000Z (about 2 years ago)
- Last Synced: 2024-07-29T05:39:00.139Z (about 2 months ago)
- Topics: composition-api, rxjs, rxjs7, vue, vue-hooks, vue-next, vue-next-rx, vue-plugin, vue-plugins, vue-rx, vue-rxjs, vue3, vuejs
- Language: JavaScript
- Homepage:
- Size: 626 KB
- Stars: 32
- Watchers: 2
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE-OF-CONDUCT.md
Awesome Lists containing this project
README
# vue-next-rx
### [RxJS v7](https://github.com/ReactiveX/rxjs) integration for [Vue next]()
> **NOTE**
>
> - vue-next-rx only works with RxJS v6+ by default. If you want to keep using RxJS v5 style code, install `rxjs-compat`.
---
# Installation
#### NPM + ES2015 or more
**`rxjs` is required as a peer dependency.**
```bash
npm install vue @nopr3d/vue-next-rx rxjs --save
```
```js
import Vue from "vue";
import VueNextRx from "@nopr3d/vue-next-rx";
Vue.use(VueNextRx);
```
When bundling via webpack, `dist/vue-next-rx.esm.js` is used by default. It imports the minimal amount of Rx operators and ensures small bundle sizes.
To use in a browser environment, use the UMD build `dist/vue-next-rx.js`. When in a browser environment, the UMD build assumes `window.rxjs` to be already present, so make sure to include `vue-next-rx.js` after Vue.js and RxJS. It also installs itself automatically if `window.Vue` is present.
Example:
```html
Click Me
const { Subject, Observable, BehaviorSubject } = rxjs;
const { map, startWith, scan } = rxjs.operators;
const { ref, watch } = VueNextRx; // Use VueNextRx
const app = Vue.createApp({
domStreams: ["click$"],
subscriptions() {
this.click$.pipe(map(() => "Click Event")).subscribe(console.log); // On click will print "Click Event"
},
}).use(VueNextRx);
app.mount("#app");
```
---
# Usage
# Subscriptions
```js
// Expose `Subject` with domStream, use them in subscriptions functions
export default defineComponent({
name: "Home",
domStreams: ["click$"],
subscriptions() {
return {
count: this.click$.pipe(
map(() => 1),
startWith(0),
scan((total, change) => total + change)
),
};
});
```
```html
Click Me
{{count}}
```
### Or
```js
// Expose `Subject` with domStream, use them in subscriptions functions
export default defineComponent({
name: "Home",
domStreams: ["action$"],
subscriptions() {
this.action$.pipe(map(() => "Click Event !")).subscribe(console.log);
// On click will print "Click Event"
},
});
```
## Tips
You can get the data by simply plucking it from the source stream:
```js
const actionData$ = this.action$.pipe(pluck("data"));
```
You can bind Subject by this way
```html // Bind with stream directives
Click Me!
or
+
```
---
# Ref
```js
import { ref } from "@nopr3d/vue-next-rx";
// use ref like an Rx Subject
export default defineComponent({
name: "Home",
components: {},
setup() {
const msg = ref("Message exemple");
setTimeout(() => {
msg.value = "New message !";
}, 2000);
msg.subscribe((value) => {
console.log(value); // After 2s will print : New message !
});
return { msg };
},
});
```
```html
{{ msg }}
```
---
# Watch
```js
import { ref, watch } from "@nopr3d/vue-next-rx";
export default defineComponent({
name: "Home",
components: {},
setup() {
const msg = ref("Message exemple");
watch(msg).subscribe((val) => {
console.log(val); // After 2s will print : New message !
});
setTimeout(() => {
msg.value = "New message !";
}, 2000);
return { msg };
},
});
```
```html
{{ msg }}
```
---
# Other API Methods
## `$watchAsObservable(expOrFn, [options])`
This is a prototype method added to instances. You can use it to create an observable from a Data. The emitted value is in the format of `{ newValue, oldValue }`:
```js
import { ref } from "@nopr3d/vue-next-rx";
export default defineComponent({
name: "Home",
setup() {
const msg = ref("Old Message");
setTimeout(() => (msg.value = "New message incomming !"), 1000);
return { msg };
},
subscriptions() {
return {
oldMsg: this.$watchAsObservable("msg").pipe(pluck("oldValue")),
};
},
});
```
```html
{{ msg }}
{{oldMsg}}
```
---
## `$subscribeTo(observable, next, error, complete)`
This is a prototype method added to instances. You can use it to subscribe to an observable, but let VueNextRx manage the dispose/unsubscribe.
```js
import { interval } from "rxjs";
const vm = new Vue({
mounted() {
this.$subscribeTo(interval(1000), function (count) {
console.log(count);
});
},
});
```
## `$fromDOMEvent(selector, event)`
This 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.
`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.
```js
import { pluck } from "rxjs/operators";
const vm = new Vue({
subscriptions() {
return {
inputValue: this.$fromDOMEvent("input", "keyup").pipe(
pluck("target", "value")
),
};
},
});
```
```html
{{inputValue}}
```
---
## `$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
```
```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/NOPR9D/vue-next-rx/blob/main/example/createObservableMethod.html)
---
## Example
See `/examples` for some simple examples.
---
## Test
Test look goods, feel free to open an issue !
---
### Contributors
---
## License
[MIT](http://opensource.org/licenses/MIT)
---
