TransformStream artık tarayıcılar arası bir destek sunuyor

Dönüştürme akışları artık Chrome, Safari ve Firefox'ta desteklendiğinden, nihayet kullanıma hazır hale geldi.

Streams API almak, göndermek veya dönüştürmek istediğiniz kaynağı küçük parçalara ayırmanızı ve bu parçaları parça parça işlemenizi sağlar. Kısa süre önce Firefox 102, TransformStream'u desteklemeye başladı. Bu sayede TransformStream artık tarayıcılarda kullanılabilir. Dönüşüm akışları, bir ReadableStream kaynağından WritableStream kaynağına veri aktarmanıza olanak tanır. Bu sayede, parçalar üzerinde dönüşüm gerçekleştirebilir veya aşağıdaki örnekte gösterildiği gibi dönüştürülmüş sonucu doğrudan kullanabilirsiniz.

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