translation update: turbo reference streams

[github-actions]

Translation Update Required

The upstream documentation has been updated. Please review the changes and update the translation accordingly.

File: turbo/reference/streams.md
Current translated commit: e9e0628
Latest upstream commit: 4f4c385

Diff

Click to expand diff

diff --git a/_source/reference/streams.md b/_source/reference/streams.md
index de5ec86..d2fffcc 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 seven actions
+## The eight actions
 
 ### Append
 
@@ -19,7 +19,7 @@ Appends the content within the template tag to the container designated by the t
   </template>
 </turbo-stream>
 ```
-If the template's first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of appended. 
+If the template's first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of appended.
 
 ### Prepend
 
@@ -32,7 +32,7 @@ Prepends the content within the template tag to the container designated by the
   </template>
 </turbo-stream>
 ```
-If the template's first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of prepended. 
+If the template's first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of prepended.
 
 ### Replace
 
@@ -46,6 +46,16 @@ Replaces the element designated by the target dom id.
 </turbo-stream>
 ```
 
+The `[method="morph"]` attribute can be added to the `turbo-stream` element to replace the element designated by the target dom id via morph.
+
+```html
+<turbo-stream action="replace" method="morph" target="dom_id">
+  <template>
+    Content to replace the element.
+  </template>
+</turbo-stream>
+```
+
 ### Update
 
 Updates the content within the template tag to the container designated by the target dom id.
@@ -58,6 +68,16 @@ Updates the content within the template tag to the container designated by the t
 </turbo-stream>
 ```
 
+The `[method="morph"]` attribute can be added to the `turbo-stream` element to morph only the children of the element designated by the target dom id.
+
+```html
+<turbo-stream action="update" method="morph" target="dom_id">
+  <template>
+    Content to replace the element.
+  </template>
+</turbo-stream>
+```
+
 ### Remove
 
 Removes the element designated by the target dom id.
@@ -91,6 +111,21 @@ Inserts the content within the template tag after the element designated by the
 </turbo-stream>
 ```
 
+### Refresh
+
+Initiates a [Page Refresh](/handbook/page_refreshes) to render new content.
+
+```html
+<!-- without `[request-id]` -->
+<turbo-stream action="refresh"></turbo-stream>
+
+<!-- debounced with `[request-id]` -->
+<turbo-stream action="refresh" request-id="abcd-1234"></turbo-stream>
+
+<!-- refresh behavior with `[method]` and `[scroll]` -->
+<turbo-stream action="refresh" method="morph" scroll="preserve"></turbo-stream>
+```
+
 ## Targeting Multiple Elements
 
 To target multiple elements with a single action, use the `targets` attribute with a CSS query selector instead of the `target` attribute.
@@ -111,3 +146,14 @@ To target multiple elements with a single action, use the `targets` attribute wi
 Turbo can connect to any form of stream to receive and process stream actions. A stream source must dispatch [MessageEvent](https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent) messages that contain the stream action HTML in the `data` attribute of that event. It's then connected by `Turbo.session.connectStreamSource(source)` and disconnected via `Turbo.session.disconnectStreamSource(source)`. If you need to process stream actions from different source than something producing `MessageEvent`s, you can use `Turbo.renderStreamMessage(streamActionHTML)` to do so.
 
 A good way to wrap all this together is by using a custom element, like turbo-rails does with [TurboCableStreamSourceElement](https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable_stream_source_element.js).
+
+## Stream Elements inside HTML
+
+Turbo streams are implemented as [a custom HTML element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).
+The element is interpreted as part of the `connectedCallback` function that the browser calls when the element is
+connected to the page dom.
+
+This means that any stream elements that are rendered into the dom will be interpreted. After being interpreted, Turbo
+will remove the element from the dom. More specifically, it means that rendering stream actions inside the page or
+frame content HTML will cause them to be executed. This can be used to execute additional sideffects beside the main content
+loading.

How to Update

1. Fork this repository
2. Update the translation in turbo/reference/streams.md
3. Update the commit field in the front matter to 4f4c385
4. Create a Pull Request with your changes

View changes on GitHub

---