TransformStream is now supported cross-browser

• Demo
• Browser support
• Acknowledgements

This web feature is now available in all three browser engines!

The Streams API allows you to break down a resource that you want to receive, send, or transform into small chunks, and then process these chunks bit by bit. Recently, Firefox 102 started to support TransformStream, which means TransformStream is now finally usable across browsers. Transform streams allow you to pipe from a ReadableStream to a WritableStream, executing a transformation on the chunks, or consume the transformed result directly, as shown in the following example.

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

Browser support

Acknowledgements

Hero image by Arseny Togulev on Unsplash