If you boil it all down, here's the basic flow through the app (with some gotcha's)
When there is a request for a page in a Rails-only app, the controller handles and routes the request, and renders a View. When the DOM is being written, some special Stimulus tags cue the instantiation of an associated Stimulus controller. The DOM also listens for user actions that are attached to some page elements via some other special Stimulus tags. When an event occurs, the associated function is called and runs its code to update the DOM without reloading the page.
So... what are the special tags? Here's a longer breakdown:
- A section of html is wrapped in a div with a
data-controller
tag. (The section that is wrapped should contain all the page elements that you plan to listen to or act upon using that controller). The value corresponds to the name of a StimulusJS controller: