How does Turbo listen for Turbo Streams

Summary

Turbo Stream elements are custom HTML elements which change the DOM when they are added to it. A <turbo-stream> tag can, by specifying an action attribute, trigger one of seven “DOM changing” actions: append, prepend, replace, update, remove, before and after. For example, a user lands on a page with a list of Books and sees a form to create a new book. They fill out the form and submit, and the server responds with a <turbo-stream action="append"> element which contains within it the entry for the newly created book. Turbo sees that and adds it to the DOM, which triggers the relevant append stream action and adds the new book HTML to the page. That’s really cool, but it raises a few questions. First, when the form is submitted, how is Turbo telling our server to send us back one or more Turbo Stream elements? And second, when the server does respond back with one or more Turbo Stream elements, how does Turbo know that it should add them to the DOM? Let’s try to peer behind the curtain and figure out the answer to these questions. Doing so has a couple of important benefits: Knowing how things work behind the scenes will improve your ability to solve issues you run into when building a feature If Turbo for some reason doesn’t do what you want it to do, knowing how it actually works will allow you to extend its behavior with confidence How does Turbo handle form submissions? When Turbo starts up in the user’s browser, it adds an event listener to document, and listens for the submit event. When any form in the user’s browser is submitted, and that submission meets a few criteria (e.g. the submission does not happen in an iframe) this listener asks Turbo Drive to submit the form. Turbo Drive, via its Navigator class, initiates the form submission. Form submission in Turbo Drive amounts to a two step process: First, Turbo Drive calls preventDefault on the submit event. This tells the browser not to submit the form. Then, Turbo sends the form data to the server using th...