Stimulus Naming Conventions

What is Stimulus?

Stimulus is a JavaScript framework for the HTML. Stimulus is created by Basecamp and used at Hey. Today I learned some naming conventions that needs to be followed while using Stimulus in your application.

Controller:

Controller filename should be in snake_case with suffix <controller_name>_controller.js. Stimulus observes the HTML and identifies data attribute data-controller=<controller_name>. Stimulus connects the element with the <controller_name>_controller.js JS file.

Action:

Action name should be in camelCase. Stimulus registers and listens to the events like: click, submit, etc. 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.

Example:

<button data-action="click->hello#greet">Click Me</button>

Target:

Target name should be in camelCase. 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.

Stimulus Controller

// data-controller are snake_case
// apps/javascript/controllers/hello_controller.js
import { Controller } from "stimulus";

export default class extends Component {
  // data-target are camelCase.
  static targets = ["bannerElement"];

  // data-action are camelCase.
  greetMe() {
    this.bannerElementTarget.textContent =`Hello World!`
  }
}

Usage

// 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

Happy Coding!!