diff --git a/.github/ISSUE_TEMPLATE/Bug_report.md b/.github/ISSUE_TEMPLATE/Bug_report.md index 456be38..255a5c6 100644 --- a/.github/ISSUE_TEMPLATE/Bug_report.md +++ b/.github/ISSUE_TEMPLATE/Bug_report.md @@ -21,9 +21,8 @@ about: Create a report to help us improve -- OS: [macOS, Linux, Windows] +- OS (inc. version): [macOS, Linux, Windows] - version of Node.js: -- version of Webpack: - version of the Plugin: ## Additional context diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 4877b12..f107900 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -14,7 +14,7 @@ jobs: integration: strategy: matrix: - os: [ ubuntu-latest ] + os: [ ubuntu-latest, windows-latest ] # rollup requires node >= 18 node-version: [ 18, 20 ] diff --git a/CHANGELOG.md b/CHANGELOG.md index e5fcac0..35b3bfe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 3.3.2 (2024-07-22) + +- chore: optimize code to reduce the size by ~50 bytes +- chore: add benchmarks for `kolorist` package +- test: add test matrix for windows on GitHub +- docs: add compare the size of most popular packages + ## 3.3.1 (2024-07-18) - chore: optimize code to reduce the size by ~600 bytes, diff --git a/README.md b/README.md index b83676a..11d4cd2 100644 --- a/README.md +++ b/README.md @@ -47,10 +47,10 @@ hex('#E0115F').bold.underline('TrueColor!') Most popular ANSI libraries for Node.js: -[chalk][chalk], [kleur][kleur], [kolorist][kolorist], [colors.js][colors.js], [colorette][colorette], [picocolors][picocolors], [ansi-colors][ansi-colors], [cli-color][cli-color], [colors-cli][colors-cli] +[chalk][chalk], [kleur][kleur], [ansi-colors][ansi-colors], [kolorist][kolorist], [colorette][colorette], [picocolors][picocolors], [cli-color][cli-color], [colors-cli][colors-cli], [colors.js][colors.js] - ✅ [Compare features](#compare) - +- 💾 [Compare package sizes](#compare-size) - 📊 [Benchmarks](#benchmark) @@ -672,7 +672,7 @@ See also: -## Comparison of most popular libraries +## Compare the features of most popular libraries Run the command to see the support of some features by various libraries: @@ -682,24 +682,21 @@ npm run compare [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/compare-colorize-libraries?file=index.js) -| Library
________________
- name
- bundle size
- named import
- naming colors | ANSI base colors | ANSI 256
colors | True
Color | Chained
syntax | Nested
template strings | New
Line | Fallbacks | Supports
ENV vars
CLI flags | -|:------------------------------------------------------------------------------------------------------------|:----------------:|:------------------:|:-------------:|:-----------------:|:--------------------------:|:-----------:|-------------------------------------|:---------------------------------------------------------| -| [`colors.js`][colors.js]
**18.1KB**
`❌ named import`
`❌ standard` | `16` colors | ❌ | ❌ | ✅ | ❌ | ✅ | no colors | `FORCE_COLOR`
`--no-color`
`--color` | -| [`colors-cli`][colors-cli]
**8.6KB**
`❌ named import`
`❌ standard` | `16` colors | ✅ | ❌ | ✅ | ❌ | ✅ | no colors | `--no-color`
`--color` | -| [`cli-color`][cli-color]
`❌ named import`
`✅ standard` | `16` colors | ✅ | ❌ | ✅ | ❌ | ❌ | 16 colors
no colors | `NO_COLOR` | -| [`ansi-colors`][ansi-colors]
**5.8KB**
`❌ named import`
`✅ standard` | `16` colors | ❌ | ❌ | ✅ | ❌ | ✅ | ❌ | `FORCE_COLOR` | -| [`colorette`][colorette]
**3.3KB**
`✅ named import`
`✅ standard` | `16` colors | ❌ | ❌ | ❌ | ❌ | ❌ | no colors | `NO_COLOR`
`FORCE_COLOR`
`--no-color`
`--color` | -| [`picocolors`][picocolors]
**2.6KB**
`❌ named import`
`✅ standard` | `8` colors | ❌ | ❌ | ❌ | ❌ | ❌ | no colors | `NO_COLOR`
`FORCE_COLOR`
`--no-color`
`--color` | -| [`kleur`][kleur]
**2.7KB**
`✅ named import`
`✅ standard` | `8` colors | ❌ | ❌ | ✅ | ❌ | ❌ | no colors | `NO_COLOR`
`FORCE_COLOR` | -| [`kolorist`][kolorist]
**6.8KB**
`✅ named import`
`❌ standard` | `16` colors | ✅ | ✅ | ❌ | ❌ | ❌ | 256 color

