├── tsconfig.json
├── package.json
├── .gitignore
├── src
    └── index.ts
└── README.md


/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "commonjs",
 4 |     "target": "es5",
 5 |     "lib": ["dom", "es2016"],
 6 |     "outDir": "./dist",
 7 |     "moduleResolution": "node",
 8 |     "preserveConstEnums": true
 9 |   },
10 |   "include": ["./src"]
11 | }
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-streams",
 3 |   "version": "1.0.0-beta.5",
 4 |   "description": "Streams for Vue",
 5 |   "main": "dist/index.js",
 6 |   "files": ["dist"],
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "git+https://github.com/johnlindquist/vue-streams.git"
10 |   },
11 |   "keywords": ["vue", "streams", "rx", "rxjs"],
12 |   "author": "John Lindquist",
13 |   "license": "MIT",
14 |   "bugs": {
15 |     "url": "https://github.com/johnlindquist/vue-streams/issues"
16 |   },
17 |   "homepage": "https://github.com/johnlindquist/vue-streams#readme",
18 |   "scripts": {
19 |     "dev": "tsc -w",
20 |     "build": "tsc"
21 |   },
22 |   "devDependencies": {
23 |     "rxjs": "^6.0.0-rc.0",
24 |     "rxjs-compat": "^6.0.0-rc.0",
25 |     "typescript": "^2.8.1",
26 |     "vue": "^2.5.16"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 
63 | dist/


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | export enum Source {
  2 |   fromMethod,
  3 |   fromEmit,
  4 |   fromWatch
  5 | }
  6 | 
  7 | export const fromMethod = name => {
  8 |   const config = {
  9 |     type: Source.fromMethod,
 10 |     name
 11 |   }
 12 | 
 13 |   return name ? () => config : config
 14 | }
 15 | 
 16 | export const fromWatch = name => {
 17 |   const config = {
 18 |     type: Source.fromWatch,
 19 |     name
 20 |   }
 21 | 
 22 |   return name ? () => config : config
 23 | }
 24 | 
 25 | export const fromEmit = name => {
 26 |   const config = {
 27 |     type: Source.fromEmit,
 28 |     name
 29 |   }
 30 | 
 31 |   return name ? () => config : config
 32 | }
 33 | 
 34 | function VueStreams(Vue, { Subject, BehaviorSubject }) {
 35 |   Vue.mixin({
 36 |     created() {
 37 |       const vm = this
 38 |       vm._streamKeysToDelete = []
 39 |       vm._streamKeysToUnwatch = []
 40 |       vm._streamKeysToOff = []
 41 | 
 42 |       const sourcesConfig = {}
 43 |       const { sources = {}, subscriptions } = vm.$options as any
 44 |       if (sources) {
 45 |         Object.keys(sources).forEach(sourceName => {
 46 |           if (typeof sources[sourceName] === "function") {
 47 |             const { type, name = sourceName } = sources[sourceName]()
 48 |             switch (type) {
 49 |               case Source.fromMethod:
 50 |                 const methodSubject = (sourcesConfig[
 51 |                   sourceName
 52 |                 ] = new Subject())
 53 | 
 54 |                 vm._streamKeysToDelete.push(name)
 55 |                 vm[name] = methodSubject.next.bind(methodSubject)
 56 |                 break
 57 |               case Source.fromWatch:
 58 |                 if (!vm[name]) {
 59 |                   vm._streamKeysToDelete.push(name)
 60 |                   ;(Vue as any).util.defineReactive(vm, name, undefined)
 61 |                 }
 62 |                 const watchSubject = (sourcesConfig[
 63 |                   sourceName
 64 |                 ] = new BehaviorSubject(vm[name]))
 65 |                 vm._streamKeysToUnwatch.push(
 66 |                   vm.$watch(name, watchSubject.next.bind(watchSubject))
 67 |                 )
 68 |                 break
 69 |               case Source.fromEmit:
 70 |                 const emitSubject = (sourcesConfig[sourceName] = new Subject())
 71 |                 vm._streamKeysToDelete.push(name)
 72 |                 vm.$on(name, emitSubject.next.bind(emitSubject))
 73 |                 vm._streamKeysToOff.push(name)
 74 |                 break
 75 |             }
 76 |           }
 77 |         })
 78 |       }
 79 | 
 80 |       if (subscriptions) {
 81 |         const subs = subscriptions(sourcesConfig) || {}
 82 |         vm._subscriptions = Object.keys(subs).map(key => {
 83 |           ;(Vue as any).util.defineReactive(vm, key, undefined)
 84 | 
 85 |           return subs[key].subscribe(value => {
 86 |             vm[key] = value
 87 |           })
 88 |         })
 89 |       }
 90 |     },
 91 |     destroy() {
 92 |       const vm = this
 93 |       const { _subscriptions } = vm
 94 |       if (_subscriptions) {
 95 |         _subscriptions.forEach(sub => sub.unsubscribe())
 96 |       }
 97 | 
 98 |       vm._streamKeysToDelete.forEach(key => delete vm[key])
 99 |       vm._streamKeysToUnwatch.forEach(unwatch => unwatch())
100 |       vm._streamKeysToOff.forEach(event => vm.$off(event))
101 |     }
102 |   })
103 | }
104 | 
105 | export default VueStreams
106 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ⛲️ vue-streams ⛲️
  2 | 
  3 | A simplified approach to using streams with Vue.
  4 | 
  5 | ## Install
  6 | 
  7 | ```bash
  8 | npm i vue-streams rxjs@rc
  9 | ```
 10 | 
 11 | rxjs v6 is recommended (currently in Release Candidate)
 12 | 
 13 | ## Setup
 14 | 
 15 | Install as a plugin:
 16 | 
 17 | ```js
 18 | import VueStreams from "vue-streams"
 19 | import { Subject, BehaviorSubject } from "rxjs"
 20 | Vue.use(VueStreams, { Subject, BehaviorSubject })
 21 | ```
 22 | 
 23 | ## Usage
 24 | 
 25 | ### Simple Example
 26 | 
 27 | [![Simple Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yv37425lox)
 28 | 
 29 | ```js
 30 | <template>
 31 |   <div>
 32 |     <button @click="click$">Click me</button>
 33 |     {{random$}}
 34 |   </div>
 35 | </template>
 36 | <script>
 37 | import { fromMethod } from "vue-streams";
 38 | import { map } from "rxjs/operators";
 39 | 
 40 | export default {
 41 |   sources: {
 42 |     click$: fromMethod //infer the method name "click$" from the key
 43 |   },
 44 |   subscriptions: ({ click$ }) => ({
 45 |     random$: click$.pipe(map(() => Math.random()))
 46 |   }) //template subscribes to each key of the returned object
 47 | };
 48 | </script>
 49 | ```
 50 | 
 51 | ### Standard Example
 52 | 
 53 | [![Standard Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov6yk15w26)
 54 | 
 55 | ```js
 56 | <template>
 57 |   <div id="demo">
 58 |     <label>Search <input type="text" v-model="term"></label>
 59 |     <button @click="term = ''">Clear</button>
 60 |     <h2 v-if="noResults$">
 61 |       {{message$}}
 62 |     </h2>
 63 |     <transition-group tag="div" name="fade" class="people">
 64 |       <div v-for="person of people$" :key="person.id">
 65 |         <h2>{{person.name}}</h2>
 66 |         <img :src="`${URL}/${person.image}`" alt="">
 67 |       </div>
 68 | 
 69 |     </transition-group>
 70 | 
 71 |   </div>
 72 | </template>
 73 | <script>
 74 | import { fromWatch } from "vue-streams"
 75 | import { merge } from "rxjs"
 76 | import {
 77 |   switchMap,
 78 |   map,
 79 |   mapTo,
 80 |   pluck,
 81 |   partition,
 82 |   debounceTime,
 83 |   share
 84 | } from "rxjs/operators"
 85 | import { ajax } from "rxjs/ajax"
 86 | 
 87 | const URL = `https://foamy-closet.glitch.me`
 88 | 
 89 | export default {
 90 |   data() {
 91 |     return { URL, term: "sky" }
 92 |   },
 93 |   sources: {
 94 |     term$: fromWatch("term")
 95 |   },
 96 |   subscriptions: ({ term$ }) => {
 97 |     const [search$, empty$] = term$.pipe(
 98 |       debounceTime(250),
 99 |       partition(term => term.length)
100 |     )
101 | 
102 |     const people$ = merge(
103 |       search$.pipe(
104 |         switchMap(term =>
105 |           ajax(`${URL}/people?name_like=${term}`).pipe(
106 |             share(),
107 |             pluck("response")
108 |           )
109 |         )
110 |       ),
111 |       empty$.pipe(map(() => []))
112 |     )
113 | 
114 |     const noResults$ = people$.pipe(map(result => result.length === 0))
115 |     const message$ = merge(
116 |       noResults$.pipe(mapTo("No results 😢")),
117 |       empty$.pipe(mapTo("Please type something 👍"))
118 |     )
119 | 
120 |     return { people$, noResults$, message$ }
121 |   }
122 | }
123 | </script>
124 | <style>
125 | #demo {
126 |   font-family: "Avenir";
127 | }
128 | .people {
129 |   display: flex;
130 |   flex-wrap: wrap;
131 | }
132 | 
133 | .people > * {
134 |   padding: 0.25rem;
135 | }
136 | .fade-enter-active,
137 | .fade-leave-active {
138 |   transition: opacity 0.5s;
139 | }
140 | .fade-enter,
141 | .fade-leave-to {
142 |   opacity: 0;
143 | }
144 | </style>
145 | ```
146 | 
147 | ### Crazy Example
148 | 
149 | [![Crazy Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/48jyk13nm7)
150 | 
151 | ```js
152 | <template>
153 |   <div id="demo" @mousemove="x = $event.x">
154 |     <h3>{{x$}}</h3>
155 |     <button @click="one$">One</button>
156 |     <button @click="two">Two</button>
157 |     <button @click="load$">Load Random</button>
158 |     <input type="text" v-model="text">
159 |     <button v-on:click="show = !show">
160 |       Toggle
161 |     </button>
162 |     <transition name="fade" @enter="enter$">
163 |       <p v-if="show">hello</p>
164 |     </transition>
165 |     <h2>
166 |       {{message$}}
167 |     </h2>
168 |     <MiniComp v-if="show"></MiniComp>
169 |   </div>
170 | </template>
171 | <script>
172 | import { merge, interval } from "rxjs"
173 | import { ajax } from "rxjs/ajax"
174 | import { map, mapTo, switchMap, pluck, throttleTime } from "rxjs/operators"
175 | import { fromMethod, fromWatch, fromEmit } from "vue-streams"
176 | 
177 | const MiniComp = {
178 |   sources: {
179 |     mounted$: fromEmit("hook:mounted"),
180 |     beforeDestroy$: fromEmit("hook:beforeDestroy")
181 |   },
182 |   subscriptions: ({ mounted$, beforeDestroy$ }) => {
183 |     mounted$.subscribe(value => console.log("hello!"))
184 |     beforeDestroy$.subscribe(value => console.log("BYE! 🤪"))
185 |   },
186 |   render(h) {
187 |     return (
188 |       <div>
189 |         <h2>MiniComp</h2>
190 |       </div>
191 |     )
192 |   }
193 | }
194 | 
195 | export default {
196 |   components: {
197 |     MiniComp
198 |   },
199 |   data() {
200 |     return {
201 |       show: false,
202 |       text: "john"
203 |     }
204 |   },
205 |   sources: {
206 |     one$: fromMethod,
207 |     two$: fromMethod("two"),
208 |     load$: fromMethod,
209 |     enter$: fromMethod,
210 |     text$: fromWatch("text"),
211 |     x: fromWatch
212 |   },
213 | 
214 |   subscriptions: ({ one$, two$, load$, enter$, text$, x }) => {
215 |     const buttons$ = merge(
216 |       one$.pipe(mapTo(1)),
217 |       two$.pipe(mapTo(2)),
218 |       enter$.pipe(mapTo("fade in..."))
219 |     )
220 |     const date$ = interval(4000).pipe(map(() => new Date().toString()))
221 |     const person$ = load$.pipe(
222 |       switchMap(() =>
223 |         ajax(
224 |           `https://foamy-closet.glitch.me/people/${Math.floor(
225 |             Math.random() * 10
226 |           )}`
227 |         ).pipe(pluck("response", "name"))
228 |       )
229 |     )
230 | 
231 |     const message$ = merge(person$, text$, date$, buttons$)
232 | 
233 |     return {
234 |       message$,
235 |       x$: x.pipe(throttleTime(100))
236 |     }
237 |   }
238 | }
239 | </script>
240 | <style>
241 | #demo {
242 |   font-family: "Avenir";
243 | }
244 | .fade-enter-active,
245 | .fade-leave-active {
246 |   transition: opacity 0.5s;
247 | }
248 | .fade-enter,
249 | .fade-leave-to {
250 |   opacity: 0;
251 | }
252 | </style>
253 | ```
254 | 
255 | ## Other Demos
256 | 
257 | ### Basic Vue Counter with JSX
258 | 
259 | [![Basic Vue Counter](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/21zv0jqz40)
260 | 
261 | ### Basic Form with `.prevent`
262 | 
263 | [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mjr6x6o888?module=%2Fsrc%2FApp.vue)
264 | 


--------------------------------------------------------------------------------