feat(cli): refresh CLI output via commander's help API + shared status icons#4779
Open
alexander-akait wants to merge 5 commits into
Open
feat(cli): refresh CLI output via commander's help API + shared status icons#4779alexander-akait wants to merge 5 commits into
alexander-akait wants to merge 5 commits into
Conversation
Refresh the `--help`, command help and single-option help screens with a branded header (⬡ webpack <command>), section dividers, colorized terms and a clearer footer, implemented through commander's `configureHelp`/`formatHelp` API rather than a separate renderer. Because `helper.formatItem` pads using the visible (ANSI-stripped) width, terms can be colorized while keeping descriptions aligned. All colors and chrome collapse to plain text when output is piped or `--no-color` is set, so scripts that parse the output keep working. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS
Extend the branded, section-divided UI (introduced for `--help`) to the `info` and `version` commands via a shared `#renderEnvinfo` helper and the reused `#uiHeader`/`#uiDivider` chrome. Each envinfo section gets a hexagon header and divider, rows are aligned, and "requested => resolved" version pairs render with a "→" arrow. `--output json` and `--output markdown` stay byte-for-byte machine-readable, and section titles/labels keep their trailing colon so existing tooling that greps for "System:", "Packages:" or "webpack:" keeps working. Colors collapse to plain text when output is piped or `--no-color` is set. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS
…add renderer snapshot tests Add `packages/webpack-cli/src/ui.ts` — small, pure, colors-injected helpers for the CLI's visual chrome (header, divider, section title, status lines, footer, and the envinfo table renderer). The help screens, `info`, `version` and `configtest` now share these helpers instead of duplicating ad-hoc logging. - `info`/`version`/`configtest` are wrapped in a branded command frame (⬡ header + description + documentation footer). - `configtest` uses status icons: ✔ success / ✖ error / ⚠ warning / ℹ info. Errors stay on stderr (correct stream semantics), the rest on stdout. - `--output json|markdown` for info/version remains byte-for-byte machine-readable and unframed. Testing: add `test/api/ui.test.js`, a unit snapshot test that renders fixed input through every helper with a plain palette (so the snapshots show the exact rendered output — the "after") plus a tagged palette proving colors are applied to the right tokens. Update the configtest and CLI snapshots to the new framed output. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS
…e ui module) Move the shared UI "chrome" renderers from the standalone src/ui.ts module into private `#` methods on WebpackCLI (#uiHeader, #uiDivider, #uiSectionTitle, #uiStatusLine, #uiCommandHeader, #uiFooter, #renderEnvinfo). They read `this.colors` directly instead of taking a palette argument — no extra file and nothing new on the public surface. Since `#` methods can't be unit-tested in isolation, the styled output is now covered by integration snapshots that exercise the real commands: help and configtest already capture the header/divider/section-title/status-icon/footer chrome, and a new deterministic `version` snapshot captures the framed envinfo table. Removed test/api/ui.test.js accordingly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS
Prefix every webpack-cli logger message with a status icon — ✔ success, ✖ error, ⚠ warning, ℹ info — so build, serve and all other commands share the same visual language as the framed help/info/version/configtest screens. The icon sits between the existing `[webpack-cli]` prefix and the unchanged message text, so this is non-breaking: webpack's own `stats.toString()` / `--json` output and webpack-dev-server's messages are untouched, the `[webpack-cli]` prefix is preserved, and tooling that greps the prefix or the message text keeps working. Snapshots updated to include the icons. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS
🦋 Changeset detectedLatest commit: c82457e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
One or more co-authors of this pull request were not found. You must specify co-authors in commit message trailer via: Supported
Alternatively, if the co-author should not be included, remove the Please update your commit message(s) by doing |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4779 +/- ##
==========================================
- Coverage 92.98% 92.94% -0.05%
==========================================
Files 14 14
Lines 5219 5416 +197
Branches 766 776 +10
==========================================
+ Hits 4853 5034 +181
- Misses 364 381 +17
+ Partials 2 1 -1
Continue to review full report in Codecov by Harness.
🚀 New features to boost your workflow:
|
bjohansebas
approved these changes
Jun 18, 2026
Contributor
|
Hey @alexander-akait ,really glad to see this moving forward, and I think the commander API approach is the right call architecturally! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
An alternative take on the output redesign from #4736. Instead of a separate ~400-line
ui-renderermodule, this drives the help screens through commander's ownconfigureHelp/formatHelpAPI and keeps a small set of private UI helpers onWebpackCLIfor the non-commander screens (info,version,configtest) and the shared status icons.The redesign adds branded headers (
⬡ webpack <command>), section dividers, colorized terms, a documentation footer, and status icons (✔/✖/⚠/ℹ). Everything is colors-injected, so the chrome collapses to plain text when output is piped or--no-coloris set — keeping output script-friendly.--help(global / command / option)configureHelp+formatHelpinfo/versionenvinfotable (requested → resolved)configtestbuild/serve/watch& all commandswebpack-clilog messageWhat kind of change does this PR introduce?
Feature — a refreshed, more readable CLI UI, implemented with the commander API rather than a bespoke renderer.
Notable, deliberate choices (vs. #4736)
formatHelpis enhanced rather than replaced by a separate renderer;helper.formatItemis ANSI-aware, so terms are colorized while staying column-aligned.--jsonandinfo/version --output json|markdownstay byte-for-byte unchanged and unframed.configtestvalidation errors keep correct stream semantics (the original PR routed them to stdout).[webpack-cli]prefix and the unchanged message text, so tooling that greps the prefix or the message keeps working.stats.toString()/--jsonand[webpack-dev-server]output are untouched.Did you add tests for your changes?
Yes. Updated the help/CLI/configtest snapshots to the new output, added a deterministic
versionsnapshot that captures the framed table, and updated the build/serve/help snapshots that containwebpack-climessages (icon-only changes). All non-machine-readable paths are covered by integration snapshots.Does this PR introduce a breaking change?
The visual output of help/version/info/configtest changes, and
webpack-clilog lines gain a leading status icon. Machine-readable output (--json,--output json|markdown), the[webpack-cli]/[webpack-dev-server]prefixes, and webpack's own stats output are unchanged, so scripted/extracted output keeps working.Related
Alternative approach to #4736.
🤖 Generated with Claude Code
https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS
Generated by Claude Code