Comely style logs for the browser.

• 🚀 Flexible API
• 🌈 Beutifal style
• 🦄 Tiny and no dependencies
• ✨ Support css style

npm i comelog -D

or

pnpm add comelog -D

import { comelog } from "comelog";

comelog.bold().red().flush("hello world");
comelog.bgOrange().text("bk orange").underline().flush("undeline");

Chain styles to use for the string argument with text or flush function. The next to each other style function will be merged. For example, comelog.red().bold().text("value 1").bgRed().flush("value 2") will print value 1 with red and bold style. And the value 2 has red background.

The flush must appear last in the chain.

Comelog supports some preset API. info, warn, and error are easy to use. And these APIs must appear last in the chain because they invoke the flush API.

comelog.info("I am info.");

comelog.info("I am warn.");

comelog.info("I am error.");

The color function will set the color for text.

comelog.color("#FF0000").flush("Red Color");

The bgColor function will set the background color for text.

comelog.bgColor("#FFFFFF").flush("White BG");

The text function add the message to log.

comelog.text("text").flush();

It is similar to text. But log will finish the chain and print all message to devtools.

comelog.red().flush("red log");

This api should only be used by developers. It is recommended to use log instead of.

It is similar to log. But flush will return the whole data.

const data = comelog.red().flush("red flush");
console.log(data);

You could use style function to custom style.

comelog.style({ color: "#FF0000" }).flush("Red Text");
comelog.style({ backgroundColor: "#FFFFFF" }).flush("White BG");

Here is the preset style api.

The comelog support css color keywords to be the color add bgColor function.

comelog.white().bgOrange().flush("hello world");

• bold
• italic
• border
• radius
• shadow
• font
• padding
• margin
• capitalize
• uppercase
• lowercase
• spacing
• underline

comelog.blod().underline().flush("hello world");
comelog.lowercase().capitalize().flush("hello world");