Controller filename should be in
snake_case with suffix
<controller_name>_controller.js. Stimulus observes the HTML and
identifies data attribute
Stimulus connects the element with the
Action name should be in
camelCase. Stimulus registers and
listens to the events like:
When an event occur, the relevant registered action for the event
is triggered. Action is JS function which Stimulus could access in the controller context.
JS function needs to be camelCased.
<button data-action="click->hello#greet">Click Me</button>
Target name should be in
Stimulus finds all the target HTML elements
and keep them accessible in the controller context.
Following is a simple hello example picked from Stimulus website with some inline comments on the name conventions.
// apps/views/home/show.html.erb <div data-controller="hello"> <h1 data-target="bannerElement"></h1> <button data-action="click->hello#greetMe">Click Me</button> </div>
Find more about Rationale behind naming conventions here