react-console-log
Version:
render console logs as a react component
561 lines (535 loc) • 20.4 kB
JavaScript
function ___$insertStyle(css) {
if (!css) {
return;
}
if (typeof window === 'undefined') {
return;
}
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = css;
document.head.appendChild(style);
return css;
}
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = _interopDefault(require('react'));
var core = require('@material-ui/core');
var createStore = _interopDefault(require('zustand'));
var safestorage = require('@yehonadav/safestorage');
var middleware = require('zustand/middleware');
var safestringify = require('@yehonadav/safestringify');
var makeStyles = _interopDefault(require('@material-ui/core/styles/makeStyles'));
var BugReportIcon = _interopDefault(require('@material-ui/icons/BugReport'));
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(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 version = "1.1.0";
var logTypes = {
log: 'log',
info: 'info',
error: 'error',
debug: 'debug',
exception: 'exception',
trace: 'trace',
warn: 'warn'
};
var persistOptionsName = 'useConsoleStore';
var persistId = persistOptionsName + "-console-logs";
var saveConsoleInStorage = function (console) {
safestorage.persistLocal.setItem(persistId, console);
};
var initConsoleState = function () {
var consoleLogs = safestorage.persistLocal.tryToGetItem(persistId).value;
if (!consoleLogs) {
consoleLogs = { logs: [] };
saveConsoleInStorage(consoleLogs);
}
return consoleLogs;
};
var _log = console.log;
var _info = console.info;
var _error = console.error;
var _debug = console.debug;
var _exception = console.exception;
var _trace = console.trace;
var _warn = console.warn;
var sendConsoleMessage = function (props) {
var _a;
var date = new Date();
(_a = getConsole().logs).push.apply(_a, props.messages.map(function (object) { return ({
type: props.logLevel,
message: safestringify.safeStringify(object),
object: object,
date: date
}); }));
};
var setConsoleVersion = function (version) {
var message = "Console Version " + version;
_log(message);
sendConsoleMessage({ logLevel: logTypes.log, messages: [message] });
reRenderConsole();
};
var consoleLog = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_log.apply(void 0, args);
sendConsoleMessage({ logLevel: logTypes.log, messages: args });
reRenderConsole();
};
var consoleTrace = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_trace.apply(void 0, args);
sendConsoleMessage({ logLevel: logTypes.trace, messages: args });
reRenderConsole();
};
var consoleDebug = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_debug.apply(void 0, args);
sendConsoleMessage({ logLevel: logTypes.debug, messages: args });
reRenderConsole();
};
var consoleInfo = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_info.apply(void 0, args);
sendConsoleMessage({ logLevel: logTypes.info, messages: args });
reRenderConsole();
};
var consoleWarn = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_warn.apply(void 0, args);
sendConsoleMessage({ logLevel: logTypes.warn, messages: args });
reRenderConsole();
};
var consoleError = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_error.apply(void 0, args);
sendConsoleMessage({ logLevel: logTypes.error, messages: args });
reRenderConsole();
};
var consoleException = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_exception.apply(void 0, args);
sendConsoleMessage({ logLevel: logTypes.exception, messages: args });
reRenderConsole();
};
var consoleLogPersist = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
consoleLog.apply(void 0, args);
saveConsoleInStorage(getConsole());
};
var consoleTracePersist = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
consoleTrace.apply(void 0, args);
saveConsoleInStorage(getConsole());
};
var consoleDebugPersist = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
consoleDebug.apply(void 0, args);
saveConsoleInStorage(getConsole());
};
var consoleInfoPersist = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
consoleInfo.apply(void 0, args);
saveConsoleInStorage(getConsole());
};
var consoleWarnPersist = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
consoleWarn.apply(void 0, args);
saveConsoleInStorage(getConsole());
};
var consoleErrorPersist = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
consoleError.apply(void 0, args);
saveConsoleInStorage(getConsole());
};
var consoleExceptionPersist = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
consoleException.apply(void 0, args);
saveConsoleInStorage(getConsole());
};
var setDefaultLogger = function () {
console.log = _log;
console.info = _info;
console.error = _error;
console.debug = _debug;
console.exception = _exception;
console.trace = _trace;
console.warn = _warn;
};
var setLoggerForEnabledConsole = function () {
console.log = consoleLog;
console.trace = consoleTrace;
console.debug = consoleDebug;
console.info = consoleInfo;
console.warn = consoleWarn;
console.error = consoleError;
console.exception = consoleException;
};
var setLoggerForPersistentConsole = function () {
console.log = consoleLogPersist;
console.trace = consoleTracePersist;
console.debug = consoleDebugPersist;
console.info = consoleInfoPersist;
console.warn = consoleWarnPersist;
console.error = consoleErrorPersist;
console.exception = consoleExceptionPersist;
};
var setLoggerFunctions = function (isEnabled, isPersistent) {
!isEnabled
? setDefaultLogger()
: isPersistent
? setLoggerForPersistentConsole()
: setLoggerForEnabledConsole();
};
var state = {
console: initConsoleState(),
open: false,
persist: false,
enabled: false,
};
var stateCreator = function () { return state; };
var persistOptions = {
name: persistOptionsName,
whitelist: ['open', 'persist', 'enabled'],
getStorage: safestorage.getStorageCall,
};
var useStore = createStore(middleware.persist(stateCreator, persistOptions));
// data will persist even after logout
safestorage.clearDataService.excludeLocalStorageItem(persistOptions.name);
safestorage.clearDataService.excludeLocalStorageItem(persistId);
// getters
var get = useStore.getState;
var getConsole = function () { return get().console; };
var isConsolePersistent = function () { return get().persist; };
var isConsoleOpen = function () { return get().open; };
var isConsoleEnabled = function () { return get().enabled; };
// setters
var set = useStore.setState;
var setConsoleLogs = function () { return set(function (s) { return ({ console: __assign(__assign({}, s.console), { logs: [] }) }); }); };
var setConsolePersistent = function (persist) { setLoggerFunctions(isConsoleEnabled(), persist); set({ persist: persist }); };
var setConsoleOpen = function (open) { return set({ open: open }); };
var setConsoleEnabled = function (enabled) { setLoggerFunctions(enabled, isConsolePersistent()); set({ enabled: enabled }); };
var setConsolePersistentTrue = function () { return setConsolePersistent(true); };
var setConsoleOpenTrue = function () { return setConsoleOpen(true); };
var setConsoleEnabledTrue = function () { return setConsoleEnabled(true); };
var setConsolePersistentFalse = function () { return setConsolePersistent(false); };
var setConsoleOpenFalse = function () { return setConsoleOpen(false); };
var setConsoleEnabledFalse = function () { return setConsoleEnabled(false); };
var toggleConsolePersistent = function () { return setConsolePersistent(!get().persist); };
var toggleConsoleOpen = function () { return setConsoleOpen(!get().open); };
var toggleConsoleEnabled = function () { return setConsoleEnabled(!get().enabled); };
// actions
var reRenderConsole = function () { return set(function (s) { return ({ console: __assign({}, s.console) }); }); };
// helpers
var fetchConsole = function (s) { return s.console; };
var fetchIsConsolePersistent = function (s) { return s.persist; };
var fetchIsConsoleOpen = function (s) { return s.open; };
var fetchIsConsoleEnabled = function (s) { return s.enabled; };
// hooks
var useConsole = function () { return useStore(fetchConsole); };
var useIsConsolePersistent = function () { return useStore(fetchIsConsolePersistent); };
var useIsConsoleOpen = function () { return useStore(fetchIsConsoleOpen); };
var useIsConsoleEnabled = function () { return useStore(fetchIsConsoleEnabled); };
try {
window.console = console;
}
catch (e) {
console.warn({
window: {
message: "failed to set window.console",
}
});
}
var logger = console;
logger.setVersion = setConsoleVersion;
var clearConsole = function () { return set(function (s) {
logger.clear();
var consoleState = __assign(__assign({}, s.console), { logs: [] });
saveConsoleInStorage(consoleState);
return { console: consoleState };
}); };
var ClearConsoleButton = function (props) {
return (React.createElement(core.Button, __assign({ onClick: clearConsole, variant: "contained" }, props), "Clear"));
};
var useConsoleStyles = makeStyles({
root: {
width: "100%",
padding: 16,
paddingTop: 48,
paddingBottom: 90,
},
Grid: {
width: "100%",
height: 800,
overflow: "auto",
background: "#fff",
borderRadius: 5,
},
messageContainer: {},
logMessageType: {
fontSize: 12,
fontWeight: 200,
},
logType: {
fontSize: 12,
fontWeight: 600,
},
message: {},
"logMessage-type-log": {
background: "#e5e2e2",
color: "#1e1f1f",
fontSize: 18,
fontWeight: 400,
fontFamily: "Segoe UI",
borderRadius: 5,
padding: 12,
},
"logMessage-type-info": {
background: "#5E9FFF",
color: "#fff",
fontSize: 18,
fontWeight: 600,
fontFamily: "Segoe UI",
borderRadius: 5,
padding: 12,
},
"logMessage-type-error": {
background: "#e35d5d",
color: "#fff",
fontSize: 18,
fontWeight: 600,
fontFamily: "Segoe UI",
borderRadius: 5,
padding: 12,
},
"logMessage-type-debug": {
background: "#2e383c",
color: "#fff",
fontSize: 18,
fontWeight: 600,
fontFamily: "Segoe UI",
borderRadius: 5,
padding: 12,
},
"logMessage-type-exception": {
background: "#ba1414",
color: "#fff",
fontSize: 18,
fontWeight: 600,
fontFamily: "Segoe UI",
borderRadius: 5,
padding: 12,
},
"logMessage-type-trace": {
background: "#151618",
color: "#fff",
fontSize: 18,
fontWeight: 600,
fontFamily: "Segoe UI",
borderRadius: 5,
padding: 12,
},
"logMessage-type-warn": {
background: "#f5a364",
color: "#fff",
fontSize: 18,
fontWeight: 600,
fontFamily: "Segoe UI",
borderRadius: 5,
padding: 12,
},
});
var EnableConsoleButton = function (props) {
var isConsoleEnabled = useIsConsoleEnabled();
return (React.createElement(core.Button, __assign({ onClick: toggleConsoleEnabled, variant: "contained" }, props),
isConsoleEnabled ? 'Stop' : 'Enable',
" Logging"));
};
var PersistConsoleButton = function (props) {
var isConsolePersistent = useIsConsolePersistent();
return (React.createElement(core.Button, __assign({ onClick: toggleConsolePersistent, variant: "contained" }, props),
isConsolePersistent ? 'Disable' : 'Enable',
" Storage"));
};
var OpenConsoleButton = function (_a) {
var _b = _a.iconButtonProps, iconButtonProps = _b === void 0 ? {} : _b, _c = _a.bugReportIconProps, bugReportIconProps = _c === void 0 ? {} : _c;
return (React.createElement(core.IconButton, __assign({}, iconButtonProps),
React.createElement(BugReportIcon, __assign({ onClick: toggleConsoleOpen }, bugReportIconProps))));
};
var LogItem = function (_a) {
var logMessage = _a.logMessage;
var classes = useConsoleStyles();
return (React.createElement(core.Grid, { item: true, xs: 12, className: classes.messageContainer },
React.createElement(core.Grid, { container: true, spacing: 1,
// @ts-ignore
className: classes["logMessage-type-" + logMessage.type] },
React.createElement(core.Grid, { item: true, className: classes.logType }, logMessage.type.toUpperCase()),
React.createElement(core.Grid, { item: true, className: classes.logMessageType },
"[",
logMessage.date.toLocaleDateString(),
"-",
logMessage.date.toLocaleTimeString(),
"] [",
typeof logMessage.message,
"]"),
React.createElement(core.Grid, { item: true, className: classes.message, xs: 12 },
React.createElement("pre", null, logMessage.message)))));
};
var onConsoleLoad = function () {
var _a = get(), enabled = _a.enabled, persist = _a.persist, console = _a.console;
// make sure persist dates are not strings
console.logs.forEach(function (log) { log.date = new Date(log.date); });
// set correct functions on load
setLoggerFunctions(enabled, persist);
// set console version
logger.setVersion(version);
};
onConsoleLoad();
var ConsoleLog = function () {
var consoleLog = useConsole();
var classes = useConsoleStyles();
var open = useIsConsoleOpen();
if (!open)
return React.createElement(OpenConsoleButton, null);
return (React.createElement("div", { className: classes.root },
React.createElement(core.Grid, { container: true, spacing: 2, style: { marginBottom: 8 } },
React.createElement(core.Grid, { item: true },
React.createElement(OpenConsoleButton, null)),
React.createElement(core.Grid, { item: true, style: { marginTop: 4 } },
React.createElement(ClearConsoleButton, null)),
React.createElement(core.Grid, { item: true, style: { marginTop: 4 } },
React.createElement(EnableConsoleButton, null)),
React.createElement(core.Grid, { item: true, style: { marginTop: 4 } },
React.createElement(PersistConsoleButton, null))),
React.createElement(core.Grid, { container: true, spacing: 3, className: classes.Grid }, consoleLog.logs.map(function (logMessage, index) {
return React.createElement(LogItem, { logMessage: logMessage, key: index });
}))));
};
exports.ClearConsoleButton = ClearConsoleButton;
exports.ConsoleLog = ConsoleLog;
exports.EnableConsoleButton = EnableConsoleButton;
exports.LogItem = LogItem;
exports.OpenConsoleButton = OpenConsoleButton;
exports.PersistConsoleButton = PersistConsoleButton;
exports._debug = _debug;
exports._error = _error;
exports._exception = _exception;
exports._info = _info;
exports._log = _log;
exports._trace = _trace;
exports._warn = _warn;
exports.clearConsole = clearConsole;
exports.consoleDebug = consoleDebug;
exports.consoleDebugPersist = consoleDebugPersist;
exports.consoleError = consoleError;
exports.consoleErrorPersist = consoleErrorPersist;
exports.consoleException = consoleException;
exports.consoleExceptionPersist = consoleExceptionPersist;
exports.consoleInfo = consoleInfo;
exports.consoleInfoPersist = consoleInfoPersist;
exports.consoleLog = consoleLog;
exports.consoleLogPersist = consoleLogPersist;
exports.consoleTrace = consoleTrace;
exports.consoleTracePersist = consoleTracePersist;
exports.consoleWarn = consoleWarn;
exports.consoleWarnPersist = consoleWarnPersist;
exports.getConsole = getConsole;
exports.getConsoleStoreState = get;
exports.initConsoleState = initConsoleState;
exports.isConsoleEnabled = isConsoleEnabled;
exports.isConsoleOpen = isConsoleOpen;
exports.isConsolePersistent = isConsolePersistent;
exports.logTypes = logTypes;
exports.logger = logger;
exports.persistId = persistId;
exports.persistOptionsName = persistOptionsName;
exports.reRenderConsole = reRenderConsole;
exports.saveConsoleInStorage = saveConsoleInStorage;
exports.setConsoleEnabled = setConsoleEnabled;
exports.setConsoleEnabledFalse = setConsoleEnabledFalse;
exports.setConsoleEnabledTrue = setConsoleEnabledTrue;
exports.setConsoleLogs = setConsoleLogs;
exports.setConsoleOpen = setConsoleOpen;
exports.setConsoleOpenFalse = setConsoleOpenFalse;
exports.setConsoleOpenTrue = setConsoleOpenTrue;
exports.setConsolePersistent = setConsolePersistent;
exports.setConsolePersistentFalse = setConsolePersistentFalse;
exports.setConsolePersistentTrue = setConsolePersistentTrue;
exports.setConsoleStoreState = set;
exports.setConsoleVersion = setConsoleVersion;
exports.setDefaultLogger = setDefaultLogger;
exports.setLoggerForEnabledConsole = setLoggerForEnabledConsole;
exports.setLoggerForPersistentConsole = setLoggerForPersistentConsole;
exports.setLoggerFunctions = setLoggerFunctions;
exports.toggleConsoleEnabled = toggleConsoleEnabled;
exports.toggleConsoleOpen = toggleConsoleOpen;
exports.toggleConsolePersistent = toggleConsolePersistent;
exports.useConsole = useConsole;
exports.useConsoleStore = useStore;
exports.useConsoleStyles = useConsoleStyles;
exports.useIsConsoleEnabled = useIsConsoleEnabled;
exports.useIsConsoleOpen = useIsConsoleOpen;
exports.useIsConsolePersistent = useIsConsolePersistent;
exports.version = version;
//# sourceMappingURL=index.js.map