Hotwire Discussion

Event to know a `turbo-stream` has been rendered

The turbo:load event does not emit when the response contains a turbo-stream, which maybe is correct, since it is not a complete page load (not 100% sure).

However, I am not able to find any event that notifies me when a turbo stream has been rendered to the DOM, so that I can perform some DOM related stuff on that node

turbo:before-stream-render. :slight_smile:

(PR to get the new template included in the event.)

I am looking for after. Coz I want to select the DOM nodes from this new stream HTML. :slight_smile:

I believe the newTemplate will just be a raw string. What I want is to write document.querySelector('some-node-from-stream-html')

1 Like

Ah! Sorry, misread. Could submit a PR for a new one?

The newTemplate is a DocumentFragment. :slight_smile:

No worries :). Will create a PR, just waiting to see if the team wants it in or not

1 Like

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.

2 Likes

Having this as a short term solution is fine. But doesn’t seems like a perfect approach.

On a side note, is there any specific reason for not dispatching an event ?

The specific reason is to encourage you to design your application not to care about where new HTML comes from or how it gets into the document :blush:

1 Like

I thought of having this as a companion to the turbo:load event, but for streams. All the use cases that turbo:load solves for a regular visit, this non-existing event will solve for streams.

Maybe I am missing something obvious here. But this is my primary motivation

The turbo:load event dates all the way back to 2012 when it was called page:load. We used it as a way to initialize jQuery plugins and other JavaScript behavior when the page changed.

The world has moved on since then, and we now have MutationObserver to detect changes to the DOM, and libraries like Stimulus that present a nice API on top. That’s what we’re designing for.

1 Like

This is interesting, I too was looking for the event listeners approach, but I’m curious on how I can achieve this with stimulus. Is there a way with stimulus to react to a child node being removed?

@perezperret, you could make the child that may disappear a target and then check for the presence of the target in an action.

If you want to constantly be monitoring for changes to children in the DOM tree, you likely need a custom mutation observer with childList set to true.

You can put a controller on the element and implement the disconnect() method to do something when it’s removed from the page.

https://stimulus.hotwire.dev/reference/lifecycle-callbacks

Is there any documentation on how to use that API? I can’t seem to find any docs on how to use them (@stimulus/mutation-observers).

To be clear, the API I’m referring to is the set of Lifecycle Callbacks available to Stimulus controllers. The @stimulus/mutation-observers package is how that’s implemented.