├── .npmignore ├── .gitignore ├── .babelrc ├── src ├── index.js ├── mixin.js └── OverVue.js ├── test └── overVueTest.js ├── package.json └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | .idea/ 3 | node_modules/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | .idea/ -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest"] 4 | ] 5 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Overvue, { Store } from './OverVue'; 2 | 3 | module.exports = { Overvue, Store }; 4 | -------------------------------------------------------------------------------- /src/mixin.js: -------------------------------------------------------------------------------- 1 | export default function (Vue) { 2 | const usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1; 3 | Vue.mixin(usesInit ? { init: overVueInit } : { beforeCreate: overVueInit }); 4 | 5 | // overVue init hook, injected into each instances' init hooks list. 6 | function overVueInit() { 7 | const options = this.$options; 8 | 9 | // store injection 10 | if (options.store) { 11 | this.$store = options.store; 12 | } else if (options.parent && options.parent.$store) { 13 | this.$store = options.parent.$store; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /test/overVueTest.js: -------------------------------------------------------------------------------- 1 | import test from 'tape'; 2 | import Rx from 'rxjs/Rx'; 3 | import { Store } from '../src/OverVue'; 4 | 5 | const motherstream = new Store({ state: { initial: 'state' } }); 6 | test('motherstream is a BehaviorSubject', (t) => { 7 | t.plan(1); 8 | t.ok(motherstream.motherStream$ instanceof Rx.BehaviorSubject); 9 | }); 10 | 11 | test('actions are converted to Observables', (t) => { 12 | t.plan(1); 13 | const streamTest = motherstream.createStateStream({ state: 'test' }); 14 | t.ok(streamTest instanceof Rx.Observable); 15 | }); 16 | 17 | test('motherstream has a state object', (t) => { 18 | t.plan(1); 19 | t.ok(typeof motherstream.state === 'object'); 20 | }); 21 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "overvue-rx", 3 | "version": "1.0.12", 4 | "description": "A library providing Vue applications with 'asynchronous-first' state management", 5 | "author": "mKondoJS", 6 | "main": "build/index.js", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/mKondoJS/OverVue" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/mKondoJS/OverVue/issues" 14 | }, 15 | "homepage": "https://github.com/mKondoJS/OverVue#readme", 16 | "keywords": [ 17 | "overvue", 18 | "state management", 19 | "observable", 20 | "rx", 21 | "rxjs", 22 | "vue", 23 | "vuex" 24 | ], 25 | "scripts": { 26 | "build": "babel src -d build", 27 | "test": "babel-tape-runner test/overVueTest.js", 28 | "prepublish": "npm run build" 29 | }, 30 | "dependencies": { 31 | "rxjs": "^5.2.0", 32 | "rxjs-es": "^5.0.0-beta.12" 33 | }, 34 | "devDependencies": { 35 | "babel-core": "^6.22.1", 36 | "babel-loader": "^6.2.10", 37 | "babel-preset-es2015": "^6.22.0", 38 | "babel-preset-latest": "^6.0.0", 39 | "babel-preset-stage-2": "^6.22.0", 40 | "babel-register": "^6.24.0", 41 | "babel-tape-runner": "^2.0.1", 42 | "tape": "^4.6.3", 43 | "webpack": "^2.3.2" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/OverVue.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs/Rx'; 2 | import { Observable } from 'rxjs/Observable'; 3 | import applyMixin from './mixin'; 4 | 5 | const isObservable = obs => obs instanceof Observable; 6 | 7 | export class Store { 8 | constructor(initialState = {}) { 9 | // initial state is overridden if we have session data in order to allow for page refreshes 10 | this.state = this.hasSessionData() ? this.getSessionData() : initialState.state; 11 | // set up the motherStream, which will host all new action events 12 | this.motherStream$ = new Rx.BehaviorSubject(); 13 | } 14 | 15 | // create the motherStream, passing in mutators and state 16 | createStateStream(mutate, state = this.state) { 17 | return this.motherStream$ 18 | .flatMap(action => isObservable(action) ? action : Observable.from([action])) 19 | .startWith(state) 20 | .scan((state, action) => { 21 | if (action) { 22 | mutate(this.state, action); 23 | this.setSessionData(this.state); 24 | } 25 | }); 26 | } 27 | 28 | // each action will be dispatched as a new event on the motherStream 29 | dispatchAction(func) { 30 | return function (...args) { 31 | const action = func.call(null, ...args); 32 | this.motherStream$.next(action); 33 | if (isObservable(action.payload)) { 34 | this.motherStream$.next(action.payload); 35 | } 36 | return action; 37 | }.bind(this); 38 | } 39 | 40 | // session storage methods 41 | setSessionData(state) { 42 | sessionStorage.setItem('overVue', JSON.stringify(state)); 43 | } 44 | 45 | getSessionData() { 46 | return JSON.parse(sessionStorage.getItem('overVue')); 47 | } 48 | 49 | hasSessionData() { 50 | return sessionStorage.getItem('overVue'); 51 | } 52 | 53 | } 54 | 55 | // install is necessary to integrate with Vue 56 | // This will be called from within Vue.use 57 | export default function install(_Vue) { 58 | applyMixin(_Vue); 59 | } 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OverVue 2 | #### OverVue is a stream-based persistent state management library for Vue built on RxJS observables. 3 | 4 | While Vuex provides a robust option for handling state in Vue applications, persistence requires 5 | third-party plugin support. The OverVue state management library includes persisted state out of the box. 6 | 7 | OverVue leverages an RxJS Observable stream to manage synchronous and asynchronous updates to state and easily integrates 8 | with Vue applications. With OverVue, all actions are emitted to our single source of truth, the motherstream, along with any Observables contained therein. This allows users to easily assimilate Observables into their Vue applications while maintaining the Flux-based architecture most conducive to Vue. 9 | 10 | ### Disclaimer 11 | 12 | OverVue is in the early stages of development. We welcome any constructive feedback and encourage users to open issues 13 | or submit pull requests in order to contribute to the ongoing evolution of OverVue. 14 | 15 | ### Getting Started 16 | 17 | ``` 18 | npm install --save overvue-rx 19 | ``` 20 | 21 | ### Create a central store 22 | 23 | Creating your store is a simple two-step process with OverVue: 24 | 25 | In your store file, import OverVue and connect it using the Vue.use() global method. 26 | 27 | ``` 28 | import Vue from 'vue'; 29 | import { Overvue, Store } from 'overvue-rx'; 30 | 31 | Vue.use(Overvue); 32 | ``` 33 | Next, in the file containing your root Vue instantiation, pass your mutate methods into createStateStream and subscribe to the store. Be sure to import the relevant files and set the store as a property in your root Vue instantiation. This makes the store accessible in all components. 34 | 35 | ``` 36 | import store from './store'; 37 | import mutate from './mutate'; 38 | 39 | store.createStateStream(mutate).subscribe(); 40 | 41 | const app = new Vue({ 42 | el: '#App', 43 | store, 44 | router, 45 | render: h => h(Container), 46 | }); 47 | ``` 48 | ### Dispatch actions 49 | 50 | All dispatched actions will be emitted and mapped into OverVue's motherstream. Users simply call the *dispatchAction* method from the store and pass in a callback function, which will return an object containing type and payload to be used as state update instructions to the user-defined mutators. The following is a simple example of how to declare an action in OverVue: 51 | 52 | ``` 53 | export const commitUsername = store.dispatchAction(payload => ({ 54 | type: 'SET_USERNAME', 55 | payload, 56 | })); 57 | ``` 58 | In this example, commitUsername can be easily imported into any file requiring it and utilized in the same way one would use actions in any Flux-based state management library. 59 | 60 | ### Commit mutations 61 | 62 | As in other Flux-based state management libraries, state is never directly effected by dispatched actions. Rather, actions commit mutators which mutate state and save the new state object in session storage, allowing it to persist through page reloads. This allows actions to perform complex asynchronous tasks without the risk of state being inappropriately changed. 63 | 64 | This is an example of how a committed mutate method will handle a dispatched action: 65 | ``` 66 | export default function mutate(state, action) { 67 | switch (action.type) { 68 | case 'SET_USERNAME': 69 | state.username = action.payload.username; 70 | return state; 71 | }; 72 | ``` 73 | And that's it! 74 | --------------------------------------------------------------------------------