cursor stimulus rules

stimulus-controllers.mdc

# Stimulus.js rules for Cursor

## Always register new stimulus controllers index.js

* When adding new stimulus controllers, always register the controller in @index.js

## Adding/modifying html markup via stimulus controllers

Prefer not to add hardcoded html markup to stimulus controllers.

Instead do the following:
* Add a handlebars template to the rails view template (or the layout if necessary).
* Then read the template in the stimulus controller to render it by passing the values for the variables in the handlebars template.

## Sharing html templates between Rails controllers and Stimulus controllers

If a Rails controller is to render html in the html.erb file on the backend, and if the stimulus controller needs to use the same html for doing stuff on the frontend, then:
* Move the html snippet to a rails partial.
* Use the partial in the html.erb views to render the content from the backend
* Also render the partial with handlebars variables into a `template` html tag so that the stimulus controllers can use this template.

## Making backend API calls in stimulus controllers

When the stimulus controllers have to make any remote calls, do not hardcode the url value in the controller. Instead pass the path as values to the stimulus controller from the view. The view can use rails route helpers to pass the value to the stimulus controller. This ensures that all routes are valid.

## Prefer targets in Stimulus controllers over querySelector

When we have to modify HTML or refer to an element in the DOM, add a target to the stimulus controller instead of using querySelector unless unavoidable.