Stimulus: Kebab-cased or underscore_cased targets

[dwightwatson]

If you have a multi-word target name it seems like the convention would be to kebab-case or underscore_case it's name as opposed to camelCase because of the way the controllers are named. However, this doesn't pair nice with the new class targets coming in 1.0.0.

For example, if I have a target called document-input I wouldn't be able to use a friendly getter as a method, I'd have to call it through it's key instead.

<input type="file" name="document" data-target="documents.document-input" data-action="documents#change">

export default class extends Controller {
  static targets = ['document-input'];

  change(event) {
    // I know I could use event.target in this example, but I'm just demonstrating
    // the case of accessing another target.
    this['document-inputTarget'];

    // If it was under_score cased it would be slightly better, but still a weird mix.
    this.document_inputTarget;
  }
}

Would the convention be to stick to camelCased target names so it can all look nice in the controllers, or could the class targets be converted from camelCase to kebab-case under the hood so that we can use the former in our scripts and the latter in our views?

[dwightwatson]

I'd be more than happy to have a crack at a pull request for adding the automatic conversion from camelCase to kebab-case if it's something you'd be open to considering.

[sstephenson]

Would the convention be to stick to camelCased target names so it can all look nice in the controllers

Yep!

We plan on documenting this in more detail after 1.0, but here’s a rundown of the capitalization conventions, with a bit of rationale for each:

Component | Convention | Rationale
--|--|--
Controller filenames | snake_case.js | Rails works that way
Identifiers | kebab-case | Sometimes used as part of HTML attribute names; analogous to CSS classes, which are conventionally kebab-case
Action names | camelCase | Map directly to JavaScript controller methods
Target names | camelCase | Map directly to JavaScript controller properties
Data attributes | camelCase + kebab-case | Thin wrapper around the HTMLElement.dataSet API; camelCase names in JS, kebab-case attributes in HTML

[dwightwatson]

Awesome, thanks for that - good to know. Sorry about all the beta related questions, was hoping to help out where possible.