Cursor rule

1---
2description: 
3globs: 
4alwaysApply: false
5---
6This rule describes how to write Stimulus controllers.
7 
8- **Use declarative actions, not imperative event listeners**
9  - Instead of assigning a Stimulus target and binding it to an event listener in the initializer, always write Controllers + ERB views declaratively by using Stimulus actions in ERB to call methods in the Stimulus JS controller.  Below are good vs. bad code.
10 
11  BAD code:
12 
13```js
14  // BAD!!!! DO NOT DO THIS!!
15  // Imperative - controller does all the work
16  export default class extends Controller {
17    static targets = ["button", "content"]
18 
19    connect() {
20      this.buttonTarget.addEventListener("click", this.toggle.bind(this))
21    }
22 
23    toggle() {
24      this.contentTarget.classList.toggle("hidden")
25      this.buttonTarget.textContent = this.contentTarget.classList.contains("hidden") ? "Show" : "Hide"
26    }
27  }
28```
29 
30  GOOD code:
31 
32```erb
33  <!-- Declarative - HTML declares what happens -->
34 
35  <div data-controller="toggle">
36    <button data-action="click->toggle#toggle" data-toggle-target="button">Show</button>
37    <div data-toggle-target="content" class="hidden">Hello World!</div>
38  </div>
39```
40 
41```js
42  // Declarative - controller just responds
43  export default class extends Controller {
44    static targets = ["button", "content"]
45 
46    toggle() {
47      this.contentTarget.classList.toggle("hidden")
48      this.buttonTarget.textContent = this.contentTarget.classList.contains("hidden") ? "Show" : "Hide"
49    }
50  }
51```
52 
53- **Keep Stimulus controllers lightweight and simple**
54  - Always aim for less than 7 controller targets. Any more is a sign of too much complexity.
55  - Use private methods and expose a clear public API
56 
57- **Keep Stimulus controllers focused on what they do best**
58  - Domain logic does NOT belong in a Stimulus controller
59  - Stimulus controllers should aim for a single responsibility, or a group of highly related responsibilities
60  - Make good use of Stimulus's callbacks, actions, targets, values, and classes
61 
62- **Component controllers should not be used outside the component**
63  - If a Stimulus controller is in the app/components directory, it should only be used in its component view. It should not be used anywhere in app/views.
64