XHR-esque progress events on top of streams

readable-stream-progress.js

function processBodyChunkwiseWithProgress(res, processChunk) {
  const dummyEventTarget = document.createElement("div"); // why isn't EventTarget constructible? :(

  const lengthComputable = res.headers.has("Content-Length");
  const total = res.headers.get("Content-Length") || 0;
  let loaded = 0;
  
  // Using http://underscorejs.org/#throttle
  const fireProgressThrottled = _.throttle(fireProgress, 50, { trailing: false });

  fireProgress("loadstart");
  pump();
  return dummyEventTarget;
  
  function pump() {
    return res.body.read().then(({ value, done }) => {
      if (done) {
        fireProgress();
        fireProgress("load");
        fireProgress("loadend");
        return;
      }

      fireProgressThrottled();
      processChunk(value);
      
      return pump();
    })
    .catch(() => {
      fireProgress("error");
      fireProgress("loadend");
    });
  }
  
  function fireProgress(name = "progress") {
    dummyEventTarget.dispatchEvent(new ProgressEvent(name, { loaded, total, lengthComputable }));
  }
}

writable-stream-progress.js

function writeToStreamWithProgress(arrayOfChunks, dest) {
  const dummyEventTarget = document.createElement("div"); // why isn't EventTarget constructible? :(

  const total = arrayOfChunks.reduce((soFar, chunk) => soFar + chunk.byteLength, 0);
  let loaded = 0;
  
  // Using http://underscorejs.org/#throttle
  const fireProgressThrottled = _.throttle(fireProgress, 50, { trailing: false });

  fireProgress("loadstart");

  // Stream mechanism will take care of queuing these up and writing them in order for us
  for (const chunk of arrayOfChunks) {
    dest.write(chunk).then(() => {
      loaded += chunk.byteLength;
      fireProgressThrottled();
    });
  }

  dest.closed.then(
    () => {
      fireProgress();
      fireProgress("load");
      fireProgress("loadend");
    },
    () => {
      fireProgress("error");
      fireProgress("loadend");
    }
  );

  return dummyEventTarget;
  
  function fireProgress(name = "progress") {
    dummyEventTarget.dispatchEvent(new ProgressEvent(name, { loaded, total, lengthComputable: true }));
  }
}

Hi Domenic,
Thank you for this great work. But this can only be used for download progress or could it also be used in order to manage upload progress?
Thanks,

Now that EventTarget is constructable & extendable in Chrome, how would you rewrite this? Is creating a new ProgressEvent any different from using new CustomEvent?

function processBodyChunkwiseWithProgress(res, processChunk) {
  const eventTarget = new EventTarget();

  const lengthComputable = res.headers.has("Content-Length");
  const total = res.headers.get("Content-Length") || 0;
  let loaded = 0;
  
  // Using http://underscorejs.org/#throttle
  const fireProgressThrottled = _.throttle(fireProgress, 50, { trailing: false });

  fireProgress("loadstart");
  pump();
  return eventTarget;
  
  function pump() {
    return res.body.read().then(({ value, done }) => {
      if (done) {
        fireProgress();
        fireProgress("load");
        fireProgress("loadend");
        return;
      }

      fireProgressThrottled();
      processChunk(value);
      
      return pump();
    })
    .catch(() => {
      fireProgress("error");
      fireProgress("loadend");
    });
  }
  
  function fireProgress(name = "progress") {
    eventTarget.dispatchEvent(new ProgressEvent(name, { loaded, total, lengthComputable }));
  }
}