TransformStream est désormais compatible avec plusieurs navigateurs

Maintenant que les flux de transformation sont compatibles avec Chrome, Safari et Firefox, ils sont enfin prêts à être utilisés.

L'API Streams vous permet de décomposer une ressource que vous souhaitez recevoir, envoyer ou transformer en petits blocs, puis de traiter ces blocs bit par bit. Récemment, Firefox 102 a commencé à prendre en charge TransformStream, ce qui signifie que TransformStream est désormais utilisable dans tous les navigateurs. Les flux de transformation vous permettent de transmettre des données d'un ReadableStream à un WritableStream, en exécutant une transformation sur les segments ou en consommant directement le résultat transformé, comme illustré 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