Replace Chalk with ansis for better performance and tree-shaking

packages/create-catalyst/package.json

@@ -26,7 +26,7 @@
     "@inquirer/type": "^3.0.7",
     "@segment/analytics-node": "^2.2.1",
     "ansi-escapes": "^7.0.0",
-    "chalk": "^5.4.1",
+    "ansis": "^4.1.0",
     "commander": "^14.0.0",
     "conf": "^13.1.0",
     "cross-spawn": "^7.0.6",

packages/create-catalyst/src/commands/create.ts

@@ -1,6 +1,6 @@
 import { Command, Option } from '@commander-js/extra-typings';
 import { input, select } from '@inquirer/prompts';
-import chalk from 'chalk';
+import { dim, green, red, yellow } from 'ansis';
 import { execSync } from 'child_process';
 import { pathExistsSync } from 'fs-extra/esm';
 import kebabCase from 'lodash.kebabcase';
@@ -68,7 +68,7 @@ async function handleChannelCreation(bc: Https, cliApi: CliApi) {
     availableLocales = await getAvailableLocales(bc);
   } catch (error) {
     if (error instanceof Error) {
-      console.error(chalk.red(error.message));
+      console.error(red(error.message));
     }
 
     process.exit(1);
@@ -80,7 +80,7 @@ async function handleChannelCreation(bc: Https, cliApi: CliApi) {
     choices: availableLocales,
     theme: {
       style: {
-        help: () => chalk.dim('(Select locale from the list or start typing the name)'),
+        help: () => dim('(Select locale from the list or start typing the name)'),
       },
     },
   });
