TransformStream kini didukung lintas browser

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

Streams API memungkinkan Anda membagi resource yang ingin Anda terima, kirim, atau ubah menjadi potongan kecil, lalu memproses potongan ini sedikit demi sedikit. Baru-baru ini, Firefox 102 mulai mendukung TransformStream, yang berarti TransformStream kini akhirnya dapat digunakan di seluruh browser. Transform stream memungkinkan Anda melakukan pemipaan dari ReadableStream ke WritableStream, menjalankan transformasi pada bagian, 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