feat: colors! (#91, #92, #94); chore: clean up everything; feat: new example!

Author: Eugene Rodionov

.babelrc

@@ -1,3 +1,3 @@
 {
-  "stage": 0
+  "presets": ["es2015", "react", "stage-0"]
 }

.eslintignore

@@ -1,5 +1,3 @@
-webpack.*
 dist
 lib
-example/webpack.*
-example/dist
+example/build

.eslintrc

@@ -1,18 +1,3 @@
 {
-  "extends": "airbnb/base",
-  "env": {
-    "browser": true,
-    "mocha": true,
-    "node": true
-  },
-  "rules": {
-    "id-length": [2, { "exceptions": ["e"] }],
-    "valid-jsdoc": 2,
-    "no-else-return": 0,
-    "no-extend-native": 0,
-    "no-console": 0,
-    "quotes": [2, "backtick"],
-    "jsx-quotes": 2,
-    "new-cap": 0,
-  }
+  "extends": "@dtrussia/eslint-config-dtrussia/react"
 }

.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
 node_modules
 npm-debug.log
-examples/*/dist/*
+example/build
+dist
+lib

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 node_js:
-  - "4.1.1"
+  - "5.1.0"
 script: npm run test

README.md

@@ -1,7 +1,7 @@
 # Logger for redux
 [![Build Status](https://travis-ci.org/fcomb/redux-logger.svg?branch=master)](https://travis-ci.org/fcomb/redux-logger)
 
-![logger](http://i.imgur.com/qhcz1OD.png)
+![redux-logger](http://i.imgur.com/LDgv4tp.png)
 
 ## Install
 `npm i --save redux-logger`
@@ -32,49 +32,54 @@ Level of `console`. `warn`, `error`, `info` or [else](https://developer.mozilla.
 
 *Default: `log`*
 
+#### __duration (Boolean)__
+Print duration of each action?
+
+*Default: `false`*
+
+#### __timestamp (Boolean)__
+Print timestamp with each action?
+
+*Default: `true`*
+
+#### __colors (Object)__
+Object with 3 functions: `prevState`, `action`, `nextState`. Useful if you want paint message based on specific state or action. It also can be `false` if you want show plain message without colors.
+
+* `prevState(prevState: Object) => color: String`
+* `action(action: Object) => color: String`
+* `nextState(nextState: Object) => color: String`
+
 #### __logger (Object)__
 Implementation of the `console` API. Useful if you are using a custom, wrapped version of `console`.
 
 *Default: `window.console`*
 
-#### __collapsed (getState: Function, action: Object): boolean__
+#### __collapsed = (getState: Function, action: Object) => Boolean__
 Takes a boolean or optionally a function that receives `getState` function for accessing current store state and `action` object as parameters. Returns `true` if the log group should be collapsed, `false` otherwise.
 
 *Default: `false`*
 
-#### __predicate (getState: Function, action: Object): boolean__
+#### __predicate = (getState: Function, action: Object) => Boolean__
 If specified this function will be called before each action is processed with this middleware.
 Receives `getState` function for  accessing current store state and `action` object as parameters. Returns `true` if action should be logged, `false` otherwise.
 
 *Default: `null` (always log)*
 
-#### __duration (Boolean)__
-Print duration of each action?
-
-*Default: `false`*
-
-#### __timestamp (Boolean)__
-Print timestamp with each action?
-
-*Default: `true`*
-
-#### __transformer (Function)__
+#### __stateTransformer = (state: Object) => state__
 Transform state before print. Eg. convert Immutable object to plain JSON.
 
 *Default: identity function*
 
-#### __actionTransformer (Function)__
+#### __actionTransformer = (action: Function) => action__
 Transform action before print. Eg. convert Immutable object to plain JSON.
 
 *Default: identity function*
 
 ### Examples:
 #### log only in dev mode
 ```javascript
-const __DEV__ = true;
-
 createLogger({
-  predicate: (getState, action) => __DEV__
+  predicate: (getState, action) => process.env.NODE_ENV === `development`
 });
 ```
 
@@ -102,15 +107,17 @@ createLogger({
 #### transform Immutable objects into JSON
 ```javascript
 createLogger({
-  transformer: (state) => {
-    var newState = {};
+  stateTransformer: (state) => {
+    let newState = {};
+
     for (var i of Object.keys(state)) {
       if (Immutable.Iterable.isIterable(state[i])) {
         newState[i] = state[i].toJS();
       } else {
         newState[i] = state[i];
       }
     };
+
     return newState;
   }
 });

dist/index.js

@@ -73,6 +73,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	var pad = function pad(num, maxLength) {
 	  return repeat("0", maxLength - num.toString().length) + num;
 	};
+	var formatTime = function formatTime(time) {
+	  return " @ " + pad(time.getHours(), 2) + ":" + pad(time.getMinutes(), 2) + ":" + pad(time.getSeconds(), 2) + "." + pad(time.getMilliseconds(), 3);
+	};
 
 	// Use the new performance api to get better precision if available
 	var timer = typeof performance !== "undefined" && typeof performance.now === "function" ? performance : Date;
@@ -83,12 +86,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * @namespace
 	 * @property {object} options - options for logger
 	 * @property {string} options.level - console[level]
-	 * @property {object} options.logger - implementation of the `console` API.
-	 * @property {boolean} options.collapsed - is group collapsed?
-	 * @property {boolean} options.predicate - condition which resolves logger behavior
 	 * @property {bool} options.duration - print duration of each action?
 	 * @property {bool} options.timestamp - print timestamp with each action?
-	 * @property {function} options.transformer - transform state before print
+	 * @property {object} options.colors - custom colors
+	 * @property {object} options.logger - implementation of the `console` API
+	 * @property {boolean} options.collapsed - is group collapsed?
+	 * @property {boolean} options.predicate - condition which resolves logger behavior
+	 * @property {function} options.stateTransformer - transform state before print
 	 * @property {function} options.actionTransformer - transform action before print
 	 */
 
@@ -99,27 +103,42 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var getState = _ref.getState;
 	    return function (next) {
 	      return function (action) {
-	        var level = options.level;
-	        var logger = options.logger;
+	        var _options$level = options.level;
+	        var level = _options$level === undefined ? "log" : _options$level;
+	        var _options$logger = options.logger;
+	        var logger = _options$logger === undefined ? window.console : _options$logger;
 	        var collapsed = options.collapsed;
 	        var predicate = options.predicate;
 	        var _options$duration = options.duration;
 	        var duration = _options$duration === undefined ? false : _options$duration;
 	        var _options$timestamp = options.timestamp;
 	        var timestamp = _options$timestamp === undefined ? true : _options$timestamp;
-	        var _options$transformer = options.transformer;
-	        var transformer = _options$transformer === undefined ? function (state) {
+	        var transformer = options.transformer;
+	        var _options$stateTransfo = options.stateTransformer;
+	        var // deprecated
+	        stateTransformer = _options$stateTransfo === undefined ? function (state) {
 	          return state;
-	        } : _options$transformer;
-	        var _options$actionTransformer = options.actionTransformer;
-	        var actionTransformer = _options$actionTransformer === undefined ? function (actn) {
+	        } : _options$stateTransfo;
+	        var _options$actionTransf = options.actionTransformer;
+	        var actionTransformer = _options$actionTransf === undefined ? function (actn) {
 	          return actn;
-	        } : _options$actionTransformer;
-
-	        var console = logger || window.console;
+	        } : _options$actionTransf;
+	        var _options$colors = options.colors;
+	        var colors = _options$colors === undefined ? {
+	          prevState: function prevState() {
+	            return "#9E9E9E";
+	          },
+	          action: function action() {
+	            return "#03A9F4";
+	          },
+	          nextState: function nextState() {
+	            return "#4CAF50";
+	          }
+	        } : _options$colors;
 
 	        // exit if console undefined
-	        if (typeof console === "undefined") {
+
+	        if (typeof logger === "undefined") {
 	          return next(action);
 	        }
 
@@ -128,55 +147,59 @@ return /******/ (function(modules) { // webpackBootstrap
 	          return next(action);
 	        }
 
+	        if (transformer) {
+	          console.error("Option 'transformer' is deprecated, use stateTransformer instead");
+	        }
+
 	        var started = timer.now();
-	        var prevState = transformer(getState());
+	        var prevState = stateTransformer(getState());
 
-	        var returnValue = next(action);
-	        var took = timer.now() - started;
+	        var formattedAction = actionTransformer(action);
 
-	        var nextState = transformer(getState());
+	        var took = timer.now() - started;
+	        var nextState = stateTransformer(getState());
 
-	        // formatters
+	        // message
 	        var time = new Date();
 	        var isCollapsed = typeof collapsed === "function" ? collapsed(getState, action) : collapsed;
 
-	        var formattedTime = timestamp ? " @ " + pad(time.getHours(), 2) + ":" + pad(time.getMinutes(), 2) + ":" + pad(time.getSeconds(), 2) + "." + pad(time.getMilliseconds(), 3) : "";
-	        var formattedDuration = duration ? " in " + took.toFixed(2) + " ms" : "";
-	        var formattedAction = actionTransformer(action);
-	        var message = "action " + formattedAction.type + formattedTime + formattedDuration;
-	        var startMessage = isCollapsed ? console.groupCollapsed : console.group;
+	        var formattedTime = formatTime(time);
+	        var title = "action " + formattedAction.type + (timestamp && formattedTime) + (duration && " in " + took.toFixed(2) + " ms");
 
 	        // render
 	        try {
-	          startMessage.call(console, message);
+	          if (isCollapsed) {
+	            logger.groupCollapsed(title);
+	          } else {
+	            logger.group(title);
+	          }
 	        } catch (e) {
-	          console.log(message);
+	          logger.log(title);
 	        }
 
-	        if (level) {
-	          console[level]("%c prev state", "color: #9E9E9E; font-weight: bold", prevState);
-	          console[level]("%c action", "color: #03A9F4; font-weight: bold", formattedAction);
-	          console[level]("%c next state", "color: #4CAF50; font-weight: bold", nextState);
+	        if (colors) {
+	          logger[level]("%c prev state", "color: " + colors.prevState(prevState) + "; font-weight: bold", prevState);
+	          logger[level]("%c action", "color: " + colors.action(formattedAction) + "; font-weight: bold", formattedAction);
+	          logger[level]("%c next state", "color: " + colors.nextState(nextState) + "; font-weight: bold", nextState);
 	        } else {
-	          console.log("%c prev state", "color: #9E9E9E; font-weight: bold", prevState);
-	          console.log("%c action", "color: #03A9F4; font-weight: bold", formattedAction);
-	          console.log("%c next state", "color: #4CAF50; font-weight: bold", nextState);
+	          logger[level]("prev state", prevState);
+	          logger[level]("action", formattedAction);
+	          logger[level]("next state", nextState);
 	        }
 
 	        try {
-	          console.groupEnd();
+	          logger.groupEnd();
 	        } catch (e) {
-	          console.log("—— log end ——");
+	          logger.log("—— log end ——");
 	        }
 
-	        return returnValue;
+	        return next(action);
 	      };
 	    };
 	  };
 	}
 
-	exports["default"] = createLogger;
-	module.exports = exports["default"];
+	exports.default = createLogger;
 
 /***/ }
 /******/ ])

