perf: switch to colorette

danielroe · danielroe · commit 2a745f862704 · 2025-02-17T06:28:18.000Z
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "@tsconfig/strictest": "^2.0.5",
     "@types/babel__code-frame": "^7.0.6",
     "@types/node": "^16.18.126",
-    "chalk": "^4.1.2",
+    "colorette": "^2.0.20",
     "execa": "^5.1.1",
     "fast-json-stable-stringify": "^2.1.0",
     "lint-staged": "^11.2.6",
diff --git a/packages/vite-plugin-checker/package.json b/packages/vite-plugin-checker/package.json
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@babel/code-frame": "^7.26.2",
-    "chalk": "^4.1.2",
     "chokidar": "^3.6.0",
+    "colorette": "^2.0.20",
     "npm-run-path": "^4.0.1",
     "strip-ansi": "^6.0.1",
     "tiny-invariant": "^1.3.3",
diff --git a/packages/vite-plugin-checker/src/checkers/typescript/main.ts b/packages/vite-plugin-checker/src/checkers/typescript/main.ts
@@ -2,7 +2,7 @@ import os from 'node:os'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { parentPort } from 'node:worker_threads'
-import chalk from 'chalk'
+import * as colors from 'colorette'
 import invariant from 'tiny-invariant'
 import ts from 'typescript'
 
@@ -110,7 +110,7 @@ const createDiagnostic: CreateDiagnostic<'typescript'> = (pluginConfig) => {
           if (terminal) {
             const color = errorCount && errorCount > 0 ? 'red' : 'green'
             consoleLog(
-              chalk[color](
+              colors[color](
                 logChunk +
                   os.EOL +
                   wrapCheckerSummary(
diff --git a/packages/vite-plugin-checker/src/checkers/vls/diagnostics.ts b/packages/vite-plugin-checker/src/checkers/vls/diagnostics.ts
@@ -2,8 +2,8 @@ import fs from 'node:fs'
 import os from 'node:os'
 import path from 'node:path'
 import { Duplex } from 'node:stream'
-import chalk from 'chalk'
 import chokidar from 'chokidar'
+import * as colors from 'colorette'
 import { globSync } from 'tinyglobby'
 import { VLS } from 'vls'
 import type { TextDocument } from 'vscode-languageserver-textdocument'
@@ -79,11 +79,11 @@ export async function diagnostics(
 
   if (workspace) {
     const absPath = path.resolve(process.cwd(), workspace)
-    console.log(`Loading Vetur in workspace path: ${chalk.green(absPath)}`)
+    console.log(`Loading Vetur in workspace path: ${colors.green(absPath)}`)
     workspaceUri = URI.file(absPath)
   } else {
     console.log(
-      `Loading Vetur in current directory: ${chalk.green(process.cwd())}`,
+      `Loading Vetur in current directory: ${colors.green(process.cwd())}`,
     )
     workspaceUri = URI.file(process.cwd())
   }
diff --git a/packages/vite-plugin-checker/src/logger.ts b/packages/vite-plugin-checker/src/logger.ts
@@ -1,7 +1,7 @@
 import fs from 'node:fs'
 import { createRequire } from 'node:module'
 import os from 'node:os'
-import chalk from 'chalk'
+import * as colors from 'colorette'
 import strip from 'strip-ansi'
 import * as _vscodeUri from 'vscode-uri'
 
@@ -95,25 +95,27 @@ export function diagnosticToTerminalLog(
   name?: 'TypeScript' | 'vue-tsc' | 'VLS' | 'ESLint' | 'Stylelint' | 'Biome',
 ): string {
   const nameInLabel = name ? `(${name})` : ''
-  const boldBlack = chalk.bold.rgb(0, 0, 0)
+  const boldBlack = (str: string) => colors.bold(colors.black(str))
 
   const labelMap: Record<DiagnosticLevel, string> = {
-    [DiagnosticLevel.Error]: boldBlack.bgRedBright(` ERROR${nameInLabel} `),
-    [DiagnosticLevel.Warning]: boldBlack.bgYellowBright(
-      ` WARNING${nameInLabel} `,
+    [DiagnosticLevel.Error]: boldBlack(
+      colors.bgRedBright(` ERROR${nameInLabel} `),
     ),
-    [DiagnosticLevel.Suggestion]: boldBlack.bgBlueBright(
-      ` SUGGESTION${nameInLabel} `,
+    [DiagnosticLevel.Warning]: boldBlack(
+      colors.bgYellowBright(` WARNING${nameInLabel} `),
     ),
-    [DiagnosticLevel.Message]: boldBlack.bgCyanBright(
-      ` MESSAGE${nameInLabel} `,
+    [DiagnosticLevel.Suggestion]: boldBlack(
+      colors.bgBlueBright(` SUGGESTION${nameInLabel} `),
+    ),
+    [DiagnosticLevel.Message]: boldBlack(
+      colors.bgCyanBright(` MESSAGE${nameInLabel} `),
     ),
   }
 
   const levelLabel = labelMap[d.level ?? DiagnosticLevel.Error]
-  const fileLabel = `${boldBlack.bgCyanBright(' FILE ')} `
+  const fileLabel = `${boldBlack(colors.bgCyanBright(' FILE '))} `
   const position = d.loc
-    ? `${chalk.yellow(d.loc.start.line)}:${chalk.yellow(d.loc.start.column)}`
+    ? `${colors.yellow(d.loc.start.line)}:${colors.yellow(d.loc.start.column || '')}`
     : ''
 
   return [
@@ -200,7 +202,7 @@ export function composeCheckerSummary(
   const hasError = errorCount > 0
   const hasWarning = warningCount > 0
   const color = hasError ? 'red' : hasWarning ? 'yellow' : 'green'
-  return chalk[color](wrapCheckerSummary(checkerName, message))
+  return colors[color](wrapCheckerSummary(checkerName, message))
 }
 
 /* ------------------------------- TypeScript ------------------------------- */
diff --git a/packages/vite-plugin-checker/src/main.ts b/packages/vite-plugin-checker/src/main.ts
@@ -1,5 +1,5 @@
 import { spawn } from 'node:child_process'
-import chalk from 'chalk'
+import * as colors from 'colorette'
 import npmRunPath from 'npm-run-path'
 
 import type { ConfigEnv, Logger, Plugin } from 'vite'
@@ -219,7 +219,7 @@ export function checker(userConfig: UserPluginConfig): Plugin {
       } else {
         setTimeout(() => {
           logger!.warn(
-            chalk.yellow(
+            colors.yellow(
               '[vite-plugin-checker]: `server.ws.on` is introduced to Vite in 2.6.8, see [PR](https://github.com/vitejs/vite/pull/5273) and [changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#268-2021-10-18). \nvite-plugin-checker relies on `server.ws.on` to send overlay message to client. Support for Vite < 2.6.8 will be removed in the next major version release.',
             ),
           )
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
