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.

Browser Support

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

Source

Streams API, almak, göndermek veya dönüştürmek istediğiniz bir kaynağı küçük parçalara ayırmanıza ve ardından bu parçaları adım adım işlemenize olanak tanır. Firefox 102 kısa süre önce TransformStream desteği sunmaya başladı. Bu sayede TransformStream artık tarayıcılarda kullanılabiliyor. Dönüşüm akışları, bir ReadableStream kaynağından bir WritableStream kaynağına veri aktarmanıza, parçalar üzerinde dönüşüm gerçekleştirmenize veya dönüştürülmüş sonucu doğrudan kullanmanıza olanak tanır. Bu durum, aşağıdaki örnekte gösterilmiştir.

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