There’s no built-in event for notification after a Turbo Streams render.
Instead, add a Stimulus data-controller attribute to the element you render inside the <turbo-stream> element. Then implement the connect() method on that controller to know when the element has been loaded into the document.
All, this seems fine it you are using StimulusJS as your framework. But that’s not the case for us. We are in the process of implementing Hotwire for asynchronous UI updates in an existing application.
All we need to hook this up is an event that is fired after a stream is rendered. Ideally with the DOM element on the newly inserted content, but even that isn’t strictly necessary.
From what’s been said it sounds like the proposed solution would mean that we would have to rewrite all our existing JS code to use stimulus controllers, and that’s probably not tenable.
Is there any chance you could reconsider this event?
If not I’m not sure what other options are available to us (maintaining a fork maybe?)
If you really don’t want to add Stimulus to your project for this, it’s not like Stimulus is doing anything truly magic here. You can observe the relevant part of the DOM with your own Mutation Observer code and run the code on newly created elements when they appear in the DOM. Here’s a nice vanilla JS example I found through twenty seconds of googling. This is similar to what Stimulus is doing under the hood.
(Also, nitpick: you say you’re implementing Hotwire, but Hotwire includes Stimulus. You probably mean Turbo.)
@n-studio One solution is using Mutation Observers directly, see above.