DEV Community

Discussion on: Add colors to your terminal!

View post
Collapse
 
pipaliyachirag profile image
chirag pipaliya •

what is the difference between chalk and this package?

Collapse
 
unarray profile image
Unarray • • Edited

Chalk 5.0.0 is ESM, while this one supports ESM as well as CJS. So most people can use it without problems.

To continue, if you want create a message like this:
Image description

You will have to write with Chalk:

import chalk from "chalk";

const log = console.log;

log(`${chalk.blue("Hel")}${chalk.underline(`${chalk.blue("lo ")}${chalk.bgBlueBright(chalk.red("Wor"))}`)}${chalk.bgBlueBright(chalk.red("ld!"))}`);
// OR
log(chalk.blue("Hel" + chalk.underline("lo " + chalk.bgBlueBright.red("Wor")) + chalk.bgBlueBright.red("ld!")));
// OR
log(`${chalk.blue("Hel")}${chalk.underline.blue("lo ")}${chalk.underline.bgBlueBright.red("Wor")}${chalk.bgBlueBright.red("ld!")}`);
// OR ...
Enter fullscreen mode Exit fullscreen mode

The reading can become very quickly laborious just because:

  • Chalk uses methods
  • There are several ways to write the same formatting
  • Formatting is not very clear...
  • We have duplicates in some places

If we compare to Tintify which does not use functions but constants:

import { brightBackground, effect, effectReset, forground } from "tintify";

console.log(`${forground.blue}Hel${effect.underline}lo ${forground.red}${brightBackground.blue}Wor${effectReset.underline}ld!${effectReset.all}`);
Enter fullscreen mode Exit fullscreen mode

Of course, you can use aliases in the imports to shorten the naming if you wish:

import { brightBackground as bgB, effect as e, effectReset as eR, forground as f } from "tintify";

console.log(`${f.blue}Hel${e.underline}lo ${f.red}${bgB.blue}Wor${eR.underline}ld!${eR.all}`);
Enter fullscreen mode Exit fullscreen mode

So now we have:

  • One way to write formatting
  • Much more readable
  • No duplication due to a non-functional approach
  • Much more controllable (put my text in bold at this place: add effect.bold in my string. If I want to remove it: effectReset.bold)

In addition, it also brings you formatting functions that allow you to create cool effects like linear gradients, rainbow text, or even simpler formatting where you pass a string like "§aHello §bWorld!" which will return your Hello World! in green with the World! in bold depending on the flags you choose! (return equivalent to ${forground.green}Hello ${effect.bold}World!)

For the moment these functions are waiting for feedback for future improvements. For example currently the effects you put in the parameters of a formatting function will be removed. In future updates I plan to put the possibility to pass effects in this type of functions.
So if you have any other suggestion/idea for new features or improvements, don't hesitate to propose !

Otherwise Tintify also brings you utility functions like conversion of hexadecimal values to RGB, or validators of RGB/hex values.