diff options
Diffstat (limited to '.changeset/silent-comics-hang.md')
-rw-r--r-- | .changeset/silent-comics-hang.md | 49 |
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>`; + } + })()}> + ``` |