Skip to content

refactor: replaces picocolors with node:util's styleText #346

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.

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
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

dreyfus92
Copy link
Member

@dreyfus92 dreyfus92 commented Jun 12, 2025

Closes: #338

Copy link

changeset-bot bot commented Jun 12, 2025

🦋 Changeset detected

Latest commit: 1569bc4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@clack/prompts Minor
@clack/core Minor

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

@dreyfus92 dreyfus92 changed the title refactor: replaces picocolors with node:util's styleText refactor: replaces picocolors with node:util's styleText Jun 12, 2025
@dreyfus92 dreyfus92 changed the title refactor: replaces picocolors with node:util's styleText refactor: replaces picocolors with node:util's styleText Jun 12, 2025
Copy link

pkg-pr-new bot commented Jun 12, 2025

@example/basic@example/changesets

npm i https://pkg.pr.new/bombshell-dev/clack/@clack/core@346
npm i https://pkg.pr.new/bombshell-dev/clack/@clack/prompts@346

commit: 1569bc4

@dreyfus92 dreyfus92 requested review from 43081j and natemoo-re June 12, 2025 21:48
@@ -41,38 +41,41 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
const isLast = isItem && (next as any).group === true;
const prefix = isItem ? (selectableGroups ? `${isLast ? S_BAR_END : S_BAR} ` : ' ') : '';
const spacingPrefix =
groupSpacing > 0 && !isItem ? `\n${color.cyan(S_BAR)} `.repeat(groupSpacing) : '';
// groupSpacing > 0 && !isItem ? `\n${color.cyan(S_BAR)} `.repeat(groupSpacing) : '';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this left over? and should be removed

)
.join('\n');
output.write(
`${color.gray(S_BAR)}\n${color.green(S_STEP_SUBMIT)} ${color.reset(title)} ${color.gray(
`${styleText('gray', S_BAR)}\n${styleText('green', S_STEP_SUBMIT)} ${styleText('reset', title || '')} ${styleText(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when is title nullish? i.e. why did we end up with ||?

@@ -15,23 +15,25 @@ export const password = (opts: PasswordOptions) => {
input: opts.input,
output: opts.output,
render() {
const title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}\n`;
// const title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}\n`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe remove this comment too?

@@ -115,7 +115,8 @@ export const spinner = ({
unblock = block({ output });
_message = removeTrailingDots(msg);
_origin = performance.now();
output.write(`${color.gray(S_BAR)}\n`);
// output.write(`${color.gray(S_BAR)}\n`);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

another comment we can probably remove

@@ -12,7 +12,7 @@ exports[`autocomplete > can be aborted by a signal 1`] = `
│ ○ Cherry
│ ○ Grape
│ ○ Orange
│ ↑/↓ to select • Enter: confirm • Type: to search
│ ↑/↓ to select • Enter: confirm • Type: to search
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this shows that styleText doesn't handle nested colours. e.g.:

styleText(`i am dim ${styleText('bold', 'i am bold')} i am no longer dim`);

we should search our code for any nested styles and double check they actually work

@dreyfus92
Copy link
Member Author

This has become stale, I will try to get back on this when this is merged cc. @43081j

@43081j
Copy link
Collaborator

43081j commented Jul 23, 2025

no worries

for sure lets hold off until nesting lands 👍

@@ -9,17 +9,17 @@ import color from 'picocolors';
async function main() {
console.clear();

p.intro(`${color.bgCyan(color.black(' Integrated Autocomplete Multiselect Example '))}`);
p.intro(`${styleText('bgCyan', styleText('black', ' Integrated Autocomplete Multiselect Example '))}`);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fyi styleText supports an array for cases like this

Suggested change
p.intro(`${styleText('bgCyan', styleText('black', ' Integrated Autocomplete Multiselect Example '))}`);
p.intro(styleText(['bgCyan', 'black'], ' Integrated Autocomplete Multiselect Example '));

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you 😁

@himself65
Copy link

This has become stale, I will try to get back on this when this is merged cc. @43081j

https://nodejs.org/en/blog/release/v24.5.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Request] replace picocolors with styleText
4 participants