From 0367f54ded6f270ba72de2bea8ca6f54b4d9208f Mon Sep 17 00:00:00 2001 From: David Colby Date: Tue, 19 Mar 2024 15:09:01 -0700 Subject: [PATCH] Add action where stream actions are listed by name and update stream actions count to nine --- _source/handbook/01_introduction.md | 2 +- _source/handbook/05_streams.md | 8 ++++---- _source/reference/streams.md | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/_source/handbook/01_introduction.md b/_source/handbook/01_introduction.md index cd2b786..50c5621 100644 --- a/_source/handbook/01_introduction.md +++ b/_source/handbook/01_introduction.md @@ -66,7 +66,7 @@ In addition to turning your segments into independent contexts, Turbo Frames aff Making partial page changes in response to asynchronous actions is how we make the application feel alive. While Turbo Frames give us such updates in response to direct interactions within a single frame, Turbo Streams let us change any part of the page in response to updates sent over a WebSocket connection, SSE or other transport. (Think an imbox that automatically updates when a new email arrives.) -Turbo Streams introduces a `` element with eight basic actions: `append`, `prepend`, `replace`, `update`, `remove`, `before`, `after`, and `refresh`. With these actions, along with the `target` attribute specifying the ID of the element you want to operate on, you can encode all the mutations needed to refresh the page. You can even combine several stream elements in a single stream message. Simply include the HTML you're interested in inserting or replacing in a template tag and Turbo does the rest: +Turbo Streams introduces a `` element with nine basic actions: `append`, `prepend`, `replace`, `update`, `remove`, `before`, `after`, `morph`, and `refresh`. With these actions, along with the `target` attribute specifying the ID of the element you want to operate on, you can encode all the mutations needed to refresh the page. You can even combine several stream elements in a single stream message. Simply include the HTML you're interested in inserting or replacing in a template tag and Turbo does the rest: ```html diff --git a/_source/handbook/05_streams.md b/_source/handbook/05_streams.md index 0cfc74e..725d5fa 100644 --- a/_source/handbook/05_streams.md +++ b/_source/handbook/05_streams.md @@ -11,7 +11,7 @@ They can be used to surgically update the DOM after a user action such as removi ## Stream Messages and Actions -A Turbo Streams message is a fragment of HTML consisting of `` elements. The stream message below demonstrates the eight possible stream actions: +A Turbo Streams message is a fragment of HTML consisting of `` elements. The stream message below demonstrates the nine possible stream actions: ```html @@ -206,15 +206,15 @@ The same is especially true for WebSocket updates. On poor connections, or if th ## But What About Running JavaScript? -Turbo Streams consciously restricts you to eight actions: append, prepend, (insert) before, (insert) after, replace, update, remove, and refresh. If you want to trigger additional behavior when these actions are carried out, you should attach behavior using Stimulus 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. +Turbo Streams consciously restricts you to nine actions: append, prepend, (insert) before, (insert) after, replace, update, remove, morph, and refresh. If you want to trigger additional behavior when these actions are carried out, you should attach behavior using Stimulus 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. Embracing these constraints will keep you from turning individual responses into a jumble of behaviors that cannot be reused and which make the app hard to follow. The key benefit from Turbo Streams is the ability to reuse templates for initial rendering of a page through all subsequent updates. ## Custom Actions -By default, Turbo Streams support [eight values for its `action` attribute](/reference/streams#the-seven-actions). If your application needs to support other behaviors, you can override the `event.detail.render` function. +By default, Turbo Streams support [nine values for its `action` attribute](/reference/streams#the-seven-actions). If your application needs to support other behaviors, you can override the `event.detail.render` function. -For example, if you'd like to expand upon the eight actions to support `` elements with `[action="alert"]` or `[action="log"]`, you could declare a `turbo:before-stream-render` listener to provide custom behavior: +For example, if you'd like to expand upon the nine actions to support `` elements with `[action="alert"]` or `[action="log"]`, you could declare a `turbo:before-stream-render` listener to provide custom behavior: ```javascript addEventListener("turbo:before-stream-render", ((event) => { diff --git a/_source/reference/streams.md b/_source/reference/streams.md index b065a2b..194eb66 100644 --- a/_source/reference/streams.md +++ b/_source/reference/streams.md @@ -6,7 +6,7 @@ description: "A reference of everything you can do with Turbo Streams." # Streams -## The eight actions +## The nine actions ### Append