Turbo frames events

[adrianthedev]

Would be really helpful to add turbo frames events just like turbo drive has with the frame_id as a payload for that event.

document.addEventListener('turbo-frame:load', (event) => console.log('loaded frame ->', event.turboFrameId))

Would this be something helpful to explore?

[seanpdoyle]

Would #59 address this? It doesn't introduce turbo-frame:: prefixed events or include the turboFrameId specifically, but it does include the frame as the target, so you could read it from there.

[Sub-Xaero]

I'd also go so far as to say that it would also be useful to have events that notify when Turbo streams modify a frame, even just something like a turbo-stream:received event so that a Stimulus controller can react to it (I.e. like incrementing the counter of replies on a comment).

I'm currently using MutationObservers to achieve this, but I wonder whether it would be more lightweight/performant to have the event fired directly by Turbo.

[seanpdoyle]

@Sub-Xaero there is a turbo:before-stream-render that fires before rendering a <turbo-stream> element. According to past discussions, it is unlikely that there will be any other Stream events added in the future.

I wonder whether it would be more lightweight/performant to have the event fired directly by Turbo.

While the MutationObserver interface can be awkward to use at times, I'm not aware of any performance risks involved in using them. As I understand it, Stimulus is powered by tens (or hundreds?) of concurrently attached MutationObservers.

[Sub-Xaero]

@seanpdoyle Indeed, thank you, I had missed that. My only issue with that is that it fires at the document level, and the srcElement, target and path attributes all point to an element of type <turbo-stream> that I can only assume is either in the closed-mode ShadowDom of the <turbo-cable-stream-source> element or a dead reference to the <turbo-stream> that the <turbo-cable-stream-source> replaces as according to Chrome, Node cannot be found in the current page., so you cannot tell where the event originated.

I had imagined an event being fired on the frame itself and bubbling. But, following the precedent set in https://discuss.hotwire.dev/t/event-to-know-a-turbo-stream-has-been-rendered/1554/6 , it is probably a better convention to use MutationObservers as then it doesn't matter where the elements in the DOM come from.

Thanks for your help, I'll carry on my merry way.

[dhh]

Closed via #59