Skip to content

migrating.md

Latest commit

 

History

History
345 lines (237 loc) · 8.74 KB

migrating.md

File metadata and controls

345 lines (237 loc) · 8.74 KB

How to switch to Ansis

Ansis is a powerful, small, and fast replacement for many similar libraries.
Just replace your import ... from ... or require(...) to ansis.

Migrating from chalk

- import chalk from 'chalk';
+ import chalk from 'ansis';

Ansis supports the Chalk syntax and is compatible* with styles and color names, so you don't need to modify the original code:

chalk.red.bold('Error!');

// colorize "Error: file not found!"
chalk.red(`Error: ${chalk.cyan.bold('file')} not found!`);

// truecolor
chalk.hex('#FFA500').bold('Bold orange color');
chalk.rgb(123, 45, 67).underline('Underlined reddish color');
chalk.bgHex('#E0115F')('Ruby');
chalk.bgHex('#96C')('Amethyst');

Warning

If used ANSI 256 colors functions, replace them with Ansis equivalents:

- chalk.ansi256(196)('Error');
+ ansis.fg((196)('Error');

- chalk.bgAnsi256(21)('Info');
+ ansis.bg(21)('Info');

Warning

Ansis doesn't not support the overline style, because it's not widely supported and no one uses it.
Check you code and replace the overline style with standard underline:

- chalk.red.overline('text');
+ ansis.red.underline('text');

Warning

Ansis support the common standard gray color name, not grey (UK spelling).

- chalk.grey('text');
+ ansis.gray('text');

- chalk.bgGrey('text');
+ ansis.bgGray('text');

Optionally, you can rewrite the same code to make it even shorter and cleaner:

import { red, cyan, fg, bg, hex, rgb, bgHex, bgRgb } from 'ansis';

red.bold('Error!'); // using parentheses
red.bold`Error!`;   // using template string

// colorize "Error: file not found!"
red`Error: ${cyan.bold`file`} not found!`;

// ANSI 256 colors
fg(93)`Violet color`; // equivalent for chalk.ansi256()
bg(194)`Honeydew, more or less`;  // equivalent for chalk.bgAnsi256()

// truecolor
hex('#FFA500').bold`Bold orange color`;
rgb(123, 45, 67).underline`Underlined reddish color`;
bgHex('#E0115F')`Ruby`;
bgHex('#96C')`Amethyst`;

Migrating from Chalk v4

When used the keyword color model, e.g. chalk.keyword('orange') extend ansis instance with named colors.

import ansis from 'ansis';
import colorNames from 'css-color-names'; // install color names package (~6 kB)

const color = ansis.extend(colorNames);

// alternatively define a custom subset with only the names you actually use:
//const color = ansis.extend({ orange: '#ffa500' });

Now you can use named color on extended color instance:

- chalk.keyword('orange')('text');
+ color.orange('text');

- chalk.bgKeyword('orange')('text');
+ color.bgOrange('text');

↑ top

Migrating from colorette

- import { red, bold, underline } from 'colorette';
+ import { red, bold, underline } from 'ansis';

Ansis is fully compatible with colorette styles and color names, so you don't need to modify the original code:

red.bold('Error!');
bold(`I'm ${red(`da ba ${underline("dee")} da ba`)} daa`);

Optionally, you can rewrite the same code to make it even shorter and cleaner:

red.bold`Error!`;
bold`I'm ${red`da ba ${underline`dee`} da ba`} daa`;

↑ top

Migrating from picocolors

- import pico from 'picocolors';
+ import pico from 'ansis';

Ansis is fully compatible with picocolors styles and color names, so you don't need to modify the original code:

pico.red(pico.bold('text'));
pico.red(pico.bold(variable));

// colorize "Error: file not found!"
pico.red('Error: ' + pico.cyan(pico.bold('file')) + ' not found!');

Optionally, you can rewrite the same code to make it even shorter and cleaner:

import { red, cyan } from 'ansis';

red.bold`text`;
red.bold(variable);

// colorize "Error: file not found!"
red`Error: ${cyan.bold`file`} not found!`

↑ top

Migrating from ansi-colors

- const c = require('ansi-colors');
+ const c = require('ansis');

Ansis is fully compatible with ansi-color styles and color names, so you don't need to modify the original code:

c.red.bold('Error!');

// colorize "Error: file not found!"
c.red(`Error: ${c.cyan.bold('file')} not found!`);

Optionally, you can rewrite the same code to make it even shorter and cleaner:

import { red, cyan } from 'ansis';

red.bold('Error!'); // using parentheses
red.bold`Error!`;   // using template string

// colorize "Error: file not found!"
red`Error: ${cyan.bold`file`} not found!`;

↑ top

Migrating from kleur

- import { red, green, yellow, cyan } from 'kleur';
+ import { red, green, yellow, cyan } from 'ansis';

Ansis is fully compatible with kleur styles and color names, but Kleur v3.0 no longer uses Chalk-style syntax (magical getter):

green().bold().underline('this is a bold green underlined message');
yellow(`foo ${red().bold('red')} bar ${cyan('cyan')} baz`);

If you uses chained methods then it requires a simple code modification. Just replace (). with .:

green.bold.underline('this is a bold green underlined message');
yellow(`foo ${red.bold('red')} bar ${cyan('cyan')} baz`);

Optionally, you can rewrite the same code to make it even shorter and cleaner:

yellow`foo ${red.bold`red`} bar ${cyan`cyan`} baz`;

↑ top

Migrating from cli-color

- const clc = require('cli-color');
+ const clc = require('ansis');

Ansis is compatible* with cli-color styles and color names:

clc.red.bold('Error!');

// colorize "Error: file not found!"
clc.red(`Error: ${c.cyan.bold('file')} not found!`);

Warning

Ansis doesn't not support the blink style, because it's not widely supported and no one uses it.
Check you code and remove the blink style:

- clc.red.blink('text');
+ clc.red('text');

If you use ANSI 256 color functions, replace xterm with fg and bgXterm replace bg:

- clc.xterm(202).bgXterm(236)('Orange text on dark gray background');
+ clc.fg(202).bg(236)('Orange text on dark gray background');

Optionally, you can rewrite the same code to make it even shorter and cleaner:

import { red, cyan, fg, bg } from 'ansis';

red.bold`Error!`;

// colorize "Error: file not found!"
red`Error: ${cyan.bold`file`} not found!`;

fg(202).bg(236)`Orange text on dark gray background`;