Skip to content

feat(cli) : new design #4736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ThierryRakotomanana wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat(cli) : new design #4736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b9cd8ae
feat(help): implement UI renderer for structured help output
ThierryRakotomanana Apr 14, 2026
98b507e
feat(help): add alias redirect banner for short flags
ThierryRakotomanana Apr 14, 2026
b7f24a9
feat(help): implement styled command help with optional pager
ThierryRakotomanana Apr 14, 2026
92cd68e
feat(output): implement visual chrome for all commands via ui-renderer
ThierryRakotomanana Apr 14, 2026
4bb8c3c
test(cli): implement full coverage for ui-renderer and update CLI sna…
ThierryRakotomanana Apr 14, 2026
a9388a8
test(utils): implement stripRendererChrome utility for legacy test su…
ThierryRakotomanana Apr 14, 2026
a13f275
test(cli): update snapshot and implement sanitization of stdout
ThierryRakotomanana Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
548 changes: 548 additions & 0 deletions packages/webpack-cli/src/ui-renderer.ts
View file
Open in desktop

Large diffs are not rendered by default.

368 changes: 309 additions & 59 deletions packages/webpack-cli/src/webpack-cli.ts
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 40 additions & 2 deletions test/api/CLI.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1543,7 +1543,7 @@ describe("CLI API", () => {

command.parseAsync(["--boolean"], { from: "user" });

expect(command.helpInformation()).toContain("--boolean Description");
expect(command.helpInformation()).toMatch(/--boolean\s+Description/);
});

it("should make command with Boolean option and negative value and use negatedDescription", async () => {
Expand All @@ -1569,7 +1569,7 @@ describe("CLI API", () => {

command.parseAsync(["--no-boolean"], { from: "user" });

expect(command.helpInformation()).toContain("--no-boolean Negated description");
expect(command.helpInformation()).toMatch(/--no-boolean\s+Negated description/);
});
});

Expand All @@ -1578,6 +1578,22 @@ describe("CLI API", () => {
let exitSpy;

beforeEach(async () => {
// should be new program for each test
// eslint-disable-next-line import/no-extraneous-dependencies
const { Command } = require("commander");

cli = new CLI();
const freshProgram = new Command();
freshProgram.name("webpack");
freshProgram.configureOutput({
writeErr: (str) => {
cli.logger.error(str);
},
outputError: (str, write) => {
write(`Error: ${cli.capitalizeFirstLetter(str.replace(/^error:/, "").trim())}`);
},
});
cli.program = freshProgram;
consoleSpy = jest.spyOn(globalThis.console, "log");
exitSpy = jest.spyOn(process, "exit").mockImplementation(() => {});
});
Expand All @@ -1597,5 +1613,27 @@ describe("CLI API", () => {
expect(exitSpy).toHaveBeenCalledWith(0);
expect(consoleSpy.mock.calls).toMatchSnapshot();
});

it("should display help for a short alias flag", async () => {
try {
await cli.run(["help", "-c"], { from: "user" });
} catch {
// Nothing for tests
}

expect(exitSpy).toHaveBeenCalledWith(0);
expect(consoleSpy.mock.calls).toMatchSnapshot();
});

it("should display help for a command", async () => {
try {
await cli.run(["help", "version"], { from: "user" });
} catch {
// Nothing for tests
}

expect(exitSpy).toHaveBeenCalledWith(0);
expect(consoleSpy.mock.calls).toMatchSnapshot();
});
});
});
199 changes: 191 additions & 8 deletions test/api/__snapshots__/CLI.test.js.snap.webpack5
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,214 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`CLI API custom help output should display help for a command 1`] = `
[
[
"",
],
[
" ⬡ webpack version",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
" Output the version number of 'webpack', 'webpack-cli' and",
],
[
" 'webpack-dev-server' and other packages.",
],
[
"",
],
[
" Usage: webpack version|v [options]",
],
[
"",
],
[
" Options",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
" -o, --output <value> To get the output in a specified format (accept json",
],
[
" or markdown)",
],
[
" -h, --help [verbose] Display help for commands and options.",
],
[
"",
],
[
" Global options",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
" --color Enable colors on console.",
],
[
" --no-color Disable colors on console.",
],
[
" -v, --version Output the version number of 'webpack', 'webpack-cli'",
],
[
" and 'webpack-dev-server' and other packages.",
],
[
" -h, --help [verbose] Display help for commands and options.",
],
[
"",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
" ℹ Run 'webpack help version --verbose' to see all available options.",
],
[
"",
],
[
" ℹ Run 'webpack --help=verbose' to see all available commands and options.",
],
[
"",
],
[
" Webpack documentation: https://webpack.js.org/",
],
[
" CLI documentation: https://webpack.js.org/api/cli/",
],
[
" Made with ♥ by the webpack team",
],
[
"",
],
]
`;

exports[`CLI API custom help output should display help for a short alias flag 1`] = `
[
[
"",
],
[
" ⬡ -c → --config",
],
[
" alias for --config",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
"",
],
[
" ⬡ --config",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
" Usage webpack --config <pathToConfigFile...>",
],
[
" Short webpack -c <pathToConfigFile...>",
],
[
" Description Provide path to one or more webpack configuration files to",
],
[
" process, e.g. "./webpack.config.js".",
],
[
" Documentation https://webpack.js.org/option/config/",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
"",
],
[
" ℹ Run 'webpack --help=verbose' to see all available commands and options.",
],
[
"",
],
[
" Webpack documentation: https://webpack.js.org/",
],
[
" CLI documentation: https://webpack.js.org/api/cli/",
],
[
" Made with ♥ by the webpack team",
],
[
"",
],
]
`;

exports[`CLI API custom help output should display help information 1`] = `
[
[
"Usage: webpack --mode <value>",
"",
],
[
" ⬡ --mode",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
" Usage webpack --mode <value>",
],
[
" Description Enable production optimizations or development hints.",
],
[
"Description: Enable production optimizations or development hints.",
" Documentation https://webpack.js.org/option/mode/",
],
[
"Possible values: 'development' | 'production' | 'none'",
" Possible values 'development' | 'production' | 'none'",
],
[
" ──────────────────────────────────────────────────────────────────────────",
],
[
"",
],
[
" ℹ Run 'webpack --help=verbose' to see all available commands and options.",
],
[
"",
],
[
"To see list of all supported commands and options run 'webpack --help=verbose'.
",
" Webpack documentation: https://webpack.js.org/",
],
[
"Webpack documentation: https://webpack.js.org/.",
" CLI documentation: https://webpack.js.org/api/cli/",
],
[
"CLI documentation: https://webpack.js.org/api/cli/.",
" Made with ♥ by the webpack team",
],
[
"Made with ♥ by the webpack team.",
"",
],
]
`;
Loading
Loading