https://github.com/johnlindquist/vue-streams
Simple Streams for Vue
https://github.com/johnlindquist/vue-streams
Last synced: over 1 year ago
JSON representation
Simple Streams for Vue
- Host: GitHub
- URL: https://github.com/johnlindquist/vue-streams
- Owner: johnlindquist
- Created: 2018-04-02T14:41:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-03T02:34:19.000Z (over 8 years ago)
- Last Synced: 2025-02-23T10:32:40.955Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 16.6 KB
- Stars: 14
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⛲️ vue-streams ⛲️
A simplified approach to using streams with Vue.
## Install
```bash
npm i vue-streams rxjs@rc
```
rxjs v6 is recommended (currently in Release Candidate)
## Setup
Install as a plugin:
```js
import VueStreams from "vue-streams"
import { Subject, BehaviorSubject } from "rxjs"
Vue.use(VueStreams, { Subject, BehaviorSubject })
```
## Usage
### Simple Example
[](https://codesandbox.io/s/yv37425lox)
```js
Click me
{{random$}}
import { fromMethod } from "vue-streams";
import { map } from "rxjs/operators";
export default {
sources: {
click$: fromMethod //infer the method name "click$" from the key
},
subscriptions: ({ click$ }) => ({
random$: click$.pipe(map(() => Math.random()))
}) //template subscribes to each key of the returned object
};
```
### Standard Example
[](https://codesandbox.io/s/ov6yk15w26)
```js
Search
Clear
{{message$}}
{{person.name}}
![]()
import { fromWatch } from "vue-streams"
import { merge } from "rxjs"
import {
switchMap,
map,
mapTo,
pluck,
partition,
debounceTime,
share
} from "rxjs/operators"
import { ajax } from "rxjs/ajax"
const URL = `https://foamy-closet.glitch.me`
export default {
data() {
return { URL, term: "sky" }
},
sources: {
term$: fromWatch("term")
},
subscriptions: ({ term$ }) => {
const [search$, empty$] = term$.pipe(
debounceTime(250),
partition(term => term.length)
)
const people$ = merge(
search$.pipe(
switchMap(term =>
ajax(`${URL}/people?name_like=${term}`).pipe(
share(),
pluck("response")
)
)
),
empty$.pipe(map(() => []))
)
const noResults$ = people$.pipe(map(result => result.length === 0))
const message$ = merge(
noResults$.pipe(mapTo("No results 😢")),
empty$.pipe(mapTo("Please type something 👍"))
)
return { people$, noResults$, message$ }
}
}
#demo {
font-family: "Avenir";
}
.people {
display: flex;
flex-wrap: wrap;
}
.people > * {
padding: 0.25rem;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
```
### Crazy Example
[](https://codesandbox.io/s/48jyk13nm7)
```js
{{x$}}
One
Two
Load Random
Toggle
hello
{{message$}}
import { merge, interval } from "rxjs"
import { ajax } from "rxjs/ajax"
import { map, mapTo, switchMap, pluck, throttleTime } from "rxjs/operators"
import { fromMethod, fromWatch, fromEmit } from "vue-streams"
const MiniComp = {
sources: {
mounted$: fromEmit("hook:mounted"),
beforeDestroy$: fromEmit("hook:beforeDestroy")
},
subscriptions: ({ mounted$, beforeDestroy$ }) => {
mounted$.subscribe(value => console.log("hello!"))
beforeDestroy$.subscribe(value => console.log("BYE! 🤪"))
},
render(h) {
return (
<div>
<h2>MiniComp</h2>
</div>
)
}
}
export default {
components: {
MiniComp
},
data() {
return {
show: false,
text: "john"
}
},
sources: {
one$: fromMethod,
two$: fromMethod("two"),
load$: fromMethod,
enter$: fromMethod,
text$: fromWatch("text"),
x: fromWatch
},
subscriptions: ({ one$, two$, load$, enter$, text$, x }) => {
const buttons$ = merge(
one$.pipe(mapTo(1)),
two$.pipe(mapTo(2)),
enter$.pipe(mapTo("fade in..."))
)
const date$ = interval(4000).pipe(map(() => new Date().toString()))
const person$ = load$.pipe(
switchMap(() =>
ajax(
`https://foamy-closet.glitch.me/people/${Math.floor(
Math.random() * 10
)}`
).pipe(pluck("response", "name"))
)
)
const message$ = merge(person$, text$, date$, buttons$)
return {
message$,
x$: x.pipe(throttleTime(100))
}
}
}
#demo {
font-family: "Avenir";
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
```
## Other Demos
### Basic Vue Counter with JSX
[](https://codesandbox.io/s/21zv0jqz40)
### Basic Form with `.prevent`
[](https://codesandbox.io/s/mjr6x6o888?module=%2Fsrc%2FApp.vue)