Logger package in changesets monorepo

thinkthroo

thinkThroo

Posted on November 18, 2024

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 us:

At Thinkthroo, we study large open source projects and provide architectural guides. We have developed reusable Components, built with tailwind, that you can use in your project. We offer Next.js, React and Node development services.

Book a meeting with us to discuss your project.

Image description

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

💖 💪 🙅 🚩
thinkthroo
thinkThroo

Posted on November 18, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Logger package in changesets monorepo
javascript Logger package in changesets monorepo

November 18, 2024