stream ReadableStream instances
#51
Conversation
| @@ -238,22 +271,24 @@ export function encode( | |||
| if (Array.isArray(id)) { | |||
| controller.enqueue( | |||
| textEncoder.encode( | |||
| `${TYPE_ERROR}${deferredId}:[["${TYPE_PREVIOUS_RESOLVED}",${id[0]}]]\n` | |||
| `${TYPE_PROMISE}${TYPE_ERROR}${deferredId}:[["${TYPE_PREVIOUS_RESOLVED}",${id[0]}]]\n` | |||
There was a problem hiding this comment.
I did change the existing transport format a bit here - this is not strictly necessary, but this way, we have less of an explosion of types & type cases, and a bit more consistency.
It went from
E5 to PE5 to signal that Promise 5 Errored.
Further down I introduced
TE5 to signal that sTream 5 Errored.
This "combination of characters" is kinda necessary as otherwise I would have to introduce another new signal for "stream done" as well as "stream errored" and re-use a few characters in ways that do not necessarily make sense
So instead, further down I introduce
T5for "new value in sTream 5"TO5for "sTream 5 is dOne"TE5for "sTream 5Errored"
| if (done) { | ||
| controller.enqueue( | ||
| textEncoder.encode( | ||
| `${TYPE_STREAM}${TYPE_DONE}${streamId}:[]\n` |
There was a problem hiding this comment.
| `${TYPE_STREAM}${TYPE_DONE}${streamId}:[]\n` | |
| `${TYPE_STREAM}${TYPE_DONE}${streamId}\n` |
This could be modified like this to save a few characters, but it seemed more consistent that way - I'm very open for input there :)
| const [left, right] = input.tee(); | ||
| input.getReader = left.getReader.bind(left); | ||
| input.cancel = left.cancel.bind(left); | ||
| input.pipeThrough = left.pipeThrough.bind(left); | ||
| input.pipeTo = left.pipeTo.bind(left); | ||
| input.tee = left.tee.bind(left); | ||
| Object.defineProperty(input, "locked", { | ||
| get: () => left.locked, | ||
| }); | ||
| streams[index] = right; |
There was a problem hiding this comment.
This could also be omitted if there were a consensus that encoding is a destructive action - React does so - but I honestly felt a bit more comfortable with this tee approach.
| const [left, right] = input.tee(); | |
| input.getReader = left.getReader.bind(left); | |
| input.cancel = left.cancel.bind(left); | |
| input.pipeThrough = left.pipeThrough.bind(left); | |
| input.pipeTo = left.pipeTo.bind(left); | |
| input.tee = left.tee.bind(left); | |
| Object.defineProperty(input, "locked", { | |
| get: () => left.locked, | |
| }); | |
| streams[index] = right; | |
| streams[index] = input; |
| const inputValue = await inputReader.read(); | ||
| const decodedValue = await decodedReader.read(); |
There was a problem hiding this comment.
These tests currently test the "non-destructive" approach with tee, which makes it possible to still consume the original input stream.
| @@ -88,8 +91,10 @@ async function decodeDeferred( | |||
| const line = read.value; | |||
| switch (line[0]) { | |||
| case TYPE_PROMISE: { | |||
| const isError = line[1] === TYPE_ERROR; | |||
There was a problem hiding this comment.
The case TYPE_ERROR: was extremely similar, and falls into the TYPE_PROMISE case now that I slightly changed the format, so I could delete that second case with a few minor adjustments.
| await decoded.done; | ||
| }); | ||
|
|
||
| test("streams in a stream", async () => { |
|
Okay, I think I'm happy with this. Ready for review/discussion :) |
|
I would love to use this in Remix to use streaming loaders and actions, my use case is running a very slow loader while showing feedback to the user (like percentage completed) |
|
@remorses meanwhile you can use https://github.com/phryneas/promiscade to convert a |
|
Thank you for letting me know! |
|
@phryneas I have a major overhaul coming very soon that will bring support for ReadableStream and AsyncIterable's. Thank you for the PR. I'll let you know when I have that up if you'd like to review it. |
|
v3 is released with support for ReadableStreams |
This allows for
ReadableStreaminstances to be passed through the stream.