Skip to content

Commit

Permalink
[Flight] Add support for returning undefined from render (#26349)
Browse files Browse the repository at this point in the history
## Summary

Adds support for returning `undefined` from Server Components.
Also fixes a bug where rendering an empty fragment would throw the same
error as returning undefined.

## How did you test this change?

- [x] test failed with same error message I got when returning undefined
from Server Components in a Next.js app
- [x] test passes after adding encoding for `undefined`
  • Loading branch information
eps1lon authored Mar 9, 2023
1 parent 39d4b93 commit d1ad984
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 5 deletions.
5 changes: 5 additions & 0 deletions packages/react-client/src/ReactFlightClient.js
Original file line number Diff line number Diff line change
Expand Up @@ -556,6 +556,11 @@ export function parseModelString(
throw chunk.reason;
}
}
case 'u': {
// matches "$undefined"
// Special encoding for `undefined` which can't be serialized as JSON otherwise.
return undefined;
}
default: {
// We assume that anything else is a reference ID.
const id = parseInt(value.substring(1), 16);
Expand Down
32 changes: 32 additions & 0 deletions packages/react-client/src/__tests__/ReactFlight-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,38 @@ describe('ReactFlight', () => {
expect(ReactNoop).toMatchRenderedOutput(<span>ABC</span>);
});

it('can render undefined', async () => {
function Undefined() {
return undefined;
}

const model = <Undefined />;

const transport = ReactNoopFlightServer.render(model);

await act(async () => {
ReactNoop.render(await ReactNoopFlightClient.read(transport));
});

expect(ReactNoop).toMatchRenderedOutput(null);
});

it('can render an empty fragment', async () => {
function Empty() {
return <React.Fragment />;
}

const model = <Empty />;

const transport = ReactNoopFlightServer.render(model);

await act(async () => {
ReactNoop.render(await ReactNoopFlightClient.read(transport));
});

expect(ReactNoop).toMatchRenderedOutput(null);
});

it('can render a lazy component as a shared component on the server', async () => {
function SharedComponent({text}) {
return (
Expand Down
15 changes: 10 additions & 5 deletions packages/react-server/src/ReactFlightServer.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ export type ReactClientValue =
| number
| symbol
| null
| void
| Iterable<ReactClientValue>
| Array<ReactClientValue>
| ReactClientObject
Expand Down Expand Up @@ -546,6 +547,10 @@ function serializeProviderReference(name: string): string {
return '$P' + name;
}

function serializeUndefined(): string {
return '$undefined';
}

function serializeClientReference(
request: Request,
parent:
Expand Down Expand Up @@ -1134,14 +1139,14 @@ export function resolveModelToJSON(
return escapeStringValue(value);
}

if (
typeof value === 'boolean' ||
typeof value === 'number' ||
typeof value === 'undefined'
) {
if (typeof value === 'boolean' || typeof value === 'number') {
return value;
}

if (typeof value === 'undefined') {
return serializeUndefined();
}

if (typeof value === 'function') {
if (isClientReference(value)) {
return serializeClientReference(request, parent, key, (value: any));
Expand Down

0 comments on commit d1ad984

Please sign in to comment.