Allow passing fetch() Response to set:html (#4832)

* ALlow passing fetch() Response to set:html

* Only check for Symbol.iterator on objects

* oops

* Fix no-streaming case

* Remove old comment

1 files changed, 49 insertions, 0 deletions

diff --git a/.changeset/silent-comics-hang.md b/.changeset/silent-comics-hang.md
new file mode 100644
index 000000000..7434b552e
--- /dev/null
+++ b/.changeset/silent-comics-hang.md
@@ -0,0 +1,49 @@
+---
+'astro': minor
+---
+
+Allows Responses to be passed to set:html
+
+This expands the abilities of `set:html` to ultimate service this use-case:
+
+```astro
+<div set:html={fetch('/legacy-post.html')}></div>
+```
+
+This means you can take a legacy app that has been statically generated to HTML and directly consume that HTML within your templates. As is always the case with `set:html`, this should only be used on trusted content.
+
+To make this possible, you can also pass several other types into `set:html` now:
+
+* `Response` objects, since that is what fetch() returns:
+    ```astro
+    <div set:html={new Response('<span>Hello world</span>', {
+      headers: {
+        'content-type': 'text/html'
+      }
+    })}></div>
+    ```
+* `ReadableStream`s:
+    ```astro
+    <div set:html={new ReadableStream({
+      start(controller) {
+        controller.enqueue(`<span>read me</span>`);
+        controller.close();
+      }
+    })}></div>
+    ```
+* `AsyncIterable`s:
+    ```astro
+    <div set:html={(async function * () {
+      for await (const num of [1, 2, 3, 4, 5]) {
+        yield `<li>${num}</li>`;
+      }
+    })()}>
+    ```
+* `Iterable`s (non-async):
+    ```astro
+    <div set:html={(function * () {
+      for (const num of [1, 2, 3, 4, 5]) {
+        yield `<li>${num}</li>`;
+      }
+    })()}>
+    ```