refactor: uses ansis for color support

package.json

@@ -30,7 +30,7 @@
     "test": "pnpm lint && vitest run"
   },
   "dependencies": {
-    "ansi-escapes": "^7.0.0",
+    "ansis": "^3.2.0",
     "consola": "^3.2.3",
     "figures": "^6.1.0",
     "markdown-table": "^3.0.4",

playground/webpack.config.mjs

@@ -38,4 +38,8 @@ const config = (name, color) => ({
   ],
 });
 
+setInterval(() => {
+  console.log(`[${new Date().toLocaleTimeString()}]`);
+}, 1000).unref();
+
 export default [config("chalk", "cyan"), config("babel", "yellow")];

src/profiler/format.ts

@@ -1,6 +1,5 @@
 import prettyTime from "pretty-time";
-import chalk from "chalk";
-
+import { bold } from "ansis";
 import { startCase } from "../utils";
 import { createTable } from "../utils/cli";
 
@@ -12,7 +11,7 @@ export default function formatStats(allStats) {
   for (const category of Object.keys(allStats)) {
     const stats = allStats[category];
 
-    lines.push(`> Stats by ${chalk.bold(startCase(category))}`);
+    lines.push(`> Stats by ${bold(startCase(category))}`);
 
     let totalRequests = 0;
     const totalTime = [0, 0];

src/reporters/fancy.ts

@@ -1,5 +1,4 @@
-import chalk from "chalk";
-
+import { grey } from "ansis";
 import { renderBar, colorize, ellipsisLeft } from "../utils/cli";
 import { formatRequest } from "../utils/webpack";
 import { BULLET, TICK, CROSS, CIRCLE_OPEN } from "../utils/consts";
@@ -53,15 +52,13 @@ export default class FancyReporter implements Reporter {
         renderBar(state.progress, state.color),
         state.message,
         `(${state.progress || 0}%)`,
-        chalk.grey(state.details[0] || ""),
-        chalk.grey(state.details[1] || ""),
+        grey(state.details[0] || ""),
+        grey(state.details[1] || ""),
       ].join(" ");
 
       line2 = state.request
         ? " " +
-          chalk.grey(
-            ellipsisLeft(formatRequest(state.request), logUpdate.columns),
-          )
+          grey(ellipsisLeft(formatRequest(state.request), logUpdate.columns))
         : "";
     } else {
       let icon = " ";
@@ -75,7 +72,7 @@ export default class FancyReporter implements Reporter {
       }
 
       line1 = color(`${icon} ${state.name}`);
-      line2 = chalk.grey("  " + state.message);
+      line2 = grey("  " + state.message);
     }
 
     return line1 + "\n" + line2;

src/reporters/profile.ts

@@ -1,5 +1,4 @@
-import chalk from "chalk";
-
+import { bold } from "ansis";
 import { colorize } from "../utils/cli";
 import Profiler from "../profiler";
 import { Reporter } from "../types";
@@ -28,7 +27,7 @@ export default class ProfileReporter implements Reporter {
 
       if (state.profile) {
         str +=
-          color(`\nProfile results for ${chalk.bold(state.name)}\n`) +
+          color(`\nProfile results for ${bold(state.name)}\n`) +
           `\n${state.profile}\n`;
         delete state.profile;
       }

src/utils/cli.ts

@@ -1,4 +1,4 @@
-import chalk from "chalk";
+import c from "ansis";
 import { consola as _consola } from "consola";
 import markdownTable from "markdown-table";
 
@@ -8,17 +8,13 @@ import { range } from ".";
 
 export const consola = _consola.withTag("webpackbar");
 
-export const colorize = (color) => {
-  if (color[0] === "#") {
-    return chalk.hex(color);
-  }
-
-  return chalk[color] || chalk.reset; // || chalk.keyword(color);
+export const colorize = (color: string) => {
+  return color[0] === "#" ? c.hex(color) : c[color] || c.reset;
 };
 
 export const renderBar = (progress, color) => {
   const w = progress * (BAR_LENGTH / 100);
-  const bg = chalk.white(BLOCK_CHAR);
+  const bg = c.white(BLOCK_CHAR);
   const fg = colorize(color)(BLOCK_CHAR2);
 
   return range(BAR_LENGTH)
@@ -43,3 +39,13 @@ export function ellipsisLeft(str, n) {
   }
   return `...${str.slice(str.length - n - 1)}`;
 }
+
+// Based on github.com/terkelg/sisteransi (MIT - 2018 Terkel Gjervig Nielsen)
+export function eraseLines(count: number) {
+  let clear = "";
+  for (let i = 0; i < count; i++) {
+    clear += `\u001B[2K` + (i < count - 1 ? `\u001B[1A` : "");
+  }
+  if (count) clear += `\u001B[G`;
+  return clear;
+}

src/utils/consts.ts

@@ -1,15 +1,14 @@
 import { delimiter } from "node:path";
-
 import figures from "figures";
-import chalk from "chalk";
+import { blue } from "ansis";
 
 const { bullet, tick, cross, pointerSmall, radioOff } = figures;
 
 export const nodeModules = `${delimiter}node_modules${delimiter}`;
 export const BAR_LENGTH = 25;
 export const BLOCK_CHAR = "█";
 export const BLOCK_CHAR2 = "█";
-export const NEXT = " " + chalk.blue(pointerSmall) + " ";
+export const NEXT = " " + blue(pointerSmall) + " ";
 export const BULLET = bullet;
 export const TICK = tick;
 export const CROSS = cross;

src/utils/log-update.ts

@@ -1,5 +1,5 @@
-import ansiEscapes from "ansi-escapes";
 import wrapAnsi from "wrap-ansi";
+import { eraseLines } from "./cli";
 
 // Based on https://github.com/sindresorhus/log-update/blob/master/index.js
 
@@ -29,10 +29,7 @@ export default class LogUpdate {
     });
 
     const data =
-      ansiEscapes.eraseLines(this.prevLineCount) +
-      wrappedLines +
-      "\n" +
-      this.extraLines;
+      eraseLines(this.prevLineCount) + wrappedLines + "\n" + this.extraLines;
 
     this.write(data);
 
@@ -60,7 +57,7 @@ export default class LogUpdate {
 
   clear() {
     this.done();
-    this.write(ansiEscapes.eraseLines(this.prevLineCount));
+    this.write(eraseLines(this.prevLineCount));
   }
 
   done() {