├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── README.md
├── examples
    ├── todomvc-livewire
    │   ├── .babelrc
    │   ├── .gitignore
    │   ├── README.md
    │   ├── actions
    │   │   └── TodoActions.js
    │   ├── components
    │   │   ├── Footer.js
    │   │   ├── Header.js
    │   │   ├── MainSection.js
    │   │   ├── TodoItem.js
    │   │   └── TodoTextInput.js
    │   ├── constants
    │   │   ├── ActionTypes.js
    │   │   └── TodoFilters.js
    │   ├── containers
    │   │   ├── App.js
    │   │   ├── DevTools.js
    │   │   ├── Root.dev.js
    │   │   ├── Root.js
    │   │   ├── Root.prod.js
    │   │   └── TodoApp.js
    │   ├── index.html
    │   ├── index.js
    │   ├── index.template.ejs
    │   ├── package.json
    │   ├── reducers
    │   │   ├── index.js
    │   │   └── todos.js
    │   ├── server.js
    │   ├── store
    │   │   ├── configureStore.dev.js
    │   │   ├── configureStore.js
    │   │   └── configureStore.prod.js
    │   ├── webpack.config.dist.js
    │   └── webpack.config.js
    └── todomvc
    │   ├── .babelrc
    │   ├── .gitignore
    │   ├── README.md
    │   ├── actions
    │       └── TodoActions.js
    │   ├── components
    │       ├── Footer.js
    │       ├── Header.js
    │       ├── MainSection.js
    │       ├── TodoItem.js
    │       └── TodoTextInput.js
    │   ├── constants
    │       ├── ActionTypes.js
    │       └── TodoFilters.js
    │   ├── containers
    │       ├── App.js
    │       ├── DevTools.js
    │       ├── Root.dev.js
    │       ├── Root.js
    │       ├── Root.prod.js
    │       └── TodoApp.js
    │   ├── index.html
    │   ├── index.js
    │   ├── index.template.ejs
    │   ├── package.json
    │   ├── reducers
    │       ├── index.js
    │       └── todos.js
    │   ├── server.js
    │   ├── store
    │       ├── configureStore.dev.js
    │       ├── configureStore.js
    │       └── configureStore.prod.js
    │   ├── webpack.config.dist.js
    │   └── webpack.config.js
├── lib
    ├── action
    │   └── index.js
    ├── button
    │   └── index.js
    ├── index.js
    └── utils
    │   └── diff-state.js
├── package.json
├── src
    ├── action
    │   └── index.js
    ├── button
    │   └── index.js
    ├── index.js
    └── utils
    │   └── diff-state.js
└── test
    ├── action
        └── index.spec.js
    ├── index.spec.js
    ├── mocha.opts
    ├── test-utils
        └── dom.js
    └── utils
        └── diff-state.spec.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "stage-1",
