Clarify how to declare multi-word controller names in docs

[hotwired]

Clarify how to declare multi-word controller names in docs

[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.

[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. 👍

[javan]

Closing for now since this is documented in the installation guide and referenced in the handbook:

Learn how automatic controller loading works in the Installation Guide.

[axelerator]

Hey @javan,
fyi I believe this is also demonstrated in the wrong way in the screen cast..
They reference

data: {controller: "reset_form", action: "turbo:submit-end->reset_form#reset"}

when it really should be

data: {controller: "reset-form", action: "turbo:submit-end->reset-form#reset"}

[joeybeninghove]

Oh snap! Sorry about that, I totally missed that. Cool deal! 👍

…

On Jan 18, 2018, at 7:27 PM, Sam Stephenson ***@***.***> wrote: 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. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[geoffdavis92]

Had the same issue with camelCased data attributes for the Data API after the Stimulus render; of course I forgot my HTML5 training, but it may not be obvious to those who may not understand the semantics of data-* attributes.

ex: data-app-showMessage -> data-app-show-message

[javan]

@christhesoul, hello-world is correct. See https://stimulusjs.org/handbook/installing#controller-filenames-map-to-identifiers.

[sgelbart]

How about for values from data attributes?