feat: add airbnb eslint config (LogRocket#218)

Author: dinodsaurus

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@dtrussia/eslint-config-dtrussia"
+  "extends": "airbnb",
+  "env": {
+    "browser": true
+  }
 }

README.md

@@ -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

package.json

@@ -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",
@@ -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",

src/core.js

@@ -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;
@@ -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,
@@ -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;
@@ -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) {
@@ -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;

src/defaults.js

@@ -1,5 +1,5 @@
 export default {
-  level: `log`,
+  level: 'log',
   logger: console,
   logErrors: true,
   collapsed: undefined,
@@ -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,

src/diff.js

@@ -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:',
   },
 };
 
@@ -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 [];
   }
@@ -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) {
@@ -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 —— ');
   }
 }

src/helpers.js

@@ -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;

src/index.js

@@ -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
  *
@@ -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);
   }
 
@@ -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);
     }
 
@@ -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;
@@ -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 {