feat: replace picocolors with ansis (#160)

Author: webdiscus

package.json

@@ -54,6 +54,7 @@
     "@types/prompts": "^2.4.9",
     "@types/semver": "^7.5.8",
     "@types/yargs": "^17.0.33",
+    "ansis": "^3.12.0",
     "bumpp": "^10.0.3",
     "cli-progress": "^3.12.0",
     "cross-env": "^7.0.3",
@@ -67,7 +68,6 @@
     "npm-package-arg": "^12.0.2",
     "npm-registry-fetch": "^18.0.2",
     "p-limit": "^6.2.0",
-    "picocolors": "^1.1.1",
     "prompts": "^2.4.2",
     "restore-cursor": "^5.1.0",
     "rimraf": "^6.0.1",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import type { Argv } from 'yargs'
 import type { CommonOptions } from './types'
 import process from 'node:process'
-import c from 'picocolors'
+import c from 'ansis'
 import restoreCursor from 'restore-cursor'
 import yargs from 'yargs'
 import { hideBin } from 'yargs/helpers'

src/cli.ts

@@ -1,7 +1,7 @@
 import type { CheckOptions, GlobalPackageMeta, RawDep } from '../../types'
 /* eslint-disable no-console */
 import { getCommand } from '@antfu/ni'
-import c from 'picocolors'
+import c from 'ansis'
 import prompts from 'prompts'
 import { exec } from 'tinyexec'
 import { dumpDependencies } from '../../io/dependencies'
@@ -145,7 +145,7 @@ async function loadGlobalPnpmPackage(options: CheckOptions): Promise<GlobalPacka
       filepath: '',
       relative: '',
       deps,
-      name: c.red('pnpm') + c.gray(c.dim(' (global)')) + c.gray(c.dim(` ${pnpmOuts[i].path}`)),
+      name: c.red`pnpm` + c.gray.dim` (global) ` + c.gray.dim(pnpmOuts[i].path),
     }))
 
   return pkgMetas
@@ -175,7 +175,7 @@ async function loadGlobalNpmPackage(options: CheckOptions): Promise<GlobalPackag
     filepath: '',
     relative: '',
     deps,
-    name: c.red('npm') + c.gray(c.dim(' (global)')),
+    name: c.red`npm` + c.gray.dim` (global)`,
   }
 }
 

src/commands/check/checkGlobal.ts

@@ -6,7 +6,7 @@ import type {
   PackageMeta,
 } from '../../types'
 import { detect, parseNi, parseNu, run } from '@antfu/ni'
-import c from 'picocolors'
+import c from 'ansis'
 import prompts from 'prompts'
 import { builtinAddons } from '../../addons'
 import { CheckPackages } from '../../api/check'
