feat: switch to picocolors (#1438)

Switches from chalk to picocolors across all packages. --------- Co-authored-by: Simon Boudrias <[email protected]>
SBoudrias · Jun 25, 2024 · 73ac9f9 · 73ac9f9
1 parent 01725ac
commit 73ac9f9
Show file tree

Hide file tree

Showing 29 changed files with 100 additions and 101 deletions.
diff --git a/.yarn/cache/picocolors-npm-1.0.1-39442f3da8-fa68166d1f.zip b/.yarn/cache/picocolors-npm-1.0.1-39442f3da8-fa68166d1f.zip
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -61,7 +61,7 @@
     "@inquirer/figures": "^1.0.3",
     "@inquirer/type": "^1.3.3",
     "ansi-escapes": "^4.3.2",
-    "chalk": "^4.1.2"
+    "picocolors": "^1.0.1"
   },
   "devDependencies": {
     "@inquirer/testing": "^2.1.22"

diff --git a/packages/checkbox/src/index.mts b/packages/checkbox/src/index.mts
@@ -17,7 +17,7 @@ import {
   type Theme,
 } from '@inquirer/core';
 import type { PartialDeep } from '@inquirer/type';
-import chalk from 'chalk';
+import pc from 'picocolors';
 import figures from '@inquirer/figures';
 import ansiEscapes from 'ansi-escapes';
 
@@ -39,12 +39,12 @@ type CheckboxTheme = {
 
 const checkboxTheme: CheckboxTheme = {
   icon: {
-    checked: chalk.green(figures.circleFilled),
+    checked: pc.green(figures.circleFilled),
     unchecked: figures.circle,
     cursor: figures.pointer,
   },
   style: {
-    disabledChoice: (text: string) => chalk.dim(`- ${text}`),
+    disabledChoice: (text: string) => pc.dim(`- ${text}`),
     renderSelectedChoices: (selectedChoices) =>
       selectedChoices.map((choice) => choice.name || choice.value).join(', '),
   },

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -15,7 +15,7 @@ yarn add @inquirer/core
 # Usage
 
 ```ts
-import chalk from 'chalk';
+import pc from 'picocolors';
 import {
   createPrompt,
   useState,
@@ -44,12 +44,12 @@ const confirm = createPrompt<boolean, { message: string; default?: boolean }>(
     let formattedValue = value;
     let defaultValue = '';
     if (status === 'done') {
-      formattedValue = chalk.cyan(value);
+      formattedValue = pc.cyan(value);
     } else {
-      defaultValue = chalk.dim(config.default === false ? ' (y/N)' : ' (Y/n)');
+      defaultValue = pc.dim(config.default === false ? ' (y/N)' : ' (Y/n)');
     }
 
-    const message = chalk.bold(config.message);
+    const message = pc.bold(config.message);
     return `${prefix} ${message}${defaultValue} ${formattedValue}`;
   },
 );

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -63,10 +63,10 @@
     "@types/node": "^20.14.7",
     "@types/wrap-ansi": "^3.0.0",
     "ansi-escapes": "^4.3.2",
-    "chalk": "^4.1.2",
     "cli-spinners": "^2.9.2",
     "cli-width": "^4.1.0",
     "mute-stream": "^1.0.0",
+    "picocolors": "^1.0.1",
     "signal-exit": "^4.1.0",
     "strip-ansi": "^6.0.1",
     "wrap-ansi": "^6.2.0"

diff --git a/packages/core/src/lib/Separator.mts b/packages/core/src/lib/Separator.mts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import pc from 'picocolors';
 import figures from '@inquirer/figures';
 
 /**
@@ -7,7 +7,7 @@ import figures from '@inquirer/figures';
  */
 
 export class Separator {
-  readonly separator = chalk.dim(Array.from({ length: 15 }).join(figures.line));
+  readonly separator = pc.dim(Array.from({ length: 15 }).join(figures.line));
   readonly type = 'separator';
 
   constructor(separator?: string) {

diff --git a/packages/core/src/lib/theme.mts b/packages/core/src/lib/theme.mts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import pc from 'picocolors';
 import spinners from 'cli-spinners';
 import type { Prettify } from '@inquirer/type';
 
@@ -22,18 +22,18 @@ type DefaultTheme = {
 export type Theme<Extension extends object = object> = Prettify<Extension & DefaultTheme>;
 
 export const defaultTheme: DefaultTheme = {
-  prefix: chalk.green('?'),
+  prefix: pc.green('?'),
   spinner: {
     interval: spinners.dots.interval,
-    frames: spinners.dots.frames.map((frame) => chalk.yellow(frame)),
+    frames: spinners.dots.frames.map((frame) => pc.yellow(frame)),
   },
   style: {
-    answer: chalk.cyan,
-    message: chalk.bold,
-    error: (text) => chalk.red(`> ${text}`),
-    defaultAnswer: (text) => chalk.dim(`(${text})`),
-    help: chalk.dim,
-    highlight: chalk.cyan,
-    key: (text: string) => chalk.cyan.bold(`<${text}>`),
+    answer: pc.cyan,
+    message: pc.bold,
+    error: (text) => pc.red(`> ${text}`),
+    defaultAnswer: (text) => pc.dim(`(${text})`),
+    help: pc.dim,
+    highlight: pc.cyan,
+    key: (text: string) => pc.cyan(pc.bold(`<${text}>`)),
   },
 };
diff --git a/packages/demo/demos/input.mjs b/packages/demo/demos/input.mjs
@@ -1,5 +1,5 @@
 import * as url from 'node:url';
-import chalk from 'chalk';
+import pc from 'picocolors';
 import { input } from '@inquirer/prompts';
 
 const hexRegEx = /(\d|[a-f])/gim;
@@ -19,8 +19,7 @@ const demo = async () => {
   answer = await input({
     message: 'Enter an hex color?',
     transformer(value = '', { isFinal }) {
-      const color = chalk.hex(isHex(value) ? value : 'fff');
-      return isFinal ? color.underline(value) : color(value);
+      return isFinal ? pc.underline(value) : value;
     },
     validate: (value = '') => isHex(value) || 'Pass a valid hex value',
   });

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -63,7 +63,7 @@
   "dependencies": {
     "@inquirer/core": "^8.2.3",
     "@inquirer/prompts": "^5.0.6",
-    "chalk": "^4.1.2"
+    "picocolors": "^1.0.1"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/expand/package.json b/packages/expand/package.json
@@ -56,7 +56,7 @@
   "dependencies": {
     "@inquirer/core": "^8.2.3",
     "@inquirer/type": "^1.3.3",
-    "chalk": "^4.1.2"
+    "picocolors": "^1.0.1"
   },
   "devDependencies": {
     "@inquirer/testing": "^2.1.22"

diff --git a/packages/expand/src/index.mts b/packages/expand/src/index.mts
@@ -8,7 +8,7 @@ import {
   type Theme,
 } from '@inquirer/core';
 import type { PartialDeep } from '@inquirer/type';
-import chalk from 'chalk';
+import pc from 'picocolors';
 
 type ExpandChoice =
   | { key: string; name: string }
@@ -67,7 +67,7 @@ export default createPrompt<string, ExpandConfig>((config, done) => {
         } else if (value === '') {
           setError('Please input a value');
         } else {
-          setError(`"${chalk.red(value)}" isn't an available option`);
+          setError(`"${pc.red(value)}" isn't an available option`);
         }
       }
     } else {
@@ -116,7 +116,7 @@ export default createPrompt<string, ExpandConfig>((config, done) => {
   let helpTip = '';
   const currentOption = allChoices.find(({ key }) => key === value.toLowerCase());
   if (currentOption) {
-    helpTip = `${chalk.cyan('>>')} ${getChoiceKey(currentOption, 'name')}`;
+    helpTip = `${pc.cyan('>>')} ${getChoiceKey(currentOption, 'name')}`;
   }
 
   let error = '';

diff --git a/packages/inquirer/examples/input.js b/packages/inquirer/examples/input.js
@@ -2,14 +2,8 @@
  * Input prompt example
  */
 
-import chalk from 'chalk';
 import inquirer from '../lib/inquirer.js';
 
-const hexRegEx = /(\d|[a-f])/gim;
-const isHex = (value) =>
-  (value.match(hexRegEx) || []).length === value.length &&
-  (value.length === 3 || value.length === 6);
-
 const questions = [
   {
     type: 'input',
@@ -29,12 +23,11 @@ const questions = [
     name: 'fav_color',
     message: "What's your favorite color",
     transformer(color, answers, flags) {
-      const text = chalk.hex(isHex(color) ? color : 'fff')(color);
       if (flags.isFinal) {
-        return text + '!';
+        return color + '!';
       }
 
-      return text;
+      return color;
     },
   },
   {

diff --git a/packages/inquirer/lib/objects/separator.js b/packages/inquirer/lib/objects/separator.js
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import pc from 'picocolors';
 import figures from '@inquirer/figures';
 
 /**
@@ -11,7 +11,7 @@ import figures from '@inquirer/figures';
 export default class Separator {
   constructor(line) {
     this.type = 'separator';
-    this.line = chalk.dim(line || Array.from({ length: 15 }).join(figures.line));
+    this.line = pc.dim(line || Array.from({ length: 15 }).join(figures.line));
   }
 
   /**

diff --git a/packages/inquirer/lib/prompts/base.js b/packages/inquirer/lib/prompts/base.js
@@ -9,7 +9,7 @@ const _ = {
   clone,
 };
 
-import chalk from 'chalk';
+import pc from 'picocolors';
 import runAsync from 'run-async';
 import { filter, flatMap, share, take, takeUntil } from 'rxjs';
 import Choices from '../objects/choices.js';
@@ -31,7 +31,7 @@ export default class Prompt {
       filteringText: '',
       when: () => true,
       suffix: '',
-      prefix: chalk.green('?'),
+      prefix: pc.green('?'),
       transformer: (val) => val,
     });
 
@@ -155,9 +155,9 @@ export default class Prompt {
   getQuestion() {
     let message =
       (this.opt.prefix ? this.opt.prefix + ' ' : '') +
-      chalk.bold(this.opt.message) +
+      pc.bold(this.opt.message) +
       this.opt.suffix +
-      chalk.reset(' ');
+      pc.reset(' ');
 
     // Append the default if available, and if question isn't touched/answered
     if (
@@ -168,8 +168,8 @@ export default class Prompt {
       // If default password is supplied, hide it
       message +=
         this.opt.type === 'password'
-          ? chalk.italic.dim('[hidden] ')
-          : chalk.dim('(' + this.opt.default + ') ');
+          ? pc.italic(pc.dim('[hidden] '))
+          : pc.dim('(' + this.opt.default + ') ');
     }
 
     return message;

diff --git a/packages/inquirer/lib/prompts/checkbox.js b/packages/inquirer/lib/prompts/checkbox.js
@@ -3,7 +3,7 @@
  */
 
 import ansiEscapes from 'ansi-escapes';
-import chalk from 'chalk';
+import pc from 'picocolors';
 import figures from '@inquirer/figures';
 import { map, takeUntil } from 'rxjs';
 import observe from '../utils/events.js';
@@ -88,19 +88,19 @@ export default class CheckboxPrompt extends Base {
     if (!this.dontShowHints) {
       message +=
         '(Press ' +
-        chalk.cyan.bold('<space>') +
+        pc.cyan(pc.bold('<space>')) +
         ' to select, ' +
-        chalk.cyan.bold('<a>') +
+        pc.cyan(pc.bold('<a>')) +
         ' to toggle all, ' +
-        chalk.cyan.bold('<i>') +
+        pc.cyan(pc.bold('<i>')) +
         ' to invert selection, and ' +
-        chalk.cyan.bold('<enter>') +
+        pc.cyan(pc.bold('<enter>')) +
         ' to proceed)';
     }
 
     // Render choices or answer depending on the state
     if (this.status === 'answered') {
-      message += chalk.cyan(this.selection.join(', '));
+      message += pc.cyan(this.selection.join(', '));
     } else {
       const choicesStr = renderChoices(this.opt.choices, this.pointer);
       const indexPosition = this.opt.choices.indexOf(
@@ -132,7 +132,7 @@ export default class CheckboxPrompt extends Base {
     }
 
     if (error) {
-      bottomContent = chalk.red('>> ') + error;
+      bottomContent = pc.red('>> ') + error;
     }
 
     message += ansiEscapes.cursorHide;
@@ -249,7 +249,7 @@ function renderChoices(choices, pointer) {
     } else {
       const line = getCheckbox(choice.checked) + ' ' + choice.name;
       output +=
-        i - separatorOffset === pointer ? chalk.cyan(figures.pointer + line) : ' ' + line;
+        i - separatorOffset === pointer ? pc.cyan(figures.pointer + line) : ' ' + line;
     }
 
     output += '\n';
@@ -265,5 +265,5 @@ function renderChoices(choices, pointer) {
  */
 
 function getCheckbox(checked) {
-  return checked ? chalk.green(figures.radioOn) : figures.radioOff;
+  return checked ? pc.green(figures.radioOn) : figures.radioOff;
 }
diff --git a/packages/inquirer/lib/prompts/confirm.js b/packages/inquirer/lib/prompts/confirm.js
@@ -2,7 +2,7 @@
  * `confirm` type prompt
  */
 
-import chalk from 'chalk';
+import pc from 'picocolors';
 import { take, takeUntil } from 'rxjs';
 import observe from '../utils/events.js';
 import Base from './base.js';
@@ -60,7 +60,7 @@ export default class ConfirmPrompt extends Base {
     let message = this.getQuestion();
 
     if (typeof answer === 'boolean') {
-      message += chalk.cyan(answer ? 'Yes' : 'No');
+      message += pc.cyan(answer ? 'Yes' : 'No');
     } else if (answer) {
       message += answer;
     } else {

diff --git a/packages/inquirer/lib/prompts/editor.js b/packages/inquirer/lib/prompts/editor.js
@@ -2,7 +2,7 @@
  * `editor` type prompt
  */
 
-import chalk from 'chalk';
+import pc from 'picocolors';
 import { editAsync } from 'external-editor';
 import { Subject } from 'rxjs';
 import observe from '../utils/events.js';
@@ -56,11 +56,11 @@ export default class EditorPrompt extends Base {
 
     message +=
       this.status === 'answered'
-        ? chalk.dim('Received')
-        : chalk.dim('Press <enter> to launch your preferred editor.');
+        ? pc.dim('Received')
+        : pc.dim('Press <enter> to launch your preferred editor.');
 
     if (error) {
-      bottomContent = chalk.red('>> ') + error;
+      bottomContent = pc.red('>> ') + error;
     }
 
     this.screen.render(message, bottomContent);