dist/index.min.js

@@ -0,0 +1,43 @@
+{
+  "name": "redux-logger-example-basic",
+  "version": "1.0.0",
+  "description": "Basic example of redux-logger",
+  "main": "src/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "start": "NODE_ENV=development $(npm bin)/babel-node webpack.server.dev.js",
+    "build": "NODE_ENV=production $(npm bin)/webpack -p --config webpack.build.prod.js",
+    "publish": "gh-pages -d examples/dist",
+    "deploy": "npm run build && npm run publish"
+  },
+  "devDependencies": {
+    "@dtrussia/eslint-config-dtrussia": "1.0.3",
+    "babel-cli": "6.3.13",
+    "babel-core": "6.3.13",
+    "babel-loader": "6.2.0",
+    "babel-preset-es2015": "6.3.13",
+    "babel-preset-react": "6.3.13",
+    "babel-preset-stage-0": "6.3.13",
+    "css-loader": "0.23.0",
+    "express": "4.13.3",
+    "extract-text-webpack-plugin": "0.9.1",
+    "html-webpack-plugin": "1.7.0",
+    "postcss-loader": "0.8.0",
+    "style-loader": "0.13.0",
+    "webpack": "1.12.9",
+    "webpack-dev-middleware": "1.4.0",
+    "webpack-hot-middleware": "2.6.0"
+  },
+  "dependencies": {
+    "@react-ui/core": "0.0.25",
+    "@react-ui/theme-default": "0.0.17",
+    "normalize.css": "3.0.3",
+    "react": "0.14.3",
+    "react-dom": "0.14.3",
+    "react-redux": "4.0.0",
+    "redux": "3.0.4",
+    "redux-actions": "0.8.0",
+    "uuid": "2.0.1"
+  }
+}