8000 feat: display next steps after running the adders by manuel3108 · Pull Request #409 · svelte-add/svelte-add · GitHub
[go: up one dir, main page]

Skip to content
This repository was archived by the owner on Oct 20, 2024. It is now read-only.

feat: display next steps after running the adders #409

Merged
merged 9 commits into from
Jun 22, 2024
Merged

Conversation

manuel3108
Copy link
Member

Closes #390

Initial implementation to gather feedback.
This is basically implemented, and you can try it out with the preview release that will be published.

If applying multiple adders (pnpm dlx svelte-add) it will always print the display name of the adder and the link to the documentation. If running for one adder alone (pnpm dlx @svelte-add/bootstrap) it will skip the name and only print the docs link. Additionally, each adder can provide its custom text that will be displayed below the docs link (currently only implemented for the bootstrap adder).

Here are a few questions for discussion:

  1. Should we always print the docs link for each adder?
  2. Do the adders need any context (parameters) to generate the next steps? Would the selected options and the cwd be useful?
  3. Should the adders have the possibility to print colored text? If yes, should we expose picocolors or should it be a dependency of the adders that actually need it.
  4. What would be a useful next step for lets say the tailwindcss adder?

@manuel3108 manuel3108 linked an issue Jun 15, 2024 that may be closed by this pull request
Copy link
pkg-pr-new bot commented Jun 15, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

commit: 2414990

@svelte-add/core

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/core@409

@svelte-add/drizzle

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/drizzle@409

@svelte-add/bootstrap

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/bootstrap@409

@svelte-add/bulma

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/bulma@409

@svelte-add/mdsvex

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/mdsvex@409

@svelte-add/routify

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/routify@409

@svelte-add/storybook

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/storybook@409

@svelte-add/tailwindcss

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/tailwindcss@409

svelte-add

npm i https://pkg.pr.new/svelte-add/svelte-add@409

@svelte-add/testing-library

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/testing-library@409

@svelte-add/website

npm i https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/website@409


templates

@benmccann
Copy link
Collaborator

Should we always print the docs link for each adder?

I actually just removed the docs links for each integration from create-svelte. They felt a bit noisy. Realistically it's not hard to find the docs for any of these things by googling so they didn't add much value in my opinion

@benmccann
Copy link
Collaborator

should we expose picocolors or should it be a dependency of the adders that actually need it.

I think it could be a dependency. Since svelte-add already depends on it, it will simply be deduped and will only be downloaded a single time

What would be a useful next step for lets say the tailwindcss adder?

I don't think there necessarily has to be one for every adder, but the kind of thing I think of as being a next step could be something that we think we can't automatically configure, but really should be configured. Like maybe for Drizzle we could suggest where to put the database credentials for your production database

@AdrianGonz97
Copy link
Collaborator
AdrianGonz97 commented Jun 15, 2024
  1. Should we always print the docs link for each adder?

playing around with it, I do see @benmccann's point in that it can clutter things up when it's printed by default. if a certain adder really needs the user read the docs, they can just print it themselves in nextSteps

  1. Do the adders need any context (parameters) to generate the next steps? Would the selected options and the cwd be useful?

having options and cwd available would be great, especially if different options need different follow-up steps! also, maybe nextSteps should return an array of strings rather than a single one. with that, we can auto format them so that the adders can be uniformly printed as a list, like so:

◇  Next steps ───────────────────────╮
│                                    │
│  Bootstrap:                        │
│  - this is a test next step other  │
│  - this is another step            │
│                                    │
├────────────────────────────────────╯
│
└  You're all set!

if not, then perhaps we can also supply them with utilities that can help with formatting to help keep consistent across adders (bulleted lists, numbered lists, padding, etc).

  1. Should the adders have the possibility to print colored text? If yes, should we expose picocolors or should it be a dependency of the adders that actually need it.

having picocolors available would be super handy. i think reexporting it from @svelte-add/core should be alright

  1. What would be a useful next step for lets say the tailwindcss adder?

I don't think most adders should have a nextSteps. in my mind, nextSteps should only be reserved for more complex adders that require the user to perform additional tasks for it to be fully functional


Edit:

I think it could be a dependency. Since svelte-add already depends on it, it will simply be deduped and will only be downloaded a single time

oh, is picocolors listed as an external dep for @svelte-add/core rather than being bundled? In that case, it shouldn't really matter. if it's not externalized and is instead bundled, then we can just reexport then from @svelte-add/core

Copy link
Collaborator
@AdrianGonz97 AdrianGonz97 left a comment

Choose a reason for hiding this comment

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

I've left suggested changes that demos returning a string array and auto-formats them in nextSteps. just something to try out if we want to go in this direction

Copy link
changeset-bot bot commented Jun 19, 2024

🦋 Changeset detected

Latest commit: 2414990

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

This PR includes changesets to release 11 packages
Name Type
@svelte-add/drizzle Minor
@svelte-add/core Minor
svelte-add Major
@svelte-add/testing-library Patch
@svelte-add/website Patch
@svelte-add/bootstrap Patch
@svelte-add/bulma Patch
@svelte-add/mdsvex Patch
@svelte-add/routify Patch
@svelte-add/storybook Patch
@svelte-add/tailwindcss 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

@manuel3108
Copy link
Member Author

Thanks for the feedback!

I really liked the idea that nextSteps should return a string array. I think that makes a lot of sense. I have now also added more context to the nextSteps method, so that stuff like this is now possible:

nextSteps: ({ options, cwd, colors, docs }) => {
    var steps = ["this is a test next step other", "cwd: " + cwd, "select sass: " + colors.green(options.useSass.toString())];

    if (docs) steps.push("docs: " + colors.cyan(docs));

    return steps;
},

As of now the biggest remaining step is probably to determine which adders need to display next steps. As of now I think this would mainly be beneficial because to the drizzle adder. What should we add as next steps there in your opinion?

@benmccann
Copy link
Collaborator

As of now I think this would mainly be beneficial because to the drizzle adder. What should we add as next steps there in your opinion?

I just ran it locally to see. I filed a few issues from things I noticed, but the only thing I saw requiring a next step would be something like:

You will need to set the DATABASE_URL environment variable in your production environment

@manuel3108
Copy link
Member Author

I just ran it locally to see. I filed a few issues from things I noticed, but the only thing I saw requiring a next step would be something like:

You will need to set the DATABASE_URL environment variable in your production environment

I have shortened the message a little bit, to avoid that it breaks into multiple lines and completely irritates the prompts. Basically, this PR is done now from my end.

@manuel3108 manuel3108 marked this pull request as ready for review June 21, 2024 18:46
@manuel3108 manuel3108 merged commit 0a20a35 into main Jun 22, 2024
5 checks passed
@manuel3108 manuel3108 deleted the 390-next-steps branch June 22, 2024 04:35
@github-actions github-actions bot mentioned this pull request Jun 22, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Display next steps after running an adder
3 participants
0