hookstore-logger - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

es/defaults.d.ts

+export interface Options {
+    showTook: boolean;
+    showDiff: boolean;
+}
+export declare const defaultOptions: Options;

es/defaults.js

+export var defaultOptions = {
+  showDiff: false,
+  showTook: false
+};

es/utils.d.ts

+export declare const repeat: (str: string, times: number) => string;
+export declare const pad: (num: number, maxLength: number) => string;
+export declare const formatTime: (time: Date) => string;

es/utils.js

+export var repeat = function repeat(str, times) {
+  return new Array(times + 1).join(str);
+};
+export var pad = function pad(num, maxLength) {
+  return repeat('0', maxLength - num.toString().length) + num;
+};
+export var formatTime = function formatTime(time) {
+  return "".concat(pad(time.getHours(), 2), ":").concat(pad(time.getMinutes(), 2), ":").concat(pad(time.getSeconds(), 2), ".").concat(pad(time.getMilliseconds(), 3));
+};

lib/defaults.d.ts

+export interface Options {
+    showTook: boolean;
+    showDiff: boolean;
+}
+export declare const defaultOptions: Options;

lib/defaults.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = void 0;
+var defaultOptions = {
+  showDiff: false,
+  showTook: false
+};
+exports.defaultOptions = defaultOptions;

lib/utils.d.ts

+export declare const repeat: (str: string, times: number) => string;
+export declare const pad: (num: number, maxLength: number) => string;
+export declare const formatTime: (time: Date) => string;

lib/utils.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatTime = exports.pad = exports.repeat = void 0;
+
+var repeat = function repeat(str, times) {
+  return new Array(times + 1).join(str);
+};
+
+exports.repeat = repeat;
+
+var pad = function pad(num, maxLength) {
+  return repeat('0', maxLength - num.toString().length) + num;
+};
+
+exports.pad = pad;
+
+var formatTime = function formatTime(time) {
+  return "".concat(pad(time.getHours(), 2), ":").concat(pad(time.getMinutes(), 2), ":").concat(pad(time.getSeconds(), 2), ".").concat(pad(time.getMilliseconds(), 3));
+};
+
+exports.formatTime = formatTime;

src/defaults.ts

+export interface Options {
+  showTook: boolean,
+  showDiff: boolean,
+}
+
+export const defaultOptions: Options = {
+  showDiff: false,
+  showTook: false,
+}

src/utils.ts

+export const repeat = (str: string, times: number): string => (new Array(times + 1)).join(str);
+
+export const pad = (num: number, maxLength: number): string => repeat('0', maxLength - num.toString().length) + num;
+
+export const formatTime = (time: Date): string => `${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`;

es/index.d.ts

@@ -1,3 +0,5 @@
-import { Context, Next } from 'hookstore';
-declare const _default: (ctx: Context<import("hookstore").State>, next: Next) => Promise<any>;
+import { Middleware } from 'hookstore';
+import { Options } from './defaults';
+export declare type Options = Options;
+declare const _default: (options?: Options) => Middleware;
 export default _default;

es/index.js

 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import { diff } from 'deep-diff';
 import clonedeep from 'lodash.clonedeep';
-var dictionary = {
+import { formatTime } from './utils';
+import { defaultOptions } from './defaults';
+var dict = {
   E: {
     color: '#2196F3',
-    text: 'updated:'
+    text: 'CHANGED:'
   },
   N: {
     color: '#4CAF50',
-    text: 'added:'
+    text: 'ADDED:'
   },
   D: {
     color: '#F44336',
-    text: 'deleted:'
+    text: 'DELETED:'
   },
   A: {
     color: '#2196F3',
-    text: 'added:'
+    text: 'ARRAY:'
   }
@@ -25,5 +28,6 @@ };
 function style(kind) {
-  return "color: ".concat(dictionary[kind].color);
-}
+  return "color: ".concat(dict[kind].color);
+} // what's the type of `Diff`?
 
+
 function render(elm) {
@@ -39,9 +43,9 @@ var kind = elm.kind,
     case 'E':
-      return "".concat(path.join('.'), " ").concat(lhs, " \u2192 ").concat(rhs);
+      return [path.join('.'), lhs, '→', rhs];
 
     case 'N':
-      return "".concat(path.join('.'), " ").concat(rhs);
+      return [path.join('.'), rhs];
 
     case 'D':
-      return "".concat(path.join('.'));
+      return [path.join('.')];
 
@@ -52,53 +56,74 @@ case 'A':
     default:
-      return null;
+      return [];
   }
