Hi All!
I need some help on how to handle backpressure for the ReadableSide of a Transform stream.

For example I am trying to implement a replace text functionality, where I replace a string of text coming from a ReadableStream with text coming from a second Readable stream, so far I couldn't find any example for this using whatwg streams.

This is pseudo code, so for simplicity I'm pretending like the text to replace won't span chunk boundaries

class Transformer {
  async transform(chunk, controller) {
    const foundTextIndex = chunk.indexOf('text to replace');
    
    if (foundTextIndex === -1) {
      controller.enqueue(chunk);
      return;
    }

    // Enqueue text before the part that needs to be replaced
    controller.enqueue(chunk.slice(0, foundTextIndex));
    
    // This is where we do the replacement, we enqueue the text from the second source 
    // this is the part I'm not sure on how to handle, like for example what if we are adding
    // chunks to the readable sides, but it's internal queue is full full
    for await (const chunk of streamForReplacement) {
     controller.enqueue(chunk.slice(0, foundTextIndex));
     console.log(chunk);
   }
   
    // Enqueue text after replacement
    controller.enqueue(chunk.slice(foundTextIndex + 'text to replace'.length));
  }
}

One thing I saw thanks to good old chatGTP was to use Promise.resolve() to wait for the next event loop tick in case the desiredSize was negative.

For example

class Transformer {
  async transform(chunk, controller) {
    const foundTextIndex = chunk.indexOf('text to replace');
    
    if (foundTextIndex === -1) {
      controller.enqueue(chunk);
      return;
    }

    // Enqueue text before the part that needs to be replaced
    controller.enqueue(chunk.slice(0, foundTextIndex));
    
    // Enqueue the text from the second source with backpressure support (maybe)
    for await (const chunk of streamForReplacement) {
     while (controller.desiredSize <= 0) {
       await Promise.resolve(); // wait for next tick to check if we can enqueue more chunks
     }
     controller.enqueue(chunk.slice(0, foundTextIndex));
   }
   
    // Enqueue text after replacement
    controller.enqueue(chunk.slice(foundTextIndex));
  }
}

I'm not sure if doing Promise.resolve(); is valid, as I couldn't find any example dealing with this problem, and I want to know if there are better alternatives? I would really appreciate if someone could help with this and point me in the right direction