Skip to content

Commit

Permalink
release v2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
webdiscus committed Nov 3, 2023
1 parent 02b5460 commit 369aa38
Show file tree
Hide file tree
Showing 26 changed files with 344 additions and 489 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ trim_trailing_whitespace = true
indent_size = 2
tab_width = 2

[{*.htm,*.html,*.pug,*.md}]
[{*.htm,*.html,*.md}]
indent_size = 2
tab_width = 2
4 changes: 2 additions & 2 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ jobs:
integration:
strategy:
matrix:
os: [ubuntu-latest]
node-version: [12, 14, 16, 18, 20]
os: [ ubuntu-latest ]
node-version: [ 14, 16, 18, 20 ]

runs-on: ${{ matrix.os }}
steps:
Expand Down
16 changes: 16 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
# Change log

## 2.0.0 (2023-11-03)

- feat: add supports the Deno
- feat: add supports the Next.js `edge` runtime
- feat(CHANGE): add named import for `ansis`:\
NEW named import: `import { red } from 'ansis'`.\
If you use `TypeScript` and your IDE show the error: `TS2307: Cannot find module ansis/colors`,\
then you should use the new syntax,
update you code: `import { red } from 'ansis/colors'` --> `import { red } from 'ansis'`.
- feat(DEPRECATE): OLD named import `import { red } from 'ansis/colors'` is deprecated, use the NEW named import
- feat(DEPRECATE): instead of the `ansi` use `ansi256` or alias `fg`
- feat(DEPRECATE): instead of the `bgAnsi` use `bgAnsi256` or alias `bg`
- feat: optimize named export
- feat: reduce the size of dist/ directory
- chore: update dev dependencies, new jest requires node.js >= 14

## 1.6.0-beta.0 (2023-11-01)

- feat: add supports the Deno
Expand Down
57 changes: 31 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,18 @@ and [benchmarks](https://github.com/webdiscus/ansis#benchmark) of most popular N

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/stackblitz-starters-gs2gve?file=index.js)

## Highlights
## 💡 Highlights

