Just checking to see if I got the multiword naming convention right…

1

Does this (somewhat contrived) example follow the preferred naming convention for multiword controller, action, and target names?

<div data-controller="good-morning">
  <input data-target="good-morning.firstName" type="text">
  <button data-action="click->good-morning#meetAndGreet">Greet</button>
  <span data-target="hello.output"></span>
</div>

// good_morning_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "firstName", "output" ]

  meetAndGreet() {
    this.outputTarget.textContent =
      'Good morning, ${this.firstNameTarget.value}; nice to meet you!'
  }
}
2

Exactly right! Here’s a rundown of the casing conventions and rationale: https://github.com/stimulusjs/stimulus/issues/70#issuecomment-359991756

1 Like
3

It’s not the convention but I would call this file

good-morning_controller.js

That’s one case conversion less for my brain to remember.