this.element
on a 1:1 basis.rails generate channel
for the first time, several important files are generated for you:import
ed in your application.js pack, this loads all channelsimport
CableReady into multiple ActionCable Channel classes and Stimulus controllers at the same time, since they are all sharing the same code and resources.consumer.js
into every ActionCable Channel subscriber. Instead, we import it into index.js
just once and attach it to the Stimulus Application object:consumer.js
comes from the host application and there is no guarantee that every developer will leave it in the app/javascript/channels
folder, there's no single path for a packaged controller to reliably import it from. this.application.consumer
keeps the trains running and propels the Stimulus ecosystem.connect
events when the element is created, and disconnect
when the element is removed or destroyed.params
? Absolutely nothing. Why isn't this concept touted as a flagship feature of ActionCable? 🍑🍆 if I know, but it's an absolute game-changer when combined with Stimulus. You'll see why in Broadcasting to Resources.dispatch_event
so exciting is that you can enjoy many of the same results and benefits as a full ActionCable Channel subscriber, just by handling targeted events in an intelligent way.data-action
attributes or formal event listeners largely comes down to a question of taste and style, with a healthy dose of context. The author tends to prefer addEventListener
for private, project-specific controllers, while assuming that the users of packages Stimulus controllers will typically use the declarative syntax.morph
everyone's document directly, it'll look like your contributions are lumped in with everyone else... until you refresh the page and everything is as it should be. Clearly, this is not acceptable.dispatch_event
that has the rendered HTML for both the current user and everyone else available in different keys of the detail
object, along with the user_id
of the contributing user. This user_id
can be compared against the current user's id
which has already been stored in a meta
tag in the document head
. Upon receiving a new update, the Stimulus controller can append the correct HTML fragment to the correct DOM element and the project is saved.ValueChanged
callback, if one is available. 👍{"p": "#foo->example#ping"}
wires up the "p" key to fire the ping
method on the example
controller that lives on an element with the id
"foo". Are you with me so far? 😅set_dataset_property
operations to the hotkeys
controller DOM element. The user's keystroke bindings immediately reflect their selected preferences.render
method, or any concept of emitting HTML to present a component. Conversely, the hardest part of learning the Reactive Rails stack is resisting the temptation to do heroic DOM modifications on the client that need to be synchronized with the server. Even the most passionate SSR enthusiast has long been told that tracking everything and rendering bits of HTML on the server is a little dirty and almost guaranteed to be slow. It's hard not to internalize prejudice, even when it's utterly unfounded. It's a special moment when you realize that yes, you really can track the active accordion tab on the server.morph
operation with the HTML which updates the table with the sorted data you need.