TransformStream wird jetzt browserübergreifend unterstützt

Da Transform-Streams jetzt in Chrome, Safari und Firefox unterstützt werden, sind sie endlich bereit für den großen Auftritt!

Unterstützte Browser

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

Quelle

Mit der Streams API kannst du eine Ressource, die du empfangen, senden oder transformieren möchtest, in kleine Teile aufteilen und diese dann bitweise verarbeiten. Vor Kurzem wurde TransformStream in Firefox 102 eingeführt. Das bedeutet, dass TransformStream jetzt endlich plattformübergreifend verwendet werden kann. Mit Transform-Streams kannst du von einer ReadableStream an eine WritableStream weiterleiten, eine Transformation auf die Chunks ausführen oder das transformierte Ergebnis direkt verwenden, wie im folgenden Beispiel gezeigt.

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