Skip to content

Commit

Permalink
[Flight] Rename Chunk constructor to ReactPromise (#30747)
Browse files Browse the repository at this point in the history
When printing these in DevTools they show up as the name of the
constructor so then you pass a Promise to the client it logs as "Chunk"
which is confusing.

Ideally we'd probably just name this Promise but 1) there's a slight
difference in the .then method atm 2) it's a bit tricky to name a
variable and get it from the global in the same scope. Closure compiler
doesn't let us just name a function because it removes it and just uses
the variable name.
  • Loading branch information
sebmarkbage authored Aug 19, 2024
1 parent 9d082b5 commit 591adfa
Showing 1 changed file with 24 additions and 14 deletions.
38 changes: 24 additions & 14 deletions packages/react-client/src/ReactFlightClient.js
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,12 @@ type SomeChunk<T> =
| ErroredChunk<T>;

// $FlowFixMe[missing-this-annot]
function Chunk(status: any, value: any, reason: any, response: Response) {
function ReactPromise(
status: any,
value: any,
reason: any,
response: Response,
) {
this.status = status;
this.value = value;
this.reason = reason;
Expand All @@ -201,9 +206,9 @@ function Chunk(status: any, value: any, reason: any, response: Response) {
}
}
// We subclass Promise.prototype so that we get other methods like .catch
Chunk.prototype = (Object.create(Promise.prototype): any);
ReactPromise.prototype = (Object.create(Promise.prototype): any);
// TODO: This doesn't return a new Promise chain unlike the real .then
Chunk.prototype.then = function <T>(
ReactPromise.prototype.then = function <T>(
this: SomeChunk<T>,
resolve: (value: T) => mixed,
reject?: (reason: mixed) => mixed,
Expand Down Expand Up @@ -304,20 +309,20 @@ export function getRoot<T>(response: Response): Thenable<T> {

function createPendingChunk<T>(response: Response): PendingChunk<T> {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(PENDING, null, null, response);
return new ReactPromise(PENDING, null, null, response);
}

function createBlockedChunk<T>(response: Response): BlockedChunk<T> {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(BLOCKED, null, null, response);
return new ReactPromise(BLOCKED, null, null, response);
}

function createErrorChunk<T>(
response: Response,
error: Error | Postpone,
): ErroredChunk<T> {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(ERRORED, null, error, response);
return new ReactPromise(ERRORED, null, error, response);
}

function wakeChunk<T>(listeners: Array<(T) => mixed>, value: T): void {
Expand Down Expand Up @@ -391,31 +396,31 @@ function createResolvedModelChunk<T>(
value: UninitializedModel,
): ResolvedModelChunk<T> {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(RESOLVED_MODEL, value, null, response);
return new ReactPromise(RESOLVED_MODEL, value, null, response);
}

function createResolvedModuleChunk<T>(
response: Response,
value: ClientReference<T>,
): ResolvedModuleChunk<T> {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(RESOLVED_MODULE, value, null, response);
return new ReactPromise(RESOLVED_MODULE, value, null, response);
}

function createInitializedTextChunk(
response: Response,
value: string,
): InitializedChunk<string> {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(INITIALIZED, value, null, response);
return new ReactPromise(INITIALIZED, value, null, response);
}

function createInitializedBufferChunk(
response: Response,
value: $ArrayBufferView | ArrayBuffer,
): InitializedChunk<Uint8Array> {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(INITIALIZED, value, null, response);
return new ReactPromise(INITIALIZED, value, null, response);
}

function createInitializedIteratorResultChunk<T>(
Expand All @@ -424,7 +429,12 @@ function createInitializedIteratorResultChunk<T>(
done: boolean,
): InitializedChunk<IteratorResult<T, T>> {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(INITIALIZED, {done: done, value: value}, null, response);
return new ReactPromise(
INITIALIZED,
{done: done, value: value},
null,
response,
);
}

function createInitializedStreamChunk<
Expand All @@ -437,7 +447,7 @@ function createInitializedStreamChunk<
// We use the reason field to stash the controller since we already have that
// field. It's a bit of a hack but efficient.
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(INITIALIZED, value, controller, response);
return new ReactPromise(INITIALIZED, value, controller, response);
}

function createResolvedIteratorResultChunk<T>(
Expand All @@ -449,7 +459,7 @@ function createResolvedIteratorResultChunk<T>(
const iteratorResultJSON =
(done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
return new ReactPromise(RESOLVED_MODEL, iteratorResultJSON, null, response);
}

function resolveIteratorResultChunk<T>(
Expand Down Expand Up @@ -1761,7 +1771,7 @@ function startAsyncIterable<T>(
if (nextReadIndex === buffer.length) {
if (closed) {
// $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
return new Chunk(
return new ReactPromise(
INITIALIZED,
{done: true, value: undefined},
null,
Expand Down

0 comments on commit 591adfa

Please sign in to comment.