@samitouri / QOS-React / commits / 5b903cdaa9

[Flight] Support (Async) Generator ServerComponent (#28849)

Stacked on #28853 and #28854. React supports rendering `Iterable` and will soon support `AsyncIterable`. As long as it's multi-shot since during an update we may have to rerender with new inputs an loop over the iterable again. Therefore the `Iterator` and `AsyncIterator` types are not supported directly as a child of React - and really it shouldn't pass between Hooks or components neither for this reason. For parity, that's also the case when used in Server Components. However, there is a special case when the component rendered itself is a generator function. While it returns as a child an `Iterator`, the React Element itself can act as an `Iterable` because we can re-evaluate the function to create a new generator whenever we need to. It's also very convenient to use generator functions over constructing an `AsyncIterable`. So this is a proposal to special case the `Generator`/`AsyncGenerator` returned by a (Async) Generator Function. In Flight this means that when we render a Server Component we can serialize this value as an `Iterable`/`AsyncIterable` since that's effectively what rendering it on the server reduces down to. That way if Fiber can receive the result in any position. For SuspenseList this would also need another special case because the children of SuspenseList represent "rows". `<SuspenseList><Component /></SuspenseList>` currently is a single "row" even if the component renders multiple children or is an iterator. This is currently different if Component is a Server Component because it'll reduce down to an array/AsyncIterable and therefore be treated as one row per its child. This is different from `<SuspenseList><Component /><Component /></SuspenseList>` since that has a wrapper array and so this is always two rows. It probably makes sense to special case a single-element child in `SuspenseList` to represent a component that generates rows. That way you can use an `AsyncGeneratorFunction` to do this.

Sebastian Markbåge committed Apr 21, 2024 at 13:10 UTC 5b903cdaa94c78e8fabb985d8daca5bd7d266323

2 files changed +133 -35

packages/react-client/src/__tests__/ReactFlight-test.js

+44 -21

@@ -295,6 +295,33 @@ describe('ReactFlight', () => {

295 expect(Array.from(result)).toEqual([]);

296 });

297

298 + it('can render a Generator Server Component as a fragment', async () => {

299 + function ItemListClient(props) {

300 + return {props.children};

301 + }

302 + const ItemList = clientReference(ItemListClient);

303 +

304 + function* Items() {

305 + yield 'A';

306 + yield 'B';

307 + yield 'C';

308 + }

309 +

310 + const model = (

311 + <ItemList>

312 + <Items />

313 + </ItemList>

314 + );

315 +

316 + const transport = ReactNoopFlightServer.render(model);

317 +

318 + await act(async () => {

319 + ReactNoop.render(await ReactNoopFlightClient.read(transport));

320 + });

321 +

322 + expect(ReactNoop).toMatchRenderedOutput(ABC);

323 + });

324 +

325 it('can render undefined', async () => {

326 function Undefined() {

327 return undefined;

@@ -2151,16 +2178,9 @@ describe('ReactFlight', () => {

2178 }

2179 const Stateful = clientReference(StatefulClient);

2180

2154 - function ServerComponent({item, initial}) {

2155 - // While the ServerComponent itself could be an async generator, single-shot iterables

2156 - // are not supported as React children since React might need to re-map them based on

2157 - // state updates. So we create an AsyncIterable instead.

2158 - return {

2159 - async *[Symbol.asyncIterator]() {

2160 - yield <Stateful key="a" initial={'a' + initial} />;

2161 - yield <Stateful key="b" initial={'b' + initial} />;

2162 - },

2163 - };

2181 + async function* ServerComponent({item, initial}) {

2182 + yield <Stateful key="a" initial={'a' + initial} />;

2183 + yield <Stateful key="b" initial={'b' + initial} />;

2184 }

2185

2186 function ListClient({children}) {

@@ -2172,6 +2192,11 @@ describe('ReactFlight', () => {

2192 expect(fragment.type).toBe(React.Fragment);

2193 const fragmentChildren = [];

2194 const iterator = fragment.props.children[Symbol.asyncIterator]();

2195 + if (iterator === fragment.props.children) {

2196 + console.error(

2197 + 'AyncIterators are not valid children of React. It must be a multi-shot AsyncIterable.',

2198 + );

2199 + }

2200 for (let entry; !(entry = React.use(iterator.next())).done; ) {

2201 fragmentChildren.push(entry.value);

2202 }

@@ -2316,23 +2341,21 @@ describe('ReactFlight', () => {

2341 let resolve;

2342 const iteratorPromise = new Promise(r => (resolve = r));

2343

2319 - function ThirdPartyAsyncIterableComponent({item, initial}) {

2320 - // While the ServerComponent itself could be an async generator, single-shot iterables

2321 - // are not supported as React children since React might need to re-map them based on

2322 - // state updates. So we create an AsyncIterable instead.

2323 - return {

2324 - async *[Symbol.asyncIterator]() {

2325 - yield Who;

2326 - yield dis?;

2327 - resolve();

2328 - },

2329 - };

2344 + async function* ThirdPartyAsyncIterableComponent({item, initial}) {

2345 + yield Who;

2346 + yield dis?;

2347 + resolve();

2348 }

2349

2350 function ListClient({children: fragment}) {

2351 // TODO: Unwrap AsyncIterables natively in React. For now we do it in this wrapper.

2352 const resolvedChildren = [];

2353 const iterator = fragment.props.children[Symbol.asyncIterator]();

2354 + if (iterator === fragment.props.children) {

2355 + console.error(

2356 + 'AyncIterators are not valid children of React. It must be a multi-shot AsyncIterable.',

2357 + );

2358 + }

2359 for (let entry; !(entry = React.use(iterator.next())).done; ) {

2360 resolvedChildren.push(entry.value);

2361 }

packages/react-server/src/ReactFlightServer.js

+89 -14

@@ -865,20 +865,95 @@ function renderFunctionComponent<Props>(

865 } else {

866 result = Component(props, secondArg);

867 }

868 - if (

869 - typeof result === 'object' &&

870 - result !== null &&

871 - typeof result.then === 'function'

872 - ) {

873 - // When the return value is in children position we can resolve it immediately,

874 - // to its value without a wrapper if it's synchronously available.

875 - const thenable: Thenable<any> = result;

876 - if (thenable.status === 'fulfilled') {

877 - return thenable.value;

878 - }

879 - // TODO: Once we accept Promises as children on the client, we can just return

880 - // the thenable here.

881 - result = createLazyWrapperAroundWakeable(result);

868 + if (typeof result === 'object' && result !== null) {

869 + if (typeof result.then === 'function') {

870 + // When the return value is in children position we can resolve it immediately,

871 + // to its value without a wrapper if it's synchronously available.

872 + const thenable: Thenable<any> = result;

873 + if (thenable.status === 'fulfilled') {

874 + return thenable.value;

875 + }

876 + // TODO: Once we accept Promises as children on the client, we can just return

877 + // the thenable here.

878 + result = createLazyWrapperAroundWakeable(result);

879 + }

880 +

881 + // Normally we'd serialize an Iterator/AsyncIterator as a single-shot which is not compatible

882 + // to be rendered as a React Child. However, because we have the function to recreate

883 + // an iterable from rendering the element again, we can effectively treat it as multi-

884 + // shot. Therefore we treat this as an Iterable/AsyncIterable, whether it was one or not, by

885 + // adding a wrapper so that this component effectively renders down to an AsyncIterable.

886 + const iteratorFn = getIteratorFn(result);

887 + if (iteratorFn) {

888 + const iterableChild = result;

889 + result = {

890 + [Symbol.iterator]: function () {

891 + const iterator = iteratorFn.call(iterableChild);

892 + if (__DEV__) {

893 + // If this was an Iterator but not a GeneratorFunction we warn because

894 + // it might have been a mistake. Technically you can make this mistake with

895 + // GeneratorFunctions and even single-shot Iterables too but it's extra

896 + // tempting to try to return the value from a generator.

897 + if (iterator === iterableChild) {

898 + const isGeneratorComponent =

899 + // $FlowIgnore[method-unbinding]

900 + Object.prototype.toString.call(Component) ===

901 + '[object GeneratorFunction]' &&

902 + // $FlowIgnore[method-unbinding]

903 + Object.prototype.toString.call(iterableChild) ===

904 + '[object Generator]';

905 + if (!isGeneratorComponent) {

906 + console.error(

907 + 'Returning an Iterator from a Server Component is not supported ' +

908 + 'since it cannot be looped over more than once. ',

909 + );

910 + }

911 + }

912 + }

913 + return (iterator: any);

914 + },

915 + };

916 + if (__DEV__) {

917 + (result: any)._debugInfo = iterableChild._debugInfo;

918 + }

919 + } else if (

920 + enableFlightReadableStream &&

921 + typeof (result: any)[ASYNC_ITERATOR] === 'function' &&

922 + (typeof ReadableStream !== 'function' ||

923 + !(result instanceof ReadableStream))

924 + ) {

925 + const iterableChild = result;

926 + result = {

927 + [ASYNC_ITERATOR]: function () {

928 + const iterator = (iterableChild: any)[ASYNC_ITERATOR]();

929 + if (__DEV__) {

930 + // If this was an AsyncIterator but not an AsyncGeneratorFunction we warn because

931 + // it might have been a mistake. Technically you can make this mistake with

932 + // AsyncGeneratorFunctions and even single-shot AsyncIterables too but it's extra

933 + // tempting to try to return the value from a generator.

934 + if (iterator === iterableChild) {

935 + const isGeneratorComponent =

936 + // $FlowIgnore[method-unbinding]

937 + Object.prototype.toString.call(Component) ===

938 + '[object AsyncGeneratorFunction]' &&

939 + // $FlowIgnore[method-unbinding]

940 + Object.prototype.toString.call(iterableChild) ===

941 + '[object AsyncGenerator]';

942 + if (!isGeneratorComponent) {

943 + console.error(

944 + 'Returning an AsyncIterator from a Server Component is not supported ' +

945 + 'since it cannot be looped over more than once. ',

946 + );

947 + }

948 + }

949 + }

950 + return iterator;

951 + },

952 + };

953 + if (__DEV__) {

954 + (result: any)._debugInfo = iterableChild._debugInfo;

955 + }

956 + }

957 }

958 // Track this element's key on the Server Component on the keyPath context..

959 const prevKeyPath = task.keyPath;