Clarify how to declare multi-word controller names in docs

Just something you might want to add to the docs eventually. After some experimenting with trying to get a multi-word controller working. I eventually realized that it has to be separated by a - instead of a _ like the controller file itself needs to be named.

<div data-controller="option-panel">
  <div data-target="option-panel.widget"></div>
  <div data-action="click->option-panel#show"></div>
</div>

… which points to …

option_panel_controller.js

At first, I was putting _ in the markup data attributes before I realized it was a dash. This might be assumed by some folks, but still might not be a bad idea to mention it in the docs or in an FAQ somewhere.

I’m happy to submit a pull request for this as well but wasn’t sure where or how you’d want to include this in the handbook.

Cheers 😃

[christhesoul]

Hey @javan. As someone who is struggling a little with this right now, I’d love to help clarify it for other newcomers. Your link above 404s, and I’m struggling to find the right “vanilla” way of doing this.

e.g. Using without a Build System states the following:

application.register("hello", class extends Stimulus.Controller {
  static get targets() {
    return [ "name" ]
  }

  // …
})

Should the "hello" be "hello-world" or "helloWorld"? I feel like it should be helloWorld but I can only get it to work with the data-controller if it’s hello-world.

Perhaps it might be clearer if examples were two-word controllers to begin with – as it’s (arguably) easier to work backwards from two words than forwards from one?

Happy to help if I can. Thanks. 👍

[sstephenson]

Thank you for the feedback! We do have the webpack filename-to-identifier mapping documented, but I agree it’s not at all obvious. I’d like to see if we can work this into the Handbook.