TransformStream kini didukung lintas browser

Setelah streaming transformasi didukung di Chrome, Safari, dan Firefox, semuanya siap untuk digunakan.

Streams API memungkinkan Anda membagi resource yang ingin Anda terima, kirim, atau ubah menjadi potongan-potongan kecil, lalu proses potongan ini sedikit demi sedikit. Baru-baru ini, Firefox 102 mulai mendukung TransformStream, yang berarti TransformStream sekarang akhirnya dapat digunakan di seluruh browser. Mentransformasi aliran data memungkinkan Anda melakukan pipe dari ReadableStream ke WritableStream, menjalankan transformasi pada potongan, atau menggunakan hasil yang ditransformasi secara langsung, seperti yang ditunjukkan dalam contoh berikut.

class UpperCaseTransformStream {
  constructor() {
    return new TransformStream({
      transform(chunk, controller) {
        controller.enqueue(chunk.toUpperCase());
      },
    });
  }
}

button.addEventListener('click', async () => {
  const response = await fetch('/script.js');
  const readableStream = response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(new UpperCaseTransformStream());

  const reader = readableStream.getReader();
  pre.textContent = '';
  while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      pre.textContent += value;
  }
});

Demo