no colors | `NO_COLOR`
`FORCE_COLOR` | -| [`chalk`][chalk]
**15KB**
`❌ named import`
`✅ standard` | `16` colors | ✅ | ✅ | ✅ | ❌ | ✅ | 256 color
16 colors
no colors | `NO_COLOR`
`FORCE_COLOR`
`--no-color`
`--color` | -| [`ansis`][ansis]
**3.5KB**
`✅ named import`
`✅ standard` | `16` colors | ✅ | ✅ | ✅ | ✅ | ✅ | 256 color
16 colors
no colors | `NO_COLOR`
`FORCE_COLOR`
`--no-color`
`--color` | +| Library
________________
- name
- named import
- naming colors | ANSI base colors | ANSI 256
colors | True
Color | Chained
syntax | Nested
template strings | New
Line | Fallback to colors | Supports
ENV vars
CLI flags | +|:------------------------------------------------------------------------------------------|:----------------:|:------------------:|:-------------:|:-----------------:|:--------------------------:|:-----------:|---------------------|:---------------------------------------------------------| +| [`chalk`][chalk]
`❌ named import`
`✅ standard` | `16` colors | ✅ | ✅ | ✅ | ❌ | ✅ | →256
→16
→b&w | `NO_COLOR`
`FORCE_COLOR`
`--no-color`
`--color` | +| [`ansis`][ansis]
`✅ named import`
`✅ standard` | `16` colors | ✅ | ✅ | ✅ | ✅ | ✅ | →256
→16
→b&w | `NO_COLOR`
`FORCE_COLOR`
`--no-color`
`--color` | +| [`kolorist`][kolorist]
`✅ named import`
`❌ standard` | `16` colors | ✅ | ✅ | ❌ | ❌ | ❌ | →256

