├── .gitignore ├── .npmignore ├── History.md ├── Makefile ├── Readme.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | support 2 | test 3 | examples 4 | *.sock 5 | -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | 2 | 1.0.3 / 2015-11-09 3 | ================== 4 | 5 | * fix for server 6 | 7 | 1.0.2 / 2015-11-07 8 | ================== 9 | 10 | * fix coloring for browsers. would be nice to actually support colors in the browser, but that can come later 11 | * fix readme 12 | 13 | 1.0.1 / 2015-10-10 14 | ================== 15 | 16 | * add more compatible formatting and fix function 17 | 18 | 1.0.1 / 2010-01-03 19 | ================== 20 | 21 | * Initial release 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | 2 | test: 3 | @./node_modules/.bin/mocha \ 4 | --require should \ 5 | --reporter spec 6 | 7 | .PHONY: test -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | 2 | # redux-debug 3 | 4 | [debug()](https://github.com/tj/debug/) as redux middleware. Similar to [redux-logger](https://github.com/fcomb/redux-logger/), but works both on the server and in the client. 5 | 6 | ![img](https://cldup.com/-bY7fA8ljK.png) 7 | 8 | ## Installation 9 | 10 | ``` 11 | npm install redux-debug 12 | ``` 13 | 14 | ## Usage 15 | 16 | ```js 17 | var Debug = require('redux-debug') 18 | var debug = require('debug')('redux') 19 | 20 | var Store = Redux.compose( 21 | Redux.applyMiddleware(Debug(debug)) 22 | )(Redux.createStore) 23 | ``` 24 | 25 | ## API 26 | 27 | ### `Debug(fn, options)` 28 | 29 | This `fn` is usually a `debug` instance but can be any sprintf-compatible function. 30 | 31 | ```js 32 | Redux.applyMiddleware(Debug(console.log)) 33 | ``` 34 | 35 | Available options include: 36 | 37 | - `collapsed` (default: false): Collapse the state transitions 38 | 39 | ## FAQ 40 | 41 | - My logs aren't showing up! 42 | 43 | If you're using debug, you'll need to pass the `DEBUG=...` environment variable. If you're 44 | in the browser, you'll need to set `localStorage.DEBUG='...'`. 45 | 46 | ## License 47 | 48 | MIT 49 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Module Dependencies 3 | */ 4 | 5 | var strip_ansi = require('strip-ansi') 6 | var inspect = require('util-inspect') 7 | var chalk = require('chalk') 8 | 9 | /** 10 | * Export `middleware` 11 | */ 12 | 13 | module.exports = middleware 14 | 15 | /** 16 | * Chalk strings 17 | */ 18 | 19 | var title_string = chalk.bold(chalk.underline('action %s @ %s')) 20 | var prev_string = chalk.gray('prev state') 21 | var action_string = chalk.blue('action') 22 | var next_string = chalk.green('next state') 23 | 24 | /** 25 | * Initialize the middleware 26 | * 27 | * @param {Function} fn 28 | * @param {Object} options 29 | */ 30 | 31 | function middleware (fn, options) { 32 | fn = fn || function () {} 33 | options = options || {} 34 | 35 | // should the state be collapsed or not? 36 | var collapsed = options.collapsed === undefined ? false : true 37 | 38 | return function (store) { 39 | return function (next) { 40 | return function (action) { 41 | var time = new Date() 42 | var formatted = pad(time.getHours(), 2) 43 | + ':' + pad(time.getMinutes(), 2) 44 | + ':' + pad(time.getSeconds(), 2) 45 | + '.' + pad(time.getMilliseconds(), 3) 46 | 47 | fn(title_string, action.type, formatted) 48 | !collapsed && fn('| %s %s', prev_string, fmt(store.getState())) 49 | !collapsed && fn('| %s %s', action_string, fmt(action)) 50 | var return_value = next(action) 51 | !collapsed && fn('| %s %s', next_string, fmt(store.getState())) 52 | 53 | return return_value 54 | } 55 | } 56 | } 57 | } 58 | 59 | /** 60 | * Formatting 61 | */ 62 | 63 | function fmt (v) { 64 | var str = inspect(v, { colors: true }) 65 | .replace(/\s*\n\s*/g, ' '); 66 | 67 | if (typeof window !== 'undefined') { 68 | return strip_ansi(str) 69 | } else { 70 | return str 71 | } 72 | } 73 | 74 | /** 75 | * Add padding 76 | * 77 | * @param {String} str 78 | * @param {Number} max_length 79 | * @return {String} 80 | */ 81 | 82 | function pad (str, max_length) { 83 | var len = str.toString().length 84 | var out = '' 85 | for (var i = 0; i < max_length - len; i++) { 86 | out += '0' 87 | } 88 | return out + str 89 | } 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-debug", 3 | "version": "1.0.3", 4 | "description": "debug() as redux middleware", 5 | "keywords": [ 6 | "debug", 7 | "redux", 8 | "logging" 9 | ], 10 | "author": "Matthew Mueller ", 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/LapwingLabs/redux-debug.git" 14 | }, 15 | "dependencies": { 16 | "chalk": "^1.1.1", 17 | "strip-ansi": "^3.0.0", 18 | "util-inspect": "^0.1.8" 19 | }, 20 | "devDependencies": { 21 | "mocha": "*", 22 | "should": "*" 23 | }, 24 | "main": "index" 25 | } --------------------------------------------------------------------------------