logger.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3. typeof define === 'function' && define.amd ? define(factory) :
  4. (global = global || self, global.createVuexLogger = factory());
  5. }(this, function () { 'use strict';
  6. /**
  7. * Get the first item that pass the test
  8. * by second argument function
  9. *
  10. * @param {Array} list
  11. * @param {Function} f
  12. * @return {*}
  13. */
  14. function find (list, f) {
  15. return list.filter(f)[0]
  16. }
  17. /**
  18. * Deep copy the given object considering circular structure.
  19. * This function caches all nested objects and its copies.
  20. * If it detects circular structure, use cached copy to avoid infinite loop.
  21. *
  22. * @param {*} obj
  23. * @param {Array<Object>} cache
  24. * @return {*}
  25. */
  26. function deepCopy (obj, cache) {
  27. if ( cache === void 0 ) cache = [];
  28. // just return if obj is immutable value
  29. if (obj === null || typeof obj !== 'object') {
  30. return obj
  31. }
  32. // if obj is hit, it is in circular structure
  33. var hit = find(cache, function (c) { return c.original === obj; });
  34. if (hit) {
  35. return hit.copy
  36. }
  37. var copy = Array.isArray(obj) ? [] : {};
  38. // put the copy into cache at first
  39. // because we want to refer it in recursive deepCopy
  40. cache.push({
  41. original: obj,
  42. copy: copy
  43. });
  44. Object.keys(obj).forEach(function (key) {
  45. copy[key] = deepCopy(obj[key], cache);
  46. });
  47. return copy
  48. }
  49. // Credits: borrowed code from fcomb/redux-logger
  50. function createLogger (ref) {
  51. if ( ref === void 0 ) ref = {};
  52. var collapsed = ref.collapsed; if ( collapsed === void 0 ) collapsed = true;
  53. var filter = ref.filter; if ( filter === void 0 ) filter = function (mutation, stateBefore, stateAfter) { return true; };
  54. var transformer = ref.transformer; if ( transformer === void 0 ) transformer = function (state) { return state; };
  55. var mutationTransformer = ref.mutationTransformer; if ( mutationTransformer === void 0 ) mutationTransformer = function (mut) { return mut; };
  56. var logger = ref.logger; if ( logger === void 0 ) logger = console;
  57. return function (store) {
  58. var prevState = deepCopy(store.state);
  59. store.subscribe(function (mutation, state) {
  60. if (typeof logger === 'undefined') {
  61. return
  62. }
  63. var nextState = deepCopy(state);
  64. if (filter(mutation, prevState, nextState)) {
  65. var time = new Date();
  66. var formattedTime = " @ " + (pad(time.getHours(), 2)) + ":" + (pad(time.getMinutes(), 2)) + ":" + (pad(time.getSeconds(), 2)) + "." + (pad(time.getMilliseconds(), 3));
  67. var formattedMutation = mutationTransformer(mutation);
  68. var message = "mutation " + (mutation.type) + formattedTime;
  69. var startMessage = collapsed
  70. ? logger.groupCollapsed
  71. : logger.group;
  72. // render
  73. try {
  74. startMessage.call(logger, message);
  75. } catch (e) {
  76. console.log(message);
  77. }
  78. logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState));
  79. logger.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation);
  80. logger.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState));
  81. try {
  82. logger.groupEnd();
  83. } catch (e) {
  84. logger.log('—— log end ——');
  85. }
  86. }
  87. prevState = nextState;
  88. });
  89. }
  90. }
  91. function repeat (str, times) {
  92. return (new Array(times + 1)).join(str)
  93. }
  94. function pad (num, maxLength) {
  95. return repeat('0', maxLength - num.toString().length) + num
  96. }
  97. return createLogger;
  98. }));