5 |     "react"
6 |   ]
7 | }


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "extends": "airbnb",
 4 |   "rules": {
 5 |     "no-unused-vars": 1,
 6 |     "no-use-before-define": 0,
 7 |     "key-spacing": 0,
 8 |     "no-multi-spaces": 0
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | npm-debug.log
4 | .idea


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src/


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: required
 2 | language: node_js
 3 | env:
 4 |   - CXX=g++-4.8
 5 | addons:
 6 |   apt:
 7 |     sources:
 8 |       - ubuntu-toolchain-r-test
 9 |     packages:
10 |       - g++-4.8
11 | node_js:
12 |   - "4"
13 |   - "5"
14 | script:
15 |  - npm run lint
16 |  - npm test


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Redux DevTools – Diff Monitor
 2 | 
 3 | [![build status](https://img.shields.io/travis/whetstone/redux-devtools-diff-monitor.svg?style=flat-square)](http://travis-ci.org/whetstone/redux-devtools-diff-monitor)
 4 | [![npm version](https://img.shields.io/npm/v/redux-devtools-diff-monitor.svg?style=flat-square)](https://www.npmjs.com/package/redux-devtools-diff-monitor)
 5 | [![npm downloads](https://img.shields.io/npm/dm/redux-devtools-diff-monitor.svg?style=flat-square)](https://www.npmjs.com/package/redux-devtools-diff-monitor)
 6 | 
 7 | 5.0 has been released with support for React 15. It contains other improvements to performance (such as calculating diff only when an action is expanded) and some cosmetic changes.
 8 | 
 9 | This project provides an alternate monitor for Redux DevTools. The primary goal of this monitor is to highlight the 
10 | changes to an application's state from action to action. This tool includes the main features from the default DevTools 
11 | monitor (rollback, commit, reset and individual action toggles).
12 | 
13 | ![Imgur](http://i.imgur.com/rvCR9OQ.png)
14 | 
15 | ### Installation Examples
16 | 
17 | See the Redux Devtools [documentation](https://github.com/gaearon/redux-devtools#create-a-devtools-component)
18 | for full details about how to use monitors.
19 | 
20 | #### Standalone Monitor
21 | 
22 | To use Diff Monitor by itself along with Redux Devtools, simply pass it to the `createDevTools` function directly.
23 | 
24 | Install from npm: `npm install --save-dev redux-devtools redux-devtools-diff-monitor`
25 | 
26 | ```javascript
27 | import React from 'react';
28 | import { createDevTools } from 'redux-devtools';
29 | import DiffMonitor from 'redux-devtools-diff-monitor';
30 | 
31 | export default createDevTools(
32 |   <DiffMonitor />
33 | );
34 | ```
35 | 
36 | #### Using DockMonitor
37 | 
38 | The [DockMonitor](https://github.com/gaearon/redux-devtools-dock-monitor) component provides common docking
39 | functionality that makes monitors easier to work with. See the 
40 | [documentation](https://github.com/gaearon/redux-devtools-dock-monitor#readme) for additional details.
41 | 
42 | Install from npm: `npm install --save-dev redux-devtools-dock-monitor redux-devtools-diff-monitor`
43 | 
44 | ```javascript
45 | import React from 'react';
46 | import { createDevTools } from 'redux-devtools';
47 | import DiffMonitor from 'redux-devtools-diff-monitor';
48 | import DockMonitor from 'redux-devtools-dock-monitor';
49 | 
50 | export default const DevTools = createDevTools(
51 |     <DockMonitor
52 |         toggleVisibilityKey='ctrl-h'
53 |         changePositionKey='ctrl-q'
54 |     >
55 |         <DiffMonitor theme='tomorrow' />
56 |     </DockMonitor>
57 | );
58 | ```
59 | 
60 | ### Usage
61 | 
62 | - New actions appear at the top of the monitor as they occur.
63 | - Actions will be minimized by default; actions shown in green are causing a state mutation.
64 | - Click an action name to expand its pane to view the state mutations the action caused.
65 | - Click "disable" next to any action name to ignore that action and roll back the state mutations that action caused.
66 | - As in the default Redux DevTools, click 'Commit' to reset the monitor and set the current app state as the rollback 
67 | point. If you click rollback after clicking commit, actions will be replayed through the commit point.
68 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015-loose", "stage-0", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | .divshot-cache
3 | divshot.json
4 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/README.md:
--------------------------------------------------------------------------------
 1 | # Redux DevTools Counter example
 2 | 
 3 | This example is adapted from `https://github.com/gaearon/redux-devtools/tree/master/examples/todomvc` to demonstrate
 4 | the use of the Redux Devtools Diff Monitor.
 5 | 
 6 | ## Running Example
 7 | 
 8 | First, clone the project:
 9 | 
10 | ```
11 | git clone https://github.com/whetstone/redux-devtools-diff-monitor.git
12 | ```
13 | 
14 | Then install the dependencies in the root folder:
15 | 
16 | ```
17 | cd redux-devtools-diff-monitor
18 | npm install
19 | ```
20 | 
21 | Install the dependencies in the example folder:
22 | 
23 | ```
24 | cd examples/todomvc
25 | npm install
26 | ```
27 | 
28 | Finally, run the project:
29 | 
30 | ```
31 | npm start
32 | open http://localhost:3000
33 | ```
34 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/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-livewire/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-livewire/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-livewire/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-livewire/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-livewire/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-livewire/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-livewire/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-livewire/containers/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import TodoApp from './TodoApp';
 3 | import { createStore, combineReducers, compose } from 'redux';
 4 | import { devTools, persistState } from 'redux-devtools';
 5 | import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
 6 | import DiffMonitor from 'redux-devtools-diff-monitor'
 7 | 
 8 | import { Provider } from 'react-redux';
 9 | import * as reducers from '../reducers';
10 | 
11 | const finalCreateStore = compose(
12 |   devTools(),
13 |   persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
14 | )(createStore);
15 | 
16 | const reducer = combineReducers(reducers);
17 | const store = finalCreateStore(reducer);
18 | 
19 | if (module.hot) {
20 |   module.hot.accept('../reducers', () =>
21 |     store.replaceReducer(combineReducers(require('../reducers')))
22 |   );
23 | }
24 | 
25 | export default class App extends Component {
26 |   render() {
27 |     return (
28 |       <div>
29 |         <Provider store={store}>
30 |           <TodoApp />
31 |         </Provider>
32 |         <DevTools store={store} monitor={DiffMonitor} shortcut='ctrl+d'/>
33 |       </div>
34 |     );
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/containers/DevTools.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createDevTools } from 'redux-devtools';
 3 | import DiffMonitor from 'redux-devtools-diff-monitor';
 4 | import DockMonitor from 'redux-devtools-dock-monitor';
 5 | 
 6 | export default createDevTools(
 7 |   <DockMonitor toggleVisibilityKey='ctrl-h'
 8 |                changePositionKey='ctrl-q'>
 9 |     <DiffMonitor />
10 |   </DockMonitor>
11 | );
12 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/containers/Root.dev.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Provider } from 'react-redux';
 3 | import TodoApp from './TodoApp';
 4 | import DevTools from './DevTools';
 5 | 
 6 | export default class Root extends Component {
 7 |   render() {
 8 |     const { store } = this.props;
 9 |     return (
10 |       <Provider store={store}>
11 |         <div>
12 |           <TodoApp />
13 |           <DevTools />
14 |         </div>
15 |       </Provider>
16 |     );
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/containers/Root.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV === 'production') {
2 |   module.exports = require('./Root.prod');
3 | } else {
4 |   module.exports = require('./Root.dev');
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/containers/Root.prod.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Provider } from 'react-redux';
 3 | import TodoApp from './TodoApp';
 4 | 
 5 | export default class Root extends Component {
 6 |   render() {
 7 |     const { store } = this.props;
 8 |     return (
 9 |       <Provider store={store}>
10 |         <TodoApp />
11 |       </Provider>
12 |     );
13 |   }
14 | }
15 | 


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


--------------------------------------------------------------------------------
/examples/todomvc-livewire/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Redux TodoMVC</title>
 4 |   </head>
 5 |   <body>
 6 |     <div class="todoapp" id="root">
 7 |     </div>
 8 |   </body>
 9 |   <script src="/static/bundle.js"></script>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/index.js:
--------------------------------------------------------------------------------
 1 | import 'todomvc-app-css/index.css';
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | import configureStore from './store/configureStore';
 5 | import Root from './containers/Root';
 6 | 
 7 | const store = configureStore();
 8 | 
 9 | render(
10 |   <Root store={store} />,
11 |   document.getElementById('root')
12 | );
13 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/index.template.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 5 |         <title>{%= o.htmlWebpackPlugin.options.title %}</title>
 6 |     </head>
 7 |     <body>
 8 |     <div class="todoapp" id="root">
 9 |     </div>
10 |     </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todomvc",
 3 |   "version": "0.0.0",
 4 |   "description": "TodoMVC example for redux adapted for the redux-devtools-diff-monitor",
 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-diff-monitor.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/whetstone/redux-devtools-diff-monitor/issues"
28 |   },
29 |   "homepage": "https://github.com/whetstone/redux-devtools-diff-monitor#readme",
30 |   "dependencies": {
31 |     "classnames": "^2.1.2",
32 |     "react": "^15.0.1",
33 |     "react-dom": "^15.0.1",
34 |     "react-redux": "^4.0.0",
35 |     "redux": "^3.4.0",
36 |     "redux-devtools": "^3.0.0",
37 |     "redux-devtools-diff-monitor": "^5.0.1",
38 |     "redux-devtools-dock-monitor": "^1.1.1",
39 |     "redux-devtools-log-monitor": "^1.0.9"
40 |   },
41 |   "devDependencies": {
42 |     "babel-cli": "^6.3.17",
43 |     "babel-core": "^6.7.6",
44 |     "babel-loader": "^6.2.4",
45 |     "babel-preset-es2015-loose": "^6.1.3",
46 |     "babel-preset-react": "6.3.13",
47 |     "babel-preset-stage-0": "^6.3.13",
48 |     "node-libs-browser": "^0.5.2",
49 |     "raw-loader": "^0.5.1",
50 |     "react-hot-loader": "^1.3.0",
51 |     "redux-devtools-dock-monitor": "^1.0.1",
52 |     "redux-devtools-log-monitor": "^1.0.1",
53 |     "style-loader": "^0.12.3",
54 |     "todomvc-app-css": "^2.0.1",
55 |     "webpack": "^1.9.11",
56 |     "webpack-dev-server": "^1.9.0"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import todos from './todos';
3 | 
4 | const rootReducer = combineReducers({
5 |   todos
6 | });
7 | 
8 | export default rootReducer;
9 | 


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


--------------------------------------------------------------------------------
/examples/todomvc-livewire/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-livewire/store/configureStore.dev.js:
--------------------------------------------------------------------------------
 1 | import { createStore, compose } from 'redux';
 2 | import { persistState } from 'redux-devtools';
 3 | import rootReducer from '../reducers';
 4 | import DevTools from '../containers/DevTools';
 5 | 
 6 | const finalCreateStore = compose(
 7 |   DevTools.instrument(),
 8 |   persistState(
 9 |     window.location.href.match(
10 |       /[?&]debug_session=([^&]+)\b/
11 |     )
12 |   )
13 | )(createStore);
14 | 
15 | export default function configureStore(initialState) {
16 |   const store = finalCreateStore(rootReducer, initialState);
17 | 
18 |   if (module.hot) {
19 |     module.hot.accept('../reducers', () =>
20 |       store.replaceReducer(require('../reducers').default)
21 |     );
22 |   }
23 | 
24 |   return store;
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/store/configureStore.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV === 'production') {
2 |   module.exports = require('./configureStore.prod');
3 | } else {
4 |   module.exports = require('./configureStore.dev');
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/store/configureStore.prod.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux';
2 | import rootReducer from '../reducers';
3 | 
4 | export default function configureStore(initialState) {
5 |   return createStore(rootReducer, initialState);
6 | }
7 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/webpack.config.dist.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | 
 5 | module.exports = {
 6 |   devtool: 'sourcemap',
 7 |   entry: [
 8 |     './index',
 9 |   ],
10 |   output: {
11 |     path: path.join(__dirname, 'dist'),
12 |     filename: 'bundle.js',
13 |   },
14 |   resolve: {
15 |     alias: {
16 |       'react': path.join(__dirname, 'node_modules', 'react'),
17 |       'redux-devtools-diff-monitor':  path.join(__dirname, '..', '..', 'src')
18 |     },
19 |     extensions: ['', '.js']
20 |   },
21 |   plugins: [
22 |      new HtmlWebpackPlugin({
23 |          title: 'Redux TodoMVC',
24 |          template: 'index.template.ejs',
25 |          inject: 'body',
26 |      }),
27 |  ],
28 |   module: {
29 |     loaders: [{
30 |       test: /\.js$/,
31 |       loaders: ['react-hot', 'babel'],
32 |       exclude: /node_modules/,
33 |       include: __dirname
34 |     }, {
35 |       test: /\.js$/,
36 |       loaders: ['babel'],
37 |       include: path.join(__dirname, '..', '..', 'src')
38 |     }, {
39 |       test: /\.css?$/,
40 |       loaders: ['style', 'raw'],
41 |       include: __dirname
42 |     }]
43 |   }
44 | };
45 | 


--------------------------------------------------------------------------------
/examples/todomvc-livewire/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |     devtool: 'eval',
 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 |     ],
19 |     resolve: {
20 |         extensions: ['', '.js'],
21 |     },
22 |     resolveLoader: {
23 |         'fallback': path.join(__dirname, 'node_modules'),
24 |     },
25 |     module: {
26 |         loaders: [{
27 |             test: /\.js$/,
28 |             loaders: ['react-hot', 'babel'],
29 |             exclude: /node_modules/,
30 |             include: __dirname,
31 |         }, {
32 |             test: /\.js$/,
33 |             loaders: ['react-hot', 'babel'],
34 |             include: path.join(__dirname, '..', '..', 'src'),
35 |         }, {
36 |             test: /\.css?$/,
37 |             loaders: ['style', 'raw'],
38 |             include: __dirname,
39 |         }],
40 |     },
41 | };
42 | 


--------------------------------------------------------------------------------
/examples/todomvc/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015-loose", "stage-0", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/todomvc/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | .divshot-cache
3 | divshot.json
4 | 


--------------------------------------------------------------------------------
/examples/todomvc/README.md:
--------------------------------------------------------------------------------
 1 | # Redux DevTools Counter example
 2 | 
 3 | This example is adapted from `https://github.com/gaearon/redux-devtools/tree/master/examples/todomvc` to demonstrate
 4 | the use of the Redux Devtools Diff Monitor.
 5 | 
 6 | ## Running Example
 7 | 
 8 | First, clone the project:
 9 | 
10 | ```
11 | git clone https://github.com/whetstone/redux-devtools-diff-monitor.git
12 | ```
13 | 
14 | Then install the dependencies in the root folder:
15 | 
16 | ```
17 | cd redux-devtools-diff-monitor
18 | npm install
19 | ```
20 | 
21 | Install the dependencies in the example folder:
22 | 
23 | ```
24 | cd examples/todomvc
25 | npm install
26 | ```
27 | 
28 | Finally, run the project:
29 | 
30 | ```
31 | npm start
32 | open http://localhost:3000
33 | ```
34 | 


--------------------------------------------------------------------------------
/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/containers/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import TodoApp from './TodoApp';
 3 | import { createStore, combineReducers, compose } from 'redux';
 4 | import { devTools, persistState } from 'redux-devtools';
 5 | import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
 6 | import DiffMonitor from '../../../lib'
 7 | 
 8 | import { Provider } from 'react-redux';
 9 | import * as reducers from '../reducers';
10 | 
11 | const finalCreateStore = compose(
12 |   devTools(),
13 |   persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
14 | )(createStore);
15 | 
16 | const reducer = combineReducers(reducers);
17 | const store = finalCreateStore(reducer);
18 | 
19 | if (module.hot) {
20 |   module.hot.accept('../reducers', () =>
21 |     store.replaceReducer(combineReducers(require('../reducers')))
22 |   );
23 | }
24 | 
25 | export default class App extends Component {
26 |   render() {
27 |     return (
28 |       <div>
29 |         <Provider store={store}>
30 |           <TodoApp />
31 |         </Provider>
32 |         <DevTools store={store} monitor={DiffMonitor} shortcut='ctrl+d'/>
33 |       </div>
34 |     );
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/todomvc/containers/DevTools.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createDevTools } from 'redux-devtools';
 3 | import DiffMonitor from 'redux-devtools-diff-monitor';
 4 | import DockMonitor from 'redux-devtools-dock-monitor';
 5 | 
 6 | export default createDevTools(
 7 |   <DockMonitor toggleVisibilityKey='ctrl-h'
 8 |                changePositionKey='ctrl-q'>
 9 |     <DiffMonitor />
10 |   </DockMonitor>
11 | );
12 | 


--------------------------------------------------------------------------------
/examples/todomvc/containers/Root.dev.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Provider } from 'react-redux';
 3 | import TodoApp from './TodoApp';
 4 | import DevTools from './DevTools';
 5 | 
 6 | export default class Root extends Component {
 7 |   render() {
 8 |     const { store } = this.props;
 9 |     return (
10 |       <Provider store={store}>
11 |         <div>
12 |           <TodoApp />
13 |           <DevTools />
14 |         </div>
15 |       </Provider>
16 |     );
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/todomvc/containers/Root.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV === 'production') {
2 |   module.exports = require('./Root.prod');
3 | } else {
4 |   module.exports = require('./Root.dev');
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/todomvc/containers/Root.prod.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Provider } from 'react-redux';
 3 | import TodoApp from './TodoApp';
 4 | 
 5 | export default class Root extends Component {
 6 |   render() {
 7 |     const { store } = this.props;
 8 |     return (
 9 |       <Provider store={store}>
10 |         <TodoApp />
11 |       </Provider>
12 |     );
13 |   }
14 | }
15 | 


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


--------------------------------------------------------------------------------
/examples/todomvc/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Redux TodoMVC</title>
 4 |   </head>
 5 |   <body>
 6 |     <div class="todoapp" id="root">
 7 |     </div>
 8 |   </body>
 9 |   <script src="/static/bundle.js"></script>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/examples/todomvc/index.js:
--------------------------------------------------------------------------------
 1 | import 'todomvc-app-css/index.css';
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | import configureStore from './store/configureStore';
 5 | import Root from './containers/Root';
 6 | 
 7 | const store = configureStore();
 8 | 
 9 | render(
10 |   <Root store={store} />,
11 |   document.getElementById('root')
12 | );
13 | 


--------------------------------------------------------------------------------
/examples/todomvc/index.template.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 5 |         <title>{%= o.htmlWebpackPlugin.options.title %}</title>
 6 |     </head>
 7 |     <body>
 8 |     <div class="todoapp" id="root">
 9 |     </div>
10 |     </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/examples/todomvc/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todomvc",
 3 |   "version": "0.0.0",
 4 |   "description": "TodoMVC example for redux adapted for the redux-devtools-diff-monitor",
 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-diff-monitor.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/whetstone/redux-devtools-diff-monitor/issues"
28 |   },
29 |   "homepage": "https://github.com/whetstone/redux-devtools-diff-monitor#readme",
30 |   "dependencies": {
31 |     "classnames": "^2.1.2",
32 |     "react": "^15.0.1",
33 |     "react-dom": "^15.0.1",
34 |     "react-redux": "^4.0.0",
35 |     "redux": "^3.4.0",
36 |     "redux-devtools": "^3.0.0",
37 |     "redux-devtools-dock-monitor": "^1.1.1",
38 |     "redux-devtools-log-monitor": "^1.0.9"
39 |   },
40 |   "devDependencies": {
41 |     "babel-cli": "^6.3.17",
42 |     "babel-core": "^6.7.6",
43 |     "babel-loader": "^6.2.4",
44 |     "babel-preset-es2015-loose": "^6.1.3",
45 |     "babel-preset-react": "6.3.13",
46 |     "babel-preset-stage-0": "^6.3.13",
47 |     "node-libs-browser": "^0.5.2",
48 |     "raw-loader": "^0.5.1",
49 |     "react-hot-loader": "^1.3.0",
50 |     "redux-devtools-dock-monitor": "^1.0.1",
51 |     "redux-devtools-log-monitor": "^1.0.1",
52 |     "style-loader": "^0.12.3",
53 |     "todomvc-app-css": "^2.0.1",
54 |     "webpack": "^1.9.11",
55 |     "webpack-dev-server": "^1.9.0"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/examples/todomvc/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import todos from './todos';
3 | 
4 | const rootReducer = combineReducers({
5 |   todos
6 | });
7 | 
8 | export default rootReducer;
9 | 


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


--------------------------------------------------------------------------------
/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/store/configureStore.dev.js:
--------------------------------------------------------------------------------
 1 | import { createStore, compose } from 'redux';
 2 | import { persistState } from 'redux-devtools';
 3 | import rootReducer from '../reducers';
 4 | import DevTools from '../containers/DevTools';
 5 | 
 6 | const finalCreateStore = compose(
 7 |   DevTools.instrument(),
 8 |   persistState(
 9 |     window.location.href.match(
10 |       /[?&]debug_session=([^&]+)\b/
11 |     )
12 |   )
13 | )(createStore);
14 | 
15 | export default function configureStore(initialState) {
16 |   const store = finalCreateStore(rootReducer, initialState);
17 | 
18 |   if (module.hot) {
19 |     module.hot.accept('../reducers', () =>
20 |       store.replaceReducer(require('../reducers').default)
21 |     );
22 |   }
23 | 
24 |   return store;
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/todomvc/store/configureStore.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV === 'production') {
2 |   module.exports = require('./configureStore.prod');
3 | } else {
4 |   module.exports = require('./configureStore.dev');
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/todomvc/store/configureStore.prod.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux';
2 | import rootReducer from '../reducers';
3 | 
4 | export default function configureStore(initialState) {
5 |   return createStore(rootReducer, initialState);
6 | }
7 | 


--------------------------------------------------------------------------------
/examples/todomvc/webpack.config.dist.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | 
 5 | module.exports = {
 6 |   devtool: 'sourcemap',
 7 |   entry: [
 8 |     './index',
 9 |   ],
10 |   output: {
11 |     path: path.join(__dirname, 'dist'),
12 |     filename: 'bundle.js',
13 |   },
14 |   resolve: {
15 |     alias: {
16 |       'react': path.join(__dirname, 'node_modules', 'react'),
17 |       'redux-devtools-diff-monitor':  path.join(__dirname, '..', '..', 'src')
18 |     },
19 |     extensions: ['', '.js']
20 |   },
21 |   plugins: [
22 |      new HtmlWebpackPlugin({
23 |          title: 'Redux TodoMVC',
24 |          template: 'index.template.ejs',
25 |          inject: 'body',
26 |      }),
27 |  ],
28 |   module: {
29 |     loaders: [{
30 |       test: /\.js$/,
31 |       loaders: ['react-hot', 'babel'],
32 |       exclude: /node_modules/,
33 |       include: __dirname
34 |     }, {
35 |       test: /\.js$/,
36 |       loaders: ['babel'],
37 |       include: path.join(__dirname, '..', '..', 'src')
38 |     }, {
39 |       test: /\.css?$/,
40 |       loaders: ['style', 'raw'],
41 |       include: __dirname
42 |     }]
43 |   }
44 | };
45 | 


--------------------------------------------------------------------------------
/examples/todomvc/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |     devtool: 'eval',
 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 |     ],
19 |     resolve: {
20 |         alias: {
21 |             'redux-devtools-diff-monitor': path.join(__dirname, '..', '..', 'src'),
22 |             'react': path.join(__dirname, 'node_modules', 'react'),
23 |             'redux-devtools': path.join(__dirname, 'node_modules', 'redux-devtools'),
24 |             'react-json-tree': path.join(__dirname, 'node_modules', 'react-json-tree'),
25 |         },
26 |         extensions: ['', '.js'],
27 |     },
28 |     resolveLoader: {
29 |         'fallback': path.join(__dirname, 'node_modules'),
30 |     },
31 |     module: {
32 |         loaders: [{
33 |             test: /\.js$/,
34 |             loaders: ['react-hot', 'babel'],
35 |             exclude: /node_modules/,
36 |             include: __dirname,
37 |         }, {
38 |             test: /\.js$/,
39 |             loaders: ['react-hot', 'babel'],
40 |             include: path.join(__dirname, '..', '..', 'src'),
41 |         }, {
42 |             test: /\.css?$/,
43 |             loaders: ['style', 'raw'],
44 |             include: __dirname,
45 |         }],
46 |     },
47 | };
48 | 


--------------------------------------------------------------------------------
/lib/action/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | 
  7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  8 | 
  9 | var _react = require('react');
 10 | 
 11 | var _react2 = _interopRequireDefault(_react);
 12 | 
 13 | var _aphrodite = require('aphrodite');
 14 | 
 15 | var _reactJsonTree = require('react-json-tree');
 16 | 
 17 | var _reactJsonTree2 = _interopRequireDefault(_reactJsonTree);
 18 | 
 19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 20 | 
 21 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 22 | 
 23 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 24 | 
 25 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 26 | 
 27 | var ManifestActionComponent = function (_React$Component) {
 28 |   _inherits(ManifestActionComponent, _React$Component);
 29 | 
 30 |   function ManifestActionComponent() {
 31 |     var _Object$getPrototypeO;
 32 | 
 33 |     var _temp, _this, _ret;
 34 | 
 35 |     _classCallCheck(this, ManifestActionComponent);
 36 | 
 37 |     for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 38 |       args[_key] = arguments[_key];
 39 |     }
 40 | 
 41 |     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ManifestActionComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
 42 |       expanded: false
 43 |     }, _this.expandAction = function () {
 44 |       _this.setState({
 45 |         expanded: !_this.state.expanded
 46 |       });
 47 |     }, _temp), _possibleConstructorReturn(_this, _ret);
 48 |   }
 49 | 
 50 |   _createClass(ManifestActionComponent, [{
 51 |     key: 'disableAction',
 52 |     value: function disableAction() {
 53 |       this.props.toggleAction(this.props.index);
 54 |       this.setState({
 55 |         expanded: false
 56 |       });
 57 |     }
 58 |   }, {
 59 |     key: 'createOldValue',
 60 |     value: function createOldValue(diff) {
 61 |       if (diff.item) {
 62 |         return JSON.stringify(diff.item.lhs);
 63 |       }
 64 | 
 65 |       return JSON.stringify(diff.lhs);
 66 |     }
 67 |   }, {
 68 |     key: 'createNewValue',
 69 |     value: function createNewValue(diff) {
 70 |       if (diff.item) {
 71 |         return JSON.stringify(diff.item.rhs);
 72 |       }
 73 | 
 74 |       return JSON.stringify(diff.rhs);
 75 |     }
 76 |   }, {
 77 |     key: 'createPath',
 78 |     value: function createPath(diff) {
 79 |       var path = [];
 80 | 
 81 |       if (diff.path) {
 82 |         path = path.concat(diff.path);
 83 |       }
 84 |       if (typeof diff.index !== 'undefined') {
 85 |         path.push(diff.index);
 86 |       }
 87 |       return path.length ? path.join('.') : '';
 88 |     }
 89 |   }, {
 90 |     key: 'getDiffs',
 91 |     value: function getDiffs() {
 92 |       var _this2 = this;
 93 | 
 94 |       var diff = this.props.diff;
 95 | 
 96 |       return diff.map(function (d, i) {
 97 |         return _this2.renderDiff(d, i);
 98 |       });
 99 |     }
100 |   }, {
101 |     key: 'renderDiff',
102 |     value: function renderDiff(diff, index) {
103 |       var oldValue = this.createOldValue(diff);
104 |       var newValue = this.createNewValue(diff);
105 |       var path = this.createPath(diff);
106 |       return _react2.default.createElement(
107 |         'div',
108 |         { key: index },
109 |         path,
110 |         ': ',
111 |         _react2.default.createElement(
112 |           'span',
113 |           { className: (0, _aphrodite.css)(styles.oldValue) },
114 |           oldValue || 'undefined'
115 |         ),
116 |         _react2.default.createElement(
117 |           'span',
118 |           { className: (0, _aphrodite.css)(styles.newValue) },
119 |           ' ',
120 |           newValue,
121 |           ' '
122 |         )
123 |       );
124 |     }
125 |   }, {
126 |     key: 'shouldComponentUpdate',
127 |     value: function shouldComponentUpdate(nextProps, nextState) {
128 |       var a = JSON.stringify(this.props.currentState);
129 |       var b = JSON.stringify(nextProps.currentState);
130 |       return a != b || this.state.expanded != nextState.expanded;
131 |     }
132 |   }, {
133 |     key: 'render',
134 |     value: function render() {
135 |       var _props = this.props;
136 |       var action = _props.action.action;
137 |       var diff = _props.diff;
138 |       var skipped = _props.skipped;
139 | 
140 |       var expanded = this.props.expanded || this.state.expanded;
141 |       var storeHasChanged = !!diff.length;
142 |       var changes = this.getDiffs();
143 | 
144 |       var actionSummary = this.state.expanded ? _react2.default.createElement(
145 |         'div',
146 |         { className: (0, _aphrodite.css)(styles.code) },
147 |         _react2.default.createElement(_reactJsonTree2.default, { data: action })
148 |       ) : null;
149 | 
150 |       var changesToStore = expanded && storeHasChanged ? _react2.default.createElement(
151 |         'div',
152 |         { className: (0, _aphrodite.css)(styles.code) },
153 |         changes
154 |       ) : null;
155 | 
156 |       var enableToggle = skipped ? 'enable' : 'disable';
157 | 
158 |       return _react2.default.createElement(
159 |         'div',
160 |         { className: (0, _aphrodite.css)(styles.container) },
161 |         _react2.default.createElement(
162 |           'div',
163 |           null,
164 |           _react2.default.createElement(
165 |             'div',
166 |             { className: (0, _aphrodite.css)(styles.header, this.state.expanded && styles.bottomBordered, storeHasChanged && styles.mutated) },
167 |             _react2.default.createElement(
168 |               'div',
169 |               null,
170 |               _react2.default.createElement(
171 |                 'div',
172 |                 { style: { display: 'flex', flexDirection: 'row' } },
173 |                 _react2.default.createElement(
174 |                   'div',
175 |                   { style: { flex: '1 0 auto' },
176 |                     className: (0, _aphrodite.css)(skipped && styles.skipped),
177 |                     onClick: this.expandAction.bind(this) },
178 |                   _react2.default.createElement(
179 |                     'span',
180 |                     null,
181 |                     action.type
182 |                   )
183 |                 ),
184 |                 _react2.default.createElement(
185 |                   'div',
186 |                   null,
187 |                   _react2.default.createElement(
188 |                     'span',
189 |                     { onClick: this.disableAction.bind(this),
190 |                       className: (0, _aphrodite.css)(styles.toggle) },
191 |                     enableToggle
192 |                   )
193 |                 )
194 |               )
195 |             )
196 |           ),
197 |           actionSummary,
198 |           changesToStore
199 |         )
200 |       );
201 |     }
202 |   }]);
203 | 
204 |   return ManifestActionComponent;
205 | }(_react2.default.Component);
206 | 
207 | ManifestActionComponent.propTypes = {
208 |   diff: _react.PropTypes.array,
209 |   toggleAction: _react.PropTypes.func,
210 |   index: _react.PropTypes.number,
211 |   action: _react.PropTypes.object,
212 |   skipped: _react.PropTypes.bool,
213 |   expanded: _react.PropTypes.bool
214 | };
215 | 
216 | 
217 | var styles = _aphrodite.StyleSheet.create({
218 |   container: {
219 |     marginBottom: '10px',
220 |     border: '1px solid #ddd',
221 |     background: '#eee'
222 |   },
223 | 
224 |   header: {
225 |     padding: 10
226 |   },
227 | 
228 |   bottomBordered: {
229 |     borderBottom: '1px solid #ddd'
230 |   },
231 | 
232 |   toggle: {
233 |     padding: '0 5px',
234 |     flex: '1 0 auto',
235 |     textAlign: 'right',
236 |     textDecoration: 'underline'
237 |   },
238 | 
239 |   title: {
240 |     cursor: 'pointer',
241 |     padding: '12px',
242 |     background: '#ddd',
243 |     userSelect: 'none',
244 |     WebkitUserSelect: 'none'
245 |   },
246 | 
247 |   mutated: {
248 |     background: 'lightgreen'
249 |   },
250 | 
251 |   skipped: {
252 |     textDecoration: 'line-through'
253 |   },
254 | 
255 |   code: {
256 |     border: '1px solid #ddd',
257 |     background: 'white',
258 |     padding: 5,
259 |     wordWrap: 'normal',
260 |     fontFamily: 'monospace',
261 |     margin: '10'
262 |   },
263 | 
264 |   changedProperty: {
265 |     display: 'block'
266 |   },
267 | 
268 |   oldValue: {
269 |     textDecoration: 'line-through',
270 |     color: 'pink'
271 |   },
272 | 
273 |   newValue: {
274 |     color: 'darkgreen'
275 |   }
276 | });
277 | 
278 | exports.default = ManifestActionComponent;


--------------------------------------------------------------------------------
/lib/button/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _react = require('react');
 8 | 
 9 | var _react2 = _interopRequireDefault(_react);
10 | 
11 | var _aphrodite = require('aphrodite');
12 | 
13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14 | 
15 | var ManifestButton = function ManifestButton(_ref) {
16 |   var label = _ref.label;
17 |   var action = _ref.action;
18 |   return _react2.default.createElement(
19 |     'div',
20 |     { className: (0, _aphrodite.css)(styles.button), onClick: action },
21 |     label
22 |   );
23 | };
24 | 
25 | var styles = _aphrodite.StyleSheet.create({
26 |   button: {
27 |     flex: '1 0 auto',
28 |     cursor: 'pointer',
29 |     color: 'black',
30 |     display: 'inline-block',
31 |     padding: '10px 0',
32 |     textAlign: 'center',
33 |     ':hover': {
34 |       backgroundColor: '#eee'
35 |     }
36 |   }
37 | });
38 | 
39 | ManifestButton.propTypes = {
40 |   label: _react.PropTypes.string,
41 |   action: _react.PropTypes.func
42 | };
43 | 
44 | exports.default = ManifestButton;


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | 
  7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  8 | 
  9 | var _react = require('react');
 10 | 
 11 | var _react2 = _interopRequireDefault(_react);
 12 | 
 13 | var _action = require('./action');
 14 | 
 15 | var _action2 = _interopRequireDefault(_action);
 16 | 
 17 | var _button = require('./button');
 18 | 
 19 | var _button2 = _interopRequireDefault(_button);
 20 | 
 21 | var _diffState = require('./utils/diff-state');
 22 | 
 23 | var _diffState2 = _interopRequireDefault(_diffState);
 24 | 
 25 | var _reduxDevtools = require('redux-devtools');
 26 | 
 27 | var _aphrodite = require('aphrodite');
 28 | 
 29 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 30 | 
 31 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 32 | 
 33 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 34 | 
 35 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 36 | 
 37 | var reset = _reduxDevtools.ActionCreators.reset;
 38 | var rollback = _reduxDevtools.ActionCreators.rollback;
 39 | var commit = _reduxDevtools.ActionCreators.commit;
 40 | var toggleAction = _reduxDevtools.ActionCreators.toggleAction;
 41 | var jumpToState = _reduxDevtools.ActionCreators.jumpToState;
 42 | 
 43 | var ManifestComponent = function (_React$Component) {
 44 |   _inherits(ManifestComponent, _React$Component);
 45 | 
 46 |   function ManifestComponent() {
 47 |     var _Object$getPrototypeO;
 48 | 
 49 |     var _temp, _this, _ret;
 50 | 
 51 |     _classCallCheck(this, ManifestComponent);
 52 | 
 53 |     for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 54 |       args[_key] = arguments[_key];
 55 |     }
 56 | 
 57 |     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ManifestComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleJumpTo = function (id) {
 58 |       _this.props.dispatch(jumpToState(id));
 59 |     }, _this.handleToggleAction = function (id) {
 60 |       _this.props.dispatch(toggleAction(id));
 61 |     }, _this.renderAction = function (id) {
 62 |       var action = _this.props.actionsById[id];
 63 |       var diffedStates = (0, _diffState2.default)(_this.props.computedStates, id);
 64 |       var skippingAction = _this.props.skippedActionIds.indexOf(id) !== -1;
 65 | 
 66 |       return _react2.default.createElement(_action2.default, {
 67 |         action: action,
 68 |         index: id,
 69 |         key: id,
 70 |         diff: diffedStates,
 71 |         skipped: skippingAction,
 72 |         toggleAction: function toggleAction() {
 73 |           return _this.handleToggleAction(id);
 74 |         },
 75 |         jumpTo: function jumpTo() {
 76 |           return _this.handleJumpTo(id);
 77 |         }
 78 |       });
 79 |     }, _temp), _possibleConstructorReturn(_this, _ret);
 80 |   }
 81 | 
 82 |   _createClass(ManifestComponent, [{
 83 |     key: 'render',
 84 |     value: function render() {
 85 |       var actionReports = this.props.stagedActionIds.map(this.renderAction);
 86 |       var dispatch = this.props.dispatch;
 87 | 
 88 | 
 89 |       return _react2.default.createElement(
 90 |         'div',
 91 |         null,
 92 |         _react2.default.createElement(
 93 |           'div',
 94 |           { className: (0, _aphrodite.css)(styles.container) },
 95 |           _react2.default.createElement(_button2.default, { label: 'Commit', action: function action() {
 96 |               return dispatch(commit());
 97 |             } }),
 98 |           _react2.default.createElement(_button2.default, { label: 'Rollback', action: function action() {
 99 |               return dispatch(rollback());
100 |             } }),
101 |           _react2.default.createElement(_button2.default, { label: 'Reset', action: function action() {
102 |               return dispatch(reset());
103 |             } })
104 |         ),
105 |         _react2.default.createElement(
106 |           'div',
107 |           { className: (0, _aphrodite.css)(styles.actions) },
108 |           actionReports.reverse()
109 |         )
110 |       );
111 |     }
112 |   }]);
113 | 
114 |   return ManifestComponent;
115 | }(_react2.default.Component);
116 | 
117 | ManifestComponent.propTypes = {
118 |   computedStates: _react.PropTypes.array,
119 |   actionsById: _react.PropTypes.object,
120 |   stagedActionIds: _react.PropTypes.array,
121 |   skippedActionIds: _react.PropTypes.array,
122 |   dispatch: _react.PropTypes.func
123 | };
124 | 
125 | ManifestComponent.update = function () {};
126 | 
127 | exports.default = ManifestComponent;
128 | 
129 | 
130 | var styles = _aphrodite.StyleSheet.create({
131 |   container: {
132 |     display: 'flex',
133 |     flexDirection: 'row',
134 |     flexWrap: 'nowrap',
135 |     borderBottom: '1px solid #ddd'
136 |   },
137 |   actions: {
138 |     margin: '10px'
139 |   }
140 | });


--------------------------------------------------------------------------------
/lib/utils/diff-state.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |     value: true
 5 | });
 6 | 
 7 | var _deepDiff = require('deep-diff');
 8 | 
 9 | var _deepDiff2 = _interopRequireDefault(_deepDiff);
10 | 
11 | var _immutable = require('immutable');
12 | 
13 | var _immutable2 = _interopRequireDefault(_immutable);
14 | 
15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16 | 
17 | exports.default = function (computedStates, index) {
18 |     if (index !== 0) {
19 |         var newState = _immutable2.default.fromJS({
20 |             state: computedStates[index].state
21 |         }).toJS().state;
22 | 
23 |         var oldState = _immutable2.default.fromJS({
24 |             state: computedStates[index - 1].state
25 |         }).toJS().state;
26 | 
27 |         var diff = _deepDiff2.default.diff(oldState, newState);
28 | 
29 |         return diff || [];
30 |     }
31 | 
32 |     return [];
33 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "redux-devtools-diff-monitor",
 3 |   "version": "5.0.4",
 4 |   "description": "A monitor for Redux Devtools that diffs the redux store mutations between actions for a more concise view into your application's lifecycle.",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "clean": "rimraf lib",
 8 |     "build": "npm run clean && babel src --out-dir lib",
 9 |     "prepublish": "npm run build",
10 |     "test": "mocha test/ --compilers js:babel-core/register",
11 |     "lint": "eslint ./src/** --quiet"
12 |   },
13 |   "repository": "https://github.com/whetstone/redux-devtools-diff-monitor.git",
14 |   "author": "iktl | gtfiorentino",
15 |   "license": "MIT",
16 |   "devDependencies": {
17 |     "babel-cli": "^6.7.5",
18 |     "babel-core": "^6.7.6",
19 |     "babel-eslint": "^6.0.2",
20 |     "babel-loader": "^6.2.4",
21 |     "babel-preset-es2015": "^6.6.0",
22 |     "babel-preset-react": "^6.3.13",
23 |     "babel-preset-stage-1": "^6.3.13",
24 |     "chai": "^3.3.0",
25 |     "eslint": "^2.7.0",
26 |     "eslint-config-airbnb": "^7.0.0",
27 |     "eslint-plugin-jsx-a11y": "^0.6.2",
28 |     "eslint-plugin-react": "^4.3.0",
29 |     "jsdom": "^8.3.1",
30 |     "mocha": "^2.3.3",
31 |     "react": "^15.0.1",
32 |     "react-addons-test-utils": "^15.0.1",
33 |     "react-dom": "^15.0.1",
34 |     "redux-devtools": "^3.2.0",
35 |     "rimraf": "^2.5.0",
36 |     "should": "^8.3.0"
37 |   },
38 |   "dependencies": {
39 |     "aphrodite": "^0.2.0",
40 |     "deep-diff": "^0.3.2",
41 |     "immutable": "^3.7.6",
42 |     "react-json-tree": "^0.6.5"
43 |   },
44 |   "peerDependencies": {
45 |     "redux-devtools": "^3.0.0",
46 |     "react": "^0.14.0 || ^15.0.0",
47 |     "react-dom": "^0.14.5 || ^15.0.0"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/action/index.js:
--------------------------------------------------------------------------------
  1 | import React, { PropTypes } from 'react';
  2 | import { StyleSheet, css } from 'aphrodite';
  3 | import JSONTree from 'react-json-tree';
  4 | 
  5 | class ManifestActionComponent extends React.Component {
  6 |   static propTypes = {
  7 |     diff        : PropTypes.array,
  8 |     toggleAction: PropTypes.func,
  9 |     index       : PropTypes.number,
 10 |     action      : PropTypes.object,
 11 |     skipped     : PropTypes.bool,
 12 |     expanded    : PropTypes.bool,
 13 |     currentState: PropTypes.object,
 14 |   };
 15 | 
 16 |   state = {
 17 |     expanded: false,
 18 |   };
 19 | 
 20 |   shouldComponentUpdate(nextProps, nextState) {
 21 |     const a = JSON.stringify(this.props.currentState);
 22 |     const b = JSON.stringify(nextProps.currentState);
 23 |     return a !== b ||
 24 |       this.state.expanded !== nextState.expanded ||
 25 |       this.props.skipped !== nextProps.skipped;
 26 |   }
 27 | 
 28 |   getDiffs() {
 29 |     const { diff } = this.props;
 30 |     return diff.map((d, i) => this.renderDiff(d, i));
 31 |   }
 32 | 
 33 |   createOldValue(diff) {
 34 |     if (diff.item) {
 35 |       return (JSON.stringify(diff.item.lhs));
 36 |     }
 37 | 
 38 |     return JSON.stringify(diff.lhs);
 39 |   }
 40 | 
 41 |   createNewValue(diff) {
 42 |     if (diff.item) {
 43 |       return (JSON.stringify(diff.item.rhs));
 44 |     }
 45 | 
 46 |     return JSON.stringify(diff.rhs);
 47 |   }
 48 | 
 49 |   createPath(diff) {
 50 |     let path = [];
 51 | 
 52 |     if (diff.path) {
 53 |       path = path.concat(diff.path);
 54 |     }
 55 |     if (typeof(diff.index) !== 'undefined') {
 56 |       path.push(diff.index);
 57 |     }
 58 |     return path.length ? path.join('.') : '';
 59 |   }
 60 | 
 61 |   disableAction = () => {
 62 |     this.props.toggleAction(this.props.index);
 63 |     this.setState({
 64 |       expanded: false,
 65 |     });
 66 |   };
 67 | 
 68 |   expandAction = () => {
 69 |     this.setState({
 70 |       expanded: !this.state.expanded,
 71 |     });
 72 |   };
 73 | 
 74 |   renderDiff(diff, index) {
 75 |     const oldValue = this.createOldValue(diff);
 76 |     const newValue = this.createNewValue(diff);
 77 |     const path     = this.createPath(diff);
 78 |     return (
 79 |       <div key={index}>
 80 |         { path }: <span className={css(styles.oldValue)}>{ oldValue || 'undefined' }</span>
 81 |         <span className={css(styles.newValue)}> { newValue } </span>
 82 |       </div>
 83 |     );
 84 |   }
 85 | 
 86 |   render() {
 87 |     const { action: { action }, diff, skipped } = this.props;
 88 |     const expanded        = this.props.expanded || this.state.expanded;
 89 |     const storeHasChanged = !!diff.length;
 90 |     const changes         = this.getDiffs();
 91 | 
 92 |     const actionSummary = this.state.expanded ?
 93 |       <div className={css(styles.code)}>
 94 |         <JSONTree data={action} />
 95 |       </div> : null;
 96 | 
 97 |     const changesToStore = (expanded && storeHasChanged) ?
 98 |       <div
 99 |         className={`${css(styles.code)} diff`}
100 |       >
101 |         {changes}
102 |       </div> : null;
103 | 
104 |     const enableToggle = skipped ? 'enable' : 'disable';
105 | 
106 |     return (
107 |       <div className={`${css(styles.container)} manifest-action-component`}>
108 |         <div>
109 |           <div className={css(
110 |             styles.header,
111 |             this.state.expanded && styles.bottomBordered,
112 |             storeHasChanged && styles.mutated
113 |           )}
114 |           >
115 |             <div>
116 |               <div style={{ display: 'flex', flexDirection: 'row' }}>
117 |                 <div
118 |                   style={{ flex: '1 0 auto' }}
119 |                   className={css(skipped && styles.skipped)}
120 |                   onClick={this.expandAction}
121 |                 >
122 |                   <span>{action.type}</span>
123 |                 </div>
124 |                 <div>
125 |                 <span
126 |                   onClick={this.disableAction}
127 |                   className={css(styles.toggle)}
128 |                 >
129 |                   {enableToggle}
130 |                 </span>
131 |                 </div>
132 |               </div>
133 |             </div>
134 |           </div>
135 |           {actionSummary}
136 |           {changesToStore}
137 |         </div>
138 |       </div>
139 |     );
140 |   }
141 | }
142 | 
143 | const styles = StyleSheet.create({
144 |   container: {
145 |     marginBottom: '10px',
146 |     border      : '1px solid #ddd',
147 |     background  : '#eee',
148 |   },
149 | 
150 |   header: {
151 |     padding: 10,
152 |   },
153 | 
154 |   bottomBordered: {
155 |     borderBottom: '1px solid #ddd',
156 |   },
157 | 
158 |   toggle: {
159 |     padding       : '0 5px',
160 |     flex          : '1 0 auto',
161 |     textAlign     : 'right',
162 |     textDecoration: 'underline',
163 |   },
164 | 
165 |   title: {
166 |     cursor          : 'pointer',
167 |     padding         : '12px',
168 |     background      : '#ddd',
169 |     userSelect      : 'none',
170 |     WebkitUserSelect: 'none',
171 |   },
172 | 
173 |   mutated: {
174 |     background: 'lightgreen',
175 |   },
176 | 
177 |   skipped: {
178 |     textDecoration: 'line-through',
179 |   },
180 | 
181 |   code: {
182 |     border    : '1px solid #ddd',
183 |     background: 'white',
184 |     padding   : 5,
185 |     wordWrap  : 'normal',
186 |     fontFamily: 'monospace',
187 |     margin    : '10',
188 |   },
189 | 
190 |   changedProperty: {
191 |     display: 'block',
192 |   },
193 | 
194 |   oldValue: {
195 |     textDecoration: 'line-through',
196 |     color         : 'pink',
197 |   },
198 | 
199 |   newValue: {
200 |     color: 'darkgreen',
201 |   },
202 | });
203 | 
204 | export default ManifestActionComponent;
205 | 


--------------------------------------------------------------------------------
/src/button/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import { StyleSheet, css } from 'aphrodite';
 3 | 
 4 | const ManifestButton = ({ label, action }) => (
 5 |   <div className={css(styles.button)} onClick={action}>
 6 |     {label}
 7 |   </div>
 8 | );
 9 | 
10 | const styles = StyleSheet.create({
11 |   button: {
12 |     flex     : '1 0 auto',
13 |     cursor   : 'pointer',
14 |     color    : 'black',
15 |     display  : 'inline-block',
16 |     padding  : '10px 0',
17 |     textAlign: 'center',
18 |     ':hover' : {
19 |       backgroundColor: '#eee',
20 |     },
21 |   },
22 | });
23 | 
24 | ManifestButton.propTypes = {
25 |   label : PropTypes.string,
26 |   action: PropTypes.func,
27 | };
28 | 
29 | export default ManifestButton;
30 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import ManifestAction from './action';
 3 | import ManifestButton from './button';
 4 | import diffState from './utils/diff-state';
 5 | import { ActionCreators } from 'redux-devtools';
 6 | import { StyleSheet, css } from 'aphrodite';
 7 | const { reset, rollback, commit, toggleAction, jumpToState } = ActionCreators;
 8 | 
 9 | export default class ManifestComponent extends React.Component {
10 |   static propTypes = {
11 |     computedStates  : PropTypes.array,
12 |     actionsById     : PropTypes.object,
13 |     stagedActionIds : PropTypes.array,
14 |     skippedActionIds: PropTypes.array,
15 |     dispatch        : PropTypes.func,
16 |   };
17 | 
18 |   static update = () => {
19 |   };
20 | 
21 |   handleJumpTo = id => {
22 |     this.props.dispatch(jumpToState(id));
23 |   };
24 | 
25 |   handleToggleAction = id => {
26 |     this.props.dispatch(toggleAction(id));
27 |   };
28 | 
29 |   renderAction = id => {
30 |     const action         = this.props.actionsById[id];
31 |     const diffedStates   = diffState(this.props.computedStates, id);
32 |     const skippingAction = this.props.skippedActionIds.indexOf(id) !== -1;
33 | 
34 |     return (
35 |       <ManifestAction
36 |         action={action}
37 |         index={id}
38 |         key={id}
39 |         diff={diffedStates}
40 |         skipped={skippingAction}
41 |         toggleAction={() => this.handleToggleAction(id)}
42 |         jumpTo={() => this.handleJumpTo(id)}
43 |       />
44 |     );
45 |   };
46 | 
47 |   render() {
48 |     const actionReports = this.props.stagedActionIds.map(this.renderAction);
49 |     const { dispatch } = this.props;
50 | 
51 |     return (
52 |       <div className={css(styles.wrap)}>
53 |         <div className={css(styles.container)}>
54 |           <ManifestButton label="Commit" action={() => dispatch(commit())} />
55 |           <ManifestButton label="Rollback" action={() => dispatch(rollback())} />
56 |           <ManifestButton label="Reset" action={() => dispatch(reset())} />
57 |         </div>
58 |         <div className={css(styles.actions)}>
59 |           {actionReports.reverse()}
60 |         </div>
61 |       </div>
62 |     );
63 |   }
64 | }
65 | 
66 | const styles = StyleSheet.create({
67 |   wrap: {
68 |     overflowY: 'auto',
69 |     width: '100%',
70 |     height: '100%',
71 |     minWidth: 300,
72 |   },
73 |   container: {
74 |     display      : 'flex',
75 |     flexDirection: 'row',
76 |     flexWrap     : 'nowrap',
77 |     borderBottom : '1px solid #ddd',
78 |   },
79 |   actions  : {
80 |     margin: '10px',
81 |   },
82 | });
83 | 


--------------------------------------------------------------------------------
/src/utils/diff-state.js:
--------------------------------------------------------------------------------
 1 | import deep from 'deep-diff';
 2 | import Immutable from 'immutable';
 3 | 
 4 | export default (computedStates, index) => {
 5 |   if (index !== 0) {
 6 |     const newState = Immutable.fromJS({
 7 |       state: computedStates[index].state,
 8 |     }).toJS().state;
 9 | 
10 |     const oldState = Immutable.fromJS({
11 |       state: computedStates[index - 1].state,
12 |     }).toJS().state;
13 | 
14 |     const diff = deep.diff(oldState, newState);
15 | 
16 |     return diff || [];
17 |   }
18 | 
19 |   return [];
20 | };
21 | 


--------------------------------------------------------------------------------
/test/action/index.spec.js:
--------------------------------------------------------------------------------
  1 | /* eslint-env mocha */
  2 | 
  3 | import { expect } from 'chai';
  4 | import React from 'react';
  5 | import ReactDOM from 'react-dom';
  6 | import ManifestActionComponent from '../../src/action/index';
  7 | import TestUtils from 'react-addons-test-utils';
  8 | 
  9 | describe('ManifestActionComponent', () => {
 10 |     const mockProps = {
 11 |         action: {
 12 |             type: 'PERFORM_ACTION',
 13 |             action: { type: 'ACTION_1' },
 14 |         },
 15 |         diff: [],
 16 |         expanded: true,
 17 |     };
 18 | 
 19 |     const render = props => {
 20 |         const element = React.createElement(ManifestActionComponent, props);
 21 | 
 22 |         return TestUtils.renderIntoDocument(element);
 23 |     };
 24 | 
 25 |     // it('should show actions', () => {
 26 |     //     const rendered = render(mockProps);
 27 |     //
 28 |     //     expect(
 29 |     //         ReactDOM.findDOMNode(rendered).querySelectorAll('.ACTION_1')
 30 |     //     ).to.have.length(1);
 31 |     // });
 32 | 
 33 |     describe('diff', () => {
 34 |         it('should show no diff if the data has not changed', () => {
 35 |             const rendered = render(mockProps);
 36 | 
 37 |             expect(
 38 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')
 39 |             ).to.have.length(0);
 40 |         });
 41 | 
 42 |         it('should show the correct diff when comparing objects having other properties', () => {
 43 |             const rendered = render(Object.assign({}, mockProps, {
 44 |                 diff: [{
 45 |                     kind: 'E', path: ['key'], lhs: {}, rhs: {
 46 |                         other: 'property',
 47 |                         another: 13.13,
 48 |                     },
 49 |                 }],
 50 |             }));
 51 | 
 52 |             expect(
 53 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
 54 |             ).to.eql('key: {} {"other":"property","another":13.13}');
 55 |         });
 56 | 
 57 |         it('should show the correct diff when replacing an object with an empty object', () => {
 58 |             const rendered = render(Object.assign({}, mockProps, {
 59 |                 diff: [{ kind: 'D', path: ['one'], lhs: 'property' }],
 60 |             }));
 61 | 
 62 |             expect(
 63 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
 64 |             ).to.eql('one: "property"');
 65 |         });
 66 | 
 67 |         it('should show the correct diff when comparing changes in nested objects', () => {
 68 |             const rendered = render(Object.assign({}, mockProps, {
 69 |                 diff: [{ kind: 'E', path: ['levelOne', 'levelTwo'], lhs: 'value', rhs: 'another value' }],
 70 |             }));
 71 | 
 72 |             expect(
 73 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
 74 |             ).to.eql('levelOne.levelTwo: "value" "another value"');
 75 |         });
 76 | 
 77 |         it('should show the correct diff when comparing changes in arrays', () => {
 78 |             const rendered = render(Object.assign({}, mockProps, {
 79 |                 diff: [
 80 |                     { kind: 'E', path: [0], lhs: 1, rhs: 2 },
 81 |                     { kind: 'E', path: [1], lhs: 2, rhs: 3 },
 82 |                     { kind: 'E', path: [2], lhs: 3, rhs: 4 },
 83 |                 ],
 84 |             }));
 85 | 
 86 |             expect(
 87 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
 88 |             ).to.eql('0: 1 2 1: 2 3 2: 3 4');
 89 |         });
 90 | 
 91 |         it('should show the correct diff when comparing changes in arrays inside objects', () => {
 92 |             const rendered = render(Object.assign({}, mockProps, {
 93 |                 diff: [
 94 |                     { kind: 'E', path: ['a', 0], lhs: 1, rhs: 2 },
 95 |                     { kind: 'E', path: ['a', 1], lhs: 2, rhs: 3 },
 96 |                     { kind: 'E', path: ['a', 2], lhs: 3, rhs: 4 },
 97 |                 ],
 98 |             }));
 99 | 
100 |             expect(
101 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
102 |             ).to.eql('a.0: 1 2 a.1: 2 3 a.2: 3 4');
103 |         });
104 | 
105 |         it('should show the correct diff when item removed from array', () => {
106 |             const rendered = render(Object.assign({}, mockProps, {
107 |                 diff: [
108 |                     { kind: 'E', path: [0], lhs: 1, rhs: 2 },
109 |                     { kind: 'E', path: [1], lhs: 2, rhs: 3 },
110 |                     { kind: 'A', index: 2, item: { kind: 'D', lhs: 3 } },
111 |                 ],
112 |             }));
113 | 
114 |             expect(
115 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
116 |             ).to.eql('0: 1 2 1: 2 3 2: 3');
117 |         });
118 | 
119 |         it('should show the correct diff when item removed from array inside an object', () => {
120 |             const rendered = render(Object.assign({}, mockProps, {
121 |                 diff: [
122 |                     { kind: 'E', path: ['a', 0], lhs: 1, rhs: 2 },
123 |                     { kind: 'E', path: ['a', 1], lhs: 2, rhs: 3 },
124 |                     { kind: 'A', path: ['a'], index: 2, item: { kind: 'D', lhs: 3 } }],
125 |             }));
126 | 
127 |             expect(
128 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
129 |             ).to.eql('a.0: 1 2 a.1: 2 3 a.2: 3');
130 |         });
131 | 
132 |         it('should diff items added to an array', () => {
133 |             const rendered = render(Object.assign({}, mockProps, {
134 |                 diff: [{ kind: 'A', index: 2, item: { kind: 'N', rhs: 3 } }],
135 |             }));
136 | 
137 |             expect(
138 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
139 |             ).to.eql('2: undefined 3');
140 |         });
141 | 
142 |         it('should diff complex objects', () => {
143 |             const rendered = render(Object.assign({}, mockProps, {
144 |                 diff: [
145 |                     { kind: 'A', path: ['ids'], index: 0, item: { kind: 'N', rhs: 2 } },
146 |                     { kind: 'A', path: ['ids'], index: 1, item: { kind: 'N', rhs: 3 } },
147 |                     { kind: 'E', path: ['turn'], lhs: 0, rhs: 1 },
148 |                     { kind: 'E', path: ['round'], lhs: 0, rhs: 1 },
149 |                 ],
150 |             }));
151 | 
152 |             expect(
153 |                 ReactDOM.findDOMNode(rendered).querySelectorAll('.diff')[0].textContent.trim()
154 |             ).to.equal('ids.0: undefined 2 ids.1: undefined 3 turn: 0 1 round: 0 1');
155 |         });
156 |     });
157 | });
158 | 


--------------------------------------------------------------------------------
/test/index.spec.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env mocha */
 2 | 
 3 | import { expect } from 'chai';
 4 | import React from 'react';
 5 | import ReactDOM from 'react-dom';
 6 | import ManifestComponent from '../src/index';
 7 | import TestUtils from 'react-addons-test-utils';
 8 | 
 9 | describe('ManifestComponent', () => {
10 |     it('should show actions', () => {
11 |         const element = React.createElement(ManifestComponent, {
12 |             computedStates: [{}, {}],
13 |             actionsById: {
14 |                 0: {
15 |                     type: 'PERFORM_ACTION',
16 |                     action: {
17 |                         type: 'TEST_ACTION_1',
18 |                     },
19 |                 },
20 |                 1: {
21 |                     type: 'PERFORM_ACTION',
22 |                     action: {
23 |                         type: 'TEST_ACTION_2',
24 |                     },
25 |                 },
26 |             },
27 |             stagedActionIds: [0, 1],
28 |             skippedActionIds: [],
29 |             dispatch: () => {},
30 |         });
31 | 
32 |         const rendered = TestUtils.renderIntoDocument(element);
33 |         expect(
34 |             ReactDOM.findDOMNode(rendered).querySelectorAll('.manifest-action-component')
35 |         ).to.have.length(2);
36 |     });
37 | });
38 | 


--------------------------------------------------------------------------------
/test/mocha.opts:
--------------------------------------------------------------------------------
1 | --require test/test-utils/dom.js
2 | --require should
3 | --reporter nyan
4 | --recursive


--------------------------------------------------------------------------------
/test/test-utils/dom.js:
--------------------------------------------------------------------------------
 1 | var jsdom = require('jsdom')
 2 | 
 3 | // setup the simplest document possible
 4 | var doc = jsdom.jsdom('<!doctype html><html><body></body></html>')
 5 | 
 6 | // get the window object out of the document
 7 | var win = doc.defaultView;
 8 | 
 9 | // set globals for mocha that make access to document and window feel
10 | // natural in the test environment
11 | global.document = doc
12 | global.window = win
13 | 
14 | // take all properties of the window object and also attach it to the
15 | // mocha global object
16 | propagateToGlobal(win)
17 | 
18 | // from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80
19 | function propagateToGlobal (window) {
20 |   for (let key in window) {
21 |     if (!window.hasOwnProperty(key)) continue
22 |     if (key in global) continue
23 | 
24 |     global[key] = window[key]
25 |   }
26 | }


--------------------------------------------------------------------------------
/test/utils/diff-state.spec.js:
--------------------------------------------------------------------------------
   1 | import { expect } from 'chai';
   2 | import diffState from '../../src/utils/diff-state';
   3 | import Immutable from 'immutable';
   4 | 
   5 | describe('diffState', () => {
   6 |   let computedStates = [{}, {}];
   7 | 
   8 |   const empty = {};
   9 | 
  10 |   describe('Plain JavaScript data', () => {
  11 | 
  12 |     describe('A target that has no properties', () => {
  13 |       computedStates[0].state = empty;
  14 | 
  15 |       it('shows no differences when compared to another empty object', () => {
  16 |         computedStates[1].state = {};
  17 | 
  18 |         const diff = diffState(computedStates, 1);
  19 | 
  20 |         expect(diff).to.be.an('array');
  21 |         expect(diff).to.have.length(0);
  22 |       });
  23 |     });
  24 | 
  25 |     describe('when compared to a different type of keyless object', () => {
  26 |       const aDate = new Date();
  27 | 
  28 |       const comparandTuples = [
  29 |         ['an array', {
  30 |           key: []
  31 |         }],
  32 |         ['an object', {
  33 |           key: {}
  34 |         }],
  35 |         ['a date', {
  36 |           key: aDate
  37 |         }],
  38 |         ['a null', {
  39 |           key: null
  40 |         }]
  41 |       ];
  42 | 
  43 |       comparandTuples.forEach(function(lhsTuple) {
  44 |         comparandTuples.forEach(function(rhsTuple) {
  45 |           if (lhsTuple[0] === rhsTuple[0]) {
  46 |             return;
  47 |           }
  48 | 
  49 |           it('shows differences when comparing ' + lhsTuple[0] + ' to ' + rhsTuple[0], () => {
  50 |             computedStates[0].state = lhsTuple[1];
  51 |             computedStates[1].state = rhsTuple[1];
  52 | 
  53 |             const diff = diffState(computedStates, 1);
  54 | 
  55 |             expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
  56 | 
  57 |             if (lhsTuple[0] === comparandTuples[0][0]) {
  58 |               expect(JSON.stringify(diff[0].lhs)).to.eql('[]');
  59 |             } else if (lhsTuple[0] === comparandTuples[1][0]) {
  60 |               expect(JSON.stringify(diff[0].lhs)).to.eql('{}');
  61 |             } else if (lhsTuple[0] === comparandTuples[2][0]) {
  62 |               expect(JSON.stringify(diff[0].lhs)).to.eql('"' + aDate.toISOString() + '"');
  63 |             } else if (lhsTuple[0] === comparandTuples[3][0]) {
  64 |               expect(JSON.stringify(diff[0].lhs)).to.eql('null');
  65 |             }
  66 | 
  67 |             if (rhsTuple[0] === comparandTuples[0][0]) {
  68 |               expect(JSON.stringify(diff[0].rhs)).to.eql('[]');
  69 |             } else if (rhsTuple[0] === comparandTuples[1][0]) {
  70 |               expect(JSON.stringify(diff[0].rhs)).to.eql('{}');
  71 |             } else if (rhsTuple[0] === comparandTuples[2][0]) {
  72 |               expect(JSON.stringify(diff[0].rhs)).to.eql('"' + aDate.toISOString() + '"');
  73 |             } else if (rhsTuple[0] === comparandTuples[3][0]) {
  74 |               expect(JSON.stringify(diff[0].rhs)).to.eql('null');
  75 |             }
  76 |           });
  77 |         });
  78 |       });
  79 |     });
  80 | 
  81 |     describe('when compared with an object having other properties', () => {
  82 |       computedStates[0].state = empty;
  83 |       computedStates[1].state = {
  84 |         other: 'property',
  85 |         another: 13.13
  86 |       };
  87 | 
  88 |       const diff = diffState(computedStates, 1);
  89 | 
  90 |       it('the differences are reported', () => {
  91 | 
  92 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"other"');
  93 |         expect(JSON.stringify(diff[0].lhs)).be.undefined;
  94 |         expect(JSON.stringify(diff[0].rhs)).eql('"property"');
  95 | 
  96 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"another"');
  97 |         expect(JSON.stringify(diff[1].lhs)).be.undefined;
  98 |         expect(JSON.stringify(diff[1].rhs)).eql('13.13');
  99 |       });
 100 | 
 101 |     });
 102 | 
 103 |     describe('A target that has one property', function() {
 104 |       const lhs = {
 105 |         one: 'property'
 106 |       };
 107 | 
 108 |       it('shows no differences when compared to itself', function() {
 109 |         computedStates[0].state = lhs;
 110 |         computedStates[1].state = lhs;
 111 | 
 112 |         const diff = diffState(computedStates, 1);
 113 |         expect(diff).to.be.an.array;
 114 |         expect(diff).to.have.length(0);
 115 |       });
 116 | 
 117 |       it('shows the property as removed when compared to an empty object', function() {
 118 |         computedStates[0].state = lhs;
 119 |         computedStates[1].state = empty;
 120 | 
 121 |         const diff = diffState(computedStates, 1);
 122 | 
 123 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"one"');
 124 |         expect(JSON.stringify(diff[0].lhs)).eql('"property"');
 125 |         expect(JSON.stringify(diff[0].rhs)).be.undefined;
 126 |       });
 127 | 
 128 |       it('shows the property as edited when compared to an object with null', function() {
 129 |         computedStates[0].state = lhs;
 130 |         computedStates[1].state = {
 131 |           one: null
 132 |         };
 133 | 
 134 |         const diff = diffState(computedStates, 1);
 135 | 
 136 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"one"');
 137 |         expect(JSON.stringify(diff[0].lhs)).eql('"property"');
 138 |         expect(JSON.stringify(diff[0].rhs)).eql('null');
 139 |       });
 140 | 
 141 |       it('shows the property as edited when compared to an array', function() {
 142 |         computedStates[0].state = lhs;
 143 |         computedStates[1].state = ['one'];
 144 | 
 145 |         const diff = diffState(computedStates, 1);
 146 | 
 147 |         expect(diff[0].path).to.be.undefined;
 148 |         expect(JSON.stringify(diff[0].lhs)).eql('{"one":"property"}');
 149 |         expect(JSON.stringify(diff[0].rhs)).eql('["one"]');
 150 |       });
 151 | 
 152 |     });
 153 | 
 154 |     describe('A target that has null value', function() {
 155 |       const lhs = {
 156 |         key: null
 157 |       };
 158 | 
 159 |       it('shows no differences when compared to itself', function() {
 160 |         computedStates[0].state = lhs;
 161 |         computedStates[1].state = lhs;
 162 | 
 163 |         const diff = diffState(computedStates, 1);
 164 | 
 165 |         expect(diff).to.be.an.array;
 166 |         expect(diff).to.have.length(0);
 167 |       });
 168 | 
 169 |       it('shows the property as removed when compared to an empty object', function() {
 170 |         computedStates[0].state = lhs;
 171 |         computedStates[1].state = empty;
 172 | 
 173 |         const diff = diffState(computedStates, 1);
 174 | 
 175 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 176 |         expect(JSON.stringify(diff[0].lhs)).eql('null');
 177 |         expect(JSON.stringify(diff[0].rhs)).be.undefined;
 178 |       });
 179 | 
 180 |       it('shows the property is changed when compared to an object that has value', function() {
 181 |         computedStates[0].state = lhs;
 182 |         computedStates[1].state = {
 183 |           key: 'value'
 184 |         };
 185 | 
 186 |         const diff = diffState(computedStates, 1);
 187 | 
 188 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 189 |         expect(JSON.stringify(diff[0].lhs)).eql('null');
 190 |         expect(JSON.stringify(diff[0].rhs)).eql('"value"');
 191 |       });
 192 | 
 193 |       it('shows that an object property is changed when it is set to null', function() {
 194 |         lhs.key = {
 195 |           nested: 'value'
 196 |         };
 197 | 
 198 |         computedStates[0].state = lhs;
 199 |         computedStates[1].state = {
 200 |           key: null
 201 |         };
 202 | 
 203 |         const diff = diffState(computedStates, 1);
 204 | 
 205 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 206 |         expect(JSON.stringify(diff[0].lhs)).eql('{"nested":"value"}');
 207 |         expect(JSON.stringify(diff[0].rhs)).eql('null');
 208 |       });
 209 | 
 210 |     });
 211 | 
 212 |     describe('A target that has a NaN', function() {
 213 |       const lhs = {
 214 |         key: NaN
 215 |       };
 216 | 
 217 |       it('shows the property is changed when compared to another number', function() {
 218 |         computedStates[0].state = lhs;
 219 |         computedStates[1].state = {
 220 |           key: 0
 221 |         };
 222 | 
 223 |         const diff = diffState(computedStates, 1);
 224 | 
 225 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 226 |         expect(JSON.stringify(diff[0].lhs)).eql('null');
 227 |         expect(JSON.stringify(diff[0].rhs)).eql('0');
 228 |       });
 229 | 
 230 |       it('shows no differences when compared to another NaN', function() {
 231 |         computedStates[0].state = lhs;
 232 |         computedStates[1].state = {
 233 |           key: NaN
 234 |         };
 235 | 
 236 |         const diff = diffState(computedStates, 1);
 237 | 
 238 |         expect(diff).to.be.an.array;
 239 |         expect(diff).to.have.length(0);
 240 |       });
 241 | 
 242 |     });
 243 | 
 244 |     describe('A target that has nested values', function() {
 245 |       const nestedOne = {
 246 |         noChange: 'same',
 247 |         levelOne: {
 248 |           levelTwo: 'value'
 249 |         }
 250 |       };
 251 |       const nestedTwo = {
 252 |         noChange: 'same',
 253 |         levelOne: {
 254 |           levelTwo: 'another value'
 255 |         }
 256 |       };
 257 | 
 258 |       it('shows no differences when compared to itself', function() {
 259 |         computedStates[0].state = nestedOne;
 260 |         computedStates[1].state = nestedOne;
 261 | 
 262 |         const diff = diffState(computedStates, 1);
 263 | 
 264 |         expect(diff).to.be.an.array;
 265 |         expect(diff).to.have.length(0);
 266 |       });
 267 | 
 268 |       it('shows the property as removed when compared to an empty object', function() {
 269 |         computedStates[0].state = nestedOne;
 270 |         computedStates[1].state = empty;
 271 | 
 272 |         const diff = diffState(computedStates, 1);
 273 | 
 274 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"noChange"');
 275 |         expect(JSON.stringify(diff[0].lhs)).eql('"same"');
 276 |         expect(JSON.stringify(diff[0].rhs)).to.be.undefined;
 277 | 
 278 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"levelOne"');
 279 |         expect(JSON.stringify(diff[1].lhs)).eql('{"levelTwo":"value"}');
 280 |         expect(JSON.stringify(diff[1].rhs)).be.undefined;
 281 |       });
 282 | 
 283 |       it('shows the property is changed when compared to an object that has value', function() {
 284 |         computedStates[0].state = nestedOne;
 285 |         computedStates[1].state = nestedTwo;
 286 | 
 287 |         const diff = diffState(computedStates, 1);
 288 | 
 289 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"levelOne.levelTwo"');
 290 |         expect(JSON.stringify(diff[0].lhs)).eql('"value"');
 291 |         expect(JSON.stringify(diff[0].rhs)).eql('"another value"');
 292 |       });
 293 | 
 294 |       it('shows the property as added when compared to an empty object on left', function() {
 295 |         computedStates[0].state = empty;
 296 |         computedStates[1].state = nestedOne;
 297 | 
 298 |         const diff = diffState(computedStates, 1);
 299 | 
 300 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"noChange"');
 301 |         expect(JSON.stringify(diff[0].lhs)).be.undefined;
 302 |         expect(JSON.stringify(diff[0].rhs)).eql('"same"');
 303 | 
 304 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"levelOne"');
 305 |         expect(JSON.stringify(diff[1].lhs)).to.be.undefined;
 306 |         expect(JSON.stringify(diff[1].rhs)).eql('{"levelTwo":"value"}');
 307 |       });
 308 |     });
 309 | 
 310 |     describe('Working with arrays', () => {
 311 | 
 312 |       it('should diff items changed in an array', () => {
 313 |         computedStates[0].state = [1, 2, 3];
 314 |         computedStates[1].state = [2, 3, 4];
 315 | 
 316 |         const diff = diffState(computedStates, 1);
 317 | 
 318 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"0"');
 319 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 320 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 321 | 
 322 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"1"');
 323 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 324 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 325 | 
 326 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"2"');
 327 |         expect(JSON.stringify(diff[2].lhs)).to.eql('3');
 328 |         expect(JSON.stringify(diff[2].rhs)).eql('4');
 329 |       });
 330 | 
 331 |       it('should diff items changed in an array inside an object', () => {
 332 |         computedStates[0].state = {
 333 |           a: [1, 2, 3]
 334 |         };
 335 |         computedStates[1].state = {
 336 |           a: [2, 3, 4]
 337 |         };
 338 | 
 339 |         const diff = diffState(computedStates, 1);
 340 | 
 341 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.0"');
 342 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 343 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 344 | 
 345 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"a.1"');
 346 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 347 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 348 | 
 349 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"a.2"');
 350 |         expect(JSON.stringify(diff[2].lhs)).to.eql('3');
 351 |         expect(JSON.stringify(diff[2].rhs)).eql('4');
 352 |       });
 353 | 
 354 |       it('should diff when item removed from array', () => {
 355 |         computedStates[0].state = [1, 2, 3];
 356 |         computedStates[1].state = [2, 3];
 357 | 
 358 |         const diff = diffState(computedStates, 1);
 359 | 
 360 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"0"');
 361 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 362 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 363 | 
 364 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"1"');
 365 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 366 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 367 | 
 368 |         expect(JSON.stringify(diff[2].index)).to.eql('2');
 369 |         expect(JSON.stringify(diff[2].item.lhs)).to.eql('3');
 370 |         expect(JSON.stringify(diff[2].item.rhs)).be.undefined;
 371 |       });
 372 | 
 373 |       it('should diff item removed from an array inside an object', () => {
 374 |         computedStates[0].state = {
 375 |           a: [1, 2, 3]
 376 |         };
 377 |         computedStates[1].state = {
 378 |           a: [2, 3]
 379 |         };
 380 | 
 381 |         const diff = diffState(computedStates, 1);
 382 | 
 383 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.0"');
 384 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 385 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 386 | 
 387 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"a.1"');
 388 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 389 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 390 | 
 391 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"a"');
 392 |         expect(JSON.stringify(diff[2].index)).to.eql('2');
 393 |         expect(JSON.stringify(diff[2].item.lhs)).to.eql('3');
 394 |         expect(JSON.stringify(diff[2].item.rhs)).be.undefined;
 395 |       });
 396 | 
 397 |       it('should diff items added to an array', () => {
 398 |         computedStates[0].state = [1, 2];
 399 |         computedStates[1].state = [1, 2, 3];
 400 | 
 401 |         const diff = diffState(computedStates, 1);
 402 | 
 403 |         expect(JSON.stringify(diff[0].index)).to.eql('2');
 404 |         expect(JSON.stringify(diff[0].item.lhs)).to.be.undefined;
 405 |         expect(JSON.stringify(diff[0].item.rhs)).eql('3');
 406 |       });
 407 | 
 408 |       it('should diff item added to an array inside an object', () => {
 409 |         computedStates[0].state = {
 410 |           a: [1, 2]
 411 |         };
 412 |         computedStates[1].state = {
 413 |           a: [2, 3, 4]
 414 |         };
 415 | 
 416 |         const diff = diffState(computedStates, 1);
 417 | 
 418 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.0"');
 419 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 420 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 421 | 
 422 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"a.1"');
 423 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 424 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 425 | 
 426 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"a"');
 427 |         expect(JSON.stringify(diff[2].index)).to.eql('2');
 428 |         expect(JSON.stringify(diff[2].item.lhs)).to.be.undefined;
 429 |         expect(JSON.stringify(diff[2].item.rhs)).to.eql('4');
 430 |       });
 431 |     });
 432 | 
 433 |   });
 434 | 
 435 |   describe('ImmutableJS data', () => {
 436 |     let computedStates = [{}, {}];
 437 | 
 438 |     const empty = Immutable.Map();
 439 | 
 440 |     describe('A target that has no properties', () => {
 441 |       computedStates[0].state = empty;
 442 | 
 443 |       it('shows no differences when compared to another empty object', () => {
 444 |         computedStates[1].state = Immutable.Map();
 445 | 
 446 |         const diff = diffState(computedStates, 1);
 447 | 
 448 |         expect(diff).to.be.an('array');
 449 |         expect(diff).to.have.length(0);
 450 |       });
 451 |     });
 452 | 
 453 |     describe('when compared to a different type of keyless object', () => {
 454 |       const aDate = new Date();
 455 | 
 456 |       const comparandTuples = [
 457 |         ['an array', {
 458 |           key: Immutable.fromJS([])
 459 |         }],
 460 |         ['an object', {
 461 |           key: Immutable.fromJS({})
 462 |         }],
 463 |         ['a date', {
 464 |           key: Immutable.fromJS(aDate)
 465 |         }],
 466 |         ['a null', {
 467 |           key: Immutable.fromJS(null)
 468 |         }],
 469 |         ['a regexp literal', {
 470 |           key: Immutable.fromJS(/a/)
 471 |         }]
 472 |       ];
 473 | 
 474 |       comparandTuples.forEach(function(lhsTuple) {
 475 |         comparandTuples.forEach(function(rhsTuple) {
 476 |           if (lhsTuple[0] === rhsTuple[0]) {
 477 |             return;
 478 |           }
 479 | 
 480 |           it('shows differences when comparing ' + lhsTuple[0] + ' to ' + rhsTuple[0], () => {
 481 |             computedStates[0].state = lhsTuple[1];
 482 |             computedStates[1].state = rhsTuple[1];
 483 | 
 484 |             const diff = diffState(computedStates, 1);
 485 | 
 486 |             expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 487 | 
 488 |             if (lhsTuple[0] === comparandTuples[0][0]) {
 489 |               expect(JSON.stringify(diff[0].lhs)).to.eql('[]');
 490 |             } else if (lhsTuple[0] === comparandTuples[1][0]) {
 491 |               expect(JSON.stringify(diff[0].lhs)).to.eql('{}');
 492 |             } else if (lhsTuple[0] === comparandTuples[2][0]) {
 493 |               expect(JSON.stringify(diff[0].lhs)).to.eql('"' + aDate.toISOString() + '"');
 494 |             } else if (lhsTuple[0] === comparandTuples[3][0]) {
 495 |               expect(JSON.stringify(diff[0].lhs)).to.eql('null');
 496 |             }
 497 | 
 498 |             if (rhsTuple[0] === comparandTuples[0][0]) {
 499 |               expect(JSON.stringify(diff[0].rhs)).to.eql('[]');
 500 |             } else if (rhsTuple[0] === comparandTuples[1][0]) {
 501 |               expect(JSON.stringify(diff[0].rhs)).to.eql('{}');
 502 |             } else if (rhsTuple[0] === comparandTuples[2][0]) {
 503 |               expect(JSON.stringify(diff[0].rhs)).to.eql('"' + aDate.toISOString() + '"');
 504 |             } else if (rhsTuple[0] === comparandTuples[3][0]) {
 505 |               expect(JSON.stringify(diff[0].rhs)).to.eql('null');
 506 |             }
 507 |           });
 508 |         });
 509 |       });
 510 |     });
 511 | 
 512 |     describe('when compared with an object having other properties', () => {
 513 |       computedStates[0].state = empty;
 514 |       computedStates[1].state = Immutable.fromJS({
 515 |         other: 'property',
 516 |         another: 13.13
 517 |       });
 518 | 
 519 |       const diff = diffState(computedStates, 1);
 520 | 
 521 |       it('the differences are reported', () => {
 522 | 
 523 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"other"');
 524 |         expect(JSON.stringify(diff[0].lhs)).be.undefined;
 525 |         expect(JSON.stringify(diff[0].rhs)).eql('"property"');
 526 | 
 527 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"another"');
 528 |         expect(JSON.stringify(diff[1].lhs)).be.undefined;
 529 |         expect(JSON.stringify(diff[1].rhs)).eql('13.13');
 530 |       });
 531 | 
 532 |     });
 533 | 
 534 |     describe('A target that has one property', function() {
 535 |       const lhs = Immutable.fromJS({
 536 |         one: 'property'
 537 |       });
 538 | 
 539 |       it('shows no differences when compared to itself', function() {
 540 |         computedStates[0].state = lhs;
 541 |         computedStates[1].state = lhs;
 542 | 
 543 |         const diff = diffState(computedStates, 1);
 544 |         expect(diff).to.be.an.array;
 545 |         expect(diff).to.have.length(0);
 546 |       });
 547 | 
 548 |       it('shows the property as removed when compared to an empty object', function() {
 549 |         computedStates[0].state = lhs;
 550 |         computedStates[1].state = empty;
 551 | 
 552 |         const diff = diffState(computedStates, 1);
 553 | 
 554 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"one"');
 555 |         expect(JSON.stringify(diff[0].lhs)).eql('"property"');
 556 |         expect(JSON.stringify(diff[0].rhs)).be.undefined;
 557 |       });
 558 | 
 559 |       it('shows the property as edited when compared to an object with null', function() {
 560 |         computedStates[0].state = lhs;
 561 |         computedStates[1].state = Immutable.fromJS({
 562 |           one: null
 563 |         });
 564 | 
 565 |         const diff = diffState(computedStates, 1);
 566 | 
 567 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"one"');
 568 |         expect(JSON.stringify(diff[0].lhs)).eql('"property"');
 569 |         expect(JSON.stringify(diff[0].rhs)).eql('null');
 570 |       });
 571 | 
 572 |       it('shows the property as edited when compared to an array', function() {
 573 |         computedStates[0].state = lhs;
 574 |         computedStates[1].state = Immutable.fromJS(['one']);
 575 | 
 576 |         const diff = diffState(computedStates, 1);
 577 | 
 578 |         expect(diff[0].path).to.be.undefined;
 579 |         expect(JSON.stringify(diff[0].lhs)).eql('{"one":"property"}');
 580 |         expect(JSON.stringify(diff[0].rhs)).eql('["one"]');
 581 |       });
 582 | 
 583 |     });
 584 | 
 585 |     describe('A target that has null value', function() {
 586 |       const lhs = Immutable.fromJS({
 587 |         key: null
 588 |       });
 589 | 
 590 |       it('shows no differences when compared to itself', function() {
 591 |         computedStates[0].state = lhs;
 592 |         computedStates[1].state = lhs;
 593 | 
 594 |         const diff = diffState(computedStates, 1);
 595 | 
 596 |         expect(diff).to.be.an.array;
 597 |         expect(diff).to.have.length(0);
 598 |       });
 599 | 
 600 |       it('shows the property as removed when compared to an empty object', function() {
 601 |         computedStates[0].state = lhs;
 602 |         computedStates[1].state = empty;
 603 | 
 604 |         const diff = diffState(computedStates, 1);
 605 | 
 606 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 607 |         expect(JSON.stringify(diff[0].lhs)).eql('null');
 608 |         expect(JSON.stringify(diff[0].rhs)).be.undefined;
 609 |       });
 610 | 
 611 |       it('shows the property is changed when compared to an object that has value', function() {
 612 |         computedStates[0].state = lhs;
 613 |         computedStates[1].state = Immutable.fromJS({
 614 |           key: 'value'
 615 |         });
 616 | 
 617 |         const diff = diffState(computedStates, 1);
 618 | 
 619 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 620 |         expect(JSON.stringify(diff[0].lhs)).eql('null');
 621 |         expect(JSON.stringify(diff[0].rhs)).eql('"value"');
 622 |       });
 623 | 
 624 |       it('shows that an object property is changed when it is set to null', function() {
 625 |         computedStates[0].state = lhs.set('key', {
 626 |           nested: 'value'
 627 |         });
 628 |         computedStates[1].state = Immutable.fromJS({
 629 |           key: null
 630 |         });
 631 | 
 632 |         const diff = diffState(computedStates, 1);
 633 | 
 634 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 635 |         expect(JSON.stringify(diff[0].lhs)).eql('{"nested":"value"}');
 636 |         expect(JSON.stringify(diff[0].rhs)).eql('null');
 637 |       });
 638 | 
 639 |     });
 640 | 
 641 | 
 642 |     describe('A target that has a NaN', function() {
 643 |       const lhs = Immutable.fromJS({
 644 |         key: NaN
 645 |       });
 646 | 
 647 |       it('shows the property is changed when compared to another number', function() {
 648 |         computedStates[0].state = lhs;
 649 |         computedStates[1].state = Immutable.fromJS({
 650 |           key: 0
 651 |         });
 652 | 
 653 |         const diff = diffState(computedStates, 1);
 654 | 
 655 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"key"');
 656 |         expect(JSON.stringify(diff[0].lhs)).eql('null');
 657 |         expect(JSON.stringify(diff[0].rhs)).eql('0');
 658 |       });
 659 | 
 660 |       it('shows no differences when compared to another NaN', function() {
 661 |         computedStates[0].state = lhs;
 662 |         computedStates[1].state = Immutable.fromJS({
 663 |           key: NaN
 664 |         });
 665 | 
 666 |         const diff = diffState(computedStates, 1);
 667 | 
 668 |         expect(diff).to.be.an.array;
 669 |         expect(diff).to.have.length(0);
 670 |       });
 671 | 
 672 |     });
 673 | 
 674 |     describe('A target that has nested values', function() {
 675 |       const nestedOne = Immutable.fromJS({
 676 |         noChange: 'same',
 677 |         levelOne: {
 678 |           levelTwo: 'value'
 679 |         }
 680 |       });
 681 |       const nestedTwo = Immutable.fromJS({
 682 |         noChange: 'same',
 683 |         levelOne: {
 684 |           levelTwo: 'another value'
 685 |         }
 686 |       });
 687 | 
 688 |       it('shows no differences when compared to itself', function() {
 689 |         computedStates[0].state = nestedOne;
 690 |         computedStates[1].state = nestedOne;
 691 | 
 692 |         const diff = diffState(computedStates, 1);
 693 | 
 694 |         expect(diff).to.be.an.array;
 695 |         expect(diff).to.have.length(0);
 696 |       });
 697 | 
 698 |       it('shows the property as removed when compared to an empty object', function() {
 699 |         computedStates[0].state = nestedOne;
 700 |         computedStates[1].state = empty;
 701 | 
 702 |         const diff = diffState(computedStates, 1);
 703 | 
 704 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"noChange"');
 705 |         expect(JSON.stringify(diff[0].lhs)).eql('"same"');
 706 |         expect(JSON.stringify(diff[0].rhs)).to.be.undefined;
 707 | 
 708 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"levelOne"');
 709 |         expect(JSON.stringify(diff[1].lhs)).eql('{"levelTwo":"value"}');
 710 |         expect(JSON.stringify(diff[1].rhs)).be.undefined;
 711 |       });
 712 | 
 713 |       it('shows the property is changed when compared to an object that has value', function() {
 714 |         computedStates[0].state = nestedOne;
 715 |         computedStates[1].state = nestedTwo;
 716 | 
 717 |         const diff = diffState(computedStates, 1);
 718 | 
 719 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"levelOne.levelTwo"');
 720 |         expect(JSON.stringify(diff[0].lhs)).eql('"value"');
 721 |         expect(JSON.stringify(diff[0].rhs)).eql('"another value"');
 722 |       });
 723 | 
 724 |       it('shows the property as added when compared to an empty object on left', function() {
 725 |         computedStates[0].state = empty;
 726 |         computedStates[1].state = nestedOne;
 727 | 
 728 |         const diff = diffState(computedStates, 1);
 729 | 
 730 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"noChange"');
 731 |         expect(JSON.stringify(diff[0].lhs)).be.undefined;
 732 |         expect(JSON.stringify(diff[0].rhs)).eql('"same"');
 733 | 
 734 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"levelOne"');
 735 |         expect(JSON.stringify(diff[1].lhs)).to.be.undefined;
 736 |         expect(JSON.stringify(diff[1].rhs)).eql('{"levelTwo":"value"}');
 737 |       });
 738 |     });
 739 | 
 740 |     describe('Immutable data in plain objects', function() {
 741 | 
 742 |       describe('Single level Immutable objects one level deep in plain object', () => {
 743 | 
 744 |         const nestedOne = {
 745 |           a: Immutable.fromJS({
 746 |             one: 'something'
 747 |           })
 748 |         };
 749 | 
 750 |         const nestedTwo = {
 751 |           a: Immutable.fromJS({
 752 |             one: 'somethingElse'
 753 |           })
 754 |         };
 755 | 
 756 |         it('shows the property is changed when compared to an object that has value', () => {
 757 |           computedStates[0].state = nestedOne;
 758 |           computedStates[1].state = nestedTwo;
 759 | 
 760 |           const diff = diffState(computedStates, 1);
 761 | 
 762 |           expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.one"');
 763 |           expect(JSON.stringify(diff[0].lhs)).eql('"something"');
 764 |           expect(JSON.stringify(diff[0].rhs)).eql('"somethingElse"');
 765 |         });
 766 |       });
 767 | 
 768 |       describe('Nested Immutable objects one level deep in plain object', () => {
 769 | 
 770 |         const nestedOne = {
 771 |           a: Immutable.fromJS({
 772 |             one: {
 773 |               two: 'something'
 774 |             }
 775 |           })
 776 |         };
 777 | 
 778 |         const nestedTwo = {
 779 |           a: Immutable.fromJS({
 780 |             one: {
 781 |               two: 'somethingElse'
 782 |             }
 783 |           })
 784 |         };
 785 | 
 786 |         const nestedThree = {
 787 |           a: Immutable.fromJS({
 788 |             one: {
 789 |               two: 'somethingElse'
 790 |             },
 791 |             three: {
 792 |               four: "cheese"
 793 |             }
 794 |           })
 795 |         };
 796 | 
 797 |         it('shows the property is changed when compared to an object that has value', () => {
 798 |           computedStates[0].state = nestedOne;
 799 |           computedStates[1].state = nestedTwo;
 800 | 
 801 |           const diff = diffState(computedStates, 1);
 802 | 
 803 |           expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.one.two"');
 804 |           expect(JSON.stringify(diff[0].lhs)).eql('"something"');
 805 |           expect(JSON.stringify(diff[0].rhs)).eql('"somethingElse"');
 806 |         });
 807 | 
 808 |         it('shows properties change when compared to an object that has value', () => {
 809 |           computedStates[0].state = nestedOne;
 810 |           computedStates[1].state = nestedThree;
 811 | 
 812 |           const diff = diffState(computedStates, 1);
 813 | 
 814 |           expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.one.two"');
 815 |           expect(JSON.stringify(diff[0].lhs)).eql('"something"');
 816 |           expect(JSON.stringify(diff[0].rhs)).eql('"somethingElse"');
 817 | 
 818 |           expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"a.three"');
 819 |           expect(JSON.stringify(diff[1].lhs)).to.be.undefined;
 820 |           expect(JSON.stringify(diff[1].rhs)).eql('{"four":"cheese"}');
 821 |         })
 822 |       });
 823 |     });
 824 | 
 825 |     describe('Working with arrays', () => {
 826 | 
 827 |       it('should diff items changed in an array', () => {
 828 |         computedStates[0].state = Immutable.List([1, 2, 3]);
 829 |         computedStates[1].state = Immutable.List([2, 3, 4]);
 830 | 
 831 |         const diff = diffState(computedStates, 1);
 832 | 
 833 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"0"');
 834 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 835 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 836 | 
 837 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"1"');
 838 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 839 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 840 | 
 841 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"2"');
 842 |         expect(JSON.stringify(diff[2].lhs)).to.eql('3');
 843 |         expect(JSON.stringify(diff[2].rhs)).eql('4');
 844 |       });
 845 | 
 846 |       it('should diff items changed in an array inside an object', () => {
 847 |         computedStates[0].state = {
 848 |           a: Immutable.List([1, 2, 3])
 849 |         };
 850 |         computedStates[1].state = {
 851 |           a: Immutable.List([2, 3, 4])
 852 |         };
 853 | 
 854 |         const diff = diffState(computedStates, 1);
 855 | 
 856 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.0"');
 857 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 858 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 859 | 
 860 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"a.1"');
 861 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 862 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 863 | 
 864 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"a.2"');
 865 |         expect(JSON.stringify(diff[2].lhs)).to.eql('3');
 866 |         expect(JSON.stringify(diff[2].rhs)).eql('4');
 867 |       });
 868 | 
 869 |       it('should diff items changed in an array inside a map', () => {
 870 |         computedStates[0].state = Immutable.Map({
 871 |           a: [1, 2, 3]
 872 |         });
 873 |         computedStates[1].state = Immutable.Map({
 874 |           a: [2, 3, 4]
 875 |         });
 876 | 
 877 |         const diff = diffState(computedStates, 1);
 878 | 
 879 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.0"');
 880 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 881 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 882 | 
 883 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"a.1"');
 884 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 885 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 886 | 
 887 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"a.2"');
 888 |         expect(JSON.stringify(diff[2].lhs)).to.eql('3');
 889 |         expect(JSON.stringify(diff[2].rhs)).eql('4');
 890 |       });
 891 | 
 892 |       it('should diff when item removed from array', () => {
 893 |         computedStates[0].state = Immutable.List([1, 2, 3]);
 894 |         computedStates[1].state = Immutable.List([2, 3]);
 895 | 
 896 |         const diff = diffState(computedStates, 1);
 897 | 
 898 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"0"');
 899 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 900 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 901 | 
 902 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"1"');
 903 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 904 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 905 | 
 906 |         expect(JSON.stringify(diff[2].index)).to.eql('2');
 907 |         expect(JSON.stringify(diff[2].item.lhs)).to.eql('3');
 908 |         expect(JSON.stringify(diff[2].item.rhs)).be.undefined;
 909 |       });
 910 | 
 911 |       it('should diff item removed from an array inside an object', () => {
 912 |         computedStates[0].state = {
 913 |           a: Immutable.List([1, 2, 3])
 914 |         };
 915 |         computedStates[1].state = {
 916 |           a: Immutable.List([2, 3])
 917 |         };
 918 | 
 919 |         const diff = diffState(computedStates, 1);
 920 | 
 921 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.0"');
 922 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 923 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 924 | 
 925 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"a.1"');
 926 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 927 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 928 | 
 929 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"a"');
 930 |         expect(JSON.stringify(diff[2].index)).to.eql('2');
 931 |         expect(JSON.stringify(diff[2].item.lhs)).to.eql('3');
 932 |         expect(JSON.stringify(diff[2].item.rhs)).be.undefined;
 933 |       });
 934 | 
 935 |       it('should diff items added to an array', () => {
 936 |         computedStates[0].state = Immutable.List([1, 2]);
 937 |         computedStates[1].state = Immutable.List([2, 3, 4]);
 938 | 
 939 |         const diff = diffState(computedStates, 1);
 940 | 
 941 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"0"');
 942 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 943 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 944 | 
 945 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"1"');
 946 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 947 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 948 | 
 949 |         expect(JSON.stringify(diff[2].index)).to.eql('2');
 950 |         expect(JSON.stringify(diff[2].item.lhs)).to.be.undefined;
 951 |         expect(JSON.stringify(diff[2].item.rhs)).eql('4');
 952 |       });
 953 | 
 954 |       it('should diff item added to an array inside an object', () => {
 955 |         computedStates[0].state = {
 956 |           a: Immutable.List([1, 2])
 957 |         };
 958 |         computedStates[1].state = {
 959 |           a: Immutable.List([2, 3, 4])
 960 |         };
 961 | 
 962 |         const diff = diffState(computedStates, 1);
 963 | 
 964 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"a.0"');
 965 |         expect(JSON.stringify(diff[0].lhs)).to.eql('1');
 966 |         expect(JSON.stringify(diff[0].rhs)).eql('2');
 967 | 
 968 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"a.1"');
 969 |         expect(JSON.stringify(diff[1].lhs)).to.eql('2');
 970 |         expect(JSON.stringify(diff[1].rhs)).eql('3');
 971 | 
 972 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"a"');
 973 |         expect(JSON.stringify(diff[2].index)).to.eql('2');
 974 |         expect(JSON.stringify(diff[2].item.lhs)).to.be.undefined;
 975 |         expect(JSON.stringify(diff[2].item.rhs)).to.eql('4');
 976 |       });
 977 | 
 978 |       it('should diff complex object', () => {
 979 |         computedStates[0].state = Immutable.Map({
 980 |           ids: [],
 981 |           turn: 0,
 982 |           round: 0
 983 |         });
 984 |         computedStates[1].state = Immutable.Map({
 985 |           ids: [2,3],
 986 |           turn:1,
 987 |           round: 1
 988 |         });
 989 | 
 990 |         const diff = diffState(computedStates, 1);
 991 | 
 992 |         expect(JSON.stringify(diff[0].path.join('.'))).to.eql('"ids"');
 993 |         expect(JSON.stringify(diff[0].index)).to.eql('0');
 994 |         expect(JSON.stringify(diff[0].item.lhs)).to.be.undefined;
 995 |         expect(JSON.stringify(diff[0].item.rhs)).eql('2');
 996 | 
 997 |         expect(JSON.stringify(diff[1].path.join('.'))).to.eql('"ids"');
 998 |         expect(JSON.stringify(diff[1].index)).to.eql('1');
 999 |         expect(JSON.stringify(diff[1].item.lhs)).to.be.undefined;
1000 |         expect(JSON.stringify(diff[1].item.rhs)).eql('3');
1001 | 
1002 |         expect(JSON.stringify(diff[2].path.join('.'))).to.eql('"turn"');
1003 |         expect(JSON.stringify(diff[2].lhs)).to.eql('0');
1004 |         expect(JSON.stringify(diff[2].rhs)).to.eql('1');
1005 | 
1006 |         expect(JSON.stringify(diff[3].path.join('.'))).to.eql('"round"');
1007 |         expect(JSON.stringify(diff[3].lhs)).to.eql('0');
1008 |         expect(JSON.stringify(diff[3].rhs)).to.eql('1');
1009 |       });
1010 |     });
1011 |   });
1012 | });


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