beautify-console-log
Version:
This is a further beautification and encapsulation of the 'console' object. You can use it like using "console. log", "console. info", "console. warn", "console. error", and it can display the code line information where the log is printed.
309 lines (296 loc) • 9.1 kB
text/typescript
import {
BaseColorType,
BaseConfig,
ColorType,
LogType,
PadStartText,
} from "./model";
/**
* 转换node使用的日志颜色
* @param option 颜色类型配置
* @param text 日志起始填充文本内容
* @param type 日志类型
* @returns string
*/
const baseColor = (
option: BaseColorType = {},
type: LogType,
text?: string,
): string => {
let { color = ColorType.white, bgColor = ColorType.white } = option;
if (typeof color === 'string') {
const keys = Object.keys(ColorType)
for (let i = 0; i < keys.length; i++) {
const element = keys[i]
if (element === color) {
color = ColorType[element]
break
}
}
}
if (typeof bgColor === 'string') {
const keys = Object.keys(ColorType)
for (let i = 0; i < keys.length; i++) {
const element = keys[i]
if (element === bgColor) {
bgColor = ColorType[element]
break
}
}
}
const backgroundColor: number = (Number(bgColor) || 0) + 10;
const textColor: number = Number(color) || 0;
if (typeof process === "object" && process.title === "node") {
if (text !== '' && text !== undefined && text !== null) {
return `\x1b[${backgroundColor};${textColor};1m ${type.toUpperCase()} \x1b[0m\x1b[100;97m ${text}${' '}\x1b[0m`;
} else {
return `\x1b[${backgroundColor};${textColor};1m ${type.toUpperCase()} \x1b[0m`;
}
} else {
if (text !== '' && text !== undefined && text !== null) {
return `\x1b[${backgroundColor};${textColor};1m ${type.toUpperCase()} \x1b[0m\x1b[100;97m ${text}${' '}`;
} else {
return `\x1b[${backgroundColor};${textColor};1m ${type.toUpperCase()} `;
}
}
};
/**
* 日志左侧填充的文字
*/
const createPadText = (logType: LogType, defaultStyle: BaseColorType) => {
return (text: string = "beautify-console-log", style: BaseColorType = defaultStyle) => {
return [baseColor({ ...defaultStyle, ...style }, logType, text)];
};
};
const padText: Record<LogType, ReturnType<typeof createPadText>> = {
info: createPadText(LogType.info, { bgColor: ColorType.blue, color: ColorType.white }),
log: createPadText(LogType.log, { bgColor: ColorType.green, color: ColorType.white }),
warn: createPadText(LogType.warn, { bgColor: ColorType.yellow, color: ColorType.black }),
error: createPadText(LogType.error, { bgColor: ColorType.red, color: ColorType.white }),
};
/**
* BeautifyConsole 是console日志工具
*
* 目前只有常用的 info、log、error、warn类型
*
* 1.使用：
* ```
*
* import BeautifyConsole from "beautify-console-log";
* const log = BeautifyConsole.getInstance();
* log.log(1, [2, 3], '4');
* ```
*
* 2.设置打开console日志显示：Log.open()
*
* 3.设置关闭console日志显示：Log.close()
*
* 4.设置开始的填充文本console日志：Log.setPadStartText()
*
*
* ```
* {
* info: (...args: any[]) => void;
* error: (...args: any[]) => void;
* warn: (...args: any[]) => void;
* log: (...args: any[]) => void;
* static getInstance(): BeautifyConsole;
* config(config: {
* type?: LogType[] | ('info' | 'log' | 'warn' | 'error')[];
* title?: string;
* }): void;
* reset(): BeautifyConsole;
* open(type?: LogType): BeautifyConsole;
* close(type?: LogType): BeautifyConsole;
* setPadStartText(config: PadStartText): BeautifyConsole;
* }
* ```
*
* 可参考 https://developer.mozilla.org/en-US/docs/Web/API/Console
*/
export class BeautifyConsole {
private infoPadStartText: string[] = padText[LogType.info]();
private errorPadStartText: string[] = padText[LogType.error]();
private warnPadStartText: string[] = padText[LogType.warn]();
private logPadStartText: string[] = padText[LogType.log]();
/**
* Print info type information
*/
info = console.info.bind(this, ...this.infoPadStartText);
/**
* Print error type information
*/
error = console.error.bind(this, ...this.errorPadStartText);
/**
* Print warn type information
*/
warn = console.warn.bind(this, ...this.warnPadStartText);
/**
* Print log type information
*/
log = console.log.bind(this, ...this.logPadStartText);
private static instance: BeautifyConsole;
/**
* Singleton mode
*/ public static getInstance(): BeautifyConsole {
if (!this.instance) {
this.instance = new BeautifyConsole();
}
return this.instance;
}
/**
* 初始化配置项
* @param config 是否打印日志 type { BaseConfig: {type?: LogType[] | ('info' | 'log' | 'warn' | 'error')[]; title?: string} }
* 如果配置了type，就只显示配置的日志类型
*/
public config(config: BaseConfig) {
const {
type = [LogType.info, LogType.error, LogType.warn, LogType.log],
title,
} = config;
if (type.length > 0) {
this.setShowLog(false);
type.forEach((item) => this.setShowLog(true, item));
}
if (title) {
type.forEach((item) =>
this.setPadStartText({
logType: item,
title,
}),
);
}
}
/**
* 设置显示/隐藏console日志
* @param showLog 是否打印日志 type { boolean }
* @param type 需要设置的日志类型日志 type { LogType | 'info' | 'log' | 'warn' | 'error' }
*/
private setShowLog(
showLog: boolean,
type?: LogType | "info" | "log" | "warn" | "error",
) {
const setShowLogFunction = {
info: () => {
this.info = showLog
? console.info.bind(this, ...this.infoPadStartText)
: (...parasm: any) => undefined;
},
error: () => {
this.error = showLog
? console.error.bind(this, ...this.errorPadStartText)
: (...parasm: any) => undefined;
},
warn: () => {
this.warn = showLog
? console.warn.bind(this, ...this.warnPadStartText)
: (...parasm: any) => undefined;
},
log: () => {
this.log = showLog
? console.log.bind(this, ...this.logPadStartText)
: (...parasm: any) => undefined;
},
};
// 如果传入了要修改的console日志类型，就只改对应的显示隐藏，否则就更改所有的
if (type) {
if (setShowLogFunction[type]) {
setShowLogFunction[type]();
} else {
console.error(`type:${type} not supported`);
}
} else {
if (showLog) {
this.info = console.info.bind(this, ...this.infoPadStartText);
this.error = console.error.bind(this, ...this.errorPadStartText);
this.warn = console.warn.bind(this, ...this.warnPadStartText);
this.log = console.log.bind(this, ...this.logPadStartText);
} else {
this.info = (...parasm: any) => undefined;
this.error = (...parasm: any) => undefined;
this.warn = (...parasm: any) => undefined;
this.log = (...parasm: any) => undefined;
}
}
}
/**
* 重置console日志
*
* @returns BeautifyConsole
*/
public reset(): BeautifyConsole {
this.setShowLog(true);
return this;
}
/**
* 打开console日志
*
* @param type 需要设置的日志类型日志 type { LogType | 'info' | 'log' | 'warn' | 'error' }
*
* @returns BeautifyConsole
*/
public open(
type?: LogType | "info" | "log" | "warn" | "error",
): BeautifyConsole {
this.setShowLog(true, type);
return this;
}
/**
* 关闭console日志
*
* @param type 需要设置的日志类型日志 type { LogType | 'info' | 'log' | 'warn' | 'error' }
*
* @returns BeautifyConsole
*/
public close(
type?: LogType | "info" | "log" | "warn" | "error",
): BeautifyConsole {
this.setShowLog(false, type);
return this;
}
/**
* 重置开始的填充文本console日志，默认如info类型的开始填充： `cbeautify-console-log info: -> `
* @param title type { string }
* @param logType type { logType | 'info' | 'log' | 'warn' | 'error' }
* @param style type { PadStartStyle }
* @returns BeautifyConsole
*/
public setPadStartText(config: PadStartText): BeautifyConsole {
try {
const setTextFunction = {
info: () => {
this.info = console.info.bind(
this,
...padText[LogType.info](config.title, config.style),
);
},
error: () => {
this.error = console.error.bind(
this,
...padText[LogType.error](config.title, config.style),
);
},
warn: () => {
this.warn = console.warn.bind(
this,
...padText[LogType.warn](config.title, config.style),
);
},
log: () => {
this.log = console.log.bind(
this,
...padText[LogType.log](config.title, config.style),
);
},
};
if (setTextFunction[config.logType]) {
setTextFunction[config.logType]();
} else {
console.error(`type:${config.logType} not supported`);
}
} catch (error) {
this.error(error);
}
return this;
}
}