From 81817ff95dc46648ada1395d723df2b086275896 Mon Sep 17 00:00:00 2001 From: Daniil Sapa Date: Mon, 16 Dec 2024 15:33:25 +0200 Subject: [PATCH 1/5] Replace chalk with pinocolors, make the diagnostic location more readable --- .../example/src/pages/index.js | 0 .../example/src/shared/lib/qwerty.js | 0 packages/pretty-reporter/package.json | 1 + .../src/format-single-diagnostic.ts | 19 ++++++++++--------- packages/pretty-reporter/src/index.ts | 14 +++++++------- pnpm-lock.yaml | 16 +++++++--------- 6 files changed, 25 insertions(+), 25 deletions(-) create mode 100644 packages/pretty-reporter/example/src/pages/index.js create mode 100644 packages/pretty-reporter/example/src/shared/lib/qwerty.js diff --git a/packages/pretty-reporter/example/src/pages/index.js b/packages/pretty-reporter/example/src/pages/index.js new file mode 100644 index 00000000..e69de29b diff --git a/packages/pretty-reporter/example/src/shared/lib/qwerty.js b/packages/pretty-reporter/example/src/shared/lib/qwerty.js new file mode 100644 index 00000000..e69de29b diff --git a/packages/pretty-reporter/package.json b/packages/pretty-reporter/package.json index 180cc7b7..66855aad 100644 --- a/packages/pretty-reporter/package.json +++ b/packages/pretty-reporter/package.json @@ -41,6 +41,7 @@ "dependencies": { "chalk": "^5.3.0", "figures": "^6.1.0", + "picocolors": "^1.1.1", "terminal-link": "^3.0.0" } } diff --git a/packages/pretty-reporter/src/format-single-diagnostic.ts b/packages/pretty-reporter/src/format-single-diagnostic.ts index df2c6ece..4c267403 100644 --- a/packages/pretty-reporter/src/format-single-diagnostic.ts +++ b/packages/pretty-reporter/src/format-single-diagnostic.ts @@ -1,18 +1,19 @@ import { relative } from 'node:path' import figures from 'figures' import terminalLink from 'terminal-link' -import chalk from 'chalk' +import picocolors from 'picocolors' import type { Diagnostic } from '@steiger/types' export function formatSingleDiagnostic(d: Diagnostic, cwd: string): string { - const x = d.severity === 'error' ? chalk.red(figures.cross) : chalk.yellow(figures.warning) - const s = chalk.reset(figures.lineDownRight) - const bar = chalk.reset(figures.lineVertical) - const e = chalk.reset(figures.lineUpRight) - const message = chalk.reset(d.message) - const autofixable = d.fixes !== undefined && d.fixes.length > 0 ? chalk.green(`${figures.tick} Auto-fixable`) : null - const location = chalk.gray(formatLocation(d.location, cwd)) - const ruleName = chalk.blue(terminalLink(d.ruleName, d.getRuleDescriptionUrl(d.ruleName).toString())) + const x = d.severity === 'error' ? picocolors.red(figures.cross) : picocolors.yellow(figures.warning) + const s = picocolors.reset(figures.lineDownRight) + const bar = picocolors.reset(figures.lineVertical) + const e = picocolors.reset(figures.lineUpRight) + const message = picocolors.reset(d.message) + const autofixable = + d.fixes !== undefined && d.fixes.length > 0 ? picocolors.green(`${figures.tick} Auto-fixable`) : null + const location = picocolors.dim(formatLocation(d.location, cwd)) + const ruleName = picocolors.blue(terminalLink(d.ruleName, d.getRuleDescriptionUrl(d.ruleName).toString())) return ` ${s} ${location} diff --git a/packages/pretty-reporter/src/index.ts b/packages/pretty-reporter/src/index.ts index 2cdf8a25..8ab696ea 100644 --- a/packages/pretty-reporter/src/index.ts +++ b/packages/pretty-reporter/src/index.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk' +import picocolors from 'picocolors' import figures from 'figures' import type { Diagnostic } from '@steiger/types' @@ -7,7 +7,7 @@ import { s } from './pluralization.js' export function formatPretty(diagnostics: Array, cwd: string) { if (diagnostics.length === 0) { - return chalk.green(`${figures.tick} No problems found!`) + return picocolors.green(`${figures.tick} No problems found!`) } const errors = diagnostics.filter((d) => d.severity === 'error') @@ -16,17 +16,17 @@ export function formatPretty(diagnostics: Array, cwd: string) { let footer = 'Found ' + [ - errors.length > 0 && chalk.red.bold(`${errors.length} error${s(errors.length)}`), - warnings.length > 0 && chalk.yellow.bold(`${warnings.length} warning${s(warnings.length)}`), + errors.length > 0 && picocolors.bold(picocolors.red(`${errors.length} error${s(errors.length)}`)), + warnings.length > 0 && picocolors.bold(picocolors.yellow(`${warnings.length} warning${s(warnings.length)}`)), ] .filter(Boolean) .join(' and ') const autofixable = diagnostics.filter((d) => (d.fixes?.length ?? 0) > 0) if (autofixable.length === diagnostics.length) { - footer += ` (all can be fixed automatically with ${chalk.green.bold('--fix')})` + footer += ` (all can be fixed automatically with ${picocolors.bold(picocolors.green('--fix'))})` } else if (autofixable.length > 0) { - footer += ` (${autofixable.length} can be fixed automatically with ${chalk.green.bold('--fix')})` + footer += ` (${autofixable.length} can be fixed automatically with ${picocolors.bold(picocolors.green('--fix'))})` } else { footer += ' (none can be fixed automatically)' } @@ -36,7 +36,7 @@ export function formatPretty(diagnostics: Array, cwd: string) { diagnostics.map((d) => formatSingleDiagnostic(d, cwd)).join('\n\n') + '\n\n' + // Due to formatting characters, it won't be exactly the size of the footer, that is okay - chalk.gray(figures.line.repeat(footer.length)) + + picocolors.gray(figures.line.repeat(footer.length)) + '\n ' + footer + '\n' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6a105948..3485e31f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: figures: specifier: ^6.1.0 version: 6.1.0 + picocolors: + specifier: ^1.1.1 + version: 1.1.1 terminal-link: specifier: ^3.0.0 version: 3.0.0 @@ -2236,9 +2239,6 @@ packages: peerDependencies: effector: ^23 - picocolors@1.1.0: - resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} - picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -2991,7 +2991,7 @@ snapshots: mri: 1.2.0 p-limit: 2.3.0 package-manager-detector: 0.2.2 - picocolors: 1.1.0 + picocolors: 1.1.1 resolve-from: 5.0.0 semver: 7.6.2 spawndamnit: 2.0.0 @@ -3015,7 +3015,7 @@ snapshots: dependencies: '@changesets/types': 6.0.0 '@manypkg/get-packages': 1.1.3 - picocolors: 1.1.0 + picocolors: 1.1.1 semver: 7.6.2 '@changesets/get-release-plan@4.0.4': @@ -3039,7 +3039,7 @@ snapshots: '@changesets/logger@0.1.1': dependencies: - picocolors: 1.1.0 + picocolors: 1.1.1 '@changesets/parse@0.4.0': dependencies: @@ -3061,7 +3061,7 @@ snapshots: '@changesets/types': 6.0.0 fs-extra: 7.0.1 p-filter: 2.1.0 - picocolors: 1.1.0 + picocolors: 1.1.1 '@changesets/should-skip-package@0.1.1': dependencies: @@ -4877,8 +4877,6 @@ snapshots: dependencies: effector: 23.2.3 - picocolors@1.1.0: {} - picocolors@1.1.1: {} picomatch@2.3.1: {} From 547bca159b9a36e37589f8e876238950f7e1932a Mon Sep 17 00:00:00 2001 From: Daniil Sapa Date: Mon, 16 Dec 2024 15:35:10 +0200 Subject: [PATCH 2/5] Add a change log --- .changeset/early-knives-type.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/early-knives-type.md diff --git a/.changeset/early-knives-type.md b/.changeset/early-knives-type.md new file mode 100644 index 00000000..d5dece54 --- /dev/null +++ b/.changeset/early-knives-type.md @@ -0,0 +1,5 @@ +--- +'@steiger/pretty-reporter': minor +--- + +Make printed diagnostic location more readable From be75edf81f23a5488799f574a9d566af7f98a8d6 Mon Sep 17 00:00:00 2001 From: Daniil Sapa Date: Wed, 18 Dec 2024 16:39:06 +0200 Subject: [PATCH 3/5] Rename picocolor references to just pc --- .../src/format-single-diagnostic.ts | 19 +++++++++---------- packages/pretty-reporter/src/index.ts | 14 +++++++------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/packages/pretty-reporter/src/format-single-diagnostic.ts b/packages/pretty-reporter/src/format-single-diagnostic.ts index 4c267403..3a297093 100644 --- a/packages/pretty-reporter/src/format-single-diagnostic.ts +++ b/packages/pretty-reporter/src/format-single-diagnostic.ts @@ -1,19 +1,18 @@ import { relative } from 'node:path' import figures from 'figures' import terminalLink from 'terminal-link' -import picocolors from 'picocolors' +import pc from 'picocolors' import type { Diagnostic } from '@steiger/types' export function formatSingleDiagnostic(d: Diagnostic, cwd: string): string { - const x = d.severity === 'error' ? picocolors.red(figures.cross) : picocolors.yellow(figures.warning) - const s = picocolors.reset(figures.lineDownRight) - const bar = picocolors.reset(figures.lineVertical) - const e = picocolors.reset(figures.lineUpRight) - const message = picocolors.reset(d.message) - const autofixable = - d.fixes !== undefined && d.fixes.length > 0 ? picocolors.green(`${figures.tick} Auto-fixable`) : null - const location = picocolors.dim(formatLocation(d.location, cwd)) - const ruleName = picocolors.blue(terminalLink(d.ruleName, d.getRuleDescriptionUrl(d.ruleName).toString())) + const x = d.severity === 'error' ? pc.red(figures.cross) : pc.yellow(figures.warning) + const s = pc.reset(figures.lineDownRight) + const bar = pc.reset(figures.lineVertical) + const e = pc.reset(figures.lineUpRight) + const message = pc.reset(d.message) + const autofixable = d.fixes !== undefined && d.fixes.length > 0 ? pc.green(`${figures.tick} Auto-fixable`) : null + const location = pc.dim(formatLocation(d.location, cwd)) + const ruleName = pc.blue(terminalLink(d.ruleName, d.getRuleDescriptionUrl(d.ruleName).toString())) return ` ${s} ${location} diff --git a/packages/pretty-reporter/src/index.ts b/packages/pretty-reporter/src/index.ts index 8ab696ea..ff8fbb60 100644 --- a/packages/pretty-reporter/src/index.ts +++ b/packages/pretty-reporter/src/index.ts @@ -1,4 +1,4 @@ -import picocolors from 'picocolors' +import pc from 'picocolors' import figures from 'figures' import type { Diagnostic } from '@steiger/types' @@ -7,7 +7,7 @@ import { s } from './pluralization.js' export function formatPretty(diagnostics: Array, cwd: string) { if (diagnostics.length === 0) { - return picocolors.green(`${figures.tick} No problems found!`) + return pc.green(`${figures.tick} No problems found!`) } const errors = diagnostics.filter((d) => d.severity === 'error') @@ -16,17 +16,17 @@ export function formatPretty(diagnostics: Array, cwd: string) { let footer = 'Found ' + [ - errors.length > 0 && picocolors.bold(picocolors.red(`${errors.length} error${s(errors.length)}`)), - warnings.length > 0 && picocolors.bold(picocolors.yellow(`${warnings.length} warning${s(warnings.length)}`)), + errors.length > 0 && pc.bold(pc.red(`${errors.length} error${s(errors.length)}`)), + warnings.length > 0 && pc.bold(pc.yellow(`${warnings.length} warning${s(warnings.length)}`)), ] .filter(Boolean) .join(' and ') const autofixable = diagnostics.filter((d) => (d.fixes?.length ?? 0) > 0) if (autofixable.length === diagnostics.length) { - footer += ` (all can be fixed automatically with ${picocolors.bold(picocolors.green('--fix'))})` + footer += ` (all can be fixed automatically with ${pc.bold(pc.green('--fix'))})` } else if (autofixable.length > 0) { - footer += ` (${autofixable.length} can be fixed automatically with ${picocolors.bold(picocolors.green('--fix'))})` + footer += ` (${autofixable.length} can be fixed automatically with ${pc.bold(pc.green('--fix'))})` } else { footer += ' (none can be fixed automatically)' } @@ -36,7 +36,7 @@ export function formatPretty(diagnostics: Array, cwd: string) { diagnostics.map((d) => formatSingleDiagnostic(d, cwd)).join('\n\n') + '\n\n' + // Due to formatting characters, it won't be exactly the size of the footer, that is okay - picocolors.gray(figures.line.repeat(footer.length)) + + pc.gray(figures.line.repeat(footer.length)) + '\n ' + footer + '\n' From 32bc7eb53dcab2ce9b261bf01d213f22ca55f62d Mon Sep 17 00:00:00 2001 From: Daniil Sapa Date: Tue, 24 Dec 2024 17:17:31 +0200 Subject: [PATCH 4/5] Use underline text for diagnostic location --- packages/pretty-reporter/src/format-single-diagnostic.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pretty-reporter/src/format-single-diagnostic.ts b/packages/pretty-reporter/src/format-single-diagnostic.ts index 3a297093..32b1469c 100644 --- a/packages/pretty-reporter/src/format-single-diagnostic.ts +++ b/packages/pretty-reporter/src/format-single-diagnostic.ts @@ -11,7 +11,7 @@ export function formatSingleDiagnostic(d: Diagnostic, cwd: string): string { const e = pc.reset(figures.lineUpRight) const message = pc.reset(d.message) const autofixable = d.fixes !== undefined && d.fixes.length > 0 ? pc.green(`${figures.tick} Auto-fixable`) : null - const location = pc.dim(formatLocation(d.location, cwd)) + const location = pc.underline(formatLocation(d.location, cwd)) const ruleName = pc.blue(terminalLink(d.ruleName, d.getRuleDescriptionUrl(d.ruleName).toString())) return ` From 21b20ee336ad50c2579e20f3231ffe4d5ef295a1 Mon Sep 17 00:00:00 2001 From: Daniil Sapa Date: Tue, 24 Dec 2024 17:53:13 +0200 Subject: [PATCH 5/5] Remove unnecessary files --- packages/pretty-reporter/example/src/pages/index.js | 0 packages/pretty-reporter/example/src/shared/lib/qwerty.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 packages/pretty-reporter/example/src/pages/index.js delete mode 100644 packages/pretty-reporter/example/src/shared/lib/qwerty.js diff --git a/packages/pretty-reporter/example/src/pages/index.js b/packages/pretty-reporter/example/src/pages/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/pretty-reporter/example/src/shared/lib/qwerty.js b/packages/pretty-reporter/example/src/shared/lib/qwerty.js deleted file mode 100644 index e69de29b..00000000