perf: switch to clack for CLI prompts #14589

43081j · 2025-10-20T18:47:41Z

Changes

This is a stacked PR - when we want to mark it as ready, there are 3 branches we can merge one after the other rather than this overall branch if we want to.

Basically, this changes the following 3 things to using clack:

boxen (CLI boxes)
yocto-spinner (CLI spinner)
prompts (CLI prompts, only used for confirm prompt)

TODO

Before we can land this, here's the remaining todo/open questions:

Clack prompts introduce a left border/margin. We need to decide if this is ok or not. If it is not ok, that is fine as we can still figure it out (whether it be here or in clack itself)
The boxes were previously logged via the logger, but are now immediately logged to stdout. This means we will lose the abstraction the logger provides over console vs stdout. If we want the logger to work with clack, it will need a writable stream exposed
The confirm prompts are compared specifically against true (i.e. === true) since clack can return a Symbol if the user cancels (ctrl-c). We need to decide if this is ok (same as behaviour in main), or we want to process.exit or something

Testing

TBD

Docs

No docs need changing as this should provide the same DX.

This is an incremental change as part of the wider move to clack.

Switches to using clack for rendering boxes in the terminal. Part of the wider migration to clack.

Switches to using clack for confirm prompts rather than `prompts` package. Part of the wider clack migration.

changeset-bot · 2025-10-20T18:47:46Z

⚠️ No Changeset found

Latest commit: d82cfa1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

codspeed-hq · 2025-10-20T19:00:19Z

CodSpeed Performance Report

Merging #14589 will not alter performance

_{Comparing 43081j:clack-prompts (d82cfa1) with main (7958c6b)¹}

Summary

✅ 6 untouched

No successful run was found on main (ca1d331) during the generation of this report, so 7958c6b was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

delucis · 2025-10-21T13:37:02Z

Noting before I forget that a good follow-up/companion to this would be replacing kleur with picocolors in our code. This PR removes transitive use of kleur, yoctocolors, and chalk, and picocolors is pulled in by vite via postcss, so we could drop another package by switching.

delucis

Nice work @43081j! The code changes all look good and the logic seems correct! I went through some of the prompts comparing before/after to get an idea of what will change and left a few thoughts.

Clack prompts introduce a left border/margin. We need to decide if this is ok or not. If it is not ok, that is fine as we can still figure it out (whether it be here or in clack itself)

Good question. I quite like the border/margin style, but having run through a few commands, it does leave things feeling a little inconsistent: logging not done via Clack often has a different margin and no border, so it would be nice to make that consistent one way or another.

Assuming it’s an easily centralised option to control Clack’s styles, maybe the easiest is just to avoid the borders given there are some situations (astro info for example) where a border needs to be avoided?

The boxes were previously logged via the logger, but are now immediately logged to stdout. This means we will lose the abstraction the logger provides over console vs stdout. If we want the logger to work with clack, it will need a writable stream exposed

CC @florian-lefebvre — maybe relevant to your CLI refactors?

@43081j what API are you thinking? Something like a logger.stream that Clack can use? I don’t know how crucial use of the logger is, but I guess it would be nice to keep using it for easy support of stuff like --silent flags etc.

The confirm prompts are compared specifically against true (i.e. === true) since clack can return a Symbol if the user cancels (ctrl-c). We need to decide if this is ok (same as behaviour in main), or we want to process.exit or something

If behaviour is 1:1 with main then I’m personally happy in terms of this PR and we can always improve on it later.

delucis · 2025-10-21T13:49:19Z

packages/astro/src/cli/add/index.ts

 			}),
 		);
-		spinner.success();
+		spinner.stop();


Quick comparison of the two states here:

Current CLI This PR

The “Resolving packages” message is preserved currently as a reference to the completed task, whereas it looks like Clack’s stop() clears that out. I think it would be nice to preserve a message to refer back to.

Maybe as simple as?

Suggested change

spinner.stop();

spinner.stop('Resolved packages');

delucis · 2025-10-21T13:51:26Z

