stream-to-element.ts

async function streamToElement(response: Response, element: HTMLElement) {
  if (response.body) {
    const reader = response.body.getReader()
    const decoder = new TextDecoder('utf-8')

    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      const text = decoder.decode(value, { stream: true })
      const textNode = document.createTextNode(text)
      element.appendChild(textNode)
    }
  }
}

document.addEventListener('DOMContentLoaded', async (event) => {
  const response = await fetch('/stream')
  const root = document.getElementById('root')

  if (root) {
    await streamToElement(response, root)
  }
})