TransformStream kini didukung lintas browser

Setelah aliran transformasi didukung di Chrome, Safari, dan Firefox, aliran tersebut akhirnya siap digunakan!

Browser Support

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Source

Streams API memungkinkan Anda memecah 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 dapat digunakan di berbagai browser. Aliran transformasi memungkinkan Anda menyalurkan dari ReadableStream ke WritableStream, mengeksekusi transformasi pada potongan, atau menggunakan hasil yang diubah 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