TransformStream est désormais compatible avec plusieurs navigateurs

Les flux de transformation étant désormais compatibles avec Chrome, Safari et Firefox, ils sont enfin prêts à être utilisés à grande échelle.

Browser Support

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

Source

L'API Streams vous permet de diviser une ressource que vous souhaitez recevoir, envoyer ou transformer en petits blocs, puis de traiter ces blocs petit à petit. Récemment, Firefox 102 a commencé à prendre en charge TransformStream, ce qui signifie que TransformStream est désormais enfin utilisable sur tous les navigateurs. Les flux de transformation vous permettent de rediriger un ReadableStream vers un WritableStream, en exécutant une transformation sur les blocs ou en consommant directement le résultat transformé, comme indiqué dans l'exemple suivant.

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

Démo