Custom generate

[tricki]

Stencil version:

 @stencil/core@1.14.0

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

This is an issue to track the feature requests for the generate command. Since @manucorporat mentioned in May that they want to keep it simple it might be a good choice to extract the generate command to a separate package.

Features:

• Automatically remove tag prefix
• Use SCSS instead of CSS
• Globally define which files to generate by default (CSS/SCSS, spec, e2e)
• Globally define whether to use shadow or scoped
• (Define default file stubs with variables)

Existing issues:

• Generate remove the first word of files and folder #2141
• Allow generate new component with scss file instead of css #2155
• stencil generate not working 1.8.8/1.8.9 #2203
• stencil generate output changed format with the new compiler #2303
• Component generation regression - files/folders include 'app-' prefix #2347
• Stencil CLI component generation config #2348

[tricki]

FYI I came back to this because I had massive problems with the generate command in my last quick project.

One problem was that renaming the CSS files to .scss didn't add the new file to the watcher until I restarted the build (every single time!).
Also, disabling Shadow DOM broke hot reloading and required a manual reload.

And apart from those bugs, changing the generated files to match my preferred configuration (SCSS, no Shadow DOM) after generating each component is a pain.

Removing the prefix is less critical and more important for consistency in existing projects.

@manucorporat You mentioned that you will recommend having the tag name as the single source of truth. Does that mean you will do this in Ionic too and rename all component files/folders? Because Ionic seems like the perfect example of where having the prefix in all file and folder names is not necessary.

[max-scopp]

extension rename and shadow-dom switching breaking is likely an wontfix.

Regarding naming, we (not ionic) already use the prefixed variant and are unlikely to move away from that. Less hassle, more consistency.

I don't think Ionic will rename all their components as this would be a breaking change and having a redirection for each unprefixed import may cause bigger issues than cleaning things up.

[max-scopp]

stencil generate doesn't support scss yet. So this is intended. Implement complete cli scss generate support if it really bugs you. It's not on the important list afaik.

Or, if you want less pain, just use stencil-tools on the vscode marketplace - which supports everything we need in a big app.

[christian-bromann]

Hey you all 👋

Thanks for all your feedback!

One problem was that renaming the CSS files to .scss didn't add the new file to the watcher until I restarted the build (every single time!).

This seems like a separate issue that may been already fixed since the comment was posted, if not please let me know.

Also, disabling Shadow DOM broke hot reloading and required a manual reload.

Not sure what you mean by disabling Shadow DOM. I am happy to look into this if you could help me understand the issue.

We have just landed #5857 which will improve the DX when creating components when using the Sass plugin. We are looking forward to extend this capability so please raise issues if you have idea 😊

I will go ahead and close the issue. Thanks!