→b&w | `NO_COLOR`
`FORCE_COLOR` | +| [`cli-color`][cli-color]
`❌ named import`
`✅ standard` | `16` colors | ✅ | ❌ | ✅ | ❌ | ❌ | →16
→b&w | `NO_COLOR` | +| [`colors-cli`][colors-cli]
`❌ named import`
`❌ standard` | `16` colors | ✅ | ❌ | ✅ | ❌ | ✅ | ❌
→b&w | `--no-color`
`--color` | +| [`colors.js`][colors.js]
`❌ named import`
`❌ standard` | `16` colors | ❌ | ❌ | ✅ | ❌ | ✅ | →b&w | `FORCE_COLOR`
`--no-color`
`--color` | +| [`ansi-colors`][ansi-colors]
`❌ named import`
`✅ standard` | `16` colors | ❌ | ❌ | ✅ | ❌ | ✅ | ❌ | `FORCE_COLOR` | +| [`kleur`][kleur]
`✅ named import`
`✅ standard` | `8` colors | ❌ | ❌ | ✅ | ❌ | ❌ | →b&w | `NO_COLOR`
`FORCE_COLOR` | +| [`colorette`][colorette]
`✅ named import`
`✅ standard` | `16` colors | ❌ | ❌ | ❌ | ❌ | ❌ | →b&w | `NO_COLOR`
`FORCE_COLOR`
`--no-color`
`--color` | +| [`picocolors`][picocolors]
`❌ named import`
`✅ standard` | `8` colors | ❌ | ❌ | ❌ | ❌ | ❌ | →b&w | `NO_COLOR`
`FORCE_COLOR`
`--no-color`
`--color` | > **Note** > -> **Code size**\ -> The size of distributed code that will be loaded via `require` or `import` into your app. It's not a package size. -> > **Named import**\ > ESM\ > `import { red, green, blue } from 'lib';`\ @@ -739,6 +736,36 @@ npm run compare #### [↑ top](#top) + + +## Compare the size of most popular packages + +| Npm package | Require size | Install size | Download size | +|:-----------------------------|-------------:|-------------------------------:|----------------------------------------------------------------------:| +| [`chalk`][chalk] | 16.4 kB | [43.7 kB][npm-chalk] | [13.1 kB](https://arve0.github.io/npm-download-size/#chalk) | +| [`ansis`][ansis] | 3.4 kB | [11.4 kB][npm-ansis] | [4.6 kB](https://arve0.github.io/npm-download-size/#ansis) | +| [`kolorist`][kolorist] | 6.8 kB | [51.0 kB][npm-kolorist] | [8.7 kB](https://arve0.github.io/npm-download-size/#kolorist) | +| [`cli-color`][cli-color] | 12.1 kB | [39.6 / 754 kB][npm-cli-color] | [13.8 / 216 kB](https://arve0.github.io/npm-download-size/#cli-color) | +| [`colors-cli`][colors-cli] | 8.7 kB | [511.0 kB][npm-colors-cli] | [361.7 kB](https://arve0.github.io/npm-download-size/#colors-cli) | +| [`colors.js`][colors.js] | 18.1 kB | [39.5 kB][npm-colors.js] | [11.0 kB](https://arve0.github.io/npm-download-size/#colors) | +| [`ansi-colors`][ansi-colors] | 5.8 kB | [26.1 kB][npm-ansi-colors] | [8.5 kB](https://arve0.github.io/npm-download-size/#ansi-colors) | +| [`kleur`][kleur] | 2.7 kB | [20.3 kB][npm-kleur] | [6.0 kB](https://arve0.github.io/npm-download-size/#kleur) | +| [`colorette`][colorette] | 3.4 kB | [17.0 kB][npm-colorette] | [4.9 kB](https://arve0.github.io/npm-download-size/#colorette) | +| [`picocolors`][picocolors] | 2.1 kB | [5.1 kB][npm-picocolors] | [2.4 kB](https://arve0.github.io/npm-download-size/#picocolors) | + +**Require size**: The size of distributed code that will be loaded via `require` or `import` into your app.\ +**Install size:** The unpacked size of the npm package in the `node_modules/` directory.\ +**Download size:** The gzipped size of the npm package. + +See also: + +- [npmjs](https://www.npmjs.com/package) - show install size of the published package, w/o dependencies +- [packagephobia](https://packagephobia.com) - show total install size, incl. dependencies +- [npm download size](https://arve0.github.io/npm-download-size) - show tarball and total download size +- [bundlephobia](https://bundlephobia.com) - useless, doesn't show real tarball size of the downloaded npm package + +#### [↑ top](#top) + ## Show ANSI demo ```bash @@ -974,3 +1001,25 @@ c.hex('#FBA')('foo'); [chalk]: https://github.com/chalk/chalk [ansis]: https://github.com/webdiscus/ansis + +--- + +[npm-colors.js]: https://www.npmjs.com/package/colors + +[npm-colorette]: https://www.npmjs.com/package/colorette + +[npm-picocolors]: https://www.npmjs.com/package/picocolors + +[npm-cli-color]: https://www.npmjs.com/package/cli-color + +[npm-colors-cli]: https://www.npmjs.com/package/colors-cli + +[npm-ansi-colors]: https://www.npmjs.com/package/ansi-colors + +[npm-kleur]: https://www.npmjs.com/package/kleur + +[npm-kolorist]: https://www.npmjs.com/package/kolorist + +[npm-chalk]: https://www.npmjs.com/package/chalk + +[npm-ansis]: https://www.npmjs.com/package/ansis diff --git a/bench/index.js b/bench/index.js index 571e914..d2ed33b 100644 --- a/bench/index.js +++ b/bench/index.js @@ -60,16 +60,17 @@ if (colorSpace < 3) { // All vendor libraries to be tested const vendors = [ - { name: packages['colors'], lib: colorsJs }, + { name: packages['chalk'], lib: chalk }, + { name: packages['ansis'], lib: ansis }, { name: packages['colorette'], lib: colorette }, { name: packages['picocolors'], lib: picocolors }, + { name: packages['kleur'], lib: kleur }, + { name: 'kleur/colors', lib: kleurColors }, + { name: packages['ansi-colors'], lib: ansiColors }, + { name: packages['kolorist'], lib: kolorist }, { name: packages['cli-color'], lib: cliColor }, { name: packages['colors-cli'], lib: colorCli }, - { name: packages['ansi-colors'], lib: ansiColors }, - { name: 'kleur/colors', lib: kleurColors }, - { name: packages['kleur'], lib: kleur }, - { name: packages['chalk'], lib: chalk }, - { name: packages['ansis'], lib: ansis }, + { name: packages['colors'], lib: colorsJs }, ]; const benchStyle = new Ansis(); @@ -93,61 +94,59 @@ log(hex('#F88').inverse.bold` -= Benchmark =- `); bench('Using 1 style (red)'). add(packages['chalk'], () => chalk.red('foo')). add(packages['ansis'], () => ansis.red('foo')). - add(packages['colors'], () => colorsJs.red('foo')). add(packages['colorette'], () => colorette.red('foo')). add(packages['picocolors'], () => picocolors.red('foo')). - add(packages['cli-color'], () => cliColor.red('foo')). - add(packages['colors-cli'], () => colorCli.red('foo')). - add(packages['ansi-colors'], () => ansiColors.red('foo')). add(packages['kleur'], () => kleur.red('foo')). + add(packages['ansi-colors'], () => ansiColors.red('foo')). add(packages['kolorist'], () => kolorist.red('foo')). + add(packages['cli-color'], () => cliColor.red('foo')). + add(packages['colors-cli'], () => colorCli.red('foo')). + add(packages['colors'], () => colorsJs.red('foo')). run(); -bench(`Using 2 styles (red, bold)`). - add(packages['chalk'], () => chalk.red.bold('foo')). - add(packages['ansis'], () => ansis.red.bold('foo')). - add(packages['colors'], () => colorsJs.red.bold('foo')). - add(packages['colorette'], () => colorette.red(colorette.bold('foo'))). - add(packages['picocolors'], () => picocolors.red(picocolors.bold('foo'))). - add(packages['cli-color'], () => cliColor.red.bold('foo')). - add(packages['colors-cli'], () => colorCli.red.bold('foo')). - add(packages['ansi-colors'], () => ansiColors.red.bold('foo')). - add(packages['kleur'], () => kleur.red().bold('foo')). - add(packages['kolorist'], () => kolorist.red(kolorist.bold('foo'))). +bench(`Using 2 styles (bgWhite, red)`). + add(packages['chalk'], () => chalk.bgWhite.red('foo')). + add(packages['ansis'], () => ansis.bgWhite.red('foo')). + add(packages['colorette'], () => colorette.bgWhite(colorette.red('foo'))). + add(packages['picocolors'], () => picocolors.bgWhite(picocolors.red('foo'))). + add(packages['kleur'], () => kleur.bgWhite().red('foo')). + add(packages['ansi-colors'], () => ansiColors.bgWhite.red('foo')). + add(packages['kolorist'], () => kolorist.bgWhite(kolorist.red('foo'))). + add(packages['cli-color'], () => cliColor.bgWhite.red('foo')). + add(packages['colors-cli'], () => colorCli.white_b.red('foo')). + add(packages['colors'], () => colorsJs.bgWhite.red('foo')). run(); -bench(`Using 3 styles (red, bold, underline)`). - add(packages['chalk'], () => chalk.red.bold.underline('foo')). - add(packages['ansis'], () => ansis.red.bold.underline('foo')). - add(packages['colors'], () => colorsJs.red.bold.underline('foo')). - add(packages['colorette'], () => colorette.red(colorette.bold(colorette.underline('foo')))). - add(packages['picocolors'], () => picocolors.red(picocolors.bold(picocolors.underline('foo')))). - add(packages['cli-color'], () => cliColor.red.bold.underline('foo')). - add(packages['colors-cli'], () => colorCli.red.bold.underline('foo')). - add(packages['ansi-colors'], () => ansiColors.red.bold.underline('foo')). - add(packages['kleur'], () => kleur.red().bold().underline('foo')). - add(packages['kolorist'], () => kolorist.red(kolorist.bold(kolorist.underline('foo')))). +bench(`Using 3 styles (bgWhite, red, bold)`). + add(packages['chalk'], () => chalk.bgWhite.red.bold('foo')). + add(packages['ansis'], () => ansis.bgWhite.red.bold('foo')). + add(packages['colorette'], () => colorette.bgWhite(colorette.red(colorette.bold('foo')))). + add(packages['picocolors'], () => picocolors.bgWhite(picocolors.red(picocolors.bold('foo')))). + add(packages['kleur'], () => kleur.bgWhite().red().bold('foo')). + add(packages['ansi-colors'], () => ansiColors.bgWhite.red.bold('foo')). + add(packages['kolorist'], () => kolorist.bgWhite(kolorist.red(kolorist.bold('foo')))). + add(packages['cli-color'], () => cliColor.bgWhite.red.bold('foo')). + add(packages['colors-cli'], () => colorCli.white_b.red.bold('foo')). + add(packages['colors'], () => colorsJs.bgWhite.red.bold('foo')). run(); bench(`Using 4 styles (bgWhite red, bold, underline)`). add(packages['chalk'], () => chalk.bgWhite.red.bold.underline('foo')). add(packages['ansis'], () => ansis.bgWhite.red.bold.underline('foo')). - add(packages['colors'], () => colorsJs.bgWhite.red.bold.underline('foo')). add(packages['colorette'], () => colorette.bgWhite(colorette.red(colorette.bold(colorette.underline('foo'))))). add(packages['picocolors'], () => picocolors.bgWhite(picocolors.red(picocolors.bold(picocolors.underline('foo'))))). - add(packages['cli-color'], () => cliColor.bgWhite.red.bold.underline('foo')). - add(packages['colors-cli'], () => colorCli.white_b.red.bold.underline('foo')). + add(packages['kleur'], () => kleur.bgWhite().red().bold().underline('foo')). add(packages['ansi-colors'], () => ansiColors.bgWhite.red.bold.underline('foo')). - add(packages['kleur'], () => kleur.bgWhite().red().bold().underline()('foo')). add(packages['kolorist'], () => kolorist.bgWhite(kolorist.red(kolorist.bold(kolorist.underline('foo'))))). + add(packages['cli-color'], () => cliColor.bgWhite.red.bold.underline('foo')). + add(packages['colors-cli'], () => colorCli.white_b.red.bold.underline('foo')). + add(packages['colors'], () => colorsJs.bgWhite.red.bold.underline('foo')). run(); // Colorette bench // https://github.com/jorgebucaran/colorette/blob/main/bench/index.js fixture = createFixture(vendors, coloretteBench); bench('Colorette bench'). - add(vendors[8].name, () => fixture[8](vendors[8].lib)). - add(vendors[9].name, () => fixture[9](vendors[9].lib)). add(vendors[0].name, () => fixture[0](vendors[0].lib)). add(vendors[1].name, () => fixture[1](vendors[1].lib)). add(vendors[2].name, () => fixture[2](vendors[2].lib)). @@ -156,98 +155,108 @@ bench('Colorette bench'). add(vendors[5].name, () => fixture[5](vendors[5].lib)). add(vendors[6].name, () => fixture[6](vendors[6].lib)). add(vendors[7].name, () => fixture[7](vendors[7].lib)). + add(vendors[8].name, () => fixture[8](vendors[8].lib)). + add(vendors[9].name, () => fixture[9](vendors[9].lib)). + add(vendors[10].name, () => fixture[10](vendors[10].lib)). run(); // Base colors bench('Base colors'). add(packages['chalk'], () => baseColors.forEach((style) => chalk[style]('foo'))). add(packages['ansis'], () => baseColors.forEach((style) => ansis[style]('foo'))). - add(packages['colors'], () => baseColors.forEach((style) => colorsJs[style]('foo'))). add(packages['colorette'], () => baseColors.forEach((style) => colorette[style]('foo'))). add(packages['picocolors'], () => baseColors.forEach((style) => picocolors[style]('foo'))). + add(packages['kleur'], () => baseColors.forEach((style) => kleur[style]('foo'))). + add('kleur/colors', () => baseColors.forEach((style) => kleurColors[style]('foo'))). + add(packages['ansi-colors'], () => baseColors.forEach((style) => ansiColors[style]('foo'))). + add(packages['kolorist'], () => baseColors.forEach((style) => kolorist[style]('foo'))). add(packages['cli-color'], () => baseColors.forEach((style) => cliColor[style]('foo'))). add(packages['colors-cli'], () => baseColors.forEach((style) => colorCli[style]('foo'))). - add(packages['ansi-colors'], () => baseColors.forEach((style) => ansiColors[style]('foo'))). - add('kleur/colors', () => baseColors.forEach((style) => kleurColors[style]('foo'))). - add(packages['kleur'], () => baseColors.forEach((style) => kleur[style]('foo'))). + add(packages['colors'], () => baseColors.forEach((style) => colorsJs[style]('foo'))). run(); // Chained styles bench('Chained styles'). add(packages['chalk'], () => baseColors.forEach((style) => chalk[style].bold.underline.italic('foo'))). add(packages['ansis'], () => baseColors.forEach((style) => ansis[style].bold.underline.italic('foo'))). - add(packages['colors'], () => baseColors.forEach((style) => colorsJs[style].bold.underline.italic('foo'))). add('colorette (not supported)', () => baseColors.forEach((style) => colorette[style].bold.underline.italic('foo'))). add('picocolors (not supported)', () => baseColors.forEach((style) => picocolors[style].bold.underline.italic('foo')), ). - add(packages['cli-color'], () => baseColors.forEach((style) => cliColor[style].bold.underline.italic('foo'))). - add(packages['colors-cli'], () => baseColors.forEach((style) => colorCli[style].bold.underline.italic('foo'))). - add(packages['ansi-colors'], () => baseColors.forEach((style) => ansiColors[style].bold.underline.italic('foo'))). + add(packages['kleur'], () => baseColors.forEach((style) => kleur[style]().bold().underline().italic('foo'))). // alternate syntax add('kleur/colors (not supported)', () => baseColors.forEach((style) => kleurColors[style].bold.underline.italic('foo')), ). - add(packages['kleur'], () => baseColors.forEach((style) => kleur[style]().bold().underline().italic('foo'))). // alternate syntax + add(packages['ansi-colors'], () => baseColors.forEach((style) => ansiColors[style].bold.underline.italic('foo'))). + add('kolorist (not supported)', () => baseColors.forEach((style) => kolorist[style].bold.underline.italic('foo'))). + add(packages['cli-color'], () => baseColors.forEach((style) => cliColor[style].bold.underline.italic('foo'))). + add(packages['colors-cli'], () => baseColors.forEach((style) => colorCli[style].bold.underline.italic('foo'))). + add(packages['colors'], () => baseColors.forEach((style) => colorsJs[style].bold.underline.italic('foo'))). run(); // Nested calls bench('Nested calls'). add(packages['chalk'], () => baseColors.forEach((style) => chalk[style](chalk.bold(chalk.underline(chalk.italic('foo')))))). add(packages['ansis'], () => baseColors.forEach((style) => ansis[style](ansis.bold(ansis.underline(ansis.italic('foo')))))). - add(packages['colors'], () => - baseColors.forEach((style) => colorsJs[style](colorsJs.bold(colorsJs.underline(colorsJs.italic('foo'))))), - ). add(packages['colorette'], () => baseColors.forEach((style) => colorette[style](colorette.bold(colorette.underline(colorette.italic('foo'))))), ). add(packages['picocolors'], () => baseColors.forEach((style) => picocolors[style](picocolors.bold(picocolors.underline(picocolors.italic('foo'))))), ). + add(packages['kleur'], () => baseColors.forEach((style) => kleur[style](kleur.bold(kleur.underline(kleur.italic('foo')))))). + add('kleur/colors', () => + baseColors.forEach((style) => + kleurColors[style](kleurColors.bold(kleurColors.underline(kleurColors.italic('foo')))), + ), + ). + add(packages['ansi-colors'], () => + baseColors.forEach((style) => ansiColors[style](ansiColors.bold(ansiColors.underline(ansiColors.italic('foo'))))), + ). + add(packages['kolorist'], () => + baseColors.forEach((style) => kolorist[style](kolorist.bold(kolorist.underline(kolorist.italic('foo'))))), + ). add(packages['cli-color'], () => baseColors.forEach((style) => cliColor[style](cliColor.bold(cliColor.underline(cliColor.italic('foo'))))), ). add(packages['colors-cli'], () => baseColors.forEach((style) => colorCli[style](colorCli.bold(colorCli.underline(colorCli.italic('foo'))))), ). - add(packages['ansi-colors'], () => - baseColors.forEach((style) => ansiColors[style](ansiColors.bold(ansiColors.underline(ansiColors.italic('foo'))))), - ). - add('kleur/colors', () => - baseColors.forEach((style) => - kleurColors[style](kleurColors.bold(kleurColors.underline(kleurColors.italic('foo')))), - ), + add(packages['colors'], () => + baseColors.forEach((style) => colorsJs[style](colorsJs.bold(colorsJs.underline(colorsJs.italic('foo'))))), ). - add(packages['kleur'], () => baseColors.forEach((style) => kleur[style](kleur.bold(kleur.underline(kleur.italic('foo')))))). run(); // Nested styles fixture = createFixture(vendors, nestedFixture); bench('Nested styles'). - add(packages['chalk'], () => fixture[7](chalk)). - add(packages['ansis'], () => fixture[8](ansis)). - add(packages['colors'], () => fixture[9](colorsJs)). - add(packages['colorette'], () => fixture[0](colorette)). - add(packages['picocolors'], () => fixture[1](picocolors)). - add(packages['cli-color'], () => fixture[2](cliColor)). - add(packages['colors-cli'], () => fixture[3](colorCli)). - add(packages['ansi-colors'], () => fixture[4](ansiColors)). + add(packages['chalk'], () => fixture[0](chalk)). + add(packages['ansis'], () => fixture[1](ansis)). + add(packages['colorette'], () => fixture[2](colorette)). + add(packages['picocolors'], () => fixture[3](picocolors)). + add(packages['kleur'], () => fixture[4](kleur)). add('kleur/colors', () => fixture[5](kleurColors)). - add(packages['kleur'], () => fixture[6](kleur)). + add(packages['ansi-colors'], () => fixture[6](ansiColors)). + add(packages['kolorist'], () => fixture[7](kolorist)). + add(packages['cli-color'], () => fixture[8](cliColor)). + add(packages['colors-cli'], () => fixture[9](colorCli)). + add(packages['colors'], () => fixture[10](colorsJs)). run(); // Deep nested styles fixture = createFixture(vendors, deepNestedFixture); bench('Deep nested styles'). - add(packages['chalk'], () => fixture[7](chalk)). - add(packages['ansis'], () => fixture[8](ansis)). - add(packages['colors'], () => fixture[9](colorsJs)). - add(packages['colorette'], () => fixture[0](colorette)). - add(packages['picocolors'], () => fixture[1](picocolors)). - add(packages['cli-color'], () => fixture[2](cliColor)). - add(packages['colors-cli'], () => fixture[3](colorCli)). - add(packages['ansi-colors'], () => fixture[4](ansiColors)). + add(packages['chalk'], () => fixture[0](chalk)). + add(packages['ansis'], () => fixture[1](ansis)). + add(packages['colorette'], () => fixture[2](colorette)). + add(packages['picocolors'], () => fixture[3](picocolors)). + add(packages['kleur'], () => fixture[4](kleur)). add('kleur/colors', () => fixture[5](kleurColors)). - add(packages['kleur'], () => fixture[6](kleur)). + add(packages['ansi-colors'], () => fixture[6](ansiColors)). + add(packages['kolorist'], () => fixture[7](kolorist)). + add(packages['cli-color'], () => fixture[8](cliColor)). + add(packages['colors-cli'], () => fixture[9](colorCli)). + add(packages['colors'], () => fixture[10](colorsJs)). run(); // Check support of correct break style at new line diff --git a/package.json b/package.json index 455fcd7..305ed49 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ansis", - "version": "3.3.1", + "version": "3.3.2", "description": "Colorize terminal output with ANSI colors & styles", "keywords": [ "ansi", diff --git a/package.npm.json b/package.npm.json index 6516b64..daa513e 100644 --- a/package.npm.json +++ b/package.npm.json @@ -1,6 +1,6 @@ { "name": "ansis", - "version": "3.3.1", + "version": "3.3.2", "description": "Colorize terminal output with ANSI colors & styles", "keywords": [ "ansi", diff --git a/src/ansi-codes.js b/src/ansi-codes.js index a997b6f..23153ce 100644 --- a/src/ansi-codes.js +++ b/src/ansi-codes.js @@ -8,33 +8,45 @@ const monoFn = () => mono; const esc = isSupported ? (open, close) => ({ open: `\x1b[${open}m`, close: `\x1b[${close}m` }) : monoFn; const closeCode = 39; const bgCloseCode = 49; - -// defaults, true color -let fnAnsi256 = (code) => esc(`38;5;${code}`, closeCode); -let fnBgAnsi256 = (code) => esc(`48;5;${code}`, bgCloseCode); -let fnRgb = (r, g, b) => esc(`38;2;${r};${g};${b}`, closeCode); -let fnBgRgb = (r, g, b) => esc(`48;2;${r};${g};${b}`, bgCloseCode); +const bgOffset = 10; const createRgbFn = (fn) => (r, g, b) => fn(rgbToAnsi256(r, g, b)); const createHexFn = (fn) => (hex) => { + // note: the `...` operator is too slow let [r, g, b] = hexToRgb(hex); return fn(r, g, b); }; +// defaults, true color +let fnAnsi256 = (code) => esc(`38;5;${code}`, closeCode); +let fnBgAnsi256 = (code) => esc(`48;5;${code}`, bgCloseCode); +export let fnRgb = (r, g, b) => esc(`38;2;${r};${g};${b}`, closeCode); +let fnBgRgb = (r, g, b) => esc(`48;2;${r};${g};${b}`, bgCloseCode); + if (colorSpace === 1) { // ANSI 16 colors fnAnsi256 = (code) => esc(ansi256To16(code), closeCode); - fnBgAnsi256 = (code) => esc(ansi256To16(code) + 10, bgCloseCode); + fnBgAnsi256 = (code) => esc(ansi256To16(code) + bgOffset, bgCloseCode); fnRgb = (r, g, b) => esc(rgbToAnsi16(r, g, b), closeCode); - fnBgRgb = (r, g, b) => esc(rgbToAnsi16(r, g, b) + 10, bgCloseCode); + fnBgRgb = (r, g, b) => esc(rgbToAnsi16(r, g, b) + bgOffset, bgCloseCode); } else if (colorSpace === 2) { // ANSI 256 colors fnRgb = createRgbFn(fnAnsi256); fnBgRgb = createRgbFn(fnBgAnsi256); } -export const baseStyles = { +export let styleData = { + // color functions + ansi256: fnAnsi256, // alias for compatibility with chalk + bgAnsi256: fnBgAnsi256, // alias for compatibility with chalk + fg: fnAnsi256, + bg: fnBgAnsi256, + rgb: fnRgb, bgRgb: + fnBgRgb, + hex: createHexFn(fnRgb), + bgHex: createHexFn(fnBgRgb), + // misc visible: mono, reset: esc(0, 0), @@ -50,44 +62,12 @@ export const baseStyles = { strike: esc(9, 29), // alias for strikethrough // foreground colors - // black: esc(30, closeCode), - // red: esc(31, closeCode), - // green: esc(32, closeCode), - // yellow: esc(33, closeCode), - // blue: esc(34, closeCode), - // magenta: esc(35, closeCode), - // cyan: esc(36, closeCode), - // white: esc(37, closeCode), grey: esc(90, closeCode), // UK spelling alias for blackBright gray: esc(90, closeCode), // US spelling alias for blackBright - // blackBright: esc(90, closeCode), - // redBright: esc(91, closeCode), - // greenBright: esc(92, closeCode), - // yellowBright: esc(93, closeCode), - // blueBright: esc(94, closeCode), - // magentaBright: esc(95, closeCode), - // cyanBright: esc(96, closeCode), - // whiteBright: esc(97, closeCode), // background colors - // bgBlack: esc(40, bgCloseCode), - // bgRed: esc(41, bgCloseCode), - // bgGreen: esc(42, bgCloseCode), - // bgYellow: esc(43, bgCloseCode), - // bgBlue: esc(44, bgCloseCode), - // bgMagenta: esc(45, bgCloseCode), - // bgCyan: esc(46, bgCloseCode), - // bgWhite: esc(47, bgCloseCode), bgGrey: esc(100, bgCloseCode), // UK spelling alias for bgBlackBright bgGray: esc(100, bgCloseCode), // US spelling alias for bgBlackBright - // bgBlackBright: esc(100, bgCloseCode), - // bgRedBright: esc(101, bgCloseCode), - // bgGreenBright: esc(102, bgCloseCode), - // bgYellowBright: esc(103, bgCloseCode), - // bgBlueBright: esc(104, bgCloseCode), - // bgMagentaBright: esc(105, bgCloseCode), - // bgCyanBright: esc(106, bgCloseCode), - // bgWhiteBright: esc(107, bgCloseCode), }; // generate ANSI 16 colors dynamically and save ~450 bytes @@ -99,25 +79,10 @@ let name, bgName; for (name of styles) { bgName = 'bg' + name[0].toUpperCase() + name.slice(1); - baseStyles[name] = esc(code, closeCode); - baseStyles[name + bright] = esc(code + 60, closeCode); - baseStyles[bgName] = esc(code + 10, bgCloseCode); - baseStyles[bgName + bright] = esc(code + 70, bgCloseCode); + styleData[name] = esc(code, closeCode); + styleData[name + bright] = esc(code + 60, closeCode); + styleData[bgName] = esc(code + bgOffset, bgCloseCode); + styleData[bgName + bright] = esc(code + 70, bgCloseCode); code++; } - -export const styleMethods = { - fg: fnAnsi256, - bg: fnBgAnsi256, - rgb: fnRgb, - bgRgb: fnBgRgb, - // note: the `...` operator is too slow - //hex: (hex) => fnRgb(...hexToRgb(hex)), - hex: createHexFn(fnRgb), - // note: the `...` operator is too slow - //bgHex: (hex) => fnBgRgb(...hexToRgb(hex)), - bgHex: createHexFn(fnBgRgb), -}; - -export const rgb = fnRgb; diff --git a/src/index.js b/src/index.js index c98183e..49578f5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import { baseStyles, styleMethods, rgb, isSupported } from './ansi-codes.js'; +import { styleData, fnRgb, isSupported } from './ansi-codes.js'; import { hexToRgb } from './utils.js'; /** @@ -125,42 +125,40 @@ const Ansis = function() { self.extend = (colors) => { for (let name in colors) { let value = colors[name]; - // detect whether the value is style property Object {open, close} or a string with hex code of color '#FF0000' - let isStyle = value.open != null; - let styleCodes = isStyle ? value : rgb(...hexToRgb(value)); - - styles[name] = { - get() { - const style = createStyle(this, styleCodes); - defineProperty(this, name, { value: style }); - return style; - }, - }; + let type = typeof value; + + // detect whether the value is style property Object {open, close} + // or a string with hex code of a color, e.g.: '#FF0000' + let styleProps = type === 'string' ? fnRgb(...hexToRgb(value)) : value; + + if (type === 'function') { + styles[name] = { + get() { + return (...args) => createStyle(this, value(...args)); + }, + }; + } else { + styles[name] = { + get() { + let style = createStyle(this, styleProps); + defineProperty(this, name, { value: style }); + + return style; + }, + }; + } } stylePrototype = defineProperties({}, styles); setPrototypeOf(self, stylePrototype); }; - // extend styles with base colors & styles - self.extend(baseStyles); + // define functions, colors and styles + self.extend(styleData); return self; }; -// extend styles with methods: rgb(), hex(), etc. -for (let name in styleMethods) { - styles[name] = { - get() { - return (...args) => createStyle(this, styleMethods[name](...args)); - }, - }; -} - -// define method aliases for compatibility with chalk -styles.ansi256 = styles.fg; -styles.bgAnsi256 = styles.bg; - // note: place it here to allow the compiler to group all constants let stylePrototype;