O TransformStream agora é compatível com navegadores

Agora que os fluxos de transformação são compatíveis com Chrome, Safari e Firefox, eles estão prontos para serem usados!

Browser Support

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

Source

Com a API Streams, é possível dividir um recurso que você quer receber, enviar ou transformar em pequenos blocos e processar esses blocos pouco a pouco. Recentemente, o Firefox 102 começou a oferecer suporte a TransformStream, o que significa que TransformStream agora pode ser usado em todos os navegadores. Os fluxos de transformação permitem canalizar de um ReadableStream para um WritableStream, executando uma transformação nos blocos ou consumindo o resultado transformado diretamente, como mostrado no exemplo a seguir.

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;
  }
});

Demonstração