Component generation regression - files/folders include 'app-' prefix

[nathanb21]

Stencil version:

@stencil/core@1.12.1

I'm submitting a:

[x] bug report
[ ] 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/

Current behavior:
npx stencil generate app-component creates files/folders with app- prefix

Expected behavior:
Files/folders created without app- prefix

Steps to reproduce:
Run npx stencil generate app-component

Related code:

Other information:
In version, maybe, 1.5 it used to work the current way where app- was prefixed to files and folders when generating components from the CLI. This was removed in later versions. We were most recently using v1.8 and generating components without the app- prefix.

Without app- is preferred as it makes it easier to read component files and folders without having to ignore that prefix in file/folder structure.

We've updated to 1.12.1 and now app- is being prefixed to files/folders.

[JasonGrant]

I was surprised this had changed and don't know if it is a suggested pattern change or a mistake.

[manucorporat]

This is expected behaviour, we will update thee style guide. it's not a breaking changee though!

[nathanb21]

@manucorporat thanks for the reply!

What's the motivation behind the change?

Ionic Core components aren't referenced like this (https://github.com/ionic-team/ionic/tree/master/core/src/components). I assume the generator wasn't used to make these but if all these files and folders had 'ion-' prefixed it'd make the list harder to read through.

I also don't believe other CLIs, such as Angular CLI, add the prefix when generating components.

[manucorporat]

The prefix is a key in web components, while it's not for angular, or other frameworks, we found cases where people had different prefixes under the same collection, and sometimes that makes sense, for different teams, or really big apps.

In addition it was a lot of extra complexity in the generator code to "remove" what looks like a prefix, when sometimes it was not even a prefix. Going forward we will recomment to have the name of the component, ie the tagname which as single source of truth!

[nathanb21]

@manucorporat

Just to confirm; npx stencil generate app-component used to generate the following folder structure:

component
    component.tsx
    component.css
    component.e2e.ts
    component.spec.ts

The tag inside component.tsx was still app-component

The new structure is:

app-component
    app-component.tsx
    app-component.css
    app-component.e2e.ts
    app-component.spec.ts

Additionally, if I ran npx stencil generate component you get an error, because you have to specify a prefix, or a different - separator.

Going forward we will recomment to have the name of the component, ie the tagname which as single source of truth!

therefore cannot apply because if I want to just generate, for example, a card component you cannot, you'd have to prefix that (or some config file which specified the generic prefix), to app-card, my-card, foo-card

We have a project with 100s of components, so forcing the app- to files and folders make it very difficult to comprehend. We were working through migrating the old prefix generated component files/folders and converting to without the prefix as it makes it much easier to read through the components.

In Angular CLI you can specify a prefix, which gets attached to all classes and tags but isn't applied to the file and folder names.

I can't imagine there's complexity in removing the app- from the file and folder names, as this is how the CLI recently worked?

This change makes the CLI non-fit for purpose for ourselves, and even the Ionic Core codebase, as the new pattern moves away from how the components have been created there.

Sorry that's a bit long-winded over something fairly trivial, but just wanted to provide some clear feedback

[pixelbucket-dev]

IMHO, the web component prefix should really be separate from the component name. It would be generated like this:

1. Look for a field in the stencil config that looks for an app-wide prefix, use that.
2. If 1. could not be found, look for an arg on the CLI, e.g. --prefix. This would also override 1.
3. If neither 1. nor 2. apply, look for the prefix on the component name. This is how the CLI behaves currently. This should only be the last resort.
4. If nothing of the above applies, crash with error (Like it does now).

Neither of the above, ideally, should create unnecessarily long file names. The web components prefix should not be part of the file/folder name. This could be re-activated with an additional flag, e.g. --keep-prefix

These would be conditions in place where the strings for the file/folder names of the new component are being concatenated. Not too much complexity. If that is not the case, could you elaborate more, where the additional complexity would be?