Skip to content
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

[do not merge] Clack POC #6143

Closed
wants to merge 12 commits into from
Closed

[do not merge] Clack POC #6143

wants to merge 12 commits into from

Conversation

sarahetter
Copy link
Contributor

@sarahetter sarahetter commented Nov 9, 2023

Related to: CT-101 (design system) and CT-102 (removing bloat)

This is a POC of using @clack/prompts instead of inquirer for our prompting package.

Reasons we'd like to do this:

  • Inquirer (and inquirer-autocomplete-prompt) brings in rxjs which is a huge sub dependency, and we'd like to remove it. (Ends up being around 17MB on filesystem)
Screenshot 2023-11-09 at 4 24 25 PM Screenshot 2023-11-09 at 4 24 37 PM
  • Clack is more customizable than inquirer

Description of clack

Clack has two packages - @clack/core and @clack/prompts.

@clack/core is a group of plain, unstyled prompts. When instantiating a new prompt, you pass a render callback in, and it is updated along with the state when it changes. You can see an example of using @clack/core in src/commands/clack/clack-core.mjs or by running `./bin/run.mjs clack:core.

Prompts is just a pre-styled use of @clack/core with (imo) a pleasant to use interface, and could save us a lot of design and dev time. It also contains some non-prompt utilities such as logging methods to match with the prompts. You can see an example of using @clack/prompts in src/commands/clack/clack-prompts.mjs, or by running ./bin/run.mjs clack:prompts

Screenshots / Gifs

I've converted one command netlify sites:create-template over to @clack/prompts from inquirer

Inquirer (before) @clack/prompts (after)
withinquirer withclack
withinquirer withclack

@sarahetter sarahetter requested a review from a team as a code owner November 9, 2023 21:42
Copy link

github-actions bot commented Nov 9, 2023

📊 Benchmark results

Comparing with 7dd41c4

  • Dependency count: 1,399 ⬆️ 0.29% increase vs. 7dd41c4
  • Package size: 404 MB ⬆️ 0.06% increase vs. 7dd41c4

@samkap
Copy link

samkap commented Nov 21, 2023

Paired with Sarah today. Small pieces of feedback:

  • Change dim to white on input lines (is that what they're called?)
  • Switch Success and step green to cyan by default to nod to Netlify branding.

@sarahetter sarahetter marked this pull request as draft April 22, 2024 20:19
@sarahetter sarahetter closed this Apr 23, 2024
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.

2 participants