refactor(create-qwik): add yargs in create-qwik for better DX

[MrWaip]

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

closes #4353

Use cases and why

Provides the opportunity to create a new app using a single command instead of using the interactive guide.

CLI

# create a new app using the interactive guide (existing)
pnpm create qwik@latest

# create a new app providing a starter and output dir (existing)
pnpm create qwik@latest base ./qwik-app

# create a new app providing a starter and output dir in combination with new CLI flags

# => --help  (shows the help of yargs)
pnpm create qwik@latest base ./qwik-app --help

# => --force / -f (overwrite target directory if it exists - default: false)
pnpm create qwik@latest base ./qwik-app --force

# => --installDeps / -i (install dependencies - default: false)
pnpm create qwik@latest base ./qwik-app --installDeps

Testing instructions

Current state

• Run pnpm cli and use the interactive CLI to test everything
• In package.json exchange the script with the key cli with "pnpm build.cli && node packages/create-qwik/dist/create-qwik.cjs base ./qwik-app && tsm scripts/validate-cli.ts --copy-local-qwik-dist",
• a new app in the qwik-app directory is created, dependencies are installed and app can be launched
• change the base template to basic and retest

New CLI Options

• in package.json exchange the script with the key cli with "pnpm build.cli && node packages/create-qwik/dist/create-qwik.cjs base ./qwik-app --help && tsm scripts/validate-cli.ts --copy-local-qwik-dist",
• test all options listed above by changing the parameters passed to the create-qwik.cjs script in the cmd above

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0aeccac

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[zanettin]

Hi @MrWaip
Thx again for this great PR 🙏 it looks very nice!
Just one thing i've noticed during testing: when running the non interactive CLI path, not all deps are installed whether i am adding the -i / --installDeps flag or not. just qwik and qwik-city is installed. Running the interactive path, all required modules are installed. This seems already to be the case on the current main state.

I've also changed some minor things on the above commits just to have it a bit aligned.

@shairez: testing instructions added and desc updated. if you could have a look at it as well, that would be great 🙏

[MrWaip]

@zanettin Hi! Thanks for your adjustments. Now I have an understanding of what PR should look like :D

You also ordered the imports. It seems to me that linter should be doing this. For example, such a plugin https://github.com/lydell/eslint-plugin-simple-import-sort

[MrWaip]

@zanettin
I also have an idea to type the template parameter. Because it's not completely clear what to send there. There are only a few places with a description of this parameter throughout the project

[MrWaip]

@zanettin Should I try to fix the bug with installing dependencies?

P.S. I try to run node packages/create-qwik/dist/create-qwik.cjs base ./dist/with-deps -i all dependencies was installed

And what to do next with PR?)

[zanettin]

Hi @MrWaip
thx for your reply. regarding sort-order: ignore them please. just a local setting thats why it got reformatted. sorting the whole framework is a topic which is on the table as well in an old open PR 😅

if you have time to do the typings and try to fix the install issue that would be great! otherwise i will try to have a look at it.

thx again 🙏

[MrWaip]

@zanettin Hi! Can you review last changes. I have slightly refactored the loading of possible application templates. And added typing to the cli.

I couldn't figure out why not all dependencies are installed :(

[zanettin]

Hi @MrWaip 👋
thx again for the improvements 🙏 tested them and applied a fix (import was not updated) and made sure the CLI looks as it should. didn't have time to debug the install issue so far. a temp. solution could be to remove the installDeps flag and merge it as is. we need to extend the CLI anyway with other options like the init of a github repo and or install of 3rd party libs like tailwind.

[MrWaip]

@zanettin Can you tell me how to reproduce the bug with the installation of dependencies?

If it fails to reproduce, I suggest hiding the installDeps parameter from the yargs options.

https://yargs.js.org/docs/#api-reference-hidekey

[MrWaip]

zapis-ekrana-2023-08-20-v-123047_vfz7RF3N.mp4

[zanettin]

Hi @MrWaip 👋
I referred to this command on the latest released version: pnpm create qwik@latest basic ./my-all.
atm this does not install anything.

Guess the issue atm is just, that i've tried the install within the repo. calling the CLI from outside seems to install all deps on this PR 🎉 IMO we could merge this as is and see if smth unexpected happens after deploying it 👍

thx again for your upgrade 🙏

[MrWaip]

@zanettin You changed the use of panic to logging, is that correct?

I got the result when I tried to create a project in an already existing directory and got an error in the console. But after that, the script did not stop and started installing dependencies. This is strange behavior.

[zanettin]

good point. guess i've missed to add the cancel part after logging. will adjust that 👍

[MrWaip]

@zanettin Is PR ready to merge?

[zanettin]

Hi @MrWaip
didn't have time to test all cases. hope to be through with them tomorrow evening. fixed the issue with the non stopping directory removal and found another bug regarding installing the base app which shouldn't be possible. guess we should be fine now but wanted to test it again since it is an important part of the framework. thx again for all your time and effort 🙏

[zanettin]

just found some tiny leftovers but now it looks good on my end 🎉 thx again for your time @MrWaip and welcome in the contributors family 🤩

[MrWaip]

Thank you for help ☺️ @zanettin