├── .babelrc
├── .eslintignore
├── .gitignore
├── .eslintrc
├── README.md
├── package.json
└── src
    └── index.js


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


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | example/webpack.*
2 | example/dist
3 | 


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


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "eslint-config-airbnb",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "mocha": true,
 6 |     "node": true
 7 |   },
 8 |   "globals": {
 9 |     "__DEV__": true
10 |   },
11 |   "rules": {
12 |     "no-console": 0
13 |   },
14 |   "plugins": [
15 |     "react"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Diff logger between states for redux
 2 | 
 3 | ![logger](http://i.imgur.com/SR5jsdm.png?1)
 4 | 
 5 | ### WIP
 6 | **Don't be released until solved array's issue [#1](https://github.com/fcomb/redux-diff-logger/issues/1)**. Help appreciated!
 7 | 
 8 | ### Install
 9 | `npm i --save redux-diff-logger`
10 | 
11 | ### Usage
12 | ```
13 | import logger from 'redux-diff-logger';
14 | 
15 | const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
16 | const store = createStoreWithMiddleware(reducer);
17 | ```
18 | 
19 | ### License
20 | MIT
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "redux-diff-logger",
 3 |   "version": "0.0.9",
 4 |   "description": "Diff logger between states for redux",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "test": "npm run lint",
 8 |     "clean": "$(npm bin)/rimraf lib",
 9 |     "lint": "$(npm bin)/eslint src",
10 |     "build:lib": "$(npm bin)/babel src --out-dir lib",
11 |     "build": "npm run build:lib",
12 |     "prepublish": "npm run clean && npm run test && npm run build"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/fcomb/redux-diff-logger.git"
17 |   },
18 |   "files": [
19 |     "lib",
20 |     "src"
21 |   ],
22 |   "keywords": [
23 |     "redux",
24 |     "logger",
25 |     "redux-logger",
26 |     "redux",
27 |     "middleware"
28 |   ],
29 |   "author": "Eugene Rodionov (https://github.com/theaqua)",
30 |   "license": "MIT",
31 |   "bugs": {
32 |     "url": "https://github.com/fcomb/redux-diff-logger/issues"
33 |   },
34 |   "homepage": "https://github.com/fcomb/redux-diff-logger#readme",
35 |   "dependencies": {
36 |     "deep-diff": "^0.3.2"
37 |   },
38 |   "devDependencies": {
39 |     "babel": "^5.8.21",
40 |     "babel-core": "^5.8.22",
41 |     "babel-eslint": "^4.0.5",
42 |     "babel-loader": "^5.3.2",
43 |     "eslint": "^1.1.0",
44 |     "eslint-config-airbnb": "0.0.7",
45 |     "eslint-plugin-react": "^3.2.1",
46 |     "gh-pages": "^0.3.1",
47 |     "rimraf": "^2.4.2",
48 |     "webpack": "^1.11.0"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/flitbit/diff#differences
 2 | import differ from 'deep-diff';
 3 | 
 4 | const dictionary = {
 5 |   E: {
 6 |     color: '#2196F3',
 7 |     text: 'CHANGED:',
 8 |   },
 9 |   N: {
10 |     color: '#4CAF50',
11 |     text: 'ADDED:',
12 |   },
13 |   D: {
14 |     color: '#F44336',
15 |     text: 'DELETED:',
16 |   },
17 |   A: {
18 |     color: '#2196F3',
19 |     text: 'ARRAY:',
20 |   },
21 | };
22 | 
23 | function style(kind) {
24 |   return `color: ${dictionary[kind].color}; font-weight: bold`;
25 | }
26 | 
27 | function render(diff) {
28 |   const { kind, path, lhs, rhs, index, item } = diff;
29 | 
30 |   switch (kind) {
31 |   case 'E':
32 |     return `${path.join('.')} ${lhs} → ${rhs}`;
33 |   case 'N':
34 |     return `${path.join('.')} ${rhs}`;
35 |   case 'D':
36 |     return `${path.join('.')}`;
37 |   case 'A':
38 |     return [`${path.join('.')}[${index}]`, item];
39 |   default:
40 |     return null;
41 |   }
42 | }
43 | 
44 | function logger({ getState }) {
45 |   return (next) => (action) => {
46 |     const prevState = getState();
47 |     const returnValue = next(action);
48 |     const newState = getState();
49 |     const time = new Date();
50 | 
51 |     const diff = differ(prevState, newState);
52 | 
53 |     try {
54 |       console.group('diff @', `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`);
55 |     } catch (e) {
56 |       console.log('diff @', `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`);
57 |     }
58 | 
59 |     if (diff) {
60 |       diff.forEach((elem) => {
61 |         const { kind } = elem;
62 |         const output = render(elem);
63 | 
64 |         console.log(`%c ${dictionary[kind].text}`, style(kind), output);
65 |       });
66 |     } else {
67 |       console.log('—— no diff ——');
68 |     }
69 | 
70 |     try {
71 |       console.groupEnd();
72 |     } catch (e) {
73 |       console.log(`—— diff end —— `);
74 |     }
75 | 
76 |     return returnValue;
77 |   };
78 | }
79 | 
80 | export default logger;
81 | 


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