@@ -128,7 +128,7 @@ export async function check(options: CheckOptions) {
     if (!options.install && !options.update && !options.interactive) {
       packageManager = await detect()
       console.log(
-        c.yellow(`ℹ changes written to package.json, run ${c.cyan(`${packageManager} i`)} to install updates.`),
+        c.yellow`ℹ changes written to package.json, run ${c.cyan`${packageManager} i`} to install updates.`,
       )
     }
 

src/commands/check/index.ts

@@ -4,7 +4,7 @@ import process from 'node:process'
 /* eslint-disable no-console */
 import readline from 'node:readline'
 import { createControlledPromise, notNullish } from '@antfu/utils'
-import c from 'picocolors'
+import c from 'ansis'
 import { getVersionOfRange, updateTargetVersion } from '../../io/resolves'
 import { colorizeVersionDiff, createSliceRender, FIG_BLOCK, FIG_NO_POINTER, FIG_POINTER, formatTable } from '../../render'
 import { sortDepChanges } from '../../utils/sort'
@@ -81,10 +81,10 @@ export async function promptInteractive(pkgs: PackageMeta[], options: CheckOptio
     return {
       render() {
         const sr = createSliceRender()
-        const Y = (v: string) => c.bold(c.green(v))
+        const Y = (v: string) => c.bold.green(v)
         console.clear()
-        sr.push({ content: `${FIG_BLOCK} ${c.gray(`${Y('↑↓')} to select, ${Y('space')} to toggle, ${Y('→')} to change version`)}`, fixed: true })
-        sr.push({ content: `${FIG_BLOCK} ${c.gray(`${Y('enter')} to confirm, ${Y('esc')} to cancel, ${Y('a')} to select/unselect all`)}`, fixed: true })
+        sr.push({ content: `${FIG_BLOCK} ${c.gray`${Y('↑↓')} to select, ${Y('space')} to toggle, ${Y('→')} to change version`}`, fixed: true })
+        sr.push({ content: `${FIG_BLOCK} ${c.gray`${Y('enter')} to confirm, ${Y('esc')} to cancel, ${Y('a')} to select/unselect all`}`, fixed: true })
         sr.push({ content: '', fixed: true })
 
         pkgs.forEach((pkg) => {
@@ -165,15 +165,15 @@ export async function promptInteractive(pkgs: PackageMeta[], options: CheckOptio
     return {
       render() {
         console.clear()
-        console.log(`${FIG_BLOCK} ${c.gray(`Select a version for ${c.green(c.bold(dep.name))}${c.gray(` (current ${dep.currentVersion})`)}`)}`)
+        console.log(`${FIG_BLOCK} ${c.gray`Select a version for ${c.green.bold(dep.name)}${c.gray` (current ${dep.currentVersion})`}`}`)
         console.log()
         console.log(
           formatTable(versions.map((v, idx) => {
             return [
               (index === idx ? FIG_POINTER : FIG_NO_POINTER) + (index === idx ? v.name : c.gray(v.name)),
               timediff ? timeDifference(dep.currentVersionTime) : '',
               c.gray(dep.currentVersion),
-              c.dim(c.gray('→')),
+              c.dim.gray('→'),
               colorizeVersionDiff(dep.currentVersion, v.targetVersion),
               timediff ? timeDifference(v.time) : '',
             ]

src/commands/check/interactive.ts

@@ -5,7 +5,7 @@ import type {
   PackageMeta,
   ResolvedDepChange,
 } from '../../types'
-import c from 'picocolors'
+import c from 'ansis'
 import semver from 'semver'
 import { colorizeVersionDiff, FIG_CHECK, FIG_NO_POINTER, FIG_POINTER, FIG_UNCHECK, formatTable } from '../../render'
 import { DependenciesTypeShortMap } from '../../types'
@@ -30,22 +30,22 @@ export function renderChange(
 
   let name = change.name
   if (change.aliasName)
-    name = c.dim(`${change.aliasName} ← `) + change.name
+    name = c.dim`${change.aliasName} ← ` + change.name
 
   return [
     `${pre} ${update ? name : c.gray(name)}`,
     grouped ? '' : c.gray(DependenciesTypeShortMap[change.source]),
     timediff ? timeDifference(change.currentVersionTime) : '',
     c.gray(change.currentVersion),
-    update ? c.dim(c.gray('→')) : '',
+    update ? c.dim.gray('→') : '',
     update
       ? colorizeVersionDiff(change.currentVersion, change.targetVersion)
-      : c.gray(c.strikethrough(change.targetVersion)),
+      : c.gray.strikethrough(change.targetVersion),
     update && timediff
       ? timeDifference(change.targetVersionTime)
       : '',
     (change.latestVersionAvailable && semver.minVersion(change.targetVersion)!.toString() !== change.latestVersionAvailable)
-      ? c.dim(c.magenta(`(${change.latestVersionAvailable} available)`))
+      ? c.dim.magenta`(${change.latestVersionAvailable} available)`
       : '',
   ]
 }
@@ -159,20 +159,20 @@ function renderResolveError(dep: ResolvedDepChange) {
     return lines
 
   if (dep.resolveError === '404') {
-    lines.push(c.red(`> ${c.underline(dep.name)} not found`))
+    lines.push(c.red`> ${c.underline(dep.name)} not found`)
   }
   else if (dep.resolveError === 'invalid_range') {
     // lines.push(c.yellow(`> ${c.underline(dep.name)} has an unresolvable version range: ${c.underline(dep.currentVersion)}`))
   }
   else {
-    lines.push(c.red(`> ${c.underline(dep.name)} unknown error`))
+    lines.push(c.red`> ${c.underline(dep.name)} unknown error`)
     lines.push(c.red(dep.resolveError.toString()))
   }
   return lines
 }
 
 export function outputErr(errLines: string[]) {
-  console.error(c.inverse(c.red(c.bold(' ERROR '))))
+  console.error(c.inverse.red.bold` ERROR `)
   console.error()
   console.error(errLines.join('\n'))
   console.error()

src/commands/check/render.ts

@@ -1,6 +1,6 @@
 import type { SingleBar } from 'cli-progress'
 import type { UsageOptions } from '../types'
-import c from 'picocolors'
+import c from 'ansis'
 import { CheckUsages } from '../api/usage'
 import { createMultiProgressBar, TableLogger, wrapJoin } from '../log'
 import { colorizeVersionDiff, visualPadStart } from '../render'
@@ -45,7 +45,7 @@ export async function usage(options: UsageOptions) {
       if (options.detail) {
         logger.log()
         logger.row(
-          `${c.green(name)} ${c.gray(`· ${versions.length} versions · latest: ${c.blue(latest)}`)}`,
+          `${c.green(name)} ${c.gray`· ${versions.length} versions · latest: ${c.blue(latest)}`}`,
         )
         const pad = Math.max(8, ...Object.keys(versionMap).map(i => i.length)) + 2
 
@@ -62,7 +62,7 @@ export async function usage(options: UsageOptions) {
       else {
         logger.row(
           c.green(name),
-          c.gray(`${c.cyan(packagesCount.toString())} in use / ${c[color](versions.length.toString())} versions`),
+          c.gray`${c.cyan(packagesCount.toString())} in use / ${c[color](versions.length.toString())} versions`,
           versions.map(v => c.gray(colorizeVersionDiff(latest || v, v, false))).join(c.gray(', ')),
           c.gray('→'),
           latest,

src/commands/usage.ts

@@ -1,7 +1,7 @@
 import type { LogLevel } from './types'
 import process from 'node:process'
+import c from 'ansis'
 import { MultiBar, Presets } from 'cli-progress'
-import c from 'picocolors'
 import { LOG_LEVELS } from './constants'
 import { visualLength, visualPadEnd, visualPadStart } from './render'
 

src/log.ts

@@ -6,7 +6,7 @@
 /* eslint-disable no-console */
 
 import process from 'node:process'
-import c from 'picocolors'
+import c from 'ansis'
 import { SemVer } from 'semver'
 import { getDiff } from './io/resolves'
 import { DiffColorMap } from './utils/diff'
@@ -15,7 +15,7 @@ export const FIG_CHECK = c.green('◉')
 export const FIG_UNCHECK = c.gray('◌')
 export const FIG_POINTER = c.cyan('❯ ')
 export const FIG_NO_POINTER = '  '
-export const FIG_BLOCK = c.bold(c.dim(c.gray('┃')))
+export const FIG_BLOCK = c.bold.dim.gray('┃')
 
 function ansiRegex({ onlyFirst = false } = {}) {
   const pattern = [

src/render.ts

@@ -1,4 +1,4 @@
-import c from 'picocolors'
+import c from 'ansis'
 
 const msPerMinute = 60 * 1000
 const msPerHour = msPerMinute * 60
@@ -23,11 +23,11 @@ export function timeDifference(from?: number | string, to = +new Date()) {
     return c.gray('⩽1d')
 
   else if (elapsed < msPerMonth)
-    return c.green(`~${Math.round(elapsed / msPerDay)}d`)
+    return c.green`~${Math.round(elapsed / msPerDay)}d`
 
   else if (elapsed < msPerYear)
-    return c.yellow(`~${Math.round(elapsed / msPerMonth)}mo`)
+    return c.yellow`~${Math.round(elapsed / msPerMonth)}mo`
 
   else
-    return c.red(`~${+(elapsed / msPerYear).toFixed(1)}y`)
+    return c.red`~${+(elapsed / msPerYear).toFixed(1)}y`
 }