packages/astro/src/cli/add/index.ts

 	} catch (e) {
 		if (e instanceof Error) {
-			spinner.error(e.message);
+			spinner.stop(e.message, 2);


Linking bombshell-dev/clack#405 here as a reminder to revisit if that change to the spinner API goes ahead.

delucis · 2025-10-21T13:57:30Z

packages/astro/src/cli/install-package.ts

 	const coloredOutput = `${bold(installCommand.command)} ${installCommand.args.join(' ')} ${cyan(packageNames.join(' '))}`;
-	const message = `\n${boxen(coloredOutput, {
-		margin: 0.5,
-		padding: 0.5,
-		borderStyle: 'round',
-	})}\n`;
 	logger.info(
 		'SKIP_FORMAT',
 		`\n  ${magenta('Astro will run the following command:')}\n  ${dim(
 			'If you skip this step, you can always run it yourself later',
-		)}\n${message}`,
+		)}`,
 	);
+	clack.box(coloredOutput, undefined, {
+		rounded: true,
+	});

 	let response;
 	if (options.skipAsk) {
 		response = true;
 	} else {
-		response = (
-			await prompts({
-				type: 'confirm',
-				name: 'askToContinue',
+		response =
+			(await clack.confirm({
 				message: 'Continue?',
-				initial: true,
-			})
-		).askToContinue;
+				initialValue: true,
+			})) === true;
 	}


Documenting the visual changes here:

Current CLI This PR

Cancel state:

Current CLI This PR

I quite like how the bold text in the old version helps the “Continue?” question stand out, so could be something for us to create a little set of styled utilities for? For example, something like this would help us use that style consistently:

const confirm = ({ message, ...opts }) => clack.confirm({ message: bold(message), ...opts });

As noted in my main comment, you can see the inconsistency of switching between the Clack style with the left border and the regular logging here.

delucis · 2025-10-21T14:25:43Z

packages/astro/src/cli/info/index.ts

 	if (!force) {
-		const { shouldCopy } = await prompts({
-			type: 'confirm',
-			name: 'shouldCopy',
+		const shouldCopy = await clack.confirm({
 			message: 'Copy to clipboard?',
-			initial: true,
+			initialValue: true,
 		});

-		if (!shouldCopy) return;
+		if (shouldCopy !== true) return;
 	}


Documenting the visual changes here:

Current CLI This PR

Looks good I think — best not to add borders to the list logged here to make manual copy/paste easy. Could bold the question perhaps, as noted above?

matthewp · 2025-10-21T18:49:39Z

Hello, can you add a few justifications for the change to the description? Thank you.

florian-lefebvre · 2025-10-21T18:50:06Z

I've been watching this PR, thanks for the ping! I indeed wonder if it would be better to make it use the logger, how would that look in practice?

43081j added 3 commits October 20, 2025 19:27

perf: switch to clack spinner

36c662b

This is an incremental change as part of the wider move to clack.

perf: switch to clack for box rendering

81e59be

Switches to using clack for rendering boxes in the terminal. Part of the wider migration to clack.

perf: switch to clack for confirm prompts

d82cfa1

Switches to using clack for confirm prompts rather than `prompts` package. Part of the wider clack migration.

github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Oct 20, 2025

delucis reviewed Oct 21, 2025

View reviewed changes

delucis mentioned this pull request Oct 21, 2025

Replace kleur with picocolors #14598

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

perf: switch to clack for CLI prompts #14589

perf: switch to clack for CLI prompts #14589

43081j commented Oct 20, 2025

Uh oh!

changeset-bot bot commented Oct 20, 2025

Uh oh!

codspeed-hq bot commented Oct 20, 2025

Uh oh!

delucis commented Oct 21, 2025

Uh oh!

delucis left a comment

Uh oh!

delucis Oct 21, 2025

Uh oh!

delucis Oct 21, 2025

Uh oh!

delucis Oct 21, 2025 •

edited

Loading

Uh oh!

delucis Oct 21, 2025

Uh oh!

matthewp commented Oct 21, 2025

Uh oh!

florian-lefebvre commented Oct 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

perf: switch to clack for CLI prompts #14589

Are you sure you want to change the base?

perf: switch to clack for CLI prompts #14589

Conversation

43081j commented Oct 20, 2025

Changes

TODO

Testing

Docs

Uh oh!

changeset-bot bot commented Oct 20, 2025

⚠️ No Changeset found

Uh oh!

codspeed-hq bot commented Oct 20, 2025

CodSpeed Performance Report

Merging #14589 will not alter performance

Summary

Footnotes

Uh oh!

delucis commented Oct 21, 2025

Uh oh!

delucis left a comment

Choose a reason for hiding this comment

Uh oh!

delucis Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

delucis Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

delucis Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

delucis Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

matthewp commented Oct 21, 2025

Uh oh!

florian-lefebvre commented Oct 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

delucis Oct 21, 2025 •

edited

Loading