Mutation Observer not recognising DOM change when using Turbo Streams

[hotwired]

Mutation Observer not recognising DOM change when using Turbo Streams

[98-f355-f1]

@crobbo It's not clear how you might be using this example, but there seems to be a misunderstanding on what stimulus does and doesn't do. Stimulus does use the MutationObserver API in a very simple way. It sets up to listen for element attributes, childlists Element Nodes and subtrees of the childlists for the "this" controller, so it does a deep search. However Stimulus only considers the attributes that are in the API as what is monitored for changes, that is actions, targets, classes, values and outlets.

As for Turbo turbo-frames or turbo-streams, there is no MutationObserver, But I guess that indirectly, but setting up a data-controller inline on the "turbo-xxxx" element, you can use the "this" for the turbo-stream for turbo-frame, perhaps pausing rendering by hooking into the events, and do something specific, then resume the rendering.

Turbo Streams are simple and elegant and just use the browser's API (since it is merely a subclass of an HTMLElement), so it uses the native browser callbacks and functions to implement the changes to the DOM. Turbo Frames are a little more advanced, because Turbo intercepts links and has to match the frames so a lot more is going on. Turbo Streams via Channels is more sophisticated but in essence uses WebSockets for channels along with a Redis connection, but if Turbo Streams is not via a channel, I believe that it simply uses a regular HTTP connection.

The Hotwire Turbo forum is a good place for questions like these. https://discuss.hotwired.dev/

[crobbo]

Ok, thanks. Please close the issue as it's been a while since I was working on this and had this issue, as you say it was probably more to do with my lack of understanding at the time.