Skip to content

Commit

Permalink
Revise explanation, omit GET override guidance
Browse files Browse the repository at this point in the history
  • Loading branch information
seanpdoyle committed Mar 5, 2021
1 parent b62f494 commit 7d5d49f
Showing 1 changed file with 4 additions and 33 deletions.
37 changes: 4 additions & 33 deletions _source/handbook/04_streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ You can render any number of stream elements in a single stream message from a W

## Streaming From HTTP Responses

Turbo knows to automatically load stream elements when they arrive in response to form submissions with a MIME type of `text/vnd.turbo-stream.html`. Turbo itself adds this type to the [Accept][] header requests initiated by non-GET form submissions to let the server know that these responses are possible. Ensuring that the value is present in the [Accept][] header enables servers to tailor their responses to deal with both Turbo Streams and regular redirects or other responses for clients that don't want the streams (such as native applications).
Turbo knows to automatically load stream elements when they arrive in response to `<form>` submissions with a MIME type of `text/vnd.turbo-stream.html`. When a `<form>` with an [method][] set to `POST`, `PUT`, `PATCH`, or `DELETE` is submitted, Turbo adds `text/vnd.turbo-stream.html` to the string of values in the request's [Accept][] header to hint to the server that these responses are supported. Ensuring that the value is present in the [Accept][] header enables servers to tailor their responses to deal with both Turbo Streams, HTTP redirects, or other responses for clients that don't want the streams (such as native applications).

In a Rails controller, this would look like:

Expand All @@ -72,6 +72,9 @@ def destroy
end
```

[method]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method
[Accept]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept

## Reusing Server-Side Templates

The key to Turbo Streams is the ability to reuse your existing server-side templates to perform live, partial page changes. The HTML template used to render each message in a list of such on the first page load is the same template that'll be used to add one new message to the list dynamically later. This is at the essence of the HTML-over-the-wire approach: You don't need to serialize the new message as JSON, receive it in JavaScript, render a client-side template. It's just the standard server-side templates reused.
Expand Down Expand Up @@ -133,38 +136,6 @@ It's good practice to start your interaction design without Turbo Streams. Make

The same is especially true for WebSocket updates. On poor connections, or if there are server issues, your WebSocket may well get disconnected. If the application is designed to work without it, it'll be more resilient.

If a Turbo Drive visit needs to integrate with Turbo Streams, you can overwrite its [Accept][] header within a `turbo:before-fetch-request` event listener:

```js
// turbo_streams_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
injectHeadersIntoNextRequest() {
const injectHeaders = (event) => {
const { headers } = event.detail.fetchOptions || {}

if (headers) {
headers.Accept = `text/vnd.turbo-stream.html, ${headers.Accept}`
}
}

addEventListener("turbo:before-fetch-request", injectHeaders, { once: true })
}
}
```

Then, attach the controller to your page's `<body>` element and route `turbo:click` events on `<a>` elements to the `turbo-streams#injectHeadersIntoNextRequest` action:

```html
<body data-controller="turbo-streams">
<!-- ... -->
<a href="/streams-request" data-action="turbo:click->turbo-streams#injectHeadersIntoNextRequest">Load content via Turbo Streams</a>
</body>
```

[Accept]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept

## But What About Running JavaScript?

Turbo Streams consciously restricts the types of actions you can perform to just five: append, prepend, replace, update, and remove. If you want to trigger additional behavior when these actions are carried out, you should attach behavior using <a href="https://stimulus.hotwire.dev">Stimulus</a> controllers. This restriction allows Turbo Streams to focus on the essential task of delivering HTML over the wire, leaving additional logic to live in dedicated JavaScript files.
Expand Down

0 comments on commit 7d5d49f

Please sign in to comment.