[Feature]: Replace `chalk` dependency with a lighter alternative

[trivikr]

trafficstars

🚀 Feature Proposal

Replace chalk dependency with a lighter alternative

Motivation

Recently, the Ecosystem Performance was formed to cleanup, speedup, levelup the JavaScript Ecosystem. Socket Security team wrote a blog post about it https://socket.dev/blog/javascript-community-launches-e18e-initiative-to-improve-ecosystem-performance

On the e18e cleanup channel on Discord, multiple solutions are being discussed. One of them is to replace chalk with picocolors.

I see that jest uses chalk https://github.com/jestjs/jest/blob/cce44d767e5e1d5c62eaaf5f93fb73748c25266b/package.json#L31

And it's upgrade to [email protected] is blocked since it's ESM only https://github.com/jestjs/jest/pull/14253#issuecomment-1604065296

Example

No response

Pitch

Replace chalk with a lighter alternative like picocolors.

[SimenB]

Happy to take a PR switching to picocolors (which babel etc. uses) or something else if there are better alternatives 👍

[ishon19]

Hey @SimenB, I would like to work on this issue!

Also, I went through a bunch of relevant npm packages (kleur, colorette, etc.) and I also feel like picocolors would be the best option here, as it beats others in terms of the package size.

[SimenB]

Sweet thanks! Looking forward to it 👍

[sindresorhus]

I recommend reading this: https://github.com/chalk/chalk#why-not-switch-to-a-smaller-coloring-package

[ishon19]

I recommend reading this: https://github.com/chalk/chalk#why-not-switch-to-a-smaller-coloring-package

Thanks for sharing the link @sindresorhus and I agree to a great extent, smaller packages somewhere fall short on providing the range of colors, something which I experienced in the linked draft PR, not to mention the package specific quirks that need to be accommodated on top of that.

[SimenB]

Fair enough, but for jest specifically that probably doesn't apply as much:

• we pull in Babel which has already made the change, so we don't add extra deps
• we're not gonna move to ESM anytime soon, so we're stuck on older versions where the deduplication benefit isn't as good (and will regress as time goes on)

[trivikr]

I would like to work on this issue!

@ishon19 Are you still working on this?

My PR on changesets was just merged and released https://github.com/changesets/changesets/pull/1417, and I don't mind taking this up.

[ishon19]

@ishon19 Are you still working on this?

My PR on changesets was just merged and released changesets/changesets#1417, and I don't mind taking this up.

Hey @trivikr, that's awesome! Sure, you can take this up if you'd like to. I was stuck on the type extraction; the yarn build was failing as API Extractor couldn't extract picocolors type, I created an issue with picocolors too (linked in the draft PR) but haven't received any official response yet.

[trivikr]

linked in the draft PR

My bad. I see that you've already posted PR on Jul 18th which I didn't know about https://github.com/jestjs/jest/pull/15197

Thank you for posting the PR, and following up with the maintainer.

[ishon19]

My bad. I see that you've already posted PR on Jul 18th which I didn't know about #15197

Thank you for posting the PR, and following up with the maintainer.

No problem! Hoping to get a response from the maintainer soon so that we're good to go.

[webdiscus]

Happy to take a PR switching to picocolors (which babel etc. uses) or something else if there are better alternatives 👍

If we are talking about better alternatives, it would be good to study which ones exist and compare them.

Here are comparisons of all most popular alternatives:

• compare features of most popular libraries
• compare package sizes
• benchmarks

P.S. I think it is also important what changes will be made to the code. Picocolors is not drop-in replacement, and you will get degradations in code, such as:

-  chalk.bold.red(
-      `The error below may be caused by using the wrong test environment, see ${chalk.dim.underline(
-        'https://jestjs.io/docs/configuration#testenvironment-string',
-      )}.\nConsider using the "${env}" test environment.\n\n`,
+    pico.bold(
+      pico.red(
+        `The error below may be caused by using the wrong test environment, see ${pico.dim(
+          pico.underline(
+            'https://jestjs.io/docs/configuration#testenvironment-string',
+          ),
+        )}.\nConsider using the "${env}" test environment.\n\n`,
+      ),
+    )

The chained syntax is more readable and shorter than nested calls.

Note ansis, it's an alternative, as small as picocolors and has the same functions as chalk. Ansis and Picocolors, both are recommended by the ES Tooling community.

[alexeyraspopov]

@webdiscus so you just copied the picocolors' replacement algorithm to your library and now walk around talking people into using your library instead? Naughty naughty.

[mag123c]

Is this issue still open?

[SukkaW]

@sukjuhong @pralkarz Would you like to continue on PR #15490? As I am interested in picking it up here.

@webdiscus I myself don't mind using both picocolors and ansis together, picocolors for simple use cases and ansis if chaining is needed. Even with picocolors and ansis combined, the size and dependency count are still way smaller and lower than chalk, and that is still a win.

[pralkarz]

@SukkaW I'm quite busy lately, so feel free to pick it up.

[webdiscus]

@SukkaW,

I'll prepare a commit in my fork repository to demonstrate how easy it would be to switch to ansis, requiring significantly fewer code changes, since ansis supports the chained syntax, color levels and RGB functions (rgb , ansi256, etc.) used in the code and tests.

Ansis replaces not only chalk but also ansi-styles, which is used, e.g., in printSnapshot.test.ts.

I'll not make a new PR here, just a demo commit in my fork to compare how many changes are required when migrating to ansis versus migrating to other libraries.

P.S. I respect the choice of any library and my intention is not self-promotion. My only goal is to see the most optimal library being used. After all, that is our goal.

[cpojer]

I appreciate the cleanup efforts. However, chalk is a fine library. If we are migrating, then we should migrate to styleText once we drop Node versions prior to 20.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.