├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── README.md
├── demo.sh
├── examples
    └── todomvc
    │   ├── .babelrc
    │   ├── .gitignore
    │   ├── README.md
    │   ├── actions
    │       └── TodoActions.js
    │   ├── components
    │       ├── Footer.js
    │       ├── Header.js
    │       ├── MainSection.js
    │       ├── TodoItem.js
    │       └── TodoTextInput.js
    │   ├── constants
    │       ├── ActionTypes.js
    │       ├── TodoFilters.js
    │       └── WireActions.js
    │   ├── containers
    │       ├── JsonApp.js
    │       └── TodoApp.js
    │   ├── dist
    │       └── bundle.js
    │   ├── index.html
    │   ├── index.js
    │   ├── package.json
    │   ├── reducers
    │       ├── index.js
    │       └── todos.js
    │   ├── server.js
    │   └── webpack.config.js
├── index.html
├── package.json
└── src
    ├── createSubscribeOnStateStore.js
    ├── dataListenener.js
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "stage": 0,
3 |   "loose": "all"
4 | }
5 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | lib
2 | **/node_modules
3 | **/webpack.config.js
4 | examples/**/server.js
5 | examples


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "eslint-config-airbnb",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "mocha": true,
 6 |     "node": true
 7 |   },
 8 |   "rules": {
 9 |     "react/jsx-uses-react": 2,
10 |     "react/jsx-uses-vars": 2,
11 |     "react/react-in-jsx-scope": 2,
12 |     "no-console": 0,
13 |     // Temporarily disabled due to babel-eslint issues:
14 |     "block-scoped-var": 0,
15 |     "padded-blocks": 0,
16 |   },
17 |   "plugins": [
18 |     "react"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .DS_Store
4 | lib
5 | coverage
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | src
4 | test
5 | examples
6 | coverage
7 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "iojs"
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #[DEMO](http://lapanoid.github.io/redux-remote)
 2 | 
 3 | Most importantly that I am not resend all actions but listen store updates and send it to another redux instance which updates itself. 
 4 | 
 5 | Some diff algorithm can be implemented on top of it.
 6 | 
 7 | It can be used in webworkers or on servers to relieve client from costly computations.
 8 | 
 9 | Syncing can be used for realtime collaboration apps.
10 | 
11 | # TODO
12 | - [x] move to Redux 1.0 RC
13 | - [ ] extract code from example to src
14 | - [ ] publish npm 
15 | - [ ] add doc
16 | - [ ] add demo build script
17 | 


--------------------------------------------------------------------------------
/demo.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | set -o errexit # Exit on error
 4 | 
 5 | git stash save
 6 | git checkout gh-pages
 7 | git pull --rebase origin master
 8 | cd examples/todomvc
 9 | webpack
10 | git add .
11 | if git commit -m 'rebuild todomvc bundle for demo'; then # Commit the changes, if any
12 |   echo 'Changes Committed'
13 | if git push --force; then # Commit the changes, if any
14 |   echo 'Pushed succecfully'
15 | fi
16 | fi
17 | git checkout master
18 | git stash apply


--------------------------------------------------------------------------------
/examples/todomvc/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "stage": 0
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/todomvc/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/examples/todomvc/README.md:
--------------------------------------------------------------------------------
1 | # Redux DevTools TodoMVC example
2 | 
3 | ## Getting Started
4 | 
5 | 1. Install dependencies: `npm i`
6 | 2. Start the development server: `npm start`
7 | 


--------------------------------------------------------------------------------
/examples/todomvc/actions/TodoActions.js:
--------------------------------------------------------------------------------
 1 | import * as types from '../constants/ActionTypes';
 2 | 
 3 | export function addTodo(text) {
 4 |   return {
 5 |     type: types.ADD_TODO,
 6 |     text
 7 |   };
 8 | }
 9 | 
10 | export function deleteTodo(id) {
11 |   return {
12 |     type: types.DELETE_TODO,
13 |     id
14 |   };
15 | }
16 | 
17 | export function editTodo(id, text) {
18 |   return {
19 |     type: types.EDIT_TODO,
20 |     id,
21 |     text
22 |   };
23 | }
24 | 
25 | export function markTodo(id) {
26 |   return {
27 |     type: types.MARK_TODO,
28 |     id
29 |   };
30 | }
31 | 
32 | export function markAll() {
33 |   return {
34 |     type: types.MARK_ALL
35 |   };
36 | }
37 | 
38 | export function clearMarked() {
39 |   return {
40 |     type: types.CLEAR_MARKED
41 |   };
42 | }
43 | 


--------------------------------------------------------------------------------
/examples/todomvc/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes, Component } from 'react';
 2 | import classnames from 'classnames';
 3 | import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters';
 4 | 
 5 | const FILTER_TITLES = {
 6 |   [SHOW_ALL]: 'All',
 7 |   [SHOW_UNMARKED]: 'Active',
 8 |   [SHOW_MARKED]: 'Completed'
 9 | };
10 | 
11 | export default class Footer extends Component {
12 |   static propTypes = {
13 |     markedCount: PropTypes.number.isRequired,
14 |     unmarkedCount: PropTypes.number.isRequired,
15 |     filter: PropTypes.string.isRequired,
16 |     onClearMarked: PropTypes.func.isRequired,
17 |     onShow: PropTypes.func.isRequired
18 |   }
19 | 
20 |   render() {
21 |     return (
22 |       <footer className='footer'>
23 |         {this.renderTodoCount()}
24 |         <ul className='filters'>
25 |           {[SHOW_ALL, SHOW_UNMARKED, SHOW_MARKED].map(filter =>
26 |             <li key={filter}>
27 |               {this.renderFilterLink(filter)}
28 |             </li>
29 |           )}
30 |         </ul>
31 |         {this.renderClearButton()}
32 |       </footer>
33 |     );
34 |   }
35 | 
36 |   renderTodoCount() {
37 |     const { unmarkedCount } = this.props;
38 |     const itemWord = unmarkedCount === 1 ? 'item' : 'items';
39 | 
40 |     return (
41 |       <span className='todo-count'>
42 |         <strong>{unmarkedCount || 'No'}</strong> {itemWord} left
43 |       </span>
44 |     );
45 |   }
46 | 
47 |   renderFilterLink(filter) {
48 |     const title = FILTER_TITLES[filter];
49 |     const { filter: selectedFilter, onShow } = this.props;
50 | 
51 |     return (
52 |       <a className={classnames({ selected: filter === selectedFilter })}
53 |          style={{ cursor: 'hand' }}
54 |          onClick={() => onShow(filter)}>
55 |         {title}
56 |       </a>
57 |     );
58 |   }
59 | 
60 |   renderClearButton() {
61 |     const { markedCount, onClearMarked } = this.props;
62 |     if (markedCount > 0) {
63 |       return (
64 |         <button className='clear-completed'
65 |                 onClick={onClearMarked} >
66 |           Clear completed
67 |         </button>
68 |       );
69 |     }
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/examples/todomvc/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes, Component } from 'react';
 2 | import TodoTextInput from './TodoTextInput';
 3 | 
 4 | export default class Header extends Component {
 5 |   static propTypes = {
 6 |     addTodo: PropTypes.func.isRequired
 7 |   };
 8 | 
 9 |   handleSave(text) {
10 |     if (text.length !== 0) {
11 |       this.props.addTodo(text);
12 |     }
13 |   }
14 | 
15 |   render() {
16 |     return (
17 |       <header className='header'>
18 |           <h1>todos</h1>
19 |           <TodoTextInput newTodo={true}
20 |                          onSave={::this.handleSave}
21 |                          placeholder='What needs to be done?' />
22 |       </header>
23 |     );
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/todomvc/components/MainSection.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react';
 2 | import TodoItem from './TodoItem';
 3 | import Footer from './Footer';
 4 | import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters';
 5 | 
 6 | const TODO_FILTERS = {
 7 |   [SHOW_ALL]: () => true,
 8 |   [SHOW_UNMARKED]: todo => !todo.marked,
 9 |   [SHOW_MARKED]: todo => todo.marked
10 | };
11 | 
12 | export default class MainSection extends Component {
13 |   static propTypes = {
14 |     todos: PropTypes.array.isRequired,
15 |     actions: PropTypes.object.isRequired
16 |   };
17 | 
18 |   constructor(props, context) {
19 |     super(props, context);
20 |     this.state = { filter: SHOW_ALL };
21 |   }
22 | 
23 |   handleClearMarked() {
24 |     const atLeastOneMarked = this.props.todos.some(todo => todo.marked);
25 |     if (atLeastOneMarked) {
26 |       this.props.actions.clearMarked();
27 |     }
28 |   }
29 | 
30 |   handleShow(filter) {
31 |     this.setState({ filter });
32 |   }
33 | 
34 |   render() {
35 |     const { todos, actions } = this.props;
36 |     const { filter } = this.state;
37 | 
38 |     const filteredTodos = todos.filter(TODO_FILTERS[filter]);
39 |     const markedCount = todos.reduce((count, todo) =>
40 |       todo.marked ? count + 1 : count,
41 |       0
42 |     );
43 | 
44 |     return (
45 |       <section className='main'>
46 |         {this.renderToggleAll(markedCount)}
47 |         <ul className='todo-list'>
48 |           {filteredTodos.map(todo =>
49 |             <TodoItem key={todo.id} todo={todo} {...actions} />
50 |           )}
51 |         </ul>
52 |         {this.renderFooter(markedCount)}
53 |       </section>
54 |     );
55 |   }
56 | 
57 |   renderToggleAll(markedCount) {
58 |     const { todos, actions } = this.props;
59 |     if (todos.length > 0) {
60 |       return (
61 |         <input className='toggle-all'
62 |                type='checkbox'
63 |                checked={markedCount === todos.length}
64 |                onChange={actions.markAll} />
65 |       );
66 |     }
67 |   }
68 | 
69 |   renderFooter(markedCount) {
70 |     const { todos } = this.props;
71 |     const { filter } = this.state;
72 |     const unmarkedCount = todos.length - markedCount;
73 | 
74 |     if (todos.length) {
75 |       return (
76 |         <Footer markedCount={markedCount}
77 |                 unmarkedCount={unmarkedCount}
78 |                 filter={filter}
79 |                 onClearMarked={::this.handleClearMarked}
80 |                 onShow={::this.handleShow} />
81 |       );
82 |     }
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/examples/todomvc/components/TodoItem.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react';
 2 | import classnames from 'classnames';
 3 | import TodoTextInput from './TodoTextInput';
 4 | 
 5 | export default class TodoItem extends Component {
 6 |   static propTypes = {
 7 |     todo: PropTypes.object.isRequired,
 8 |     editTodo: PropTypes.func.isRequired,
 9 |     deleteTodo: PropTypes.func.isRequired,
10 |     markTodo: PropTypes.func.isRequired
11 |   };
12 | 
13 |   constructor(props, context) {
14 |     super(props, context);
15 |     this.state = {
16 |       editing: false
17 |     };
18 |   }
19 | 
20 |   handleDoubleClick() {
21 |     this.setState({ editing: true });
22 |   }
23 | 
24 |   handleSave(id, text) {
25 |     if (text.length === 0) {
26 |       this.props.deleteTodo(id);
27 |     } else {
28 |       this.props.editTodo(id, text);
29 |     }
30 |     this.setState({ editing: false });
31 |   }
32 | 
33 |   render() {
34 |     const {todo, markTodo, deleteTodo} = this.props;
35 | 
36 |     let element;
37 |     if (this.state.editing) {
38 |       element = (
39 |         <TodoTextInput text={todo.text}
40 |                        editing={this.state.editing}
41 |                        onSave={(text) => this.handleSave(todo.id, text)} />
42 |       );
43 |     } else {
44 |       element = (
45 |         <div className='view'>
46 |           <input className='toggle'
47 |                  type='checkbox'
48 |                  checked={todo.marked}
49 |                  onChange={() => markTodo(todo.id)} />
50 |           <label onDoubleClick={::this.handleDoubleClick}>
51 |             {todo.text}
52 |           </label>
53 |           <button className='destroy'
54 |                   onClick={() => deleteTodo(todo.id)} />
55 |         </div>
56 |       );
57 |     }
58 | 
59 |     return (
60 |       <li className={classnames({
61 |         completed: todo.marked,
62 |         editing: this.state.editing
63 |       })}>
64 |         {element}
65 |       </li>
66 |     );
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/examples/todomvc/components/TodoTextInput.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react';
 2 | import classnames from 'classnames';
 3 | 
 4 | export default class TodoTextInput extends Component {
 5 |   static propTypes = {
 6 |     onSave: PropTypes.func.isRequired,
 7 |     text: PropTypes.string,
 8 |     placeholder: PropTypes.string,
 9 |     editing: PropTypes.bool,
10 |     newTodo: PropTypes.bool
11 |   };
12 | 
13 |   constructor(props, context) {
14 |     super(props, context);
15 |     this.state = {
16 |       text: this.props.text || ''
17 |     };
18 |   }
19 | 
20 |   handleSubmit(e) {
21 |     const text = e.target.value.trim();
22 |     if (e.which === 13) {
23 |       this.props.onSave(text);
24 |       if (this.props.newTodo) {
25 |         this.setState({ text: '' });
26 |       }
27 |     }
28 |   }
29 | 
30 |   handleChange(e) {
31 |     this.setState({ text: e.target.value });
32 |   }
33 | 
34 |   handleBlur(e) {
35 |     if (!this.props.newTodo) {
36 |       this.props.onSave(e.target.value);
37 |     }
38 |   }
39 | 
40 |   render() {
41 |     return (
42 |       <input className={classnames({
43 |               edit: this.props.editing,
44 |               'new-todo': this.props.newTodo
45 |              })}
46 |              type='text'
47 |              placeholder={this.props.placeholder}
48 |              autoFocus='true'
49 |              value={this.state.text}
50 |              onBlur={::this.handleBlur}
51 |              onChange={::this.handleChange}
52 |              onKeyDown={::this.handleSubmit} />
53 |     );
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/examples/todomvc/constants/ActionTypes.js:
--------------------------------------------------------------------------------
1 | export const ADD_TODO = 'ADD_TODO';
2 | export const DELETE_TODO = 'DELETE_TODO';
3 | export const EDIT_TODO = 'EDIT_TODO';
4 | export const MARK_TODO = 'MARK_TODO';
5 | export const MARK_ALL = 'MARK_ALL';
6 | export const CLEAR_MARKED = 'CLEAR_MARKED';
7 | 


--------------------------------------------------------------------------------
/examples/todomvc/constants/TodoFilters.js:
--------------------------------------------------------------------------------
1 | export const SHOW_ALL = 'show_all';
2 | export const SHOW_MARKED = 'show_marked';
3 | export const SHOW_UNMARKED = 'show_unmarked';
4 | 


--------------------------------------------------------------------------------
/examples/todomvc/constants/WireActions.js:
--------------------------------------------------------------------------------
1 | export const SET_STATE = 'SET_STATE';


--------------------------------------------------------------------------------
/examples/todomvc/containers/JsonApp.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { createRedux, composeStores, compose } from 'redux';
 3 | import {Connector} from 'react-redux';
 4 | import * as reducers from '../reducers';
 5 | 
 6 | export default class JsonApp extends Component {
 7 |     render() {
 8 |         return (
 9 |             <Connector select={({todos}) => { todos }}>
10 |                 {this.renderChild}
11 |             </Connector>
12 |         );
13 |     }
14 | 
15 |     renderChild(data) {
16 |         return (
17 |             <div>
18 |                 {JSON.stringify(data, null, 2)}
19 |             </div>
20 |         );
21 |     }
22 | }


--------------------------------------------------------------------------------
/examples/todomvc/containers/TodoApp.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { bindActionCreators } from 'redux';
 3 | import { Connector } from 'react-redux';
 4 | import Header from '../components/Header';
 5 | import MainSection from '../components/MainSection';
 6 | import * as TodoActions from '../actions/TodoActions';
 7 | 
 8 | export default class TodoApp extends Component {
 9 |     render() {
10 |         return (
11 |             <Connector select={state => ({ todos: state.todos })}>
12 |                 {this.renderChild}
13 |             </Connector>
14 |         );
15 |     }
16 | 
17 |     renderChild({ todos, dispatch }) {
18 |         const actions = bindActionCreators(TodoActions, dispatch);
19 |         return (
20 |             <div>
21 |                 <Header addTodo={actions.addTodo}/>
22 |                 <MainSection todos={todos} actions={actions}/>
23 |             </div>
24 |         );
25 |     }
26 | }


--------------------------------------------------------------------------------
/examples/todomvc/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Redux TodoMVC</title>
 4 | </head>
 5 | <body>
 6 | <div class=" col-group">
 7 |     <div class="col-group">
 8 |         <h1 class="label">Master -> Slave</h1>
 9 |         <div>
10 |             <div class="todoapp" id="root1">
11 |             </div>
12 |         </div>
13 |         <div>
14 |             <div class="todoapp" id="root2">
15 |             </div>
16 |         </div>
17 |     </div>
18 |     <div class="col-group">
19 |         <h1 class="label">Sync</h1>
20 |         <div>
21 |             <div class="todoapp" id="root3">
22 |             </div>
23 |         </div>
24 |         <div>
25 |             <div class="todoapp" id="root4">
26 |             </div>
27 |         </div>
28 |     </div>
29 | </div>
30 | </body>
31 | <script src="/static/bundle.js"></script>
32 | <style>
33 |     body{
34 |         max-width: 100%;
35 |     }
36 | 
37 |     .col-group {
38 |         overflow: hidden;
39 |         width: 100%;
40 |     }
41 | 
42 |     .col-group > div {
43 |         float: left;
44 |         width: 50%;
45 |     }
46 | 
47 |     h1.label{
48 |         font-size: 59px;
49 |         font-weight: 100;
50 |         text-align: center;
51 |         color: rgba(175, 47, 47, 0.15);
52 |         -webkit-text-rendering: optimizeLegibility;
53 |         -moz-text-rendering: optimizeLegibility;
54 |         text-rendering: optimizeLegibility;
55 |     }
56 | </style>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/examples/todomvc/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Provider } from 'react-redux';
 3 | import {createSubscribeOnStateStore} from '../../src';
 4 | import 'todomvc-app-css/index.css';
 5 | import TodoApp from './containers/TodoApp';
 6 | import * as reducers from './reducers';
 7 | import R from 'ramda';
 8 | import pure from 'react-pure-component';
 9 | import * as redux from 'redux';
10 | 
11 | const SET_STATE = "@@@@SET_STATE";
12 | const setState = (state) =>({type: SET_STATE, state});
13 | 
14 | const oldTodos = reducers.todos;
15 | 
16 | reducers.todos = (state, action)=>{
17 |     switch (action.type) {
18 |         case SET_STATE:
19 |             return action.state.todos;
20 |         default:
21 |             return oldTodos(state, action)
22 |     }
23 | };
24 | 
25 | const store1 = createSubscribeOnStateStore(redux, SET_STATE, reducers);
26 | const store2 = createSubscribeOnStateStore(redux, SET_STATE, reducers);
27 | const store3 = createSubscribeOnStateStore(redux, SET_STATE, reducers);
28 | const store4 = createSubscribeOnStateStore(redux, SET_STATE, reducers);
29 | 
30 | const dispatchState = (store)=>(state)=>store.dispatch(setState(state));
31 | 
32 | store1.subscribeOnState((data)=>dispatchState(store2)(data));
33 | //app2.subscribeOnState((data)=>dispatchState(store2)(data)));
34 | store3.subscribeOnState((data)=>dispatchState(store4)(data));
35 | store4.subscribeOnState((data)=>dispatchState(store3)(data));
36 | 
37 | const createApp = R.curry((UserApp, store) => pure(()=>(
38 |     <Provider store={store}>
39 |         {() => <UserApp /> }
40 |     </Provider>
41 | )));
42 | 
43 | const createTodoApp = createApp(TodoApp);
44 | 
45 | const App1 = createTodoApp(store1);
46 | const App2 = createTodoApp(store2);
47 | const App3 = createTodoApp(store3);
48 | const App4 = createTodoApp(store4);
49 | 
50 | React.render(
51 |     <App1 />,
52 |     document.getElementById('root1')
53 | );
54 | 
55 | React.render(
56 |     <App2 />,
57 |     document.getElementById('root2')
58 | );
59 | 
60 | React.render(
61 |     <App3 />,
62 |     document.getElementById('root3')
63 | );
64 | 
65 | React.render(
66 |     <App4 />,
67 |     document.getElementById('root4')
68 | );
69 | 


--------------------------------------------------------------------------------
/examples/todomvc/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todomvc",
 3 |   "version": "0.0.0",
 4 |   "description": "TodoMVC example for redux",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "node server.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/gaearon/redux-devtools.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "reactjs",
16 |     "hot",
17 |     "reload",
18 |     "hmr",
19 |     "live",
20 |     "edit",
21 |     "webpack",
22 |     "flux",
23 |     "todomvc"
24 |   ],
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/gaearon/redux-devtools/issues"
28 |   },
29 |   "homepage": "https://github.com/gaearon/redux-devtools#readme",
30 |   "devDependencies": {
31 |     "babel-core": "^5.6.18",
32 |     "babel-loader": "^5.1.4",
33 |     "node-libs-browser": "^0.5.2",
34 |     "raw-loader": "^0.5.1",
35 |     "react-hot-loader": "^1.2.7",
36 |     "style-loader": "^0.12.3",
37 |     "todomvc-app-css": "^2.0.1",
38 |     "webpack": "^1.9.11",
39 |     "webpack-dev-server": "^1.9.0"
40 |   },
41 |   "dependencies": {
42 |     "classnames": "^2.1.2",
43 |     "jsondiffpatch": "^0.1.33",
44 |     "ramda": "^0.17.1",
45 |     "react": "^0.13.3",
46 |     "react-pure-component": "^0.1.0",
47 |     "react-redux": "^0.2.1",
48 |     "redux": "^1.0.0-rc",
49 |     "redux-thunk": "^0.1.0",
50 |     "todomvc-app-css": "^2.0.1"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/examples/todomvc/reducers/index.js:
--------------------------------------------------------------------------------
1 | export { default as todos } from './todos';
2 | 


--------------------------------------------------------------------------------
/examples/todomvc/reducers/todos.js:
--------------------------------------------------------------------------------
 1 | import { ADD_TODO, DELETE_TODO, EDIT_TODO, MARK_TODO, MARK_ALL, CLEAR_MARKED } from '../constants/ActionTypes';
 2 | import { SET_STATE } from '../constants/WireActions';
 3 | 
 4 | const initialState = [{
 5 |     text: 'Use Redux',
 6 |     marked: false,
 7 |     id: 0
 8 | }];
 9 | 
10 | export default function todos(state = initialState, action) {
11 |     switch (action.type) {
12 |         case ADD_TODO:
13 |             return [{
14 |                 id: (state.length === 0) ? 0 : state[0].id + 1,
15 |                 marked: false,
16 |                 text: action.text
17 |             }, ...state];
18 | 
19 |         case DELETE_TODO:
20 |             return state.filter(todo =>
21 |                 todo.id !== action.id
22 |             );
23 | 
24 |         case EDIT_TODO:
25 |             return state.map(todo =>
26 |                     todo.id === action.id ?
27 |                     {...todo, text: action.text} :
28 |                         todo
29 |             );
30 | 
31 |         case MARK_TODO:
32 |             return state.map(todo =>
33 |                     todo.id === action.id ?
34 |                     {...todo, marked: !todo.marked} :
35 |                         todo
36 |             );
37 | 
38 |         case MARK_ALL:
39 |             const areAllMarked = state.every(todo => todo.marked);
40 |             return state.map(todo => ({
41 |                 ...todo,
42 |                 marked: !areAllMarked
43 |             }));
44 | 
45 |         case CLEAR_MARKED:
46 |             return state.filter(todo => todo.marked === false);
47 | 
48 |         default:
49 |             return state;
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/examples/todomvc/server.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var WebpackDevServer = require('webpack-dev-server');
 3 | var config = require('./webpack.config');
 4 | 
 5 | new WebpackDevServer(webpack(config), {
 6 |   publicPath: config.output.publicPath,
 7 |   hot: true,
 8 |   historyApiFallback: true,
 9 |   stats: {
10 |     colors: true
11 |   }
12 | }).listen(3000, 'localhost', function (err) {
13 |   if (err) {
14 |     console.log(err);
15 |   }
16 | 
17 |   console.log('Listening at localhost:3000');
18 | });
19 | 


--------------------------------------------------------------------------------
/examples/todomvc/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | console.log(path.resolve(__dirname + '/../../src'))
 5 | module.exports = {
 6 |     entry: [
 7 |         'webpack-dev-server/client?http://localhost:3000',
 8 |         'webpack/hot/only-dev-server',
 9 |         './index'
10 |     ],
11 |     output: {
12 |         path: path.join(__dirname, 'dist'),
13 |         filename: 'bundle.js',
14 |         publicPath: '/static/'
15 |     },
16 |     plugins: [
17 |         new webpack.HotModuleReplacementPlugin(),
18 |         new webpack.NoErrorsPlugin()
19 |     ],
20 |     resolve: {
21 |         extensions: ['', '.js']
22 |     },
23 |     module: {
24 |         loaders: [{
25 |             test: /\.js$/,
26 |             loaders: ['react-hot', 'babel'],
27 |             exclude: /node_modules/,
28 |             include: __dirname
29 |         },{
30 |             test: /\.js$/,
31 |             loaders: ['babel'],
32 |             exclude: /node_modules/,
33 |             include: path.resolve(__dirname + '/../../src')
34 |         }, {
35 |             test: /\.css?$/,
36 |             loaders: ['style', 'raw'],
37 |             include: __dirname
38 |         }]
39 |     }
40 | };
41 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Redux TodoMVC</title>
 4 | </head>
 5 | 
 6 | <body>
 7 | <div class=" col-group">
 8 |     <div class="col-group">
 9 |         <h1 class="label">Server -> Client</h1>
10 |         <div>
11 |             <div class="todoapp" id="root1">
12 |             </div>
13 |         </div>
14 |         <div>
15 |             <div class="todoapp" id="root2">
16 |             </div>
17 |         </div>
18 |     </div>
19 |     <div class="col-group">
20 |         <h1 class="label">Sync</h1>
21 |         <div>
22 |             <div class="todoapp" id="root3">
23 |             </div>
24 |         </div>
25 |         <div>
26 |             <div class="todoapp" id="root4">
27 |             </div>
28 |         </div>
29 |     </div>
30 | </div>
31 | </body>
32 | <script src="examples/todomvc/dist/bundle.js"></script>
33 | <style>
34 |     body{
35 |         max-width: 100%;
36 |     }
37 | 
38 |     .col-group {
39 |         overflow: hidden;
40 |         width: 100%;
41 |     }
42 | 
43 |     .col-group > div {
44 |         float: left;
45 |         width: 50%;
46 |     }
47 | 
48 |     h1.label{
49 |         font-size: 59px;
50 |         font-weight: 100;
51 |         text-align: center;
52 |         color: rgba(175, 47, 47, 0.15);
53 |         -webkit-text-rendering: optimizeLegibility;
54 |         -moz-text-rendering: optimizeLegibility;
55 |         text-rendering: optimizeLegibility;
56 |     }
57 | </style>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "redux-remote",
 3 |   "version": "0.0.0",
 4 |   "description": "Most importantly that I am not resend all actions but listen store updates and send it to another redux instance which updates itself.",
 5 |   "main": "index.js",
 6 |   "directories": {
 7 |     "example": "examples"
 8 |   },
 9 |   "scripts": {
10 |     "clean": "rimraf lib",
11 |     "build": "babel src --out-dir lib",
12 |     "lint": "eslint src test examples",
13 |     "test": "SET NODE_ENV=test mocha --compilers js:babel/register --recursive",
14 |     "test:watch": "SET NODE_ENV=test mocha --compilers js:babel/register --recursive --watch",
15 |     "test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
16 |     "prepublish": "npm run lint && npm run test && npm run clean && npm run build",
17 |     "demo":"bash ./demo.sh"
18 |   },
19 |   "devDependencies": {
20 |     "babel": "^5.5.8",
21 |     "babel-core": "^5.6.18",
22 |     "babel-eslint": "^3.1.15",
23 |     "babel-loader": "^5.1.4",
24 |     "eslint": "^0.23",
25 |     "eslint-config-airbnb": "0.0.6",
26 |     "eslint-plugin-react": "^2.3.0",
27 |     "expect": "^1.6.0",
28 |     "isparta": "^3.0.3",
29 |     "mocha": "^2.2.5",
30 |     "rimraf": "^2.3.4",
31 |     "react-hot-loader": "^1.2.7"
32 |   },
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "git+https://github.com/lapanoid/redux-remote.git"
36 |   },
37 |   "author": "Sergey Lapin <lapanoid@gmail.com> (http://github.com/lapanoid)",
38 |   "license": "ISC",
39 |   "bugs": {
40 |     "url": "https://github.com/lapanoid/redux-remote/issues"
41 |   },
42 |   "homepage": "https://github.com/lapanoid/redux-remote#readme"
43 | }
44 | 


--------------------------------------------------------------------------------
/src/createSubscribeOnStateStore.js:
--------------------------------------------------------------------------------
 1 | export default (redux, SET_STATE_ACTION, reducers)=> {
 2 |     let passStoreUpdate = false;
 3 | 
 4 |     const onAction = (action)=> {
 5 |         console.log(action.type);
 6 |         passStoreUpdate = action.type !== SET_STATE_ACTION;
 7 |     };
 8 | 
 9 |     const actionCatchMiddleware = ({dispatch}) => next => action => {
10 |         console.log(action);
11 |         onAction(action);
12 |         next(action);
13 |     };
14 | 
15 |     const createStoreWithMiddleware = redux.applyMiddleware(actionCatchMiddleware)(redux.createStore);
16 |     const store = createStoreWithMiddleware(redux.combineReducers(reducers));
17 | 
18 |     const subscribeOnState = (dataListener)=> {
19 |         store.subscribe(() => {
20 |             if (!passStoreUpdate && dataListener)
21 |                 return;
22 | 
23 |             dataListener(store.getState())
24 |         });
25 |     };
26 | 
27 |     return {
28 |         dispatch: store.dispatch.bind(store),
29 |         getState: store.getState.bind(store),
30 |         subscribe: store.subscribe.bind(store),
31 |         subscribeOnState
32 |     }
33 | }
34 | 
35 | 


--------------------------------------------------------------------------------
/src/dataListenener.js:
--------------------------------------------------------------------------------
 1 | import {diff, patch} from 'jsondiffpatch';
 2 | import R from 'ramda';
 3 | 
 4 | const differ = (initialState = {})=> {
 5 |     let oldState = initialState;
 6 |     return (data)=> {
 7 |         const myDiff = diff(oldState, data);
 8 |         oldState = data;
 9 |         return myDiff;
10 |     }
11 | };
12 | 
13 | const collecter = (initialState = {})=> {
14 |     let oldState = initialState;
15 |     return (diffChunk)=> {
16 |         const nextState = patch(oldState, diffChunk);
17 |         oldState = nextState;
18 |         return nextState;
19 |     }
20 | };
21 | 
22 | const collecterInstFunc = collecter();
23 | const differInstFunc = differ();
24 | 
25 | export const dataListener = R.curry(( dispatchState, data)=> {
26 |     const clone = (d)=>JSON.parse(JSON.stringify(d));
27 |     //const obj = {...b}
28 | 
29 |     //console.log(data == data)
30 |     //console.log(data === b)
31 |     //console.log(data === clone(b))
32 |     console.log(data)
33 |     //console.log(JSON.stringify(data))
34 |     //console.log(b)
35 |     //console.log(JSON.stringify(b))
36 |     //console.log(JSON.stringify(clone(b)))
37 | 
38 |     setTimeout(()=>dispatchState(
39 |         //R.compose(clone, collecterInstFunc, differInstFunc)
40 |         (data)), 0)
41 | });


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as createSubscribeOnStateStore } from './createSubscribeOnStateStore';


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