Skip to content

Commit

Permalink
feat: add airbnb eslint config (#218)
Browse files Browse the repository at this point in the history
  • Loading branch information
dinodsaurus authored and imevro committed Apr 6, 2017
1 parent 9ec10bb commit 507e1c7
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 77 deletions.
5 changes: 4 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"extends": "@dtrussia/eslint-config-dtrussia"
"extends": "airbnb",
"env": {
"browser": true
}
}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export default createLogger({

## To Do
- [ ] Update example to [create-react-app](https://github.com/facebookincubator/create-react-app)
- [ ] Update eslint config to [airbnb's](https://www.npmjs.com/package/eslint-config-airbnb)
- [x] Update eslint config to [airbnb's](https://www.npmjs.com/package/eslint-config-airbnb)
- [ ] Clean up code, because it's very messy, to be honest
- [ ] Write tests
- [ ] Node.js support
Expand Down
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,8 @@
},
"homepage": "https://github.com/theaqua/redux-logger#readme",
"devDependencies": {
"@dtrussia/eslint-config-dtrussia": "2.2.1",
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-eslint": "7.1.1",
"babel-loader": "^6.4.1",
"babel-plugin-add-module-exports": "0.2.1",
"babel-plugin-transform-es2015-modules-umd": "6.24.0",
Expand All @@ -65,8 +63,11 @@
"babel-preset-stage-0": "^6.22.0",
"chai": "3.5.0",
"codecov": "1.0.1",
"eslint": "3.10.2",
"eslint-plugin-react": "6.7.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"http-server": "0.9.0",
"husky": "^0.13.2",
"mocha": "3.1.2",
Expand Down
57 changes: 30 additions & 27 deletions src/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import diffLogger from './diff';
*/
function getLogLevel(level, action, payload, type) {
switch (typeof level) {
case `object`:
return typeof level[type] === `function` ? level[type](...payload) : level[type];
case `function`:
case 'object':
return typeof level[type] === 'function' ? level[type](...payload) : level[type];
case 'function':
return level(action);
default:
return level;
Expand All @@ -29,17 +29,17 @@ function defaultTitleFormatter(options) {
} = options;

return (action, time, took) => {
const parts = [`action`];
const parts = ['action'];

parts.push(`%c${String(action.type)}`);
if (timestamp) parts.push(`%c@ ${time}`);
if (duration) parts.push(`%c(in ${took.toFixed(2)} ms)`);

return parts.join(` `);
return parts.join(' ');
};
}

export function printBuffer(buffer, options) {
function printBuffer(buffer, options) {
const {
logger,
actionTransformer,
Expand All @@ -50,7 +50,7 @@ export function printBuffer(buffer, options) {
diff,
} = options;

const isUsingDefaultFormatter = typeof options.titleFormatter === `undefined`;
const isUsingDefaultFormatter = typeof options.titleFormatter === 'undefined';

buffer.forEach((logEntry, key) => {
const { started, startedTime, action, prevState, error } = logEntry;
Expand All @@ -64,52 +64,53 @@ export function printBuffer(buffer, options) {

// Message
const formattedAction = actionTransformer(action);
const isCollapsed = (typeof collapsed === `function`) ? collapsed(() => nextState, action, logEntry) : collapsed;
const isCollapsed = (typeof collapsed === 'function') ? collapsed(() => nextState, action, logEntry) : collapsed;

const formattedTime = formatTime(startedTime);
const titleCSS = colors.title ? `color: ${colors.title(formattedAction)};` : ``;
const headerCSS = [`color: gray; font-weight: lighter;`];
const titleCSS = colors.title ? `color: ${colors.title(formattedAction)};` : '';
const headerCSS = ['color: gray; font-weight: lighter;'];
headerCSS.push(titleCSS);
if (options.timestamp) headerCSS.push(`color: gray; font-weight: lighter;`);
if (options.duration) headerCSS.push(`color: gray; font-weight: lighter;`);
if (options.timestamp) headerCSS.push('color: gray; font-weight: lighter;');
if (options.duration) headerCSS.push('color: gray; font-weight: lighter;');
const title = titleFormatter(formattedAction, formattedTime, took);

// Render
try {
if (isCollapsed) {
if (colors.title && isUsingDefaultFormatter) logger.groupCollapsed(`%c ${title}`, ...headerCSS);
else logger.groupCollapsed(title);
} else if (colors.title && isUsingDefaultFormatter) {
logger.group(`%c ${title}`, ...headerCSS);
} else {
if (colors.title && isUsingDefaultFormatter) logger.group(`%c ${title}`, ...headerCSS);
else logger.group(title);
logger.group(title);
}
} catch (e) {
logger.log(title);
}

const prevStateLevel = getLogLevel(level, formattedAction, [prevState], `prevState`);
const actionLevel = getLogLevel(level, formattedAction, [formattedAction], `action`);
const errorLevel = getLogLevel(level, formattedAction, [error, prevState], `error`);
const nextStateLevel = getLogLevel(level, formattedAction, [nextState], `nextState`);
const prevStateLevel = getLogLevel(level, formattedAction, [prevState], 'prevState');
const actionLevel = getLogLevel(level, formattedAction, [formattedAction], 'action');
const errorLevel = getLogLevel(level, formattedAction, [error, prevState], 'error');
const nextStateLevel = getLogLevel(level, formattedAction, [nextState], 'nextState');

if (prevStateLevel) {
if (colors.prevState) logger[prevStateLevel](`%c prev state`, `color: ${colors.prevState(prevState)}; font-weight: bold`, prevState);
else logger[prevStateLevel](`prev state`, prevState);
if (colors.prevState) logger[prevStateLevel]('%c prev state', `color: ${colors.prevState(prevState)}; font-weight: bold`, prevState);
else logger[prevStateLevel]('prev state', prevState);
}

if (actionLevel) {
if (colors.action) logger[actionLevel](`%c action `, `color: ${colors.action(formattedAction)}; font-weight: bold`, formattedAction);
else logger[actionLevel](`action `, formattedAction);
if (colors.action) logger[actionLevel]('%c action ', `color: ${colors.action(formattedAction)}; font-weight: bold`, formattedAction);
else logger[actionLevel]('action ', formattedAction);
}

if (error && errorLevel) {
if (colors.error) logger[errorLevel](`%c error `, `color: ${colors.error(error, prevState)}; font-weight: bold;`, error);
else logger[errorLevel](`error `, error);
if (colors.error) logger[errorLevel]('%c error ', `color: ${colors.error(error, prevState)}; font-weight: bold;`, error);
else logger[errorLevel]('error ', error);
}

if (nextStateLevel) {
if (colors.nextState) logger[nextStateLevel](`%c next state`, `color: ${colors.nextState(nextState)}; font-weight: bold`, nextState);
else logger[nextStateLevel](`next state`, nextState);
if (colors.nextState) logger[nextStateLevel]('%c next state', `color: ${colors.nextState(nextState)}; font-weight: bold`, nextState);
else logger[nextStateLevel]('next state', nextState);
}

if (diff) {
Expand All @@ -119,7 +120,9 @@ export function printBuffer(buffer, options) {
try {
logger.groupEnd();
} catch (e) {
logger.log(`—— log end ——`);
logger.log('—— log end ——');
}
});
}

export default printBuffer;
12 changes: 6 additions & 6 deletions src/defaults.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default {
level: `log`,
level: 'log',
logger: console,
logErrors: true,
collapsed: undefined,
Expand All @@ -10,11 +10,11 @@ export default {
actionTransformer: action => action,
errorTransformer: error => error,
colors: {
title: () => `inherit`,
prevState: () => `#9E9E9E`,
action: () => `#03A9F4`,
nextState: () => `#4CAF50`,
error: () => `#F20404`,
title: () => 'inherit',
prevState: () => '#9E9E9E',
action: () => '#03A9F4',
nextState: () => '#4CAF50',
error: () => '#F20404',
},
diff: false,
diffPredicate: undefined,
Expand Down
50 changes: 25 additions & 25 deletions src/diff.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@ import differ from 'deep-diff';

// https://github.com/flitbit/diff#differences
const dictionary = {
'E': {
color: `#2196F3`,
text: `CHANGED:`,
E: {
color: '#2196F3',
text: 'CHANGED:',
},
'N': {
color: `#4CAF50`,
text: `ADDED:`,
N: {
color: '#4CAF50',
text: 'ADDED:',
},
'D': {
color: `#F44336`,
text: `DELETED:`,
D: {
color: '#F44336',
text: 'DELETED:',
},
'A': {
color: `#2196F3`,
text: `ARRAY:`,
A: {
color: '#2196F3',
text: 'ARRAY:',
},
};

Expand All @@ -28,14 +28,14 @@ function render(diff) {
const { kind, path, lhs, rhs, index, item } = diff;

switch (kind) {
case `E`:
return [path.join(`.`), lhs, `→`, rhs];
case `N`:
return [path.join(`.`), rhs];
case `D`:
return [path.join(`.`)];
case `A`:
return [`${path.join(`.`)}[${index}]`, item];
case 'E':
return [path.join('.'), lhs, '→', rhs];
case 'N':
return [path.join('.'), rhs];
case 'D':
return [path.join('.')];
case 'A':
return [`${path.join('.')}[${index}]`, item];
default:
return [];
}
Expand All @@ -46,12 +46,12 @@ export default function diffLogger(prevState, newState, logger, isCollapsed) {

try {
if (isCollapsed) {
logger.groupCollapsed(`diff`);
logger.groupCollapsed('diff');
} else {
logger.group(`diff`);
logger.group('diff');
}
} catch (e) {
logger.log(`diff`);
logger.log('diff');
}

if (diff) {
Expand All @@ -62,12 +62,12 @@ export default function diffLogger(prevState, newState, logger, isCollapsed) {
logger.log(`%c ${dictionary[kind].text}`, style(kind), ...output);
});
} else {
logger.log(`—— no diff ——`);
logger.log('—— no diff ——');
}

try {
logger.groupEnd();
} catch (e) {
logger.log(`—— diff end —— `);
logger.log('—— diff end —— ');
}
}
9 changes: 6 additions & 3 deletions src/helpers.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
export const repeat = (str, times) => (new Array(times + 1)).join(str);

export const pad = (num, maxLength) => repeat(`0`, maxLength - num.toString().length) + num;
export const pad = (num, maxLength) => repeat('0', maxLength - num.toString().length) + num;

export const formatTime = (time) => `${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`;
export const formatTime = time => `${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`;

// Use performance API if it's available in order to get better precision
export const timer = (typeof performance !== `undefined` && performance !== null) && typeof performance.now === `function` ? performance : Date;
export const timer =
(typeof performance !== 'undefined' && performance !== null) && typeof performance.now === 'function' ?
performance :
Date;
22 changes: 12 additions & 10 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { printBuffer } from './core';
import printBuffer from './core';
import { timer } from './helpers';
import defaults from './defaults';

/* eslint max-len: ["error", 110, { "ignoreComments": true }] */
/**
* Creates logger with following options
*
Expand Down Expand Up @@ -37,7 +37,7 @@ function createLogger(options = {}) {
} = loggerOptions;

// Return if 'console' object is not defined
if (typeof logger === `undefined`) {
if (typeof logger === 'undefined') {
return () => next => action => next(action);
}

Expand Down Expand Up @@ -67,9 +67,9 @@ const store = createStore(

const logBuffer = [];

return ({ getState }) => (next) => (action) => {
return ({ getState }) => next => (action) => {
// Exit early if predicate function returns 'false'
if (typeof predicate === `function` && !predicate(getState, action)) {
if (typeof predicate === 'function' && !predicate(getState, action)) {
return next(action);
}

Expand All @@ -96,7 +96,9 @@ const store = createStore(
logEntry.took = timer.now() - logEntry.started;
logEntry.nextState = stateTransformer(getState());

const diff = loggerOptions.diff && typeof diffPredicate === `function` ? diffPredicate(getState, action) : loggerOptions.diff;
const diff = loggerOptions.diff && typeof diffPredicate === 'function' ?
diffPredicate(getState, action) :
loggerOptions.diff;

printBuffer(logBuffer, { ...loggerOptions, diff });
logBuffer.length = 0;
Expand All @@ -106,20 +108,20 @@ const store = createStore(
};
}

// eslint-disable-next-line consistent-return
const defaultLogger = ({ dispatch, getState } = {}) => {
if (typeof dispatch === `function` || typeof getState === `function`) {
if (typeof dispatch === 'function' || typeof getState === 'function') {
return createLogger()({ dispatch, getState });
} else {
}
// eslint-disable-next-line no-console
console.error(`
console.error(`
[redux-logger v3] BREAKING CHANGE
[redux-logger v3] Since 3.0.0 redux-logger exports by default logger with default settings.
[redux-logger v3] Change
[redux-logger v3] import createLogger from 'redux-logger'
[redux-logger v3] to
[redux-logger v3] import { createLogger } from 'redux-logger'
`);
}
};

export {
Expand Down

0 comments on commit 507e1c7

Please sign in to comment.