diff --git a/package.json b/package.json index d9f49f8..8bd8d9f 100644 --- a/package.json +++ b/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", diff --git a/playground/webpack.config.mjs b/playground/webpack.config.mjs index 735cc70..2016151 100644 --- a/playground/webpack.config.mjs +++ b/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")]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a8d2b11..dc671c7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,9 @@ importers: .: dependencies: - ansi-escapes: - specifier: ^7.0.0 - version: 7.0.0 + ansis: + specifier: ^3.2.0 + version: 3.3.2 consola: specifier: ^3.2.3 version: 3.2.3 @@ -1105,10 +1105,6 @@ packages: ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} - ansi-escapes@7.0.0: - resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==} - engines: {node: '>=18'} - ansi-regex@6.1.0: resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==} engines: {node: '>=12'} @@ -1121,6 +1117,10 @@ packages: resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==} engines: {node: '>=12'} + ansis@3.3.2: + resolution: {integrity: sha512-cFthbBlt+Oi0i9Pv/j6YdVWJh54CtjGACaMPCIrEV4Ha7HWsIjXDwseYV79TIL0B4+KfSwD5S70PeQDkPUd1rA==} + engines: {node: '>=15'} + anymatch@3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} engines: {node: '>= 8'} @@ -1457,10 +1457,6 @@ packages: engines: {node: '>=4'} hasBin: true - environment@1.1.0: - resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==} - engines: {node: '>=18'} - errno@0.1.8: resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==} hasBin: true @@ -3732,10 +3728,6 @@ snapshots: json-schema-traverse: 0.4.1 uri-js: 4.4.1 - ansi-escapes@7.0.0: - dependencies: - environment: 1.1.0 - ansi-regex@6.1.0: {} ansi-styles@4.3.0: @@ -3744,6 +3736,8 @@ snapshots: ansi-styles@6.2.1: {} + ansis@3.3.2: {} + anymatch@3.1.3: dependencies: normalize-path: 3.0.0 @@ -4123,8 +4117,6 @@ snapshots: envinfo@7.14.0: {} - environment@1.1.0: {} - errno@0.1.8: dependencies: prr: 1.0.1 diff --git a/src/profiler/format.ts b/src/profiler/format.ts index e8e971b..bdcb3b7 100644 --- a/src/profiler/format.ts +++ b/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]; diff --git a/src/reporters/fancy.ts b/src/reporters/fancy.ts index 41f493e..82b091e 100644 --- a/src/reporters/fancy.ts +++ b/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; diff --git a/src/reporters/profile.ts b/src/reporters/profile.ts index cce2b90..130ef09 100644 --- a/src/reporters/profile.ts +++ b/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; } diff --git a/src/utils/cli.ts b/src/utils/cli.ts index c7f34de..fabb422 100644 --- a/src/utils/cli.ts +++ b/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; +} diff --git a/src/utils/consts.ts b/src/utils/consts.ts index 26ea368..7867fff 100644 --- a/src/utils/consts.ts +++ b/src/utils/consts.ts @@ -1,7 +1,6 @@ import { delimiter } from "node:path"; - import figures from "figures"; -import chalk from "chalk"; +import { blue } from "ansis"; const { bullet, tick, cross, pointerSmall, radioOff } = figures; @@ -9,7 +8,7 @@ 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; diff --git a/src/utils/log-update.ts b/src/utils/log-update.ts index a4ac765..8350631 100644 --- a/src/utils/log-update.ts +++ b/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() {