Fix stream demos on iOS Safari (#8613)

Author: aurorascharff

src/content/reference/react-dom/browser.md

@@ -136,9 +136,17 @@ renderButton.addEventListener('click', () => {
 export async function flushReadableStreamToFrame(readable, frame) {
   const doc = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    doc.write(decoder.decode(chunk, { stream: true }));
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
   }
+
+  doc.write(decoder.decode());
   doc.close();
 }
 ```

src/content/reference/react-dom/server/resume.md

@@ -202,10 +202,18 @@ main(document.getElementById("container"));
 export async function flushReadableStreamToFrame(readable, frame) {
   const document = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    const partialHTML = decoder.decode(chunk);
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    const partialHTML = decoder.decode(value, {stream: true});
     document.write(partialHTML);
   }
+
+  document.write(decoder.decode());
 }
 
 // This doesn't need to be an error.
@@ -234,4 +242,4 @@ export function sleep(timeoutMS) {
 ### Further reading {/*further-reading*/}
 
 Resuming behaves like `renderToReadableStream`. For more examples, check out the [usage section of `renderToReadableStream`](/reference/react-dom/server/renderToReadableStream#usage).
-The [usage section of `prerender`](/reference/react-dom/static/prerender#usage) includes examples of how to use `prerender` specifically.
+The [usage section of `prerender`](/reference/react-dom/static/prerender#usage) includes examples of how to use `prerender` specifically.

src/content/reference/react/Suspense.md

@@ -472,9 +472,17 @@ document.getElementById('render').addEventListener('click', () => {
 export async function flushReadableStreamToFrame(readable, frame) {
   const doc = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    doc.write(decoder.decode(chunk, { stream: true }));
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
   }
+
+  doc.write(decoder.decode());
   doc.close();
 }
 ```
@@ -2445,9 +2453,17 @@ renderButton.addEventListener('click', () => {
 export async function flushReadableStreamToFrame(readable, frame) {
   const doc = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    doc.write(decoder.decode(chunk, { stream: true }));
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
   }
+
+  doc.write(decoder.decode());
   doc.close();
 }
 ```

src/content/reference/react/use.md

@@ -1399,9 +1399,17 @@ renderButton.addEventListener('click', () => {
 export async function flushReadableStreamToFrame(readable, frame) {
   const doc = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    doc.write(decoder.decode(chunk, { stream: true }));
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
   }
+
+  doc.write(decoder.decode());
   doc.close();
 }
 ```