feat(cli): qwik new component | route

[DustinJSilk]

What is it?

• Feature / enhancement
• Bug
• Docs / tests

Description

A new interactive CLI command to improve the DX experience:

• qwik new : create a new component or route file

You can also add options to create a vitest or doc file with --vitest / --doc arguments.
Developers can save this in their npm scripts for quick access

A long form input is also possible to skip the interactive input:
qwik new component my-comp --vitest --doc or
qwik new route my-route --vitest --doc

Use cases and why

• Is can be cumbersome to create new files for each component, for each of the following plugins:
  • Qwiks standard component.tsx file
  • vitest .spec.tsx
  • storybook .stories.tsx
  • mdx/docs
  • vanilla-extract css files
  • scss
• We're able to add extra templating functionality independent of any features

I've added just 4 basic templates:

• Qwik component
• Qwik route
• vitest component spec
• Component doc .mdx file

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

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[DustinJSilk]

I hope this is something Qwik would be interested in, I'm happy to continue supporting it

[manucorporat]

This is very cool! nnot sure i understand the qwik enable templates command

[DustinJSilk]

No longer relevant

I’ll try explain, maybe there’s a way to simplify!

Every feature added to a project might need files created with each new component, but not every project will use every feature. So we need a way for users to enable templates to be generated depending on what they’ve installed.

For example, if you install vitest, you will want a ‘.spec.ts’ file created, but you don’t want a vanilla-extract ‘.css.ts’ file created because you aren’t using it.

If you run ‘qwik enable templates’, you can tell the CLI which templates to generate with each new component. This is then saved in the package.json as an array of strings and is read each time you run ‘qwik new component’ to generate the correct files for your project.

what do you think?

[DustinJSilk]

@manucorporat I've simplified this PR and updated the description. It should now make more sense

[DustinJSilk]

@manucorporat to keep this on your radar I've added a dataLoader to the route template. It should make getting started with loaders easier.

[DustinJSilk]

Looks like the e2e test failed due to a network issue

[shairez]

let me close and reopen to trigger the checks again

[DustinJSilk]

Thanks @shairez !!

[zanettin]

+1 for merging this 🙏 great job @DustinJSilk 🙏
would love to continue with the CLI styling initiative after this is merged (cc: @adamdbradley 👼 )

[manucorporat]

I would love to merge this PR! @DustinJSilk

[zanettin]

Hi @DustinJSilk 👋 i merge your changes into a new branch here on the repo to make the collaboration a bit easier. thanks again very much for all the work put into this PR 🙏