- supports both **ESM** and **CommonJS**
- supports **Deno**, **Next.JS** runtime
- up to **x3.5 faster** than **chalk**, [see benchmarks](#benchmark)
- dist code is only **5 KB** incl. named import for ESM and CommonJS
- up to **x3 faster** than **chalk**, [see benchmarks](#benchmark)
- dist code is only **5 KB** incl. named import of all styles
- [standard API](#base-colors) like **chalk**
- default and [named import](#named-import) `import { red, bold, rgb } from 'ansis/colors'`
- [chained syntax](#chained-syntax) `red.bold('text')`
- default import `import ansis from 'ansis'`, usage `ansis.red('error')`
- [named import](#named-import) `import { red } from 'ansis'`, usage ``` red('error') ```
- [chained syntax](#chained-syntax) `red.bold.underline('text')`
- [nested **template strings**](#nested-syntax) ``` red`R ${green`G`} R` ```
- [ANSI 256 colors](#256-colors) and [Truecolor](#truecolor) (**RGB**, **HEX**)
- [ANSI 256 colors](#256-colors) and [Truecolor](#truecolor) (**RGB**, **HEX**) ``` rgb(224, 17, 95)`Ruby` ```, ``` hex('#96C')`Amethyst` ```
- [extending of base colors](#extend-colors) with named **truecolors**
- [ANSI codes](#escape-codes) as `open` and `close` property for each
style ``` `Hello ${red.open}World${red.close}!` ```
Expand All @@ -53,6 +54,11 @@ and [benchmarks](https://github.com/webdiscus/ansis#benchmark) of most popular N
- **TypeScript** friendly
- zero dependencies

## ❓Question / Feature Request / Bug

If you have discovered a bug or have a feature suggestion, feel free to create
an [issue](https://github.com/webdiscus/ansis/issues) on GitHub.

<a id="install" name="install" href="#install"></a>

## Install
Expand All @@ -63,21 +69,20 @@ npm install ansis

## Usage

You can import module and named colors with ESM or CommonJS syntax.
You can import default module or named colors with ESM or CommonJS syntax.

```js
// ESM
// ESM default import
import ansis from 'ansis';
import { red, green, blue } from 'ansis/colors';
// ESM named import
import { red, green, blue } from 'ansis';

// CommonJS
// CommonJS default import
const ansis = require('ansis');
const { red, green, blue } = require('ansis/colors');
// CommonJS named import
const { red, green, blue } = require('ansis');

// default import
console.log(ansis.green(`Success!`));

// named import
console.log(ansis.green('Success!'));
console.log(green('Success!'));

// template string
Expand All @@ -94,7 +99,7 @@ console.log(red`The ${blue.underline`file.js`} not found!`);
Basic example `Hello World!`:

```js
import { red, black, inverse, reset } from 'ansis/colors';
import { red, black, inverse, reset } from 'ansis';

console.log(green`Hello ${inverse`ANSI`} World!
${black.bgYellow`Warning:`} ${cyan`/path/to/file.js`} ${red`not found!`}`);
Expand Down Expand Up @@ -122,7 +127,7 @@ You can import named colors, styles and functions. All imported colors and style

```js
// named import
import { red, hex, italic } from 'ansis/colors';
import { red, hex, italic } from 'ansis';

red.bold('text');
```
Expand All @@ -137,7 +142,7 @@ The `template literals` allow you to make a complex template more readable and s
The `function syntax` can be used to colorize a variable.

```js
import { red } from 'ansis/colors';
import { red } from 'ansis';

let message = 'error';

Expand All @@ -153,7 +158,7 @@ red`text ${message} text`;
All colors, styles and functions are chainable. Each color or style can be combined in any order.

```js
import { red, bold, italic, hex } from 'ansis/colors';
import { red, bold, italic, hex } from 'ansis';

red.bold`text`;
hex('#FF75D1').bgCyan.bold`text`;
Expand All @@ -171,15 +176,15 @@ None of the other libraries (chalk, kleur, colorette, colors.js etc.) support ne
Nested template strings:

```js
import { red, green } from 'ansis/colors';
import { red, green } from 'ansis';

red`red ${green`green`} red`;
```

Deep nested chained styles:

```js
import { red, green, cyan, magenta, yellow, italic, underline } from 'ansis/colors';
import { red, green, cyan, magenta, yellow, italic, underline } from 'ansis';

red(`red ${italic(`red italic ${underline(`red italic underline`)}`)} red`);

Expand All @@ -201,7 +206,7 @@ Output:\
Multiline nested template strings:

```js
import { red, green, hex, visible, inverse } from 'ansis/colors';
import { red, green, hex, visible, inverse } from 'ansis';

// defined a truecolor as the constant
const orange = hex('#FFAB40');
Expand Down Expand Up @@ -324,7 +329,7 @@ Background function: `bgAnsi256(code)` has short alias `bg(code)`
See [ANSI color codes](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit).

```js
import { bold, ansi256, fg, bgAnsi256, bg } from 'ansis/colors';
import { bold, ansi256, fg, bgAnsi256, bg } from 'ansis';

// foreground color
ansi256(96)`Bright Cyan`;
Expand Down Expand Up @@ -355,7 +360,7 @@ Foreground function: `hex()` `rgb()`\
Background function: `bgHex()` `bgRgb()`

```js
import { bold, hex, rgb, bgHex, bgRgb } from 'ansis/colors';
import { bold, hex, rgb, bgHex, bgRgb } from 'ansis';

// foreground color
hex('#E0115F').bold`bold Ruby`;
Expand All @@ -379,7 +384,7 @@ You can use the [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_co
and `close` properties for each style.

```js
import { red, bold } from 'ansis/colors';
import { red, bold } from 'ansis';

// each style has `open` and `close` properties
console.log(`Hello ${red.open}ANSI${red.close} World!`);
Expand Down Expand Up @@ -412,7 +417,7 @@ The variable `string` will contain the pure string without ANSI codes.
Supports correct style break at the `end of line`.

```js
import { bgGreen } from 'ansis/colors';
import { bgGreen } from 'ansis';

console.log(bgGreen`\nAnsis\nNew Line\nNext New Line\n`);
```
Expand Down
23 changes: 12 additions & 11 deletions bench/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
//
// ATTENTION !!! ACHTUNG !!! MEGA ULTRA IMPORTANT !!! WICHTIG !!!
//
// For a correct measures, DO NOT use the same function instance inside the added benchmark:
// For the correct measures, DO NOT use the same function instance inside the added benchmark:
// bench('Benchmark')
// .add('bench1', () => anyFixture(arg1)) // <== only first measure of `anyFixture()` will be correct
// .add('bench2', () => anyFixture(arg2)) // <== second and next measures of same function will be WRONG!
Expand Down Expand Up @@ -38,12 +38,11 @@ import colorCli from 'colors-cli/lib/color-safe.js';
import kleur from 'kleur';
import * as kleurColors from 'kleur/colors';
import picocolors from 'picocolors';
import { Ansis } from '../src/index.js';
import { green, red, yellow, hex } from '../src/colors.mjs';
import { Ansis, green, red, yellow, hex } from 'ansis';

const log = console.log;

// create new instance of Ansis for correct measure in benchmark
// create a new instance of Ansis for correct measure in benchmark
const ansis = new Ansis();

// All vendor libraries to be tested
Expand Down Expand Up @@ -76,6 +75,8 @@ const baseColors = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan'

let fixture = [];

log(hex('#F88').inverse.bold` -= Benchmark =- `);

//showSupportOfDeepNestedStyling();
//showSupportOfDeepNestedChainedStyling();
//showSupportOfBreakStyleAtNewLine();
Expand Down Expand Up @@ -229,11 +230,11 @@ bench('Template literals').
add('ansis', () => red`red ${yellow`yellow ${green`green`} yellow`} red`).
run();

function coloretteBench (c) {
function coloretteBench(c) {
return c.red(`${c.bold(`${c.cyan(`${c.yellow('yellow')}cyan`)}`)}red`);
}

function nestedFixture (c) {
function nestedFixture(c) {
return c.red(
`a red ${c.white('white')} red ${c.red('red')} red ${c.cyan('cyan')} red ${c.black('black')} red ${c.red(
'red',
Expand All @@ -257,7 +258,7 @@ function nestedFixture (c) {
);
}

function deepNestedFixture (c) {
function deepNestedFixture(c) {
return c.green(
`green ${c.cyan(
`cyan ${c.red(
Expand All @@ -271,15 +272,15 @@ function deepNestedFixture (c) {
);
}

function complexNestedFixture (c) {
function complexNestedFixture(c) {
return c.red(
`red ${c.yellow('yellow')} red ${c.italic.cyan('italic cyan')} red ${c.underline.green(
`underline green ${c.yellow('underline yellow')} underline green`,
)} red ${c.cyan('cyan')} red ${c.bold.yellow('bold yellow')} red ${c.green('green')} red`,
);
}

function showSupportOfDeepNestedStyling () {
function showSupportOfDeepNestedStyling() {
log('colors.js: ', deepNestedFixture(colorsJs));
log('colorette: ', deepNestedFixture(colorette));
log('picocolors: ', deepNestedFixture(picocolors));
Expand All @@ -292,12 +293,12 @@ function showSupportOfDeepNestedStyling () {
log('ansis: ', deepNestedFixture(ansis));
}

function showSupportOfDeepNestedChainedStyling () {
function showSupportOfDeepNestedChainedStyling() {
log('chalk: ', complexNestedFixture(chalk));
log('ansis: ', complexNestedFixture(ansis));
}

function showSupportOfBreakStyleAtNewLine () {
function showSupportOfBreakStyleAtNewLine() {
log('colors.js: ', colorsJs.bgGreen(`\nAnsis\nNEW LINE\nNEXT NEW LINE\n`)); // OK
log('colorette: ', colorette.bgGreen(`\nAnsis\nNEW LINE\nNEXT NEW LINE\n`)); // (not supported)
log('picocolors: ', picocolors.bgGreen(`\nAnsis\nNEW LINE\nNEXT NEW LINE\n`)); // (not supported)
Expand Down
1 change: 1 addition & 0 deletions bench/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
},
"dependencies": {
"ansi-colors": "4.1.1",
"ansis": "file:../dist",
"benchmark": "2.1.4",
"chalk": "5.0.0",
"cli-color": "2.0.1",
Expand Down
4 changes: 2 additions & 2 deletions examples/ansi256.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { fg, bg } from '../src/colors.mjs';
import { fg, bg } from '../src/index.js';

let out;
let n;
Expand Down Expand Up @@ -66,4 +66,4 @@ for (let i = 232; i <= 255; i++) {
}

//console.log(out);
export { out as ansi256Table }
export { out as ansi256Table };
5 changes: 2 additions & 3 deletions examples/ansis-logo.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const colorizeASCII = ({ ascii, data }, paddingLeft = 5) => {
for (let charWidthIdx = 0; charWidthIdx < width; charWidthIdx++) {
char = ascii[i++];
code = Array.isArray(codes) ? codes[row] : codes + row;
out += ansis.ansi(code)(char);
out += ansis.ansi256(code)(char);
}
}
row++;
Expand Down Expand Up @@ -45,7 +45,6 @@ const logo = {
],
};


let out = colorizeASCII(logo, 5)
let out = colorizeASCII(logo, 5);

export { out as ansisLogo };
19 changes: 12 additions & 7 deletions examples/ansis-styles-demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,18 @@ import {
underline,
white, whiteBright,
yellow, yellowBright,
} from '../src/colors.mjs';
} from '../src/index.js';

const out = `${bold`bold`} ${dim`dim`} ${italic`italic`} ${underline`underline`} ${strikethrough`strikethrough`} ${inverse`inverse`} ${bold.italic.underline.strike`bold italic underline strike`}` + '\n' +
`${red`red`} ${green`green`} ${yellow`yellow`} ${blue`blue`} ${magenta`magenta`} ${cyan`cyan`} ${white`white`} ${gray`gray`} ${bold.yellow`bold yellow`} ${dim.cyan`dim cyan`} ${red.italic`italic red`} ` + '\n' +
`${black.bgRed`bgRed`} ${black.bgGreen`bgGreen`} ${black.bgYellow`bgYellow`} ${bgBlue`bgBlue`} ${black.bgMagenta`bgMagenta`} ${black.bgCyan`bgCyan`} ${black.bgWhite`bgWhite`} ${black.bgRedBright`bgRedBright`} ${white.bgRed.bold.italic` CocaCola `}` + '\n' +
`${greenBright`greenBright`} ${yellowBright`yellowBright`} ${blueBright`blueBright`} ${magentaBright`magentaBright`} ${cyanBright`cyanBright`} ${whiteBright`whiteBright`} ${greenBright`A`}${magentaBright`N`}${yellowBright`S`}${redBright`I`}` + '\n' +
`${black.bgGreenBright`bgGreenBright`} ${black.bgYellowBright`bgYellowBright`} ${bgBlueBright`bgBlueBright`} ${black.bgMagentaBright`bgMagentaBright`} ${black.bgCyanBright`bgCyanBright`} ${magentaBright.bgGreenBright`C`}${greenBright.bgMagentaBright`O`}${redBright.bgYellowBright`L`}${yellowBright.bgRedBright`O`}${redBright.bgCyanBright`R`}${yellowBright.bgBlueBright`S`}` + '\n' +
const out = `${bold`bold`} ${dim`dim`} ${italic`italic`} ${underline`underline`} ${strikethrough`strikethrough`} ${inverse`inverse`} ${bold.italic.underline.strike`bold italic underline strike`}` +
'\n' +
`${red`red`} ${green`green`} ${yellow`yellow`} ${blue`blue`} ${magenta`magenta`} ${cyan`cyan`} ${white`white`} ${gray`gray`} ${bold.yellow`bold yellow`} ${dim.cyan`dim cyan`} ${red.italic`italic red`} ` +
'\n' +
`${black.bgRed`bgRed`} ${black.bgGreen`bgGreen`} ${black.bgYellow`bgYellow`} ${bgBlue`bgBlue`} ${black.bgMagenta`bgMagenta`} ${black.bgCyan`bgCyan`} ${black.bgWhite`bgWhite`} ${black.bgRedBright`bgRedBright`} ${white.bgRed.bold.italic` CocaCola `}` +
'\n' +
`${greenBright`greenBright`} ${yellowBright`yellowBright`} ${blueBright`blueBright`} ${magentaBright`magentaBright`} ${cyanBright`cyanBright`} ${whiteBright`whiteBright`} ${greenBright`A`}${magentaBright`N`}${yellowBright`S`}${redBright`I`}` +
'\n' +
`${black.bgGreenBright`bgGreenBright`} ${black.bgYellowBright`bgYellowBright`} ${bgBlueBright`bgBlueBright`} ${black.bgMagentaBright`bgMagentaBright`} ${black.bgCyanBright`bgCyanBright`} ${magentaBright.bgGreenBright`C`}${greenBright.bgMagentaBright`O`}${redBright.bgYellowBright`L`}${yellowBright.bgRedBright`O`}${redBright.bgCyanBright`R`}${yellowBright.bgBlueBright`S`}` +
'\n' +
[
'#d93611',
'#d97511',
Expand Down Expand Up @@ -52,7 +57,7 @@ const out = `${bold`bold`} ${dim`dim`} ${italic`italic`} ${underline`underline`}
' 141 ',
' 98 ',
' 92 ',
].reduce((out, code) => out + black.bgAnsi(parseInt(code, 10))(code), '') +
].reduce((out, code) => out + black.bgAnsi256(parseInt(code, 10))(code), '') +
'\n ';

export { out as ansisStylesDemo };
7 changes: 3 additions & 4 deletions examples/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@

import chalk from 'chalk';

import ansis, { Ansis } from '../src/index.js';
import {
red,
import ansis, {
Ansis, red,
green,
blue,
cyan,
Expand All @@ -17,7 +16,7 @@ import {
inverse,
visible,
hex,
} from '../src/colors.mjs';
} from '../src/index.js';

import { ansi256Table } from './ansi256.js';
import { ansisLogo } from './ansis-logo.js';
Expand Down
Loading

0 comments on commit 369aa38

Please sign in to comment.