๐จ Stylish way how to format your console.log - for humans
MIT License
Stylog is a stylish way how to easily format rich console.log messages.
It's overengineered on purpose I just wanted to write it in the "old school" way and avoid RegExps. It has been written with a nostalgic memory to the Dragon Book ๐ฒ
yarn add stylog
The library is targeted for the last two version of Chrome, it's designed to be used mostly in dev mode within latest dev tools.
stylog(
(recipe: string),
(stylesDictionary: ?{
[id: string]: {
[property: string]: string
}
}),
(mapperDictionary ?{
[id: string]: (value: string) => string
})
);
If you are fan of FP you can take full advantage of the data-last curried version!โ๏ธ
stylog.fp(mapperDictionary)(stylesDictionary)(recipe);
This is normal text {styled this is styled text}
This is normal text \{styled this is also normal text}
{
styled: {
fontSize: "20px"; // or "fontSize: 20" :)
}
}
{
// return c๐l๐a๐p๐e๐d string
clap: s => {
return [...s]
.map((a, i) => `${a}${i !== s.length - 1 ? "๐" : ""}`)
.join("");
};
}
Check it out the example/index.html
for interactive playground! ๐
stylog(
`{big Hello, everyone! This is nicely styled text!}
and non-styled text. Lovely, right? {bold *clap* *clap* *clap*}
{image [GANDALF]} {red Be aware! Wild Gandalf appears!}
.
.
.
\\{gandalf}
.
.
.
not like this
.
.
.
{gandalf}
{clap Awesome}`,
{
bold: {
fontWeight: "bold"
},
big: {
fontSize: "25px",
border: "1px solid black",
padding: "10px"
},
image: {
display: "block !important",
color: "gray",
fontSize: "10px",
background: `url("https://vignette.wikia.nocookie.net/casshan/images/d/dc/Warn.png/revision/latest?cb=20120614181856")`,
backgroundSize: "15px 15px",
backgroundRepeat: "no-repeat",
backgroundPosition: "left",
paddingLeft: "15px"
},
red: {
color: "red",
textDecoration: "underline"
},
gandalf: {
display: "block !important",
color: "gray",
fontSize: "300px",
lineHeight: "150px",
display: "block !important",
background: `url("https://i.giphy.com/media/FyetIxXamPsfC/giphy.webp")`,
backgroundSize: "200px",
backgroundRepeat: "no-repeat",
backgroundPosition: "left"
},
clap: {
background: "black",
color: "yellow"
}
},
{
clap: s => {
return [...s]
.map((a, i) => `${a}${i !== s.length - 1 ? "๐" : ""}`)
.join("");
}
}
);
will produce this:
Do you miss something? Open an issue, I'd like to hear more about your use case. You can also fork this repository and run yarn && yarn dev
, do stuff in the playground (example/index.html
), then run yarn test
and finally send a PR! โค๏ธ
I got the inspiration for this project from https://github.com/adamschwartz/log, especially from this issue. Thanks @whitefire0 and @adamschwartz.
The MIT License (MIT) 2018 - Jakub Beneลก