feat(utils): replace @poppinss/cliui and @isaacs/cliui with custom ascii table formatting #1146

matejchalk · 2025-11-14T15:54:31Z

Part of #888

Completes the mission to replace all remaining usages of CLI UI packages @poppinss/cliui and @isaacs/cliui. Previous PRs (#1138, #1140) replaced all the basic logs, while this PR replaces the more complex table formatting.

I've implemented a custom ASCII table formatter, which replaces 2 different 3rd party tables as well as a 3rd party sticker implementation. The results are more or less the same (see snapshots). For defining the structure, I reused our Table data type from audit details.

The custom table implementation still uses a couple of 3rd party packages - string-width and wrap-ansi - but these are useful low-level utilities that are already used by all these CLI UI packages anyway.

nx-cloud · 2025-11-14T15:55:51Z

View your CI Pipeline Execution ↗ for commit d2091ed

Command	Status	Duration	Result
`nx affected -t e2e-test --parallel=1`	✅ Succeeded	12m 17s	View ↗

☁️ Nx Cloud last updated this comment at 2025-11-14 21:01:18 UTC

pkg-pr-new · 2025-11-14T15:56:19Z

Open in StackBlitz

@code-pushup/ci

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/ci@1146

@code-pushup/cli

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/cli@1146

@code-pushup/create-cli

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/create-cli@1146

@code-pushup/core

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/core@1146

@code-pushup/models

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/models@1146

@code-pushup/nx-plugin

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/nx-plugin@1146

@code-pushup/axe-plugin

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/axe-plugin@1146

@code-pushup/coverage-plugin

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/coverage-plugin@1146

@code-pushup/eslint-plugin

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/eslint-plugin@1146

@code-pushup/js-packages-plugin

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/js-packages-plugin@1146

@code-pushup/jsdocs-plugin

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/jsdocs-plugin@1146

@code-pushup/lighthouse-plugin

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/lighthouse-plugin@1146

@code-pushup/typescript-plugin

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/typescript-plugin@1146

@code-pushup/utils

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/utils@1146

@code-pushup/models-transformers

npm i https://pkg.pr.new/code-pushup/cli/@code-pushup/models-transformers@1146

commit: d2091ed

github-actions · 2025-11-14T16:09:11Z

Code PushUp

🤨 Code PushUp report has both improvements and regressions – compared current commit e305ee0 with previous commit 9293a18.

🕵️ See full comparison in Code PushUp portal 🔍

🏷️ Categories

🏷️ Category	⭐ Previous score	⭐ Current score	🔄 Score change
Performance	🔴 32	🔴 34
Code coverage	🟡 88	🟡 89
Documentation	🔴 35	🔴 35
Security	🔴 35	🔴 35	–
Updates	🟡 75	🟡 75	–
Accessibility	🟢 92	🟢 92	–
Best Practices	🟢 100	🟢 100	–
SEO	🟡 61	🟡 61	–
Type Safety	🟢 100	🟢 100	–
Bug prevention	🟢 100	🟢 100	–
Miscellaneous	🟢 100	🟢 100	–
Code style	🟢 100	🟢 100	–

👍 2 groups improved, 👎 1 group regressed, 👍 5 audits improved, 👎 5 audits regressed, 13 audits changed without impacting score

🗃️ Groups

🔌 Plugin	🗃️ Group	⭐ Previous score	⭐ Current score
Lighthouse	Performance	🔴 32	🔴 34
Code coverage	Code coverage metrics	🟡 88	🟡 89
JSDoc coverage	Documentation coverage	🔴 35	🔴 35

20 other groups are unchanged.

🛡️ Audits

🔌 Plugin	🛡️ Audit	📏 Previous value	📏 Current value
Lighthouse	Reduce unused CSS	🟨 Potential savings of 105 KiB	🟥 Potential savings of 105 KiB
Lighthouse	First Contentful Paint	🟥 4.1 s	🟥 3.2 s
Lighthouse	Speed Index	🟥 7.2 s	🟥 7.3 s
Lighthouse	Total Blocking Time	🟥 2,180 ms	🟥 2,430 ms
Lighthouse	Time to Interactive	🟥 13.6 s	🟥 13.8 s
Code coverage	Function coverage	🟨 89.7 %	🟩 90.2 %
JSDoc coverage	Functions coverage	🟥 539 undocumented functions	🟥 558 undocumented functions
Code coverage	Branch coverage	🟨 86.6 %	🟨 86.9 %
Code coverage	Line coverage	🟨 84.5 %	🟨 84.7 %
JSDoc coverage	Types coverage	🟥 243 undocumented types	🟥 242 undocumented types
Lighthouse	Avoids enormous network payloads	🟩 Total size was 2,013 KiB	🟩 Total size was 2,017 KiB
Lighthouse	JavaScript execution time	🟥 4.6 s	🟥 5.5 s
Lighthouse	Max Potential First Input Delay	🟥 1,130 ms	🟥 1,640 ms
Lighthouse	Metrics	🟩 100%	🟩 100%
Lighthouse	Minimizes main-thread work	🟥 13.8 s	🟥 14.0 s
Lighthouse	Uses efficient cache policy on static assets	🟨 30 resources found	🟨 30 resources found
Lighthouse	Largest Contentful Paint	🟥 11.5 s	🟥 11.6 s
Lighthouse	Remove duplicate modules in JavaScript bundles	🟥 Potential savings of 98 KiB	🟥 Potential savings of 105 KiB
Lighthouse	Server Backend Latencies	🟩 1,110 ms	🟩 990 ms
Lighthouse	Initial server response time was short	🟩 Root document took 480 ms	🟩 Root document took 570 ms
Lighthouse	Reduce unused JavaScript	🟥 Potential savings of 160 KiB	🟥 Potential savings of 183 KiB
Lighthouse	Network Round Trip Times	🟩 20 ms	🟩 50 ms
JS Packages	Outdated NPM prod dependencies.	🟨 18 outdated package versions (6 major, 8 minor, 4 patch)	🟨 17 outdated package versions (6 major, 7 minor, 4 patch)

655 other audits are unchanged.

BioPhoton · 2025-11-17T18:17:30Z

packages/cli/src/lib/implementation/formatting.ts

@@ -1,15 +1,15 @@
-import { bold, dim, green } from 'ansis';
+import ansis from 'ansis';


Is there a benefit of using the default export vs { bold }?

BioPhoton · 2025-11-17T18:18:36Z

packages/plugin-lighthouse/src/lib/runner/details/item-value.unit.test.ts

-  beforeAll(() => {
-    ui().switchMode('raw');
-  });
-


nice cleanup!!

BioPhoton · 2025-11-17T18:24:58Z

package.json

    "ts-morph": "^24.0.0",
    "tslib": "^2.6.2",
    "vscode-material-icons": "^0.1.1",
+    "wrap-ansi": "^9.0.2",


slim dependencies. Nice!

https://npmgraph.js.org/?q=wrap-ansi

BioPhoton · 2025-11-17T18:25:18Z

package.json

    "rimraf": "^6.0.1",
    "semver": "^7.6.3",
    "simple-git": "^3.26.0",
+    "string-width": "^8.1.0",


very slim dependencies. Nice!

https://npmgraph.js.org/?q=string-width

BioPhoton

Really good cleanup! Also nice impact on dependency reduction!

github-actions bot assigned matejchalk Nov 14, 2025

github-actions bot added 🔬 testing writing tests 🧩 cli 🧩 core 🧩 utils 🧩 lighthouse-plugin 🛠️ tooling labels Nov 14, 2025

matejchalk force-pushed the replace-cli-table branch from 2c3ef70 to dc6a11c Compare November 14, 2025 16:02

matejchalk force-pushed the replace-cli-table branch 2 times, most recently from b05fd45 to 310b314 Compare November 14, 2025 16:39

matejchalk marked this pull request as ready for review November 14, 2025 16:53

matejchalk requested a review from BioPhoton as a code owner November 14, 2025 16:53

matejchalk requested review from hanna-skryl and vmasek November 14, 2025 16:54

matejchalk added 9 commits November 14, 2025 19:11

refactor: use default ansis import for consistency

61dcc6c

feat(utils): implement and test ascii table formatting

2998c58

fix(utils): align table columns with unicode characters

5f57d07

feat(utils): wrap columns in ascii table

e5f50c4

feat(utils): replace @isaacs/cliui for printing audits to stdout

e2f27b4

refactor(utils): move and rename ansis link utility

bc130a9

feat(utils): replace @poppinss/cliui table for printing categories

7fc117b

feat(cli): replace @poppinss/cliui sticker for upload hints

44a49f4

feat(utils): remove @poppinss/cliui dependency

d2091ed

matejchalk force-pushed the replace-cli-table branch from 310b314 to d2091ed Compare November 14, 2025 18:12

vmasek approved these changes Nov 14, 2025

View reviewed changes

BioPhoton reviewed Nov 17, 2025

View reviewed changes

BioPhoton approved these changes Nov 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(utils): replace @poppinss/cliui and @isaacs/cliui with custom ascii table formatting #1146

feat(utils): replace @poppinss/cliui and @isaacs/cliui with custom ascii table formatting #1146

Uh oh!

matejchalk commented Nov 14, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Nov 14, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Nov 14, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 14, 2025 •

edited

Loading

🗃️ Groups

🛡️ Audits

Uh oh!

BioPhoton Nov 17, 2025

Uh oh!

BioPhoton Nov 17, 2025

Uh oh!

BioPhoton Nov 17, 2025

Uh oh!

BioPhoton Nov 17, 2025

Uh oh!

BioPhoton left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -1,15 +1,15 @@
		import { bold, dim, green } from 'ansis';
		import ansis from 'ansis';

feat(utils): replace @poppinss/cliui and @isaacs/cliui with custom ascii table formatting #1146

Are you sure you want to change the base?

feat(utils): replace @poppinss/cliui and @isaacs/cliui with custom ascii table formatting #1146

Uh oh!

Conversation

matejchalk commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code PushUp

🏷️ Categories

🗃️ Groups

🛡️ Audits

Uh oh!

BioPhoton Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

BioPhoton Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

BioPhoton Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

BioPhoton Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

BioPhoton left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

matejchalk commented Nov 14, 2025 •

edited

Loading

nx-cloud bot commented Nov 14, 2025 •

edited

Loading

pkg-pr-new bot commented Nov 14, 2025 •

edited

Loading

github-actions bot commented Nov 14, 2025 •

edited

Loading