Getting started
Install the logger as a dependency
$ npm i @arekkusu90/logger
Import the logger
import Logger from "@arekkusu90/logger";
Use the logger
import Logger from "@arekkusu90/logger";
const logger = new Logger();
logger.text("Blue").style("color: blue").space().text("text").log();
Playground
You can have fun with the playground on CodeSandbox
Examples
// Banner like log
logger
.text("I'm awesome 😎")
.bold()
.size("2rem")
.textShadow("1px 1px 2px purple, 0 0 6px white, 0 0 3px purple")
.bgGradient("to right bottom", "green-200", "blue-200")
.borderLeft(8, "purple-800")
.borderTop(8, "purple-600")
.borderRight(8, "purple-400")
.borderBottom(8, "purple-200")
.borderRadius(8)
.p(16)
.my(16)
.log();
// Cool log for an HTTP request
logger.text("POST").bold().badge().bgColor("green-100").color("black");
logger
.space()
.text("FormData")
.bold()
.badge()
.bgColor("deeppurple-50")
.color("black");
logger.space().text("https://my-host.dev/users").bold();
logger.space().text("➜").bold();
logger.space().text("201").bold().chip().bgColor("green-100").color("black");
logger
.space()
.text("⏱️175ms")
.bold()
.chip()
.bgColor("green-100")
.color("black");
logger
.space()
.text("📦97.5kb")
.bold()
.chip()
.bgColor("deeppurple-100")
.color("black");
logger
.space()
.text("JSON")
.bold()
.chip()
.bgColor("deeppurple-50")
.color("black");
logger.log();
Extend the logger
Do you want a method for a particular style that you often use?
You can do it:
import Logger from "@arekkusu90/logger";
class MyLogger extends Logger {
myStyle() {
return this.italic().color("orange-900").borderX(3, "orange-200").px(8);
}
}
const l = new MyLogger();
l.text("Blue").myStyle().log();
If you think the APIs are too verbose, you can extend the logger to add your own shortcuts.
Here is an example:
import Logger from "@arekkusu90/logger";
import type { CssUnitValue, Color } from "@arekkusu90/logger";
class ShortLogger extends Logger {
t(text: string) {
return this.text(text);
}
c(color: Color) {
return this.color(color);
}
b() {
return this.bold();
}
i() {
return this.italic();
}
bt(width: CssUnitValue, color: Color, type = "solid") {
return this.borderTop(width, color, type);
}
s(count = 1) {
return this.space(count);
}
}
const l = new ShortLogger();
l.t("Blue").c("blue").s().t("text").log();
Or, maybe, you want to add a prefix to all logs.
Here is another example:
import Logger from "@arekkusu90/logger";
class PrefixLogger extends Logger {
print() {
this.text("[My prefix]");
this.stack.unishift(this.last);
this.stack.pop();
return super.print();
}
}
const l = new PrefixLogger();
l.text("Blue").color("blue").space().text("text").log();
API - Base
expr(vlaue: any): Logger
Add a JS expression to the message to log.
WARNING
Expressions cannot be styled.
logger.expr(Math.random()).log();
text(value: string): Logger
Add a text to the message to log. Each text() can have his own style.
logger.text("Random text").log();
style(value: string): Logger
Add styles to a text.
You can style the whole message, some words of the message or some letters of the word.
logger.text("text").style("font-size: 32px; color: red;").log();
clear(): Logger
Clear the message. This will remove all the text(), expr() and styles() added.
logger
.text("not logged")
.style("font-size: 32px; color: red;")
.clear()
.text("text")
.log();
printDebug(): Logger
This is a method for debugging purpose.
Print the tokenized message with the substitution list.
INFO
This method use the console.debug() to print.
logger.text("text").printDebug();
print(method: Function): void
Print the message using a user defined function and the clear() the message.
logger.text("text").print(console.debug);
logger.text("text").print(console.log);
logger.text("text").print(console.info);
logger.text("text").print(console.warn);
logger.text("text").print(console.error);
API - Printers
log(): void
Print the message using the console.log() function.
logger.text("text").log();
debug(): void
Print the message using the console.debug() function.
logger.text("text").debug();
info(): void
Print the message using the console.info() function.
logger.text("text").info();
warn(): void
Print the message using the console.warn() function.
logger.text("text").warn();
error(): void
Print the message using the console.error() function.
logger.text("text").error();
group(): void
Print the message using the console.group() function.
logger.text("text").group();
groupCollapsed(): void
Print the message using the console.groupCollapsed() function.
logger.text("text").groupCollapsed();
groupEnd(): void
Print the message using the console.groupEnd() function.
logger.text("text").groupEnd();
API - Text
color(color: Color): Logger
Change the color of the text.
logger.text("text").color("red-500").log();
logger.text("text").color("white").log();
logger.text("text").color("#F87CD4").log();
logger.text("text").color("rgb(124, 85, 208)").log();
size(size: CssUnitValue): Logger
Change the size of the text.
logger.text("text").size(32).log();
logger.text("text").size("32px").log();
logger.text("text").size("3em").log();
logger.text("text").size("1.5rem").log();
logger.text("text").size("20%").log();
logger.text("text").size("2vh").log();
bold(): Logger
Make the text bold.
logger.text("text").bold().log();
italic(): Logger
Make the text italic.
logger.text("text").italic().log();
underline(style: DecorationStyle = "solid", color: Color = "currentcolor"): Logger
Add a colored line under the text with a style.
logger.text("text").underline().log();
logger.text("text").underline("wave").log();
logger.text("text").underline("solid", "blue-100").log();
logger.text("text").underline("dashed", "yellow").log();
overline(style: DecorationStyle = "solid", color: Color = "currentcolor"): Logger
Add a colored line over the text with a style.
logger.text("text").overline().log();
logger.text("text").overline("wave").log();
logger.text("text").overline("solid", "blue-100").log();
logger.text("text").overline("dashed", "yellow").log();
strikethrough(style: DecorationStyle = "solid", color: Color = "currentcolor"): Logger
Add a colored line through the text with a style.
logger.text("text").strikethrough().log();
logger.text("text").strikethrough("wave").log();
logger.text("text").strikethrough("solid", "blue-100").log();
logger.text("text").strikethrough("dashed", "yellow").log();
uppercase(): Logger
Make the text uppercase.
logger.text("text").uppercase().log();
lowercase(): Logger
Make the text lowercase.
logger.text("text").lowercase().log();
capitalize(): Logger
Make the first letter uppercase.
logger.text("text").capitalize().log();
textShadow(value: string): Logger
Add a shadow to the text.
logger
.text("text")
.textShadow("1px 1px 2px red, 0 0 6px blue, 0 0 3px blue")
.log();
emphasis(value: string, type: "filled" | "open" = "filled", color: Color = "currentcolor"): Logger
Add a colored emphasis to the text.
logger.text("text").emphasis("sesame", "filled", "blue-800").log();
logger.text("text").emphasis("x", "open", "orange").log();
indent(value: CssUnitValue): Logger
Indent the text.
logger.text("text").indent(32).log();
logger.text("text").indent("32px").log();
logger.text("text").indent("3em").log();
logger.text("text").indent("1.5rem").log();
logger.text("text").indent("20%").log();
logger.text("text").indent("2vh").log();
lineHeight(value: string): Logger
Set the line height of the text.
logger.text("text").lineHeight(2).log();
logger.text("text").lineHeight("100%").log();
space(count: number = 1): Logger
Add one or more space to the message.
logger.text("text").space().log();
logger.text("text").space(4).log();
tab(count: number = 1): Logger
Add one or more tab to the message.
logger.text("text").tab().log();
logger.text("text").tab(4).log();
newLine(count: number = 1): Logger
Add one or new line space to the message.
logger.text("text").newLine().log();
logger.text("text").newLine(4).log();
API - Background
bgColor(color: Color): Logger
change the background of the text.
logger.text("text").bgColor("red-500").log();
logger.text("text").bgColor("white").log();
logger.text("text").bgColor("#F87CD4").log();
logger.text("text").bgColor("rgb(124, 85, 208)").log();
bgGradient(direction: CssGradientLinearDirection, ...colorStopList: CssGradientLinearStop[]): Logger
Use a gradient background for the text.
logger
.text("text")
.bgGradient("to left bottom", "red-300 40%", "yellow-600")
.log();
API - Margin & Padding
pt(value: CssUnitValue): Logger
Add a padding top.
logger.text("text").pt(10).log();
logger.text("text").pt("1.5em").log();
logger.text("text").pt("2rem").log();
pb(value: CssUnitValue): Logger
Add a padding bottom.
logger.text("text").pb(10).log();
logger.text("text").pb("1.5em").log();
logger.text("text").pb("2rem").log();
pl(value: CssUnitValue): Logger
Add a padding left.
logger.text("text").pl(10).log();
logger.text("text").pl("1.5em").log();
logger.text("text").pl("2rem").log();
pr(value: CssUnitValue): Logger
Add a padding right.
logger.text("text").pr(10).log();
logger.text("text").pr("1.5em").log();
logger.text("text").pr("2rem").log();
px(value: CssUnitValue): Logger
Add a padding left and right.
logger.text("text").px(10).log();
logger.text("text").px("1.5em").log();
logger.text("text").px("2rem").log();
py(value: CssUnitValue): Logger
Add a padding top and bottom.
logger.text("text").py(10).log();
logger.text("text").py("1.5em").log();
logger.text("text").py("2rem").log();
p(value: CssUnitValue): Logger
Add a padding left, top, right and bottom.
logger.text("text").p(10).log();
logger.text("text").p("1.5em").log();
logger.text("text").p("2rem").log();
mt(value: CssUnitValue): Logger
Add a margin top.
logger.text("text").mt(10).log();
logger.text("text").mt("1.5em").log();
logger.text("text").mt("2rem").log();
mb(value: CssUnitValue): Logger
Add a margin bottom.
logger.text("text").mb(10).log();
logger.text("text").mb("1.5em").log();
logger.text("text").mb("2rem").log();
ml(value: CssUnitValue): Logger
Add a margin left.
logger.text("text").ml(10).log();
logger.text("text").ml("1.5em").log();
logger.text("text").ml("2rem").log();
mr(value: CssUnitValue): Logger
Add a margin right.
logger.text("text").mr(10).log();
logger.text("text").mr("1.5em").log();
logger.text("text").mr("2rem").log();
mx(value: CssUnitValue): Logger
Add a margin left and right.
logger.text("text").mx(10).log();
logger.text("text").mx("1.5em").log();
logger.text("text").mx("2rem").log();
my(value: CssUnitValue): Logger
Add a margin top and bottom.
logger.text("text").my(10).log();
logger.text("text").my("1.5em").log();
logger.text("text").my("2rem").log();
m(value: CssUnitValue): Logger
Add a margin left, top, right and bottom.
logger.text("text").m(10).log();
logger.text("text").m("1.5em").log();
logger.text("text").m("2rem").log();
API - Borders
borderTop(value: CssUnitValue, color: Color, type: string = "solid"): Logger
Add a colored border on top of the text.
logger.text("text").borderTop(10, "blue").log();
logger.text("text").borderTop("1.5em", "grey-400").log();
logger.text("text").borderTop("2rem", "#FF98B8", "dotted").log();
borderBottom(value: CssUnitValue, color: Color, type: string = "solid"): Logger
Add a colored border on bottom of the text.
logger.text("text").borderBottom(10, "blue").log();
logger.text("text").borderBottom("1.5em", "grey-400").log();
logger.text("text").borderBottom("2rem", "#FF98B8", "dotted").log();
borderLeft(value: CssUnitValue, color: Color, type: string = "solid"): Logger
Add a colored border on left of the text.
logger.text("text").borderLeft(10, "blue").log();
logger.text("text").borderLeft("1.5em", "grey-400").log();
logger.text("text").borderLeft("2rem", "#FF98B8", "dotted").log();
borderRight(value: CssUnitValue, color: Color, type: string = "solid"): Logger
Add a colored border on right of the text.
logger.text("text").borderRight(10, "blue").log();
logger.text("text").borderRight("1.5em", "grey-400").log();
logger.text("text").borderRight("2rem", "#FF98B8", "dotted").log();
borderY(value: CssUnitValue, color: Color, type: string = "solid"): Logger
Add a colored border on top and bottom of the text.
logger.text("text").borderY(10, "blue").log();
logger.text("text").borderY("1.5em", "grey-400").log();
logger.text("text").borderY("2rem", "#FF98B8", "dotted").log();
borderX(value: CssUnitValue, color: Color, type: string = "solid"): Logger
Add a colored border on left and right of the text.
logger.text("text").borderX(10, "blue").log();
logger.text("text").borderX("1.5em", "grey-400").log();
logger.text("text").borderX("2rem", "#FF98B8", "dotted").log();
border(value: CssUnitValue, color: Color, type: string = "solid"): Logger
Add a colored border on left, top, right and bottom of the text.
logger.text("text").border(10, "blue").log();
logger.text("text").border("1.5em", "grey-400").log();
logger.text("text").border("2rem", "#FF98B8", "dotted").log();
borderRadius(value: CssUnitValue): Logger
Add a border radius.
logger.text("text").border(1, "blue-300").borderRadius(10).log();
logger.text("text").border(1, "blue-300").borderRadius("1.5em").log();
logger.text("text").border(1, "blue-300").borderRadius("30%").log();
API - Formats
circle(): Logger
Add a circle character.
You can style the circle like you style text().
logger.circle().color("red").log();
badge(): Logger
Format the text like a badge.
Add some padding, border radius and line height.
logger.text("text").badge().bgColor("blue-100").log();
chip(): Logger
Format the text like a chip.
Add some padding, border radius and line height.
logger.text("text").chip().bgColor("orange-600").log();
keyValue(key: string, value: any): Logger
Fast format for <key, value> text.
logger.keyValue("key", Math.random()).log();