DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Edited on

Logger package in changesets monorepo

Changesets CLI package has an import as shown below at line 3 in packages/cli/src/index.ts#L3

import { error } from "@changesets/logger";
Enter fullscreen mode Exit fullscreen mode

I have seen this before, a dedicated package just for logger, in docusaurus-logger. At this point, I believe it is a common standard/best practice across the OSS to have a dedicated package to have a consistent logger to be used across the codebase.

Why a dedicated package for logger?

Since changesets is a monorepo (so is Docusaurus), you will find yourself reusing packages across the codebase but imagine a scenario where you logged an error on to the CLI using a color. Why is this color in picture now? you might be wondering. When you use a CLI package of any Open Source project such as Next.js or Docusaurus or Changesets, the feedback you get from interacting with CLI often times is colored, for example, to show an error or warning or info.

Image description

I picked few functions from Changesets packages/cli/src/index.ts

export function error(args: Array<any>) {
 console.error(format(args, pc.red("error")));
}
export function info(args: Array<any>) {
 console.info(format(args, pc.cyan("info")));
}
export function success(args: Array<any>) {
 console.log(format(args, pc.green("success")));
}
Enter fullscreen mode Exit fullscreen mode

So what’s pc? It is picocolors package imported at the top of the file.

import pc from "picocolors";
Enter fullscreen mode Exit fullscreen mode

Benefits of using a logger package

You will greatly benefit from consistent logging capabilities across your codebase since you will define the common logs with color encoding if required.

Below is a code snippet picked from Docusuarus.

function warn(msg: unknown, values: InterpolatableValue[]): void {
 console.warn(
 chalk.yellow(
 `${chalk.bold('[WARNING]')} ${
 values.length === 0
 ? stringify(msg)
 : interpolate(msg as TemplateStringsArray, values)
 }`,
 ),
 );
}
Enter fullscreen mode Exit fullscreen mode

Docusaurus uses chalk to color the CLI output strings. I mentioned Docusaurus and shown the example to demonstrate how a package is used purely for logging purposes.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on an interesting project. Send me an email at ramu.narasinga@gmail.com

My Github - https://github.com/ramu-narasinga
My website - https://ramunarasinga.com
My Youtube channel - https://www.youtube.com/@thinkthroo
Learning platform - https://thinkthroo.com
Codebase Architecture - https://app.thinkthroo.com/architecture
Best practices - https://app.thinkthroo.com/best-practices
Production-grade projects - https://app.thinkthroo.com/production-grade-projects

References:

  1. https://github.com/changesets/changesets/blob/main/packages/logger/src/index.ts#L18

  2. https://github.com/changesets/changesets/blob/main/packages/cli/src/index.ts#L3

  3. https://github.com/changesets/changesets/tree/main/packages/logger

  4. https://github.com/facebook/docusaurus/blob/2b8ddb9260c54b7fdba4398bfdce64553a1356b0/packages/docusaurus-logger/src/index.ts

  5. https://www.npmjs.com/package/picocolors

  6. https://www.npmjs.com/package/chalk

Top comments (0)