Stencil: Generate remove the first word of files and folder

[rohmanhm]

Stencil version:

    @stencil/[email protected] 

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:

I try to run command stencil generate lorem-ipsum but instead of generating folder lorem-ipsum it's generated folder ipsum. But the tag component and test name are correct though.

import { Component, Host, h } from '@stencil/core';

@Component({
  tag: 'lorem-ipsum',
  styleUrl: 'ipsum.css',
  shadow: true
})
export class Ipsum {

  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }

}

Expected behavior:

It should generate files and the folder with lorem-ipsum

Steps to reproduce:

Run

npx stencil generate lorem-ipsum

Related code:

// insert any relevant code here

Other information:

[juanmiguelbesada]

I think this is because the first part (the string before dash) is interpreted as a prefix.

Ex:, lorem-ipsum is like ion-input. The "ion-" part is the prefix, and shouldn't be included in the filename.

I dont know how we can handle this

[tricki]

In my projects it always made sense to remove the prefix. I suggest making it configurable.

However right now the docs don't mention the removal of the prefix and should probably be changed.

[entozoon]

Oh man, this bug caused me some serious headscratching.
If you create a component called my-component, it creates
/src/components/component/component.tsx

Which contains

@Component({
...
export class Component {
...

And that is proper invalid

[smcardle]

I love this tool 'not a framework' but the generate option is a complete pain in the A$$...

The outcome is completely unexpected and @juanmiguelbesada explanation above is just nonsense.

If I create a component 'self-container' I'm expecting a folder structure and file naming convention to reflect that.

The Class that gets created, without the prefix, now has a VERY HIGH potential to clash with imported classed from other libraries....
All this does for me at the moment is annoy me.. I have to manually rename ALL the created files and the class.

So I have stopped using the generate option because it's... well, basically useless

Come on... This needs fixing ASAP.

[juanmiguelbesada]

i'm going for this. @adamdbradley should I target 1.8.x or master?

[smcardle]

A perfect example of what @entozoon pointed out

import { Component, Host, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'component.css',
  shadow: true
})
export class Component {

  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }

}

Thats just not going to work

[juanmiguelbesada]

It looks like it is already fixed in 1.9

try npm install @stencil/core@next and run npm run generate -- --next

[smcardle]

Nope...

Now the g for generate short command has been removed and the outcome for file names and classes is the same

npx stencil --version
1.9.0-21

import { Component, ComponentInterface, Host, h } from '@stencil/core';

@Component({
  tag: 'self-app',
  styleUrl: 'app.css',
  shadow: true
})
export class App implements ComponentInterface {

  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }

}

So in my book this is a step backwards

[smcardle]

So.....

I ran the command your way as follows

stevenmcardle@Stevens-MacBook-Pro self-app % yarn generate -- --next
yarn run v1.22.0
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
$ stencil generate --next
✔ Component tag name (dash-case): … self-app
✔ Which additional files do you want to generate? › Stylesheet

$ stencil generate self-app

The following files have been generated:
  - Users/stevenmcardle/projects/web-components/self-app/src/components/self-app/self-app.tsx
  - Users/stevenmcardle/projects/web-components/self-app/src/components/self-app/self-app.css
✨  Done in 24.83s.

And it DOES generate the expected file names and class name under the WRONG folder structure.

Now I have a folder structure under the project root that reflects my full User folder as shown in the output above.

This is even more broken than the previous functionality...

[smcardle]

Does anybody know if this issue is being addressed ?
If so, any idea what version will have the fix ?

Because in my opinion this is a pretty serious issue.

[Marvinified]

Has this issue been fixed or is it being fixed? I would like to look into it and make a pull request to fix it.

[manucorporat]

Fixed!