Lessons from open-source: Use picocolors to format terminal output with colors
Tags: javascript, opensource, nextjs, react
Published: 2024-03-21 21:08:59

This lessson is picked from [Next.js source code](https://github.com/vercel/next.js/blob/canary/packages/next/src/cli/next-build.ts). In this article, you will learn what a [picocolors](https://www.npmjs.com/package/picocolors) package is, how Next.js uses it to apply colors to terminal output.

Picocolors
----------

[picocolors](https://www.npmjs.com/package/picocolors) is the tiniest and the fastest library for terminal output formatting with ANSI colors.

```
import pc from "picocolors"

console.log(
  pc.green(\`How are ${pc.italic(\`you\`)} doing?\`)
)
```

You can read [full documentation](https://github.com/alexeyraspopov/picocolors#readme) on Github.

> [_Practice the exercises based on documentation_](https://tthroo.com/) _to become an expert in Next.js_

How Next.js uses it to apply colors to terminal output?
-------------------------------------------------------

Surprisingly, Next.js does not have picocolors as a dependency in package.json, because it is so tiny, Next.js authors have picked the [picocolors source code](https://github.com/alexeyraspopov/picocolors/blob/b6261487e7b81aaab2440e397a356732cad9e342/picocolors.js#L1) and placed it in [packages/next/src/lib/picocolors.ts](https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/picocolors.ts)

![build-command-related-files](https://media.licdn.com/dms/image/D4E12AQEZ5Rlobn97RA/article-inline_image-shrink_1000_1488/0/1711054717575?e=1716422400&v=beta&t=XVTBO2NvMUPSMRMBZ0fs0Dfh8RQoL6DXSRuXNUY6938)

It is important to mention the license and copyright when you copy open source code. Next.js authors even put the link to the file where this code is picked from.

L19 in the above image has ‘_globalThis’_. I have seen ‘_this’_, ‘_self_,’ ‘_window’_ but not ‘_globalThis’._

globalThis
----------

> _The_ globalThis global property contains the [global](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#global_context) this value, which is usually akin to the [global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object). — [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis)

To access global this value consistently in window and non-window contexts without knowing the environment in which the code is being run, you can use globalThis.

Conclusion:
-----------

Picocolors can be used to apply colors to your terminal output. I have found this import in Next.js build command related files. Because this package is so tiny, Next.js authors have picked the [picocolors source code](https://github.com/alexeyraspopov/picocolors/blob/b6261487e7b81aaab2440e397a356732cad9e342/picocolors.js#L1) and placed it in [packages/next/src/lib/picocolors.ts.](https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/picocolors.ts)

I have used ‘_this’_, ‘_self_,’ ‘_window’_ but not ‘_globalThis’._ Upon further reading the MDN docs, I learnt that to access global ‘this’ javascript context independant of environments (I am talking browser or non-browser environments), ‘globalThis’ can be used.

You learn something new everyday! :)