Duplicated component name inside stimulus controller when using sidecar option

[PedroAugustoRamalhoDuarte]

Feature request

Improves stimulus controller name when we have sidecar option

Example

When i run rails g component Reports::Footer::Card --sidecar --stimulus --preview

Its creates the html with component name duplicated in data-controller prop

<div data-controller="reports--footer--card-component--card-component">Add Reports::Footer::Card template here</div>

But would be better to be:

<div data-controller="reports--footer--card-component">Add Reports::Footer::Card template here</div>

[joelhawksley]

👍🏻 Makes sense to me. Want to write the PR?

[Spone]

Correct me if I'm wrong, but that's the expected behavior: the Stimulus controller identifier depends on the path and file name of the controller JS file.

If your controller file is named…	its identifier will be…
clipboard_controller.js	clipboard
date_picker_controller.js	date-picker
users/list_item_controller.js	users--list-item
local-time-controller.js	local-time

See https://stimulus.hotwired.dev/handbook/installing#controller-filenames-map-to-identifiers

[PedroAugustoRamalhoDuarte]

Correct me if I'm wrong, but that's the expected behavior: the Stimulus controller identifier depends on the path and file name of the controller JS file.

If your controller file is named…
its identifier will be…

clipboard_controller.js
clipboard

date_picker_controller.js
date-picker

users/list_item_controller.js
users--list-item

local-time-controller.js
local-time

See https://stimulus.hotwired.dev/handbook/installing#controller-filenames-map-to-identifiers

Yes you are right, the new name would work, but is better keep default naming from stimulus for the default imports. Maybe the better approach in my case is change the controller name from card_component_controller.js to just controller.js. Is there some generator to automatic generate sidecar component like in this part of the docs? https://viewcomponent.org/guide/javascript_and_css.html#stimulus

app/components
├── ...
├── example
|   ├── component.rb
|   ├── component.css
|   ├── component.html.erb
|   └── component_controller.js
├── ...

[Spone]

Is there some generator to automatic generate sidecar component like in this part of the docs? https://viewcomponent.org/guide/javascript_and_css.html#stimulus

You can use view_component-contrib or implement your own generator by copying this file in your project and adapting it.

[PedroAugustoRamalhoDuarte]

Thanks @Spone for the help! I will use view_component-contrib to generate my components