Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace chalk with ansis #738

Closed
1 task
BioPhoton opened this issue Jul 10, 2024 · 8 comments · Fixed by #750
Closed
1 task

Replace chalk with ansis #738

BioPhoton opened this issue Jul 10, 2024 · 8 comments · Fixed by #750
Labels
➕ enhancement new feature or request 💡 good first issue good for newcomers 🆘 help wanted assistance is required 🧹 maintenance 🔥 performance performance optimization 🤓 UX UX improvement for CLI users

Comments

@BioPhoton
Copy link
Collaborator

BioPhoton commented Jul 10, 2024

User story

As a developer I want to use latest tools, minimize the dependency graph.

chalk has a couple op disadvantages:

  • No dual module support
  • large bundlesize
  • many dependencies
  • slow compared to other alternatives

Benchmarks of alternative options:

https://github.com/webdiscus/ansis#benchmark

Acceptance criteria

Implementation details

Relevant steps for our codebase:

  1. Replacing chalk
Replace package name in import:

- import chalk from 'chalk'
+ import ansis, { red, green, cyan, black, ansi256, hex } from 'ansis';
  1. Replace variable:
- chalk.red(text)
+ ansis.red(text)
  1. Replace chains to nested calls:
- chalk.red.bold(text)
+ ansis.red(bold(text))
@BioPhoton BioPhoton added 🆘 help wanted assistance is required ➕ enhancement new feature or request 🤓 UX UX improvement for CLI users 🔥 performance performance optimization 🧹 maintenance 💡 good first issue good for newcomers labels Jul 12, 2024
@webdiscus
Copy link

@BioPhoton

you can replace chalk with ansis.
Ansis is very small size and fast.
Ansis has all features of chalk and supports named import so your code will be more clean & clear:

- import chalk from 'chalk'
+ import ansis, {red, bold, underline, etc...} from 'ansis' 

Replace variable:

- chalk.red(text)
+ ansis.red(text)
// or
+ red(text)

Replace text:

- chalk.red('text')
+ ansis.red('text')
// or
+ red`text`

Replace chains:

- chalk.red.bold(text)
+ ansis.red.bold(text)
// or
+ red.bold(text)
// or
+ red`${bold(text)}`

@BioPhoton
Copy link
Collaborator Author

Thanks @webdiscus!! I will check it out right now.

What is the difference to picocolor?

@webdiscus
Copy link

webdiscus commented Jul 12, 2024

@BioPhoton
The difference to picocolor you can see in the features comparison.

Picocolor is very primitive and doesn't supports runtimes like Bun, Deno, Next.JS.

@BioPhoton
Copy link
Collaborator Author

Convince, but your link is broken.

@webdiscus
Copy link

Convince, but your link is broken.

sorry, the link above is fixed

@BioPhoton
Copy link
Collaborator Author

Description is updated, labeled correctly and moved into ready for refinement :)

@WuglyakBolgoink
Copy link
Contributor

WuglyakBolgoink commented Jul 13, 2024

there is some problem (missed colors) with pico -> alexeyraspopov/picocolors#55 (comment)

#750

@BioPhoton BioPhoton changed the title Replace chalk with piccolor Replace chalk with ansis Jul 15, 2024
@BioPhoton
Copy link
Collaborator Author

I forgot to update the title 🙈

We switched to ansis. The title was the only description I forgot to update 🤷‍♂️

Sry for that ✌️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
➕ enhancement new feature or request 💡 good first issue good for newcomers 🆘 help wanted assistance is required 🧹 maintenance 🔥 performance performance optimization 🤓 UX UX improvement for CLI users
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants