### Consuming a ReadableStream with for await...of

Source: https://github.com/whatwg/streams/blob/main/explainers/readable-stream-async-iteration.md

Example demonstrating how to consume a ReadableStream using the for await...of loop.

```APIDOC
## Consuming a ReadableStream with for await...of

### Description

This example shows a more concise way to consume a `ReadableStream` compared to using a `reader.read()` loop.

### Request Example

```javascript
async function getResponseSize(url) {
  const response = await fetch(url);
  let total = 0;
  for await (const chunk of response.body) {
    total += chunk.length;
  }
  return total;
}
```

### Response Example

```javascript
// Returns the total size of the response body in bytes.
// Example: 1024
```
```

--------------------------------

### Create ReadableStream from Push Source

Source: https://context7.com/whatwg/streams/llms.txt

Adapt a push-based data source, like a WebSocket, into a ReadableStream. The start callback handles setting up event listeners for messages, closure, and errors, mapping them to controller methods.

```javascript
function createPushStream(socket) {
  return new ReadableStream({
    start(controller) {
      socket.onmessage = event => controller.enqueue(event.data);
      socket.onclose = () => controller.close();
      socket.onerror = e => controller.error(e);
    },
    cancel() {
      socket.close();
    }
  });
}

```

--------------------------------

### Create ReadableStream with Pull-Based Source

Source: https://context7.com/whatwg/streams/llms.txt

Instantiate a ReadableStream using an underlying source object with start, pull, and cancel callbacks. Configure queuing strategy for backpressure. Use controller.enqueue() to add data, controller.close() when done, and controller.error() on errors.

```javascript
const readableStream = new ReadableStream({
  start(controller) {
    // Called immediately when stream is constructed
    // Use controller.enqueue() to add data
    // Use controller.close() when done
    // Use controller.error() on errors
  },

  pull(controller) {
    // Called when internal queue needs more data
    // Return a promise to signal async completion
    controller.enqueue('chunk of data');
  },

  cancel(reason) {
    // Called when consumer cancels the stream
    console.log('Stream cancelled:', reason);
  }
}, {
  highWaterMark: 3,  // Queue up to 3 chunks before backpressure
  size(chunk) { return 1; }  // Each chunk counts as size 1
});

```

--------------------------------

### Simulate Long-Running Write with Immediate Abort

Source: https://github.com/whatwg/streams/blob/main/explainers/writable-stream-abort-signal.md

This example demonstrates how a long-running write operation (simulated by `setTimeout`) can be immediately aborted using `controller.signal.addEventListener('abort', ...)`. The `reject` function is called with the signal's reason upon abort.

```javascript
const ws = new WritableStream({
  write(controller) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 1000);
      controller.signal.addEventListener(
        'abort',
        () => reject(controller.signal.reason)
      );
    });
  }
});
const writer = ws.getWriter();

writer.write(99);
await writer.abort();
```

--------------------------------

### WebTransport Integration with `WritableStream`

Source: https://github.com/whatwg/streams/blob/main/explainers/writable-stream-abort-signal.md

This example illustrates using a `WritableStream` obtained from `WebTransport` and aborting a write operation. The `writer.abort()` call will send a RESET_STREAM to the server without waiting for the data transmission to complete.

```javascript
const wt = new WebTransport(...);
await wt.ready;
const ws = await wt.createUnidirectionalStream();
// `ws` is a WritableStream.

const reallyBigArrayBuffer = …;
writer.write(reallyBigArrayBuffer);
// Send RESET_STREAM to the server without waiting for `reallyBigArrayBuffer` to
// be transmitted.
await writer.abort();
```

--------------------------------

### Find Data in ReadableStream

Source: https://github.com/whatwg/streams/blob/main/explainers/readable-stream-async-iteration.md

Example of searching for a specific byte within a stream using async iteration, which automatically cancels the stream upon breaking the loop.

```javascript
async function example() {
  const find = 'J';
  const findCode = find.codePointAt(0);
  const response = await fetch('https://html.spec.whatwg.org');
  let bytes = 0;

  for await (const chunk of response.body) {
    const index = chunk.indexOf(findCode);

    if (index != -1) {
      bytes += index;
      console.log(`Found ${find} at byte ${bytes}.`);
      break;
    }

    bytes += chunk.length;
  }
}
```

--------------------------------

### Finding a specific chunk in a stream

Source: https://github.com/whatwg/streams/blob/main/explainers/readable-stream-async-iteration.md

Example of finding a specific byte or chunk within a ReadableStream.

```APIDOC
## Finding a specific chunk or byte in a stream

### Description

This example demonstrates how to efficiently find a specific piece of data within a stream using `for await...of`.

### Request Example

```javascript
async function example() {
  const find = 'J';
  const findCode = find.codePointAt(0);
  const response = await fetch('https://html.spec.whatwg.org');
  let bytes = 0;

  for await (const chunk of response.body) {
    const index = chunk.indexOf(findCode);

    if (index != -1) {
      bytes += index;
      console.log(`Found ${find} at byte ${bytes}.`);
      break;
    }

    bytes += chunk.length;
  }
}
```

### Notes

*   The stream is automatically cancelled when the loop breaks.
*   To prevent automatic cancellation, use `response.body.values({ preventCancel: true })`.
```

--------------------------------

### Get ReadableStream Reader

Source: https://context7.com/whatwg/streams/llms.txt

Acquire a reader to consume data from a stream. The default reader processes chunks as they are, while a BYOB reader is used for byte streams to read directly into provided buffers, optimizing memory usage.

```javascript
// Using a default reader
const reader = readableStream.getReader();

async function readAll() {
  const chunks = [];
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    chunks.push(value);
  }
  return chunks;
}

```

```javascript
// Using a BYOB reader for byte streams
const byteStream = new ReadableStream({
  type: 'bytes',
  async pull(controller) {
    const view = controller.byobRequest.view;
    const bytesRead = await fillBufferFromSource(view);
    controller.byobRequest.respond(bytesRead);
  }
});

const byobReader = byteStream.getReader({ mode: 'byob' });
const buffer = new ArrayBuffer(1024);
const { value, done } = await byobReader.read(new Uint8Array(buffer));
// value is a Uint8Array view into the same memory region

```

--------------------------------

### Pipe Through Streams

Source: https://github.com/whatwg/streams/blob/main/FAQ.md

Demonstrates the relationship between pipeThrough and pipeTo, showing how pipeThrough acts as syntactic sugar for connecting a source to a transform stream and then to a destination.

```javascript
src.pipeThrough(through).pipeTo(dest);
```

```javascript
src.pipeTo(through.writable);
through.readable.pipeTo(dest);
```

--------------------------------

### Creating a Readable Byte Stream with Pull Source

Source: https://github.com/whatwg/streams/blob/main/explainers/byte-streams.md

Creates a readable byte stream that efficiently reads randomly generated data into a developer-supplied buffer. It uses the `pull` method and `autoAllocateChunkSize` for control over buffer allocation.

```javascript
const DEFAULT_CHUNK_SIZE = 1024;

function makeReadableByteStream() {
  return new ReadableStream({
    type: "bytes",

    async pull(controller) {
      // Even when the consumer is using the default reader, the auto-allocation
      // feature allocates a buffer and passes it to us via byobRequest.
      const v = controller.byobRequest.view;
      v = crypto.getRandomValues(v);
      controller.byobRequest.respond(v.byteLength);
    },

    autoAllocateChunkSize: DEFAULT_CHUNK_SIZE
  });
}
```

--------------------------------

### Implement a streaming data pipeline in JavaScript

Source: https://context7.com/whatwg/streams/llms.txt

Fetches, decompresses, parses, filters, and stores data using a series of pipeThrough and pipeTo operations.

```javascript
// Fetch, decompress, parse, filter, and store data
async function processRemoteData(url, storage) {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  // Build processing pipeline
  await response.body
    .pipeThrough(new DecompressionStream('gzip'))
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(splitStream('\n'))
    .pipeThrough(new TransformStream({
      transform(line, controller) {
        if (line.trim()) {
          try {
            controller.enqueue(JSON.parse(line));
          } catch (e) {
            console.warn('Invalid JSON:', line);
          }
        }
      }
    }))
    .pipeThrough(new TransformStream({
      transform(obj, controller) {
        if (obj.status === 'active') {
          controller.enqueue(obj);
        }
      }
    }))
    .pipeTo(new WritableStream({
      async write(record) {
        await storage.put(record.id, record);
      }
    }));

  console.log('Processing complete');
}
```

--------------------------------

### Create WritableStream

Source: https://context7.com/whatwg/streams/llms.txt

Initializes a writable stream with an underlying sink. The sink defines lifecycle methods for writing, closing, and aborting.

```javascript
// Create a writable stream
const writableStream = new WritableStream({
  start(controller) {
    // Initialize resources
    // controller.error() to signal errors
  },

  write(chunk, controller) {
    // Process each written chunk
    // Return a promise to signal backpressure
    console.log('Writing:', chunk);
    return sendToServer(chunk);
  },

  close() {
    // Clean up when stream closes normally
    console.log('Stream closed');
  },

  abort(reason) {
    // Handle abrupt termination
    console.log('Stream aborted:', reason);
  }
}, {
  highWaterMark: 5,  // Buffer up to 5 chunks
  size(chunk) { return chunk.length; }  // Size based on chunk length
});

// Get a writer and write data
const writer = writableStream.getWriter();
await writer.write('Hello');
await writer.write('World');
await writer.close();
```

--------------------------------

### Configure Queuing Strategies

Source: https://context7.com/whatwg/streams/llms.txt

Defines backpressure behavior using built-in or custom strategies. High water marks determine when the stream signals backpressure.

```javascript
// Count-based strategy (count chunks)
const countStrategy = new CountQueuingStrategy({ highWaterMark: 10 });

// Byte-length strategy (measure bytes)
const byteStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 65536 });

// Custom strategy
const customStrategy = {
  highWaterMark: 100,
  size(chunk) {
    return chunk.items ? chunk.items.length : 1;
  }
};

// Apply to streams
const stream = new ReadableStream(underlyingSource, countStrategy);
const writable = new WritableStream(underlyingSink, byteStrategy);
const transform = new TransformStream(transformer,
  customStrategy,  // writable strategy
  countStrategy    // readable strategy
);
```

--------------------------------

### Implement Readable Byte Stream with BYOB Reader

Source: https://context7.com/whatwg/streams/llms.txt

Uses a ReadableStream with type 'bytes' to support zero-copy reads. Requires a source that can write directly into provided buffers.

```javascript
// Create a readable byte stream
const byteStream = new ReadableStream({
  type: 'bytes',

  async pull(controller) {
    // Use byobRequest when available (BYOB reader)
    if (controller.byobRequest) {
      const view = controller.byobRequest.view;
      const bytesRead = await readFromSource(view);
      controller.byobRequest.respond(bytesRead);
    } else {
      // Default reader - allocate buffer
      const chunk = new Uint8Array(1024);
      const bytesRead = await readFromSource(chunk);
      controller.enqueue(chunk.subarray(0, bytesRead));
    }
  },

  autoAllocateChunkSize: 1024  // Auto-allocate for default readers
});

// Read with BYOB reader for memory efficiency
const reader = byteStream.getReader({ mode: 'byob' });
let buffer = new Uint8Array(4096);
let offset = 0;

while (offset < buffer.length) {
  const { value, done } = await reader.read(
    new Uint8Array(buffer.buffer, offset, buffer.length - offset)
  );
  if (done) break;
  buffer = new Uint8Array(value.buffer);  // Buffer may be transferred
  offset += value.byteLength;
}
```

--------------------------------

### WritableStreamDefaultWriter Usage

Source: https://context7.com/whatwg/streams/llms.txt

Provides methods for writing, closing, and aborting, plus properties for monitoring stream state and backpressure. Use writer.ready to check if the stream is ready for more writes.

```javascript
const writer = writableStream.getWriter();

// Check if ready for more writes (backpressure handling)
await writer.ready;
console.log('Desired size:', writer.desiredSize);

// Write chunks
await writer.write({ id: 1, data: 'chunk1' });
await writer.write({ id: 2, data: 'chunk2' });

// Close the stream
await writer.close();

// Or abort on error
// await writer.abort(new Error('Something went wrong'));

// Wait for stream to fully close
await writer.closed;
console.log('Writer closed');

// Release lock to allow other writers
writer.releaseLock();
```

--------------------------------

### Update Web Platform Tests Submodule

Source: https://github.com/whatwg/streams/blob/main/reference-implementation/README.md

Updates the local web-platform-tests submodule to the latest remote version.

```bash
git submodule update --remote web-platform-tests
```

--------------------------------

### TransformStreamDefaultController - Enqueue and Backpressure

Source: https://context7.com/whatwg/streams/llms.txt

Demonstrates using TransformStreamDefaultController to enqueue transformed chunks and check for backpressure. The desiredSize property indicates how much more data the stream can accept.

```javascript
const filterTransform = new TransformStream({
  transform(chunk, controller) {
    // Enqueue chunks that pass the filter
    if (chunk.isValid) {
      controller.enqueue(chunk);
    }

    // Check backpressure
    console.log('Desired size:', controller.desiredSize);
  }
});
```

--------------------------------

### Split ReadableStream with tee()

Source: https://context7.com/whatwg/streams/llms.txt

Creates two independent branches from a single stream. Backpressure from either branch affects the source stream.

```javascript
// Tee the stream for parallel processing
const [branch1, branch2] = readableStream.tee();

// Process both branches independently
await Promise.all([
  branch1.pipeTo(cacheWritableStream),
  branch2.pipeTo(networkUploadStream)
]);
console.log('Saved to cache and uploaded!');

// Example: Log data while passing through
function logThroughStream(stream) {
  const [forLog, forOutput] = stream.tee();

  (async () => {
    for await (const chunk of forLog) {
      console.log('Chunk:', chunk);
    }
  })();

  return forOutput;
}
```

--------------------------------

### Implement an Owning TransformStream for VideoFrames

Source: https://github.com/whatwg/streams/blob/main/explainers/streams-for-raw-video.md

Demonstrates using the 'owning' type in a TransformStream to transfer VideoFrame ownership during enqueue operations, ensuring proper closure and preventing concurrent mutation.

```javascript
function doBackgroundBlurOnVideoFrames(videoFrameStream, doLogging)
{
  // JavaScript custom transform.
  let frameCount = 0;
  const frameCountTransform = new TransformStream({
    transform: async (videoFrame, controller) => {
      try {
        // videoFrame is under the responsibility of the script and must be closed when no longer needed.
        controller.enqueue(videoFrame, { transfer: [videoFrame] });
        // controller.enqueue was called, videoFrame is transferred.
        if (!(++frameCount % 30) && doLogging)
            doLogging(frameCount);
      } catch (e) {
        // In case of exception, let's make sure videoFrame is closed. This is a no-op if videoFrame was previously transferred.
        videoFrame.close();
        // If exception is unrecoverable, let's error the pipe.
        controller.error(e);
      }
    },
    readableType: 'owning',
    writableType: 'owning'
  });
  // Native transform is of type 'owning'
  const backgroundBlurTransform = new BackgroundBlurTransform();

  return videoFrameStream.pipeThrough(backgroundBlurTransform)
                         .pipeThrough(frameCountTransform);
}
```

--------------------------------

### ReadableStream Constructor

Source: https://context7.com/whatwg/streams/llms.txt

Creates a new readable stream that wraps an underlying data source, supporting both pull-based and push-based data flows.

```APIDOC
## ReadableStream Constructor

### Description
Creates a new readable stream that wraps an underlying data source. The underlying source object defines callbacks for starting the stream, pulling data, and handling cancellation.

### Parameters
- **underlyingSource** (Object) - Required - Defines callbacks: start(controller), pull(controller), and cancel(reason).
- **queuingStrategy** (Object) - Optional - Controls backpressure behavior with highWaterMark and size properties.

### Request Example
const readableStream = new ReadableStream({
  start(controller) { /* ... */ },
  pull(controller) { controller.enqueue('data'); },
  cancel(reason) { /* ... */ }
}, { highWaterMark: 3 });
```

--------------------------------

### Consume ReadableStream with for await...of

Source: https://github.com/whatwg/streams/blob/main/explainers/readable-stream-async-iteration.md

Simplified stream consumption using the async iterable protocol.

```javascript
async function getResponseSize(url) {
  const response = await fetch(url);
  let total = 0;
  for await (const chunk of response) {
    total += chunk.length;
  }
  return total;
}
```

--------------------------------

### Consume ReadableStream with getReader

Source: https://github.com/whatwg/streams/blob/main/explainers/readable-stream-async-iteration.md

Traditional method of consuming a stream by manually acquiring a reader and calling read() in a loop.

```javascript
async function getResponseSize(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  let total = 0;

  while (true) {
    const {done, value} = await reader.read();
    if (done) return total;
    total += value.length;
  }
}
```

--------------------------------

### Fetch and Stream to DOM

Source: https://github.com/whatwg/streams/blob/main/demos/streaming-element-backpressure.html

Fetches a resource and pipes its body through a TextDecoderStream directly to the writable stream of a target DOM element. This method is suitable for streaming large amounts of text data efficiently.

```javascript
async function fetchDirectlyIntoDOM() {
  const response = await fetch('data/commits.include', {
    mode: 'same-origin',
    headers: {
      'Cache-Control': 'no-cache, no-store'
    }
  });
  await response.body
    .pipeThrough(new TextDecoderStream())
    .pipeTo(targetDiv.writable);
}
```

--------------------------------

### Enable Diagnostic Logging

Source: https://github.com/whatwg/streams/blob/main/reference-implementation/README.md

Enables debug output for streams-related modules during test execution.

```bash
DEBUG=streams:* npm test
```

--------------------------------

### Implement WritableStream for DOM appending

Source: https://github.com/whatwg/streams/blob/main/demos/append-child.html

Creates a WritableStream that appends incoming DOM elements to a specified parent node.

```javascript
function appendChildWritableStream(parentNode) {
  return new WritableStream({
    write(chunk) {
      parentNode.appendChild(chunk);
    }
  });
}
```

--------------------------------

### ReadableStream.tee()

Source: https://context7.com/whatwg/streams/llms.txt

Splits a readable stream into two independent branches. Both branches receive the same data, and backpressure from either branch propagates to the source.

```APIDOC
## ReadableStream.tee()

### Description
Splits a readable stream into two independent branches that can be consumed separately. Both branches receive the same data, and backpressure from either branch propagates to the source.

### Method
`tee`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Tee the stream for parallel processing
const [branch1, branch2] = readableStream.tee();

// Process both branches independently
await Promise.all([
  branch1.pipeTo(cacheWritableStream),
  branch2.pipeTo(networkUploadStream)
]);
console.log('Saved to cache and uploaded!');

// Example: Log data while passing through
function logThroughStream(stream) {
  const [forLog, forOutput] = stream.tee();

  (async () => {
    for await (const chunk of forLog) {
      console.log('Chunk:', chunk);
    }
  })();

  return forOutput;
}
```

### Response
#### Success Response (Array of ReadableStreams)
Returns an array containing two independent ReadableStream instances.

#### Response Example
`[readableStream1, readableStream2]`

#### Error Response
(Errors are propagated through the stream branches)
```

--------------------------------

### Fetch and process JSON stream to DOM

Source: https://github.com/whatwg/streams/blob/main/demos/append-child.html

Fetches a JSON file and pipes the stream through decoders and transformers to populate a table.

```javascript
async function fetchThenJSONToDOM() {
  const jsonToElementTransform = new TransformStream({
    transform(chunk, controller) {
      const tr = document.createElement('tr');
      for (const cell of FIELDS_LOWERCASE) {
        const td = document.createElement('td');
        td.textContent = chunk[cell];
        tr.appendChild(td);
      }
      controller.enqueue(tr);
    }
  });

  const response = await fetch('data/commits.json', {
    mode: 'same-origin',
    headers: {
      'Cache-Control': 'no-cache, no-store'
    }
  });
  const table = createTable(targetDiv);
  return response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(splitStream('\n'))
    .pipeThrough(parseJSON())
    .pipeThrough(jsonToElementTransform)
    .pipeTo(appendChildWritableStream(table));
}
```

--------------------------------

### ReadableStream.pipeTo()

Source: https://context7.com/whatwg/streams/llms.txt

Pipes the readable stream to a writable stream, managing backpressure automatically. Returns a promise that resolves upon successful completion or rejects on error.

```APIDOC
## ReadableStream.pipeTo()

### Description
Pipes the readable stream to a writable stream, handling backpressure automatically. Returns a promise that resolves when piping completes successfully or rejects on error.

### Method
`pipeTo`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Basic pipe to writable stream
await readableStream.pipeTo(writableStream);
console.log('All data transferred!');

// Pipe with options
const controller = new AbortController();

readableStream.pipeTo(writableStream, {
  preventClose: false,   // Close destination when source closes
  preventAbort: false,   // Abort destination on source error
  preventCancel: false,  // Cancel source on destination error
  signal: controller.signal  // Allow aborting the pipe
}).then(
  () => console.log('Pipe completed'),
  e => console.error('Pipe failed:', e)
);

// Abort the pipe after 5 seconds
setTimeout(() => controller.abort(), 5000);
```

### Response
#### Success Response (Promise resolves)
Indicates that the piping operation has completed successfully.

#### Response Example
(No specific response body, promise resolution indicates success)

#### Error Response (Promise rejects)
Rejects with an error if the piping operation fails.
```

--------------------------------

### ReadableStream.from() Static Method

Source: https://context7.com/whatwg/streams/llms.txt

Creates a ReadableStream from any iterable or async iterable, such as arrays or generators.

```APIDOC
## ReadableStream.from()

### Description
Creates a ReadableStream from any iterable or async iterable, providing a convenient way to adapt existing data sources into streams.

### Parameters
- **iterable** (Iterable|AsyncIterable) - Required - The data source to convert into a stream.

### Request Example
const arrayStream = ReadableStream.from(['a', 'b', 'c']);
```

--------------------------------

### WritableStream Constructor

Source: https://context7.com/whatwg/streams/llms.txt

Creates a new writable stream that wraps an underlying data sink. The sink object defines callbacks for stream lifecycle events.

```APIDOC
## WritableStream Constructor

### Description
Creates a new writable stream that wraps an underlying data sink. The underlying sink object defines callbacks for starting, writing chunks, closing, and aborting.

### Method
`new WritableStream(underlyingSink, strategy)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Create a writable stream
const writableStream = new WritableStream({
  start(controller) {
    // Initialize resources
    // controller.error() to signal errors
  },

  write(chunk, controller) {
    // Process each written chunk
    // Return a promise to signal backpressure
    console.log('Writing:', chunk);
    return sendToServer(chunk);
  },

  close() {
    // Clean up when stream closes normally
    console.log('Stream closed');
  },

  abort(reason) {
    // Handle abrupt termination
    console.log('Stream aborted:', reason);
  }
}, {
  highWaterMark: 5,  // Buffer up to 5 chunks
  size(chunk) { return chunk.length; }  // Size based on chunk length
});

// Get a writer and write data
const writer = writableStream.getWriter();
await writer.write('Hello');
await writer.write('World');
await writer.close();
```

### Response
#### Success Response (WritableStream)
Returns a new WritableStream instance.

#### Response Example
(Returns a WritableStream object)

#### Error Response
(Errors during construction or operation are handled via the sink's abort/error callbacks)
```

--------------------------------

### Pipe ReadableStream to WritableStream

Source: https://context7.com/whatwg/streams/llms.txt

Pipes data to a destination stream with automatic backpressure handling. Options allow for fine-grained control over closing, aborting, and cancellation behavior.

```javascript
// Basic pipe to writable stream
await readableStream.pipeTo(writableStream);
console.log('All data transferred!');

// Pipe with options
const controller = new AbortController();

readableStream.pipeTo(writableStream, {
  preventClose: false,   // Close destination when source closes
  preventAbort: false,   // Abort destination on source error
  preventCancel: false,  // Cancel source on destination error
  signal: controller.signal  // Allow aborting the pipe
}).then(
  () => console.log('Pipe completed'),
  e => console.error('Pipe failed:', e)
);

// Abort the pipe after 5 seconds
setTimeout(() => controller.abort(), 5000);
```

--------------------------------

### Transfer Streams via postMessage

Source: https://context7.com/whatwg/streams/llms.txt

Enables moving stream ownership between workers or frames. The original stream becomes locked and unusable after transfer.

```javascript
// Main thread: Transfer readable stream to worker
const worker = new Worker('processor.js');
const stream = await fetch('/data').then(r => r.body);

worker.postMessage({ stream }, { transfer: [stream] });
// stream is now locked and unusable in main thread

// Worker (processor.js): Receive and process stream
self.onmessage = async (event) => {
  const { stream } = event.data;

  for await (const chunk of stream) {
    // Process in worker
    const result = await heavyProcessing(chunk);
    self.postMessage({ result });
  }
};

// Transfer transform stream to another frame
const transform = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(process(chunk));
  }
});

iframe.contentWindow.postMessage({ transform }, '*', [transform]);
```

--------------------------------

### Abort Fetch Request with `AbortSignal`

Source: https://github.com/whatwg/streams/blob/main/explainers/writable-stream-abort-signal.md

This snippet shows how to integrate `controller.signal` with the Fetch API to abort an ongoing POST request when the stream is aborted. The `signal` option is passed directly to the `fetch` call.

```javascript
const endpoint = 'https://endpoint/api';
const ws = new WritableStream({
  async write(controller, chunk) {
    const response = await fetch(endpoint, { signal: controller.signal,
                                             method: 'POST',
                                             body: chunk });
    await response.text();
  }
});
const writer = ws.getWriter();

writer.write('some data');
await writer.abort();
```

--------------------------------

### Transfer a ReadableStream to a Worker

Source: https://github.com/whatwg/streams/blob/main/explainers/transferable-streams.md

In the main page, create a ReadableStream and transfer it to a web worker using postMessage(). The stream is locked after transfer.

```javascript
const rs = new ReadableStream({
  start(controller) {
    controller.enqueue('hello');
  }
});
const w = new Worker('worker.js');
w.postMessage(rs, [rs]);
```

--------------------------------

### ReadableStream.getReader() Method

Source: https://context7.com/whatwg/streams/llms.txt

Acquires a reader to consume data from the stream, supporting default or BYOB (bring-your-own-buffer) modes.

```APIDOC
## ReadableStream.getReader()

### Description
Acquires a reader to consume data from the stream. The default reader returns chunks as-is, while a BYOB reader allows reading directly into provided buffers.

### Parameters
- **options** (Object) - Optional - Configuration object, e.g., { mode: 'byob' }.

### Response
- **reader** (ReadableStreamDefaultReader|ReadableStreamBYOBReader) - The reader instance used to consume the stream.
```

--------------------------------

### ReadableStream Async Iteration

Source: https://context7.com/whatwg/streams/llms.txt

Consumes readable stream data conveniently using for-await-of loops. The stream is automatically cancelled upon loop exit unless `preventCancel` is set.

```APIDOC
## ReadableStream Async Iteration

### Description
ReadableStreams support async iteration using for-await-of loops, providing a convenient way to consume stream data.

### Method
Async Iteration (`for await...of`)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Basic async iteration
for await (const chunk of readableStream) {
  console.log('Received chunk:', chunk);
}
// Stream is automatically cancelled when loop exits

// Prevent cancellation on early exit
for await (const chunk of readableStream.values({ preventCancel: true })) {
  if (chunk === 'stop') break;  // Stream not cancelled
}

// Process stream with error handling
try {
  for await (const chunk of readableStream) {
    await processChunk(chunk);
  }
  console.log('Stream completed');
} catch (error) {
  console.error('Stream error:', error);
}
```

### Response
#### Success Response (Chunks of data)
Iterates over chunks of data available in the stream.

#### Response Example
(Each iteration yields a chunk of data)

#### Error Response
Rejects with an error if the stream encounters an error during iteration.
```

--------------------------------

### Stream data into DOM element

Source: https://github.com/whatwg/streams/blob/main/demos/streaming-element.html

Uses the Fetch API to retrieve data and pipes the response body through a TextDecoderStream into a writable DOM element.

```javascript
'use strict'; const loadButton = document.querySelector('#load'); const resetButton = document.querySelector('#reset'); const targetDiv = document.querySelector('#target'); // BEGIN SOURCE TO VIEW async function streamDirectlyIntoDOM() { const response = await fetch('data/commits.include', { mode: 'same-origin', headers: { 'Cache-Control': 'no-cache, no-store' } }); await response.body .pipeThrough(new TextDecoderStream()) .pipeTo(targetDiv.writable); } loadButton.onclick = () => { loadButton.disabled = true; streamDirectlyIntoDOM(); }; // END SOURCE TO VIEW resetButton.onclick = () => { targetDiv.reset(); loadButton.disabled = false; };
```

--------------------------------

### Pipe Readable Streams to Writable Streams

Source: https://github.com/whatwg/streams/blob/main/Requirements.md

Consumes data by piping a readable stream directly into a writable stream to minimize memory usage.

```js
fs.createReadStream("source.txt")
    .pipeTo(fs.createWriteStream("dest.txt"));

https.get("https://example.com")
    .pipeTo(fs.createWriteStream("dest.txt"));
```

--------------------------------

### TransformStreamDefaultController - Termination

Source: https://context7.com/whatwg/streams/llms.txt

Illustrates using TransformStreamDefaultController to terminate the stream early. controller.terminate() closes the readable side and errors the writable side.

```javascript
const terminatingTransform = new TransformStream({
  transform(chunk, controller) {
    if (chunk === 'END') {
      controller.terminate();  // Close readable, error writable
      return;
    }
    controller.enqueue(chunk);
  }
});
```

--------------------------------

### Reading Bytes into a Memory Buffer

Source: https://github.com/whatwg/streams/blob/main/explainers/byte-streams.md

Reads the first 1024 bytes from a stream into a single memory buffer using a BYOB reader. This method allows precise buffer allocation to avoid copies and detaches the original buffer after reading.

```javascript
const reader = readableStream.getReader({ mode: "byob" });

let startingAB = new ArrayBuffer(1024);
const buffer = await readInto(startingAB);
console.log("The first 1024 bytes: ", buffer);

async function readInto(buffer) {
  let offset = 0;

  while (offset < buffer.byteLength) {
    const {value: view, done} =
     await reader.read(new Uint8Array(buffer, offset, buffer.byteLength - offset));
    buffer = view.buffer;
    if (done) {
      break;
    }
    offset += view.byteLength;
  }

  return buffer;
}
```

--------------------------------

### Create ReadableStream from Iterable

Source: https://context7.com/whatwg/streams/llms.txt

Conveniently create a ReadableStream from any iterable or async iterable, such as arrays or generators. This simplifies adapting existing data structures into stream formats.

```javascript
// Create stream from an array
const arrayStream = ReadableStream.from(['a', 'b', 'c']);

// Create stream from an async generator
async function* generateData() {
  for (let i = 0; i < 5; i++) {
    await new Promise(r => setTimeout(r, 100));
    yield { id: i, timestamp: Date.now() };
  }
}
const asyncStream = ReadableStream.from(generateData());

// Read from the created stream
const reader = asyncStream.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log('Received:', value);
}

```

--------------------------------

### ReadableStream.pipeThrough()

Source: https://context7.com/whatwg/streams/llms.txt

Pipes the readable stream through a transform stream, returning the readable side for chaining. This enables composable stream processing pipelines.

```APIDOC
## ReadableStream.pipeThrough()

### Description
Pipes the readable stream through a transform stream (or any object with readable and writable properties), returning the readable side for chaining. This enables composable stream processing pipelines.

### Method
`pipeThrough`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Pipe through a transform stream
const outputStream = inputStream
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(chunk.toUpperCase());
    }
  }));

// Example: Decompress and parse JSON pipeline
const jsonObjects = httpResponseBody
  .pipeThrough(new DecompressionStream('gzip'))
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(splitByLine())
  .pipeThrough(parseJSON());

// Read from the transformed stream
for await (const obj of jsonObjects) {
  console.log('Parsed object:', obj);
}
```

### Response
#### Success Response (ReadableStream)
Returns the readable side of the transform stream, allowing for further chaining.

#### Response Example
(Returns a ReadableStream object)

#### Error Response
(Errors are propagated through the stream pipeline)
```

--------------------------------

### Async TransformStream

Source: https://context7.com/whatwg/streams/llms.txt

Demonstrates an asynchronous transformation within a TransformStream. The transform method can be an async function to handle operations like network requests.

```javascript
// Async transform
const asyncTransform = new TransformStream({
  async transform(chunk, controller) {
    const result = await processAsync(chunk);
    controller.enqueue(result);
  }
});
```

--------------------------------

### ReadableStream Async Iterable Protocol

Source: https://github.com/whatwg/streams/blob/main/explainers/readable-stream-async-iteration.md

This section details the methods added to ReadableStream to support the async iterable protocol.

```APIDOC
## ReadableStream Async Iterable Protocol

### Description

Adds support for the async iterable protocol to `ReadableStream`, enabling its use in `for await...of` loops.

### Methods

*   **`ReadableStream.prototype.values({ preventCancel = false } = {})`**
    *   Returns an `AsyncIterator` object that locks the stream.
    *   `iterator.next()`: Reads the next chunk from the stream. Releases the lock if the stream closes or errors.
    *   `iterator.return(arg)`: Releases the lock. If `preventCancel` is false, cancels the stream with `arg` as the reason.

*   **`ReadableStream.prototype[Symbol.asyncIterator]()`**
    *   Equivalent to `values()`. Makes `ReadableStream` adhere to the ECMAScript AsyncIterable protocol.
```

--------------------------------

### Consume ReadableStream via Async Iteration

Source: https://context7.com/whatwg/streams/llms.txt

Uses for-await-of loops to consume stream data. Note that the stream is automatically cancelled when the loop exits unless specified otherwise.

```javascript
// Basic async iteration
for await (const chunk of readableStream) {
  console.log('Received chunk:', chunk);
}
// Stream is automatically cancelled when loop exits

// Prevent cancellation on early exit
for await (const chunk of readableStream.values({ preventCancel: true })) {
  if (chunk === 'stop') break;  // Stream not cancelled
}

// Process stream with error handling
try {
  for await (const chunk of readableStream) {
    await processChunk(chunk);
  }
  console.log('Stream completed');
} catch (error) {
  console.error('Stream error:', error);
}
```

--------------------------------

### Transform Streams via Pipe Chain

Source: https://github.com/whatwg/streams/blob/main/Requirements.md

Uses pipeThrough to process data through transform streams before reaching the final writable destination.

```js
fs.createReadStream("source.zip")
    .pipeThrough(zlib.createGzipDecompressor(options))
    .pipeTo(fs.createWriteStream("dest/"));

fs.createReadStream("index.html")
    .pipeThrough(zlib.createGzipCompressor(options))
    .pipeTo(httpServerResponse);

https.get("https://example.com/video.mp4")
    .pipeThrough(videoProcessingWebWorker)
    .pipeTo(document.query("video"));

fs.createReadStream("source.txt")
    .pipeThrough(new StringDecoder("utf-8"))
    .pipeThrough(database1.queryExecutor)
    .pipeTo(database2.tableWriter("table"));
```

--------------------------------

### Receive and Read a Transferred Stream in a Worker

Source: https://github.com/whatwg/streams/blob/main/explainers/transferable-streams.md

In worker.js, receive the transferred ReadableStream via postMessage() and read its data. The 'hello' value is logged.

```javascript
onmessage = async (evt) => {
  const rs = evt.data;
  const reader = rs.getReader();
  const {value, done} = await reader.read();
  console.log(value); // logs 'hello'.
};
```

--------------------------------

### Define ReadableStream Async Iterable

Source: https://github.com/whatwg/streams/blob/main/explainers/readable-stream-async-iteration.md

Web IDL definition for the async iterable interface added to ReadableStream.

```webidl
interface ReadableStream {
  async iterable<any>(optional ReadableStreamIteratorOptions options = {});
};

dictionary ReadableStreamIteratorOptions {
  boolean preventCancel = false;
};
```

--------------------------------

### TransformStreamDefaultController - Error Handling

Source: https://context7.com/whatwg/streams/llms.txt

Shows how to use TransformStreamDefaultController to signal errors. Calling controller.error(e) will error both the readable and writable sides of the stream.

```javascript
const errorHandlingTransform = new TransformStream({
  transform(chunk, controller) {
    try {
      const result = riskyOperation(chunk);
      controller.enqueue(result);
    } catch (e) {
      controller.error(e);  // Error both sides
    }
  }
});
```

--------------------------------

### Handle Readable Stream Cancellation

Source: https://github.com/whatwg/streams/blob/main/FAQ.md

Use the promise returned by cancel() to monitor the success or failure of a stream cancellation request.

```javascript
readableStream.cancel().then(
    () => console.log("Cancellation successful!"),
    err => console.error("Cancellation failed!", err)
);
```

--------------------------------

### Pipe ReadableStream through TransformStream

Source: https://context7.com/whatwg/streams/llms.txt

Enables composable stream processing by piping through transform streams. Returns a readable stream for further chaining.

```javascript
// Pipe through a transform stream
const outputStream = inputStream
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(chunk.toUpperCase());
    }
  }));

// Example: Decompress and parse JSON pipeline
const jsonObjects = httpResponseBody
  .pipeThrough(new DecompressionStream('gzip'))
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(splitByLine())
  .pipeThrough(parseJSON());

// Read from the transformed stream
for await (const obj of jsonObjects) {
  console.log('Parsed object:', obj);
}
```

--------------------------------

### Basic TransformStream

Source: https://context7.com/whatwg/streams/llms.txt

Creates a transform stream that modifies data as it passes through. The transformer object defines the transformation logic using the transform method.

```javascript
const uppercaseTransform = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk.toUpperCase());
  }
});
```

--------------------------------

### Identity Transform Stream

Source: https://context7.com/whatwg/streams/llms.txt

An identity transform stream passes data through unchanged. It can be used for buffering or stream synchronization. It can be created with or without a transformer argument.

```javascript
// Create identity transform (no transformer argument)
const identity = new TransformStream();

// Or explicit identity
const explicitIdentity = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk);
  }
});

// Use case: Create a write-then-read buffer
const { readable, writable } = new TransformStream();

// Write from one source
sourceStream.pipeTo(writable);

// Read from another consumer
readable.pipeTo(destinationStream);
```

--------------------------------

### TransformStream for Text Splitting

Source: https://context7.com/whatwg/streams/llms.txt

A factory function that creates a TransformStream to split incoming data based on a specified delimiter. This is useful for processing line-based protocols or delimited data.

```javascript
function splitStream(delimiter) {
  let buffer = '';

  return new TransformStream({
    transform(chunk, controller) {
      buffer += chunk;
      const parts = buffer.split(delimiter);
      buffer = parts.pop();  // Save incomplete part
      parts.forEach(part => controller.enqueue(part));
    },

    flush(controller) {
      if (buffer) {
        controller.enqueue(buffer);
      }
    }
  });
}

// Usage: Split by newlines
const lines = textStream.pipeThrough(splitStream('\n'));

// Usage: Split CSV rows
const csvRows = csvStream.pipeThrough(splitStream('\n'));
```

--------------------------------

### TransformStream with Flush Logic

Source: https://context7.com/whatwg/streams/llms.txt

A TransformStream that buffers incoming chunks and flushes any remaining data when the stream is closed. The flush method is called when the writable side of the stream closes.

```javascript
// Transform with flush (called when writable closes)
const lineBuffer = new TransformStream({
  buffer: '',

  transform(chunk, controller) {
    this.buffer += chunk;
    const lines = this.buffer.split('\n');
    this.buffer = lines.pop();  // Keep incomplete line
    lines.forEach(line => controller.enqueue(line));
  },

  flush(controller) {
    if (this.buffer) {
      controller.enqueue(this.buffer);  // Emit remaining data
    }
  }
});
```

--------------------------------

### TransformStream for JSON Parsing

Source: https://context7.com/whatwg/streams/llms.txt

A TransformStream factory function that parses incoming JSON strings into JavaScript objects. This is useful for processing formats like newline-delimited JSON (NDJSON).

```javascript
function parseJSON() {
  return new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(JSON.parse(chunk));
    }
  });
}

// Usage: Parse NDJSON (newline-delimited JSON)
const jsonStream = textStream
  .pipeThrough(splitByNewline())
  .pipeThrough(parseJSON());

for await (const obj of jsonStream) {
  console.log('Parsed:', obj);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.