feat: improved homescreen for adding or creating projects

[benmccann]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4206b6b

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

This PR includes changesets to release 1 package

Name	Type
sv	Patch

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

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/sveltejs/cli/sv@112

commit: 4206b6b

[AdrianGonz97]

While I like how flat it is (and how much vertically smaller it is), I dislike that the commonly used options aren't at the top (prettier, eslint, testing, tailwindcss, etc).

Maybe we should order them by usage instead? Or perhaps we should still sort them by category, we just don't label them as such:

◆  What would you like to add to your project?
│  ◼ prettier
│  ◼ eslint
│  ◼ playwright
│  ◼ vitest
│  ◻ tailwindcss
│  ◻ drizzle
│  ◻ lucia
│  ◻ paraglide
│  ◻ storybook
│  ◻ mdsvex
└

[benmccann]

If we were to order by npm downloads it would be:

◆  What would you like to add to your project?
│  ◻ eslint
│  ◻ prettier
│  ◻ tailwind
│  ◻ playwright
│  ◻ vitest
│  ◻ storybook
│  ◻ drizzle
│  ◻ auth
│  ◻ mdsvex
│  ◻ paraglide
└

I think the issue is that general tools will always rank above Svelte-specific tools. E.g. I imagine more people will want to use mdsvex than storybook. We'd probably want to order by adder usage, but have no way to get that data unless we publish a package for each individual adder or add some kind of telemetry

The other tough thing is that it becomes hard to locate an item you want in the list as you don't know where it might appear.

[AdrianGonz97]

I think sorting them by category could work instead (like in my example above), rather than sorting by usage.

The other tough thing is that it becomes hard to locate an item you want in the list as you don't know where it might appear.

true. I forget which prompt library I was using, but it had a built-in search filter in the multi-select prompt that would activate if you started typing, narrowing the possible options. I wonder if that's something that's worth looking into (even if we go with sorting them alphabetically).

[benmccann]

I found https://github.com/enquirer/enquirer?tab=readme-ov-file#autocomplete-prompt

https://github.com/enquirer/enquirer/blob/master/examples/autocomplete/option-multiple.js

[benmccann]

I prototyped enquirer, but it's not as nice. There's a weird flickering and a cursor blinking and the autocomplete is a bit hard to use because you have to delete all the input to do the next selection. Maybe it could work if it automatically cleared it after making a selection and it had clack's styling, but it's probably not something I'd choose at the moment

const { prompt } = require('enquirer');

(async() => {

  const answers = await prompt({
    type: 'autocomplete',
    name: 'flavor',
    message: 'Which would you like to add to your project?',
    multiple: true,
    choices: [
      'prettier',
      'eslint',
      'vitest',
      'playwright',
      'tailwindcss',
      'drizzle',
      'lucia',
      'paraglide',
      'mdsvex',
      'storybook'
    ]
  });

  console.log(answers);

})().catch(console.log);

[AdrianGonz97]

Never used enquirer before, but it may have actually just been prompts with their multiselect-autocomplete prompt

[benmccann]

I just tested prompts and it's even worse. Everytime you press a key it flashes the whole menu and then displays just the autocompleted menu

const prompts = require('prompts');

(async () => {
  const response = await prompts({
  type: 'autocompleteMultiselect',
  name: 'value',
  message: 'Which would you like to add to your project?',
  choices: [
    { title: 'prettier' },
    { title: 'eslint' },
    { title: 'vitest' },
    { title: 'playwright' },
    { title: 'tailwindcss' },
    { title: 'drizzle' },
    { title: 'lucia' },
    { title: 'paraglide' },
    { title: 'mdsvex' },
    { title: 'storybook' }
  ],
  hint: '- Space to select. Return to submit'
});

  console.log(response);
})();

[AdrianGonz97]

that's strange, i'm not experiencing that with it:

in any case, we can probably just use these as references and implement our own prompt to fulfill our needs (though i don't think this should be a priority before launch)

[benmccann]

After playing with both sort orders locally I've come to agree with you. If you're setting up a new project, you're probably setting up a bunch of adders at once and it helps to have the ones you're most likely to need at the top. If you're just setting up one later on you can do npx vs add paraglide or whatever.

[manuel3108]

I do agree that the ordering by usage makes sense and i would also prefer it over alphabetical ordering