-} // @see https://github.com/evgenyrodionov/redux-diff-logger
+}
 
+function titleFormatter(title, time, took, options) {
+  var parts = ["%c".concat(title)];
+  parts.push("%c@ ".concat(formatTime(time)));
+  if (options.showTook) parts.push("%c(in ".concat(took.toFixed(2), " ms)"));
+  return parts.join(' ');
+}
 
-export default
-/*#__PURE__*/
-(function () {
-  var _ref = _asyncToGenerator(
-  /*#__PURE__*/
-  _regeneratorRuntime.mark(function _callee(ctx, next) {
-    var namespace, action, state, prevState, time, result, changes;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            namespace = ctx.namespace, action = ctx.action, state = ctx.state;
-            prevState = clonedeep(state);
-            time = new Date();
-            _context.next = 5;
-            return next();
+export default (function () {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
+  return (
+    /*#__PURE__*/
+    function () {
+      var _ref = _asyncToGenerator(
+      /*#__PURE__*/
+      _regeneratorRuntime.mark(function _callee(ctx, next) {
+        var _console;
 
-          case 5:
-            result = _context.sent;
-            changes = diff(prevState, state);
-            console.group("".concat(namespace, "/").concat(action, " @ ").concat(time.getHours(), ":").concat(time.getMinutes(), ":").concat(time.getSeconds()));
-            console.log('prev state', prevState);
+        var showDiff, showTook, namespace, action, state, prevState, time, greySty, headerCSS, result, changes, took;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                showDiff = options.showDiff, showTook = options.showTook;
+                namespace = ctx.namespace, action = ctx.action, state = ctx.state;
+                prevState = clonedeep(state);
+                time = new Date();
+                greySty = 'color: gray; font-weight: lighter;';
+                headerCSS = ['color: inherit;', greySty, showTook ? greySty : ''];
+                _context.next = 8;
+                return next();
 
-            if (changes) {
-              changes.forEach(function (elem) {
-                var kind = elem.kind;
-                var output = render(elem);
-                console.log("%c".concat(dictionary[kind].text), style(kind), output);
-              });
-            }
+              case 8:
+                result = _context.sent;
+                changes = diff(prevState, state);
+                took = Date.now() - time.getTime();
 
-            console.log('next state', state);
-            console.groupEnd();
-            return _context.abrupt("return", result);
+                (_console = console).group.apply(_console, [titleFormatter("".concat(namespace, "/").concat(action), time, took, options)].concat(headerCSS));
 
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
+                console.log('%cprev state', 'color: #9E9E9E; font-weight: bold;', prevState);
 
-  return function (_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
+                if (showDiff && changes) {
+                  changes.forEach(function (elem) {
+                    var _console2;
+
+                    var kind = elem.kind;
+                    var output = render(elem);
+
+                    (_console2 = console).log.apply(_console2, ["%c".concat(dict[kind].text), style(kind)].concat(_toConsumableArray(output)));
+                  });
+                }
+
+                console.log('%cnext state', 'color: #4CAF50; font-weight: bold;', state);
+                console.groupEnd();
+                return _context.abrupt("return", result);
+
+              case 17:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }()
+  );
+});

lib/index.d.ts

@@ -1,3 +0,5 @@
-import { Context, Next } from 'hookstore';
-declare const _default: (ctx: Context<import("hookstore").State>, next: Next) => Promise<any>;
+import { Middleware } from 'hookstore';
+import { Options } from './defaults';
+export declare type Options = Options;
+declare const _default: (options?: Options) => Middleware;
 export default _default;

lib/index.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -19,18 +21,22 @@
 
-var dictionary = {
+var _utils = require("./utils");
+
+var _defaults = require("./defaults");
+
+var dict = {
   E: {
     color: '#2196F3',
-    text: 'updated:'
+    text: 'CHANGED:'
   },
   N: {
     color: '#4CAF50',
-    text: 'added:'
+    text: 'ADDED:'
   },
   D: {
     color: '#F44336',
-    text: 'deleted:'
+    text: 'DELETED:'
   },
   A: {
     color: '#2196F3',
-    text: 'added:'
+    text: 'ARRAY:'
   }
@@ -40,5 +46,6 @@ };
 function style(kind) {
-  return "color: ".concat(dictionary[kind].color);
-}
+  return "color: ".concat(dict[kind].color);
+} // what's the type of `Diff`?
 
+
 function render(elm) {
@@ -54,9 +61,9 @@ var kind = elm.kind,
     case 'E':
-      return "".concat(path.join('.'), " ").concat(lhs, " \u2192 ").concat(rhs);
+      return [path.join('.'), lhs, '→', rhs];
 
     case 'N':
-      return "".concat(path.join('.'), " ").concat(rhs);
+      return [path.join('.'), rhs];
 
     case 'D':
-      return "".concat(path.join('.'));
+      return [path.join('.')];
 
@@ -67,55 +74,76 @@ case 'A':
     default:
-      return null;
+      return [];
   }
-} // @see https://github.com/evgenyrodionov/redux-diff-logger
+}
 
+function titleFormatter(title, time, took, options) {
+  var parts = ["%c".concat(title)];
+  parts.push("%c@ ".concat((0, _utils.formatTime)(time)));
+  if (options.showTook) parts.push("%c(in ".concat(took.toFixed(2), " ms)"));
+  return parts.join(' ');
+}
 
-var _default =
-/*#__PURE__*/
-function () {
-  var _ref = (0, _asyncToGenerator2.default)(
-  /*#__PURE__*/
-  _regenerator.default.mark(function _callee(ctx, next) {
-    var namespace, action, state, prevState, time, result, changes;
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            namespace = ctx.namespace, action = ctx.action, state = ctx.state;
-            prevState = (0, _lodash.default)(state);
-            time = new Date();
-            _context.next = 5;
-            return next();
+var _default = function _default() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _defaults.defaultOptions;
+  return (
+    /*#__PURE__*/
+    function () {
+      var _ref = (0, _asyncToGenerator2.default)(
+      /*#__PURE__*/
+      _regenerator.default.mark(function _callee(ctx, next) {
+        var _console;
 
-          case 5:
-            result = _context.sent;
-            changes = (0, _deepDiff.diff)(prevState, state);
-            console.group("".concat(namespace, "/").concat(action, " @ ").concat(time.getHours(), ":").concat(time.getMinutes(), ":").concat(time.getSeconds()));
-            console.log('prev state', prevState);
+        var showDiff, showTook, namespace, action, state, prevState, time, greySty, headerCSS, result, changes, took;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                showDiff = options.showDiff, showTook = options.showTook;
+                namespace = ctx.namespace, action = ctx.action, state = ctx.state;
+                prevState = (0, _lodash.default)(state);
+                time = new Date();
+                greySty = 'color: gray; font-weight: lighter;';
+                headerCSS = ['color: inherit;', greySty, showTook ? greySty : ''];
+                _context.next = 8;
+                return next();
 
-            if (changes) {
-              changes.forEach(function (elem) {
-                var kind = elem.kind;
-                var output = render(elem);
-                console.log("%c".concat(dictionary[kind].text), style(kind), output);
-              });
-            }
+              case 8:
+                result = _context.sent;
+                changes = (0, _deepDiff.diff)(prevState, state);
+                took = Date.now() - time.getTime();
 
-            console.log('next state', state);
-            console.groupEnd();
-            return _context.abrupt("return", result);
+                (_console = console).group.apply(_console, [titleFormatter("".concat(namespace, "/").concat(action), time, took, options)].concat(headerCSS));
 
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
+                console.log('%cprev state', 'color: #9E9E9E; font-weight: bold;', prevState);
 
-  return function (_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
+                if (showDiff && changes) {
+                  changes.forEach(function (elem) {
+                    var _console2;
 
+                    var kind = elem.kind;
+                    var output = render(elem);
+
+                    (_console2 = console).log.apply(_console2, ["%c".concat(dict[kind].text), style(kind)].concat((0, _toConsumableArray2.default)(output)));
+                  });
+                }
+
+                console.log('%cnext state', 'color: #4CAF50; font-weight: bold;', state);
+                console.groupEnd();
+                return _context.abrupt("return", result);
+
+              case 17:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }()
+  );
+};
+
 exports.default = _default;

package.json

 {
   "name": "hookstore-logger",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "simple logger middleware for hookstore",
@@ -14,3 +14,3 @@ "main": "lib/index.js",
     "deep-diff": "^1.0.2",
-    "hookstore": "^0.1.5",
+    "hookstore": "^0.1.6",
     "lodash.clonedeep": "^4.5.0"
@@ -41,3 +41,3 @@ },
   "license": "MIT",
-  "gitHead": "1492e0febd45bd22ca99a7b6bfa597ff754946bc"
+  "gitHead": "19dda90efbf416872b77bc8be31ec309fd3fe162"
 }

src/index.ts

@@ -1,50 +0,81 @@
-import { diff } from 'deep-diff';
+import { diff, Diff } from 'deep-diff';
 import clonedeep from 'lodash.clonedeep';
-import { Context, Next } from 'hookstore';
+import { Context, Next, State, Middleware } from 'hookstore';
 
-const dictionary: any = {
+import { formatTime } from './utils';
+import { defaultOptions, Options } from './defaults';
+
+interface ColorText<T> {
+  color: T;
+  text: T;
+}
+
+interface Dictionary<T> {
+  [key: string]: T;
+}
+
+const dict: Dictionary<ColorText<string>> = {
   E: {
     color: '#2196F3',
-    text: 'updated:',
+    text: 'CHANGED:',
   },
   N: {
     color: '#4CAF50',
-    text: 'added:',
+    text: 'ADDED:',
   },
   D: {
     color: '#F44336',
-    text: 'deleted:',
+    text: 'DELETED:',
   },
   A: {
     color: '#2196F3',
-    text: 'added:',
+    text: 'ARRAY:',
   },
 };
 
-function style(kind: string) {
-  return `color: ${dictionary[kind].color}`;
+function style(kind: keyof Dictionary<ColorText<string>>) {
+  return `color: ${dict[kind].color}`;
 }
 
-function render(elm: any) {
-  const { kind, path, lhs, rhs, index, item } = elm;
+// what's the type of `Diff`?
+function render(elm: Diff<State>): Array<any> {
+  const { kind, path, lhs, rhs, index, item } = elm as any;
 
   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];
-  default:
-    return null;
+    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 [];
   }
 }
 
-// @see https://github.com/evgenyrodionov/redux-diff-logger
-export default async (ctx: Context, next: Next) => {
+function titleFormatter(
+  title: string,
+  time: Date, 
+  took: number,
+  options: Options
+): string {
+  const parts = [`%c${title}`];
+
+  parts.push(`%c@ ${formatTime(time)}`);
+  if (options.showTook) parts.push(`%c(in ${took.toFixed(2)} ms)`);
+
+  return parts.join(' ');
+}
+
+export type Options = Options;
+
+export default (options: Options = defaultOptions): Middleware => async (ctx: Context, next: Next) => {
+  const { showDiff, showTook } = options;
   const { namespace, action, state } = ctx;
   const prevState = clonedeep(state);
   const time = new Date();
+  const greySty = 'color: gray; font-weight: lighter;';
+  const headerCSS = ['color: inherit;', greySty, showTook ? greySty : ''];
 
@@ -54,16 +85,17 @@ const result: any = await next();
   const changes = diff(prevState, state);
+  const took = Date.now() - time.getTime();
 
-  console.group(`${namespace}/${action} @ ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`);
-  console.log('prev state', prevState);
+  console.group(titleFormatter(`${namespace}/${action}`, time, took, options), ...headerCSS);
+  console.log('%cprev state', 'color: #9E9E9E; font-weight: bold;', prevState);
 
-  if (changes) {
-    changes.forEach((elem: any) => {
+  if (showDiff && changes) {
+    changes.forEach((elem: Diff<State>) => {
       const { kind } = elem;
       const output = render(elem);
 
-      console.log(`%c${dictionary[kind].text}`, style(kind), output);
+      console.log(`%c${dict[kind].text}`, style(kind), ...output);
     });
   }
 
-  console.log('next state', state);
+  console.log('%cnext state', 'color: #4CAF50; font-weight: bold;', state);
   console.groupEnd();
@@ -70,0 +102,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16530

54.2%

Number of package files

18

125%

Lines of code

374

53.28%

Dependency changes

• Updated

  hookstore@^0.1.6