unstated-enhancers
Version:
Unstated tools for state management
234 lines (233 loc) • 9.89 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var differ = require("deep-object-diff");
var unstated = require("unstated");
var Str_1 = require("./support/Str");
var logger_colors_1 = require("./support/logger-colors");
var counter_1 = require("./support/counter");
var console_1 = require("./support/console");
var _global = window || global;
var __SUPER_SECRET_CONTAINER_DEBUG_HOOK__ = unstated.__SUPER_SECRET_CONTAINER_DEBUG_HOOK__;
var ENABLED = typeof _global !== 'undefined' && process.env.NODE_ENV !== 'production' && _global.__REDUX_DEVTOOLS_EXTENSION__;
var console = console_1.default(_global && _global.console ? _global.console : {});
if (ENABLED) {
console.log("You're currently using the unstated logger for development, disable it for production");
}
else {
console.log("You're in production or redux dev tools plugin is missing so unstated logger is disabled");
}
var Logger = /** @class */ (function () {
function Logger() {
this.colors = logger_colors_1.default;
this.collapsed = false;
this.detailed = true;
this.enabled = ENABLED;
this.beauty = false;
this.logger = console;
this.ignore = ['JUMP_TO_STATE', 'JUMP_TO_ACTION'];
this.details = ['added', 'updated', 'deleted'];
this.__containers = {};
this.__widgets = 1;
this.debounce = 200;
this.counter = new counter_1.default();
this.counter.config({
collapsed: this.collapsed,
debounce: this.debounce
});
}
Logger.prototype.__default = function () {
if (this.enabled) {
var name_1 = 'Unstated logger';
this.__devtool = _global.__REDUX_DEVTOOLS_EXTENSION__.connect({ name: name_1 });
this.__devtool.init();
}
};
Logger.prototype.config = function (config) {
for (var _i = 0, _a = Object.entries(config); _i < _a.length; _i++) {
var _b = _a[_i], key = _b[0], value = _b[1];
this[key] = value;
}
this.counter.config({
collapsed: this.collapsed,
debounce: this.debounce
});
this.enabled = this.enabled && _global.__REDUX_DEVTOOLS_EXTENSION__;
};
Logger.prototype.count = function (component) {
if (this.enabled) {
this.counter.count(component);
}
};
Logger.prototype.dispatch = function (action, payload) {
if (payload === void 0) { payload = undefined; }
if (this.enabled) {
var info = 'Dispatched';
var group = this.collapsed ? console.groupCollapsed : console.group;
var titleStyle = ['color: gray; font-weight: lighter;', 'color: #C2185B; font-weight: bold;'];
group.apply(void 0, __spreadArrays(["%c " + info + " - %c" + action], titleStyle));
var contentStyle = "color: #455A64; font-weight: bold";
if (payload !== undefined) {
console.log('%c DATA:', contentStyle, payload);
}
else {
console.log('%c NO DATA', contentStyle);
}
console.groupEnd();
this.__devtool.send(info + " - " + action, payload);
}
};
Logger.prototype.store = function () {
var store = {};
for (var _i = 0, _a = Object.entries(this.__containers); _i < _a.length; _i++) {
var _b = _a[_i], key = _b[0], value = _b[1];
store[key] = value.container.state;
}
return store;
};
Logger.prototype.print = function () {
var color = this.colors.title;
var style = "color: " + color + "; font-weight: bold";
for (var _i = 0, _a = Object.entries(this.__containers); _i < _a.length; _i++) {
var _b = _a[_i], key = _b[0], value = _b[1];
console.log("%c " + key + " \u2192 ", style, value.container.state);
}
};
Logger.prototype.stateWasChanged = function (state) {
return Object.keys(state).length > 0;
};
Logger.prototype.render = function (kind, value) {
var colors = this.colors;
var color = colors[kind].color;
var text = colors[kind].text;
var style = "color: " + color + "; font-weight: bold";
console.log("%c \u2192 " + text, style, value);
};
Logger.prototype.start = function (config) {
var _this = this;
if (config) {
this.config(config);
}
this.__default();
if (this.enabled) {
__SUPER_SECRET_CONTAINER_DEBUG_HOOK__(function (container) {
var prevState = container.state || container.constructor.state;
var name = container.name || container.constructor.name;
if (_this.beauty) {
name = name.replace(/container$/ig, '');
name = Str_1.default.title(Str_1.default.uncamel(name));
}
if (!_this.__containers[name]) {
_this.connect(name, container);
}
container.subscribe(function () {
var state = __assign({}, container.state);
delete container.state.__action;
_this.logToConsole(_this.__containers[name], prevState, state);
_this.emitStateChangesToReduxDevTools(_this.__containers[name], state);
prevState = state;
});
});
}
};
Logger.prototype.connect = function (widget, container) {
var instance;
var name = widget || 'Unstated ' + this.__widgets;
container.__name = name;
this.__containers[name] = {
container: container,
instance: instance
};
if (this.enabled) {
instance = _global.__REDUX_DEVTOOLS_EXTENSION__.connect({ name: name });
instance.init();
this.__containers[name].instance = instance;
this.subscribeToReduxDevToolsEvents(this.__containers[name]);
}
};
Logger.prototype.logToConsole = function (container, prevState, state) {
var nextState = Object.assign({}, state);
var name = container.container.__name;
var colors = this.colors;
var jump = container.container.__jump;
var group = this.collapsed ? console.groupCollapsed : console.group;
var titleStyle = ['color: gray; font-weight: lighter;', 'color: black; font-weight: bold;'];
var info = this.getInfoForReduxDevTools(name, state) + (jump ? ' → ' + jump : '');
var segments = info.split(' - ');
group.apply(void 0, __spreadArrays(["%c " + segments[0] + " - %c " + segments[1]], titleStyle));
var stylesPrevState = "color: " + colors.prevState.color + "; font-weight: bold";
var oldState = Object.assign({}, prevState);
delete oldState.__action;
console.log('%c PREV STATE:', stylesPrevState, oldState);
if (this.detailed) {
var diff = differ.detailedDiff(prevState, state);
for (var i in this.details) {
var kind = this.details[i];
var value = Object.assign({}, diff[kind]);
delete value.__action;
if (this.stateWasChanged(value)) {
this.render(kind, value);
}
}
}
delete nextState.__action;
container.container.__jump = '';
var stylesNextState = "color: " + colors.nextState.color + "; font-weight: bold";
console.log('%c NEXT STATE:', stylesNextState, nextState);
console.groupEnd();
};
Logger.prototype.subscribeToReduxDevToolsEvents = function (container) {
container.instance.subscribe(function (message) {
switch (message.payload && message.payload.type) {
case 'JUMP_TO_STATE':
case 'JUMP_TO_ACTION':
var newState = JSON.parse(message.state);
var action = {
__action: message.payload.type
};
container.container.__jump = newState.__action;
var state = Object.assign({}, newState, action);
container.container.setState(state);
}
});
};
Logger.prototype.getInfoForReduxDevTools = function (name, nextState) {
var info = '...';
if (typeof nextState === 'object') {
info = '' + nextState.__action;
info = name + ' - ' + info;
delete nextState.__jump;
}
return info;
};
Logger.prototype.emitStateChangesToReduxDevTools = function (container, state) {
if (container.instance) {
var name_2 = container.container.__name;
var action = '' + state.__action;
var ignored = this.ignore.indexOf(action) !== -1;
if (!ignored) {
var info = this.getInfoForReduxDevTools(name_2, state);
container.instance.send(info, state);
}
}
};
return Logger;
}());
exports.default = Logger;