@@ -101,7 +101,7 @@ async function handleChannelCreation(bc: Https, cliApi: CliApi) {
       message: 'Which additional languages would you like to add to your channel?',
       theme: {
         style: {
-          help: () => chalk.dim('(Select locale from the list or start typing the name)'),
+          help: () => dim('(Select locale from the list or start typing the name)'),
         },
       },
       validate: (selections) => {
@@ -131,15 +131,15 @@ async function handleChannelCreation(bc: Https, cliApi: CliApi) {
 
   if (!response.ok) {
     console.error(
-      chalk.red(`\nPOST /channels/catalyst failed: ${response.status} ${response.statusText}\n`),
+      red(`\nPOST /channels/catalyst failed: ${response.status} ${response.statusText}\n`),
     );
     process.exit(1);
   }
 
   const channelData: unknown = await response.json();
 
   if (!isCreateChannelResponse(channelData)) {
-    console.error(chalk.red('\nUnexpected response format from create channel endpoint\n'));
+    console.error(red('\nUnexpected response format from create channel endpoint\n'));
     process.exit(1);
   }
 
@@ -156,17 +156,15 @@ async function handleChannelSelection(bc: Https) {
 
   if (!channelsResponse.ok) {
     console.error(
-      chalk.red(
-        `\nGET /v3/channels failed: ${channelsResponse.status} ${channelsResponse.statusText}\n`,
-      ),
+      red(`\nGET /v3/channels failed: ${channelsResponse.status} ${channelsResponse.statusText}\n`),
     );
     process.exit(1);
   }
 
   const availableChannels: unknown = await channelsResponse.json();
 
   if (!isChannelsResponse(availableChannels)) {
-    console.error(chalk.red('\nUnexpected response format from channels endpoint\n'));
+    console.error(red('\nUnexpected response format from channels endpoint\n'));
     process.exit(1);
   }
 
@@ -208,7 +206,7 @@ async function getChannelInit(cliApi: CliApi, channelId: number) {
 
   if (!initResponse.ok) {
     console.error(
-      chalk.red(
+      red(
         `\nGET /channels/${channelId}/init failed: ${initResponse.status} ${initResponse.statusText}\n`,
       ),
     );
@@ -218,7 +216,7 @@ async function getChannelInit(cliApi: CliApi, channelId: number) {
   const initData: unknown = await initResponse.json();
 
   if (!isInitResponse(initData)) {
-    console.error(chalk.red('\nUnexpected response format from init endpoint\n'));
+    console.error(red('\nUnexpected response format from init endpoint\n'));
     process.exit(1);
   }
 
@@ -235,7 +233,7 @@ async function setupProject(options: {
   let { projectName, projectDir } = options;
 
   if (!pathExistsSync(projectDir)) {
-    console.error(chalk.red(`Error: --projectDir ${projectDir} is not a valid path\n`));
+    console.error(red(`Error: --projectDir ${projectDir} is not a valid path\n`));
     process.exit(1);
   }
 
@@ -244,7 +242,7 @@ async function setupProject(options: {
     projectDir = join(options.projectDir, projectName);
 
     if (pathExistsSync(projectDir)) {
-      console.error(chalk.red(`Error: ${projectDir} already exists\n`));
+      console.error(red(`Error: ${projectDir} already exists\n`));
       process.exit(1);
     }
   }
@@ -282,15 +280,15 @@ function checkRequiredTools() {
   try {
     execSync(getPlatformCheckCommand('git'), { stdio: 'ignore' });
   } catch {
-    console.error(chalk.red('Error: git is required to create a Catalyst project\n'));
+    console.error(red('Error: git is required to create a Catalyst project\n'));
     process.exit(1);
   }
 
   try {
     execSync(getPlatformCheckCommand('pnpm'), { stdio: 'ignore' });
   } catch {
-    console.error(chalk.red('Error: pnpm is required to create a Catalyst project\n'));
-    console.error(chalk.yellow('Tip: Enable it by running `corepack enable pnpm`\n'));
+    console.error(red('Error: pnpm is required to create a Catalyst project\n'));
+    console.error(yellow('Tip: Enable it by running `corepack enable pnpm`\n'));
     process.exit(1);
   }
 }
@@ -383,13 +381,13 @@ export const create = new Command('create')
 
         console.log(
           [
-            `\n${chalk.green('Success!')} Created '${projectName}' at '${projectDir}'\n`,
+            `\n${green('Success!')} Created '${projectName}' at '${projectDir}'\n`,
             `Next steps:`,
             Object.keys(envVars).length > 0
-              ? chalk.yellow(`\n- cd ${projectName} && pnpm run dev\n`)
+              ? yellow(`\n- cd ${projectName} && pnpm run dev\n`)
               : [
-                  chalk.yellow(`\n- cd ${projectName} && cp .env.example .env.local`),
-                  chalk.yellow(`\n- Populate .env.local with your BigCommerce API credentials\n`),
+                  yellow(`\n- cd ${projectName} && cp .env.example .env.local`),
+                  yellow(`\n- Populate .env.local with your BigCommerce API credentials\n`),
                 ].join(''),
           ].join('\n'),
         );
@@ -423,7 +421,7 @@ export const create = new Command('create')
 
           if (!eligibilityResponse.ok) {
             console.error(
-              chalk.red(
+              red(
                 `\nGET /channels/catalyst/eligibility failed: ${eligibilityResponse.status} ${eligibilityResponse.statusText}\n`,
               ),
             );
@@ -433,12 +431,12 @@ export const create = new Command('create')
           const eligibilityData: unknown = await eligibilityResponse.json();
 
           if (!isEligibilityResponse(eligibilityData)) {
-            console.error(chalk.red('\nUnexpected response format from eligibility endpoint\n'));
+            console.error(red('\nUnexpected response format from eligibility endpoint\n'));
             process.exit(1);
           }
 
           if (!eligibilityData.data.eligible) {
-            console.warn(chalk.yellow(eligibilityData.data.message));
+            console.warn(yellow(eligibilityData.data.message));
           }
 
           let shouldCreateChannel;
@@ -460,9 +458,9 @@ export const create = new Command('create')
             storefrontToken = channelData.storefrontToken;
             envVars = { ...channelData.envVars };
 
-            console.log(chalk.green(`Channel created successfully`));
+            console.log(green(`Channel created successfully`));
             console.warn(
-              chalk.yellow(
+              yellow(
                 '\nNote: A preview storefront has been deployed in your BigCommerce control panel. This preview may look different from your local environment as it may be running different code.',
               ),
             );
@@ -525,9 +523,9 @@ export const create = new Command('create')
     }
 
     console.log(
-      `\n${chalk.green('Success!')} Created '${projectName}' at '${projectDir}'\n`,
+      `\n${green('Success!')} Created '${projectName}' at '${projectDir}'\n`,
       '\nNext steps:\n',
-      chalk.yellow(`\ncd ${projectName} && pnpm run dev\n`),
+      yellow(`\ncd ${projectName} && pnpm run dev\n`),
     );
   });
 

packages/create-catalyst/src/commands/init.ts

@@ -1,6 +1,6 @@
 import { Command, Option } from '@commander-js/extra-typings';
 import { select } from '@inquirer/prompts';
-import chalk from 'chalk';
+import { green, red, yellow } from 'ansis';
 
 import { CliApi } from '../utils/cli-api';
 import { Config } from '../utils/config';
@@ -116,7 +116,7 @@ export const init = new Command('init')
 
     if (!channelsResponse.ok) {
       console.error(
-        chalk.red(
+        red(
           `\nGET /v3/channels failed: ${channelsResponse.status} ${channelsResponse.statusText}\n`,
         ),
       );
@@ -126,7 +126,7 @@ export const init = new Command('init')
     const availableChannels: unknown = await channelsResponse.json();
 
     if (!isChannelsResponse(availableChannels)) {
-      console.error(chalk.red('\nUnexpected response format from channels endpoint\n'));
+      console.error(red('\nUnexpected response format from channels endpoint\n'));
       process.exit(1);
     }
 
@@ -155,7 +155,7 @@ export const init = new Command('init')
 
     if (!initResponse.ok) {
       console.error(
-        chalk.red(
+        red(
           `\nGET /channels/${channelId}/init failed: ${initResponse.status} ${initResponse.statusText}\n`,
         ),
       );
@@ -165,7 +165,7 @@ export const init = new Command('init')
     const initData: unknown = await initResponse.json();
 
     if (!isInitResponse(initData)) {
-      console.error(chalk.red('\nUnexpected response format from init endpoint\n'));
+      console.error(red('\nUnexpected response format from init endpoint\n'));
       process.exit(1);
     }
 
@@ -188,7 +188,7 @@ export const init = new Command('init')
 
     writeEnv(projectDir, envVars);
 
-    console.log(chalk.green(`\n.env.local file created for channel ${existingChannel.name}!\n`));
-    console.log(chalk.green(`\nNext steps:\n`));
-    console.log(chalk.yellow(`\npnpm run dev\n`));
+    console.log(green(`\n.env.local file created for channel ${existingChannel.name}!\n`));
+    console.log(green(`\nNext steps:\n`));
+    console.log(yellow(`\npnpm run dev\n`));
   });

packages/create-catalyst/src/index.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import { program } from '@commander-js/extra-typings';
-import chalk from 'chalk';
+import { cyanBright } from 'ansis';
 
 import PACKAGE_INFO from '../package.json';
 
@@ -11,7 +11,7 @@ import { integration } from './commands/integration';
 import { telemetry } from './commands/telemetry';
 import { telemetryPostHook, telemetryPreHook } from './hooks/telemetry';
 
-console.log(chalk.cyanBright(`\n◢ ${PACKAGE_INFO.name} v${PACKAGE_INFO.version}\n`));
+console.log(cyanBright(`\n◢ ${PACKAGE_INFO.name} v${PACKAGE_INFO.version}\n`));
 
 program
   .name(PACKAGE_INFO.name)

packages/create-catalyst/src/prompts/multi-select/helpers.ts

@@ -1,19 +1,19 @@
 import { Separator } from '@inquirer/core';
 import figures from '@inquirer/figures';
-import chalk from 'chalk';
+import { cyan, dim, green } from 'ansis';
 
 import { Choice, Item, NormalizedChoice, SelectTheme } from './types';
 
 export const selectTheme: SelectTheme = {
   helpMode: 'auto',
   icon: {
-    checked: chalk.green(figures.circleFilled),
+    checked: green(figures.circleFilled),
     unchecked: figures.circle,
     cursor: figures.pointer,
   },
   style: {
-    description: (text: string) => chalk.cyan(text),
-    disabledChoice: (text: string) => chalk.dim(`- ${text}`),
+    description: (text: string) => cyan(text),
+    disabledChoice: (text: string) => dim(`- ${text}`),
     renderSelectedChoices: (selectedChoices) =>
       selectedChoices.map((choice) => choice.short).join(', '),
   },

packages/create-catalyst/src/utils/install-dependencies.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { red } from 'ansis';
 import { installDependencies as installDeps } from 'nypm';
 
 import { spinner } from './spinner';
@@ -11,5 +11,5 @@ export const installDependencies = async (projectDir: string) =>
   spinner(installAllDeps(projectDir), {
     text: `Installing dependencies. This could take a minute...`,
     successText: `Dependencies installed successfully`,
-    failText: (err) => chalk.red(`Failed to install dependencies: ${err.message}`),
+    failText: (err) => red(`Failed to install dependencies: ${err.message}`),
   });

packages/create-catalyst/src/utils/login.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { bold, yellow } from 'ansis';
 import open from 'open';
 import { createInterface } from 'readline';
 
@@ -82,9 +82,7 @@ export async function login(baseUrl: string): Promise<LoginResult> {
 
   const deviceCode = await auth.getDeviceCode();
 
-  console.log(
-    chalk.yellow('\n! First copy your one-time code: ') + chalk.bold(deviceCode.user_code),
-  );
+  console.log(yellow('\n! First copy your one-time code: ') + bold(deviceCode.user_code));
   console.log(`Press Enter to open ${deviceCode.verification_uri} in your browser...`);
 
   const shouldOpenUrl = await waitForKeyPress('');

packages/create-catalyst/src/utils/telemetry/index.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { bold, green, red } from 'ansis';
 
 import { Telemetry } from './telemetry';
 
@@ -30,9 +30,7 @@ const catalystTelemetry = (options: CatalystTelemetryOptions, arg: string | unde
     console.log('Catalyst CLI Telemetry');
   }
 
-  console.log(
-    `\nStatus: ${chalk.bold(isEnabled ? chalk.green('Enabled') : chalk.red('Disabled'))}`,
-  );
+  console.log(`\nStatus: ${bold(isEnabled ? green('Enabled') : red('Disabled'))}`);
 
   if (!isEnabled) {
     console.log(