@samitouri / QOS-React-2 / commits / 10cc400184

Basic Fizz Architecture (#20970)

* Copy some infra structure patterns from Flight * Basic data structures * Move structural nodes and instruction commands to host config * Move instruction command to host config In the DOM this is implemented as script tags. The first time it's emitted it includes the function. Future calls invoke the same function. The side of the complete boundary function in particular is unfortunately large. * Implement Fizz Noop host configs This is implemented not as a serialized protocol but by-passing the serialization when possible and instead it's like a live tree being built. * Implement React Native host config This is not wired up. I just need something for the flow types since Flight and Fizz are both handled by the isServerSupported flag. Might as well add something though. The principle of this format is the same structure as for HTML but a simpler binary format. Each entry is a tag followed by some data and terminated by null. * Check in error codes * Comment

Sebastian Markbåge committed Mar 11, 2021 at 15:01 UTC 10cc400184dfa3d5d3eb8b2e10903b87b9489cb8
8 files changed +1562 -69
packages/react-noop-renderer/src/ReactNoopFlightServer.js
-6
@@ -36,12 +36,6 @@ const ReactNoopFlightServer = ReactFlightServer({
36 convertStringToBuffer(content: string): Uint8Array {
37 return Buffer.from(content, 'utf8');
38 },
39 - formatChunkAsString(type: string, props: Object): string {
40 - return JSON.stringify({type, props});
41 - },
42 - formatChunk(type: string, props: Object): Uint8Array {
43 - return Buffer.from(JSON.stringify({type, props}), 'utf8');
44 - },
39 isModuleReference(reference: Object): boolean {
40 return reference.$$typeof === Symbol.for('react.module.reference');
41 },
packages/react-noop-renderer/src/ReactNoopServer.js
+183 -9
@@ -16,7 +16,40 @@
16
17 import ReactFizzServer from 'react-server';
18
19 -type Destination = Array<string>;
19 +type Instance = {|
20 + type: string,
21 + children: Array<Instance | TextInstance | SuspenseInstance>,
22 + prop: any,
23 + hidden: boolean,
24 +|};
25 +
26 +type TextInstance = {|
27 + text: string,
28 + hidden: boolean,
29 +|};
30 +
31 +type SuspenseInstance = {|
32 + state: 'pending' | 'complete' | 'client-render',
33 + children: Array<Instance | TextInstance | SuspenseInstance>,
34 +|};
35 +
36 +type Placeholder = {
37 + parent: Instance | SuspenseInstance,
38 + index: number,
39 +};
40 +
41 +type Segment = {
42 + children: null | Instance | TextInstance | SuspenseInstance,
43 +};
44 +
45 +type Destination = {
46 + root: null | Instance | TextInstance | SuspenseInstance,
47 + placeholders: Map<number, Placeholder>,
48 + segments: Map<number, Segment>,
49 + stack: Array<Segment | Instance | SuspenseInstance>,
50 +};
51 +
52 +const POP = Buffer.from('/', 'utf8');
53
54 const ReactNoopServer = ReactFizzServer({
55 scheduleWork(callback: () => void) {
@@ -24,24 +57,165 @@ const ReactNoopServer = ReactFizzServer({
57 },
58 beginWriting(destination: Destination): void {},
59 writeChunk(destination: Destination, buffer: Uint8Array): void {
27 - destination.push(JSON.parse(Buffer.from((buffer: any)).toString('utf8')));
60 + const stack = destination.stack;
61 + if (buffer === POP) {
62 + stack.pop();
63 + return;
64 + }
65 + // We assume one chunk is one instance.
66 + const instance = JSON.parse(Buffer.from((buffer: any)).toString('utf8'));
67 + if (stack.length === 0) {
68 + destination.root = instance;
69 + } else {
70 + const parent = stack[stack.length - 1];
71 + parent.children.push(instance);
72 + }
73 + stack.push(instance);
74 },
75 completeWriting(destination: Destination): void {},
76 close(destination: Destination): void {},
77 flushBuffered(destination: Destination): void {},
32 - convertStringToBuffer(content: string): Uint8Array {
33 - return Buffer.from(content, 'utf8');
78 +
79 + createResponseState(): null {
80 + return null;
81 },
35 - formatChunkAsString(type: string, props: Object): string {
36 - return JSON.stringify({type, props});
82 + createSuspenseBoundaryID(): SuspenseInstance {
83 + // The ID is a pointer to the boundary itself.
84 + return {state: 'pending', children: []};
85 + },
86 +
87 + pushTextInstance(target: Array<Uint8Array>, text: string): void {
88 + const textInstance: TextInstance = {
89 + text,
90 + hidden: false,
91 + };
92 + target.push(Buffer.from(JSON.stringify(textInstance), 'utf8'), POP);
93 + },
94 + pushStartInstance(
95 + target: Array<Uint8Array>,
96 + type: string,
97 + props: Object,
98 + ): void {
99 + const instance: Instance = {
100 + type: type,
101 + children: [],
102 + prop: props.prop,
103 + hidden: false,
104 + };
105 + target.push(Buffer.from(JSON.stringify(instance), 'utf8'));
106 + },
107 +
108 + pushEndInstance(
109 + target: Array<Uint8Array>,
110 + type: string,
111 + props: Object,
112 + ): void {
113 + target.push(POP);
114 + },
115 +
116 + writePlaceholder(destination: Destination, id: number): boolean {
117 + const parent = destination.stack[destination.stack.length - 1];
118 + destination.placeholders.set(id, {
119 + parent: parent,
120 + index: parent.children.length,
121 + });
122 },
38 - formatChunk(type: string, props: Object): Uint8Array {
39 - return Buffer.from(JSON.stringify({type, props}), 'utf8');
123 +
124 + writeStartCompletedSuspenseBoundary(
125 + destination: Destination,
126 + suspenseInstance: SuspenseInstance,
127 + ): boolean {
128 + suspenseInstance.state = 'complete';
129 + const parent = destination.stack[destination.stack.length - 1];
130 + parent.children.push(suspenseInstance);
131 + destination.stack.push(suspenseInstance);
132 + },
133 + writeStartPendingSuspenseBoundary(
134 + destination: Destination,
135 + suspenseInstance: SuspenseInstance,
136 + ): boolean {
137 + suspenseInstance.state = 'pending';
138 + const parent = destination.stack[destination.stack.length - 1];
139 + parent.children.push(suspenseInstance);
140 + destination.stack.push(suspenseInstance);
141 + },
142 + writeStartClientRenderedSuspenseBoundary(
143 + destination: Destination,
144 + suspenseInstance: SuspenseInstance,
145 + ): boolean {
146 + suspenseInstance.state = 'client-render';
147 + const parent = destination.stack[destination.stack.length - 1];
148 + parent.children.push(suspenseInstance);
149 + destination.stack.push(suspenseInstance);
150 + },
151 + writeEndSuspenseBoundary(destination: Destination): boolean {
152 + destination.stack.pop();
153 + },
154 +
155 + writeStartSegment(destination: Destination, id: number): boolean {
156 + const segment = {
157 + children: [],
158 + };
159 + destination.segments.set(id, segment);
160 + if (destination.stack.length > 0) {
161 + throw new Error('Segments are only expected at the root of the stack.');
162 + }
163 + destination.stack.push(segment);
164 + },
165 + writeEndSegment(destination: Destination): boolean {
166 + destination.stack.pop();
167 + },
168 +
169 + writeCompletedSegmentInstruction(
170 + destination: Destination,
171 + responseState: ResponseState,
172 + contentSegmentID: number,
173 + ): boolean {
174 + const segment = destination.segments.get(contentSegmentID);
175 + if (!segment) {
176 + throw new Error('Missing segment.');
177 + }
178 + const placeholder = destination.placeholders.get(contentSegmentID);
179 + if (!placeholder) {
180 + throw new Error('Missing placeholder.');
181 + }
182 + placeholder.parent.children.splice(
183 + placeholder.index,
184 + 0,
185 + ...segment.children,
186 + );
187 + },
188 +
189 + writeCompletedBoundaryInstruction(
190 + destination: Destination,
191 + responseState: ResponseState,
192 + boundary: SuspenseInstance,
193 + contentSegmentID: number,
194 + ): boolean {
195 + const segment = destination.segments.get(contentSegmentID);
196 + if (!segment) {
197 + throw new Error('Missing segment.');
198 + }
199 + boundary.children = segment.children;
200 + boundary.state = 'complete';
201 + },
202 +
203 + writeClientRenderBoundaryInstruction(
204 + destination: Destination,
205 + responseState: ResponseState,
206 + boundary: SuspenseInstance,
207 + ): boolean {
208 + boundary.status = 'client-render';
209 },
210 });
211
212 function render(children: React$Element<any>): Destination {
44 - const destination: Destination = [];
213 + const destination: Destination = {
214 + root: null,
215 + placeholders: new Map(),
216 + segments: new Map(),
217 + stack: [],
218 + };
219 const request = ReactNoopServer.createRequest(children, destination);
220 ReactNoopServer.startWork(request);
221 return destination;
packages/react-server/src/ReactDOMServerFormatConfig.js
+360 -9
@@ -7,17 +7,368 @@
7 * @flow
8 */
9
10 -import {convertStringToBuffer} from 'react-server/src/ReactServerStreamConfig';
10 +import type {Destination} from 'react-server/src/ReactServerStreamConfig';
11
12 -export function formatChunkAsString(type: string, props: Object): string {
13 - let str = '<' + type + '>';
14 - if (typeof props.children === 'string') {
15 - str += props.children;
12 +import {
13 + writeChunk,
14 + convertStringToBuffer,
15 +} from 'react-server/src/ReactServerStreamConfig';
16 +
17 +import invariant from 'shared/invariant';
18 +
19 +// Per response,
20 +export type ResponseState = {
21 + sentCompleteSegmentFunction: boolean,
22 + sentCompleteBoundaryFunction: boolean,
23 + sentClientRenderFunction: boolean,
24 +};
25 +
26 +// Allows us to keep track of what we've already written so we can refer back to it.
27 +export function createResponseState(): ResponseState {
28 + return {
29 + sentCompleteSegmentFunction: false,
30 + sentCompleteBoundaryFunction: false,
31 + sentClientRenderFunction: false,
32 + };
33 +}
34 +
35 +// This object is used to lazily reuse the ID of the first generated node, or assign one.
36 +// We can't assign an ID up front because the node we're attaching it to might already
37 +// have one. So we need to lazily use that if it's available.
38 +export type SuspenseBoundaryID = {
39 + id: null | string,
40 +};
41 +
42 +export function createSuspenseBoundaryID(
43 + responseState: ResponseState,
44 +): SuspenseBoundaryID {
45 + return {id: null};
46 +}
47 +
48 +function encodeHTMLIDAttribute(value: string): string {
49 + // TODO: This needs to be encoded for security purposes.
50 + return value;
51 +}
52 +
53 +function encodeHTMLTextNode(text: string): string {
54 + // TOOD: This needs to be encoded for security purposes.
55 + return text;
56 +}
57 +
58 +export function pushTextInstance(
59 + target: Array<Uint8Array>,
60 + text: string,
61 +): void {
62 + target.push(convertStringToBuffer(encodeHTMLTextNode(text)));
63 +}
64 +
65 +const startTag1 = convertStringToBuffer('<');
66 +const startTag2 = convertStringToBuffer('>');
67 +
68 +export function pushStartInstance(
69 + target: Array<Uint8Array>,
70 + type: string,
71 + props: Object,
72 +): void {
73 + // TODO: Figure out if it's self closing and everything else.
74 + target.push(startTag1, convertStringToBuffer(type), startTag2);
75 +}
76 +
77 +const endTag1 = convertStringToBuffer('</');
78 +const endTag2 = convertStringToBuffer('>');
79 +
80 +export function pushEndInstance(
81 + target: Array<Uint8Array>,
82 + type: string,
83 + props: Object,
84 +): void {
85 + // TODO: Figure out if it was self closing.
86 + target.push(endTag1, convertStringToBuffer(type), endTag2);
87 +}
88 +
89 +// Structural Nodes
90 +
91 +// A placeholder is a node inside a hidden partial tree that can be filled in later, but before
92 +// display. It's never visible to users.
93 +const placeholder1 = convertStringToBuffer('<span id="');
94 +const placeholder2 = convertStringToBuffer('P:');
95 +const placeholder3 = convertStringToBuffer('"></span>');
96 +export function writePlaceholder(
97 + destination: Destination,
98 + id: number,
99 +): boolean {
100 + // TODO: This needs to be contextually aware and switch tag since not all parents allow for spans like
101 + // <select> or <tbody>. E.g. suspending a component that renders a table row.
102 + writeChunk(destination, placeholder1);
103 + // TODO: Use the identifierPrefix option to make the prefix configurable.
104 + writeChunk(destination, placeholder2);
105 + const formattedID = convertStringToBuffer(id.toString(16));
106 + writeChunk(destination, formattedID);
107 + return writeChunk(destination, placeholder3);
108 +}
109 +
110 +// Suspense boundaries are encoded as comments.
111 +const startCompletedSuspenseBoundary = convertStringToBuffer('<!--$-->');
112 +const startPendingSuspenseBoundary = convertStringToBuffer('<!--$?-->');
113 +const startClientRenderedSuspenseBoundary = convertStringToBuffer('<!--$!-->');
114 +const endSuspenseBoundary = convertStringToBuffer('<!--/$-->');
115 +
116 +export function writeStartCompletedSuspenseBoundary(
117 + destination: Destination,
118 + id: SuspenseBoundaryID,
119 +): boolean {
120 + return writeChunk(destination, startCompletedSuspenseBoundary);
121 +}
122 +export function writeStartPendingSuspenseBoundary(
123 + destination: Destination,
124 + id: SuspenseBoundaryID,
125 +): boolean {
126 + return writeChunk(destination, startPendingSuspenseBoundary);
127 +}
128 +export function writeStartClientRenderedSuspenseBoundary(
129 + destination: Destination,
130 + id: SuspenseBoundaryID,
131 +): boolean {
132 + return writeChunk(destination, startClientRenderedSuspenseBoundary);
133 +}
134 +export function writeEndSuspenseBoundary(destination: Destination): boolean {
135 + return writeChunk(destination, endSuspenseBoundary);
136 +}
137 +
138 +const startSegment = convertStringToBuffer('<div hidden id="');
139 +const startSegment2 = convertStringToBuffer('S:');
140 +const startSegment3 = convertStringToBuffer('">');
141 +const endSegment = convertStringToBuffer('"></div>');
142 +export function writeStartSegment(
143 + destination: Destination,
144 + id: number,
145 +): boolean {
146 + // TODO: What happens with special children like <tr> if they're inserted in a div? Maybe needs contextually aware containers.
147 + writeChunk(destination, startSegment);
148 + // TODO: Use the identifierPrefix option to make the prefix configurable.
149 + writeChunk(destination, startSegment2);
150 + const formattedID = convertStringToBuffer(id.toString(16));
151 + writeChunk(destination, formattedID);
152 + return writeChunk(destination, startSegment3);
153 +}
154 +export function writeEndSegment(destination: Destination): boolean {
155 + return writeChunk(destination, endSegment);
156 +}
157 +
158 +// Instruction Set
159 +
160 +// The following code is the source scripts that we then minify and inline below,
161 +// with renamed function names that we hope don't collide:
162 +
163 +// const COMMENT_NODE = 8;
164 +// const SUSPENSE_START_DATA = '$';
165 +// const SUSPENSE_END_DATA = '/$';
166 +// const SUSPENSE_PENDING_START_DATA = '$?';
167 +// const SUSPENSE_FALLBACK_START_DATA = '$!';
168 +//
169 +// function clientRenderBoundary(suspenseBoundaryID) {
170 +// // Find the fallback's first element.
171 +// let suspenseNode = document.getElementById(suspenseBoundaryID);
172 +// if (!suspenseNode) {
173 +// // The user must have already navigated away from this tree.
174 +// // E.g. because the parent was hydrated.
175 +// return;
176 +// }
177 +// // Find the boundary around the fallback. This might include text nodes.
178 +// do {
179 +// suspenseNode = suspenseNode.previousSibling;
180 +// } while (
181 +// suspenseNode.nodeType !== COMMENT_NODE ||
182 +// suspenseNode.data !== SUSPENSE_PENDING_START_DATA
183 +// );
184 +// // Tag it to be client rendered.
185 +// suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
186 +// // Tell React to retry it if the parent already hydrated.
187 +// if (suspenseNode._reactRetry) {
188 +// suspenseNode._reactRetry();
189 +// }
190 +// }
191 +//
192 +// function completeBoundary(suspenseBoundaryID, contentID) {
193 +// // Find the fallback's first element.
194 +// let suspenseNode = document.getElementById(suspenseBoundaryID);
195 +// const contentNode = document.getElementById(contentID);
196 +// // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
197 +// // This might also help by not causing recalcing each time we move a child from here to the target.
198 +// contentNode.parentNode.removeChild(contentNode);
199 +// if (!suspenseNode) {
200 +// // The user must have already navigated away from this tree.
201 +// // E.g. because the parent was hydrated. That's fine there's nothing to do
202 +// // but we have to make sure that we already deleted the container node.
203 +// return;
204 +// }
205 +// // Find the boundary around the fallback. This might include text nodes.
206 +// do {
207 +// suspenseNode = suspenseNode.previousSibling;
208 +// } while (
209 +// suspenseNode.nodeType !== COMMENT_NODE ||
210 +// suspenseNode.data !== SUSPENSE_PENDING_START_DATA
211 +// );
212 +//
213 +// // Clear all the existing children. This is complicated because
214 +// // there can be embedded Suspense boundaries in the fallback.
215 +// // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
216 +// // TOOD: We could avoid this if we never emitted suspense boundaries in fallback trees.
217 +// // They never hydrate anyway. However, currently we support incrementally loading the fallback.
218 +// const parentInstance = suspenseNode.parentNode;
219 +// let node = suspenseNode.nextSibling;
220 +// let depth = 0;
221 +// do {
222 +// if (node && node.nodeType === COMMENT_NODE) {
223 +// const data = node.data;
224 +// if (data === SUSPENSE_END_DATA) {
225 +// if (depth === 0) {
226 +// break;
227 +// } else {
228 +// depth--;
229 +// }
230 +// } else if (
231 +// data === SUSPENSE_START_DATA ||
232 +// data === SUSPENSE_PENDING_START_DATA ||
233 +// data === SUSPENSE_FALLBACK_START_DATA
234 +// ) {
235 +// depth++;
236 +// }
237 +// }
238 +//
239 +// const nextNode = node.nextSibling;
240 +// parentInstance.removeChild(node);
241 +// node = nextNode;
242 +// } while (node);
243 +//
244 +// const endOfBoundary = node;
245 +//
246 +// // Insert all the children from the contentNode between the start and end of suspense boundary.
247 +// while (contentNode.firstChild) {
248 +// parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
249 +// }
250 +
251 +// suspenseNode.data = SUSPENSE_START_DATA;
252 +// if (suspenseNode._reactRetry) {
253 +// suspenseNode._reactRetry();
254 +// }
255 +// }
256 +//
257 +// function completeSegment(containerID, placeholderID) {
258 +// const segmentContainer = document.getElementById(containerID);
259 +// const placeholderNode = document.getElementById(placeholderID);
260 +// // We always expect both nodes to exist here because, while we might
261 +// // have navigated away from the main tree, we still expect the detached
262 +// // tree to exist.
263 +// segmentContainer.parentNode.removeChild(segmentContainer);
264 +// while (segmentContainer.firstChild) {
265 +// placeholderNode.parentNode.insertBefore(
266 +// segmentContainer.firstChild,
267 +// placeholderNode,
268 +// );
269 +// }
270 +// placeholderNode.parentNode.removeChild(placeholderNode);
271 +// }
272 +
273 +const completeSegmentFunction =
274 + 'function $RS(b,f){var a=document.getElementById(b),c=document.getElementById(f);for(a.parentNode.removeChild(a);a.firstChild;)c.parentNode.insertBefore(a.firstChild,c);c.parentNode.removeChild(c)}';
275 +const completeBoundaryFunction =
276 + 'function $RC(b,f){var a=document.getElementById(b),c=document.getElementById(f);c.parentNode.removeChild(c);if(a){do a=a.previousSibling;while(8!==a.nodeType||"$?"!==a.data);var h=a.parentNode,d=a.nextSibling,g=0;do{if(d&&8===d.nodeType){var e=d.data;if("/$"===e)if(0===g)break;else g--;else"$"!==e&&"$?"!==e&&"$!"!==e||g++}e=d.nextSibling;h.removeChild(d);d=e}while(d);for(;c.firstChild;)h.insertBefore(c.firstChild,d);a.data="$";a._reactRetry&&a._reactRetry()}}';
277 +const clientRenderFunction =
278 + 'function $RX(b){if(b=document.getElementById(b)){do b=b.previousSibling;while(8!==b.nodeType||"$?"!==b.data);b.data="$!";b._reactRetry&&b._reactRetry()}}';
279 +
280 +const completeSegmentScript1Full = convertStringToBuffer(
281 + '<script>' + completeSegmentFunction + ';$RS("S:',
282 +);
283 +const completeSegmentScript1Partial = convertStringToBuffer('<script>$RS("S:');
284 +const completeSegmentScript2 = convertStringToBuffer('","P:');
285 +const completeSegmentScript3 = convertStringToBuffer('")</script>');
286 +
287 +export function writeCompletedSegmentInstruction(
288 + destination: Destination,
289 + responseState: ResponseState,
290 + contentSegmentID: number,
291 +): boolean {
292 + if (responseState.sentCompleteSegmentFunction) {
293 + // The first time we write this, we'll need to include the full implementation.
294 + responseState.sentCompleteSegmentFunction = true;
295 + writeChunk(destination, completeSegmentScript1Full);
296 + } else {
297 + // Future calls can just reuse the same function.
298 + writeChunk(destination, completeSegmentScript1Partial);
299 }
17 - str += '</' + type + '>';
18 - return str;
300 + // TODO: Use the identifierPrefix option to make the prefix configurable.
301 + const formattedID = convertStringToBuffer(contentSegmentID.toString(16));
302 + writeChunk(destination, formattedID);
303 + writeChunk(destination, completeSegmentScript2);
304 + writeChunk(destination, formattedID);
305 + return writeChunk(destination, completeSegmentScript3);
306 }
307
21 -export function formatChunk(type: string, props: Object): Uint8Array {
22 - return convertStringToBuffer(formatChunkAsString(type, props));
308 +const completeBoundaryScript1Full = convertStringToBuffer(
309 + '<script>' + completeBoundaryFunction + ';$RC("',
310 +);
311 +const completeBoundaryScript1Partial = convertStringToBuffer('<script>$RC("');
312 +const completeBoundaryScript2 = convertStringToBuffer('","S:');
313 +const completeBoundaryScript3 = convertStringToBuffer('")</script>');
314 +
315 +export function writeCompletedBoundaryInstruction(
316 + destination: Destination,
317 + responseState: ResponseState,
318 + boundaryID: SuspenseBoundaryID,
319 + contentSegmentID: number,
320 +): boolean {
321 + if (responseState.sentCompleteBoundaryFunction) {
322 + // The first time we write this, we'll need to include the full implementation.
323 + responseState.sentCompleteBoundaryFunction = true;
324 + writeChunk(destination, completeBoundaryScript1Full);
325 + } else {
326 + // Future calls can just reuse the same function.
327 + writeChunk(destination, completeBoundaryScript1Partial);
328 + }
329 + // TODO: Use the identifierPrefix option to make the prefix configurable.
330 + invariant(
331 + boundaryID.id !== null,
332 + 'An ID must have been assigned before we can complete the boundary.',
333 + );
334 + const formattedBoundaryID = convertStringToBuffer(
335 + encodeHTMLIDAttribute(boundaryID.id),
336 + );
337 + const formattedContentID = convertStringToBuffer(
338 + contentSegmentID.toString(16),
339 + );
340 + writeChunk(destination, formattedBoundaryID);
341 + writeChunk(destination, completeBoundaryScript2);
342 + writeChunk(destination, formattedContentID);
343 + return writeChunk(destination, completeBoundaryScript3);
344 +}
345 +
346 +const clientRenderScript1Full = convertStringToBuffer(
347 + '<script>' + clientRenderFunction + ';$RX("',
348 +);
349 +const clientRenderScript1Partial = convertStringToBuffer('<script>$RX("');
350 +const clientRenderScript2 = convertStringToBuffer('")</script>');
351 +
352 +export function writeClientRenderBoundaryInstruction(
353 + destination: Destination,
354 + responseState: ResponseState,
355 + boundaryID: SuspenseBoundaryID,
356 +): boolean {
357 + if (responseState.sentClientRenderFunction) {
358 + // The first time we write this, we'll need to include the full implementation.
359 + responseState.sentClientRenderFunction = true;
360 + writeChunk(destination, clientRenderScript1Full);
361 + } else {
362 + // Future calls can just reuse the same function.
363 + writeChunk(destination, clientRenderScript1Partial);
364 + }
365 + invariant(
366 + boundaryID.id !== null,
367 + 'An ID must have been assigned before we can complete the boundary.',
368 + );
369 + const formattedBoundaryID = convertStringToBuffer(
370 + encodeHTMLIDAttribute(boundaryID.id),
371 + );
372 + writeChunk(destination, formattedBoundaryID);
373 + return writeChunk(destination, clientRenderScript2);
374 }
packages/react-server/src/ReactFizzServer.js
+790 -32
@@ -7,8 +7,13 @@
7 * @flow
8 */
9
10 +import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
11 import type {Destination} from './ReactServerStreamConfig';
12 import type {ReactNodeList} from 'shared/ReactTypes';
13 +import type {
14 + SuspenseBoundaryID,
15 + ResponseState,
16 +} from './ReactServerFormatConfig';
17
18 import {
19 scheduleWork,
@@ -18,66 +23,819 @@ import {
23 flushBuffered,
24 close,
25 } from './ReactServerStreamConfig';
21 -import {formatChunk} from './ReactServerFormatConfig';
22 -import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
26 +import {
27 + writePlaceholder,
28 + writeStartCompletedSuspenseBoundary,
29 + writeStartPendingSuspenseBoundary,
30 + writeStartClientRenderedSuspenseBoundary,
31 + writeEndSuspenseBoundary,
32 + writeStartSegment,
33 + writeEndSegment,
34 + writeClientRenderBoundaryInstruction,
35 + writeCompletedBoundaryInstruction,
36 + writeCompletedSegmentInstruction,
37 + pushTextInstance,
38 + pushStartInstance,
39 + pushEndInstance,
40 + createSuspenseBoundaryID,
41 + createResponseState,
42 +} from './ReactServerFormatConfig';
43 +import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
44 +import ReactSharedInternals from 'shared/ReactSharedInternals';
45
24 -type OpaqueRequest = {
25 - destination: Destination,
26 - children: ReactNodeList,
27 - completedChunks: Array<Uint8Array>,
28 - flowing: boolean,
29 - ...
46 +import invariant from 'shared/invariant';
47 +
48 +const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
49 +
50 +type SuspenseBoundary = {
51 + +id: SuspenseBoundaryID,
52 + rootSegmentID: number,
53 + forceClientRender: boolean, // if it errors or infinitely suspends
54 + parentFlushed: boolean,
55 + pendingWork: number, // when it reaches zero we can show this boundary's content
56 + completedSegments: Array<Segment>, // completed but not yet flushed segments.
57 + byteSize: number, // used to determine whether to inline children boundaries.
58 +};
59 +
60 +type SuspendedWork = {
61 + node: ReactNodeList,
62 + ping: () => void,
63 + blockedBoundary: Root | SuspenseBoundary,
64 + blockedSegment: Segment, // the segment we'll write to
65 + assignID: null | SuspenseBoundaryID, // id to assign to the content
66 +};
67 +
68 +const PENDING = 0;
69 +const COMPLETED = 1;
70 +const FLUSHED = 2;
71 +const ERRORED = 3;
72 +
73 +type Root = null;
74 +
75 +type Segment = {
76 + status: 0 | 1 | 2 | 3,
77 + parentFlushed: boolean, // typically a segment will be flushed by its parent, except if its parent was already flushed
78 + id: number, // starts as 0 and is lazily assigned if the parent flushes early
79 + +index: number, // the index within the parent's chunks or 0 at the root
80 + +chunks: Array<Uint8Array>,
81 + +children: Array<Segment>,
82 + // If this segment represents a fallback, this is the content that will replace that fallback.
83 + +boundary: null | SuspenseBoundary,
84 +};
85 +
86 +const BUFFERING = 0;
87 +const FLOWING = 1;
88 +const CLOSED = 2;
89 +
90 +type Request = {
91 + +destination: Destination,
92 + +responseState: ResponseState,
93 + +maxBoundarySize: number,
94 + status: 0 | 1 | 2,
95 + nextSegmentId: number,
96 + allPendingWork: number, // when it reaches zero, we can close the connection.
97 + pendingRootWork: number, // when this reaches zero, we've finished at least the root boundary.
98 + completedRootSegment: null | Segment, // Completed but not yet flushed root segments.
99 + pingedWork: Array<SuspendedWork>,
100 + // Queues to flush in order of priority
101 + clientRenderedBoundaries: Array<SuspenseBoundary>, // Errored or client rendered but not yet flushed.
102 + completedBoundaries: Array<SuspenseBoundary>, // Completed but not yet fully flushed boundaries to show.
103 + partialBoundaries: Array<SuspenseBoundary>, // Partially completed boundaries that can flush its segments early.
104 };
105
106 export function createRequest(
107 children: ReactNodeList,
108 destination: Destination,
35 -): OpaqueRequest {
36 - return {destination, children, completedChunks: [], flowing: false};
109 +): Request {
110 + const pingedWork = [];
111 + const request = {
112 + destination,
113 + responseState: createResponseState(),
114 + maxBoundarySize: 1024,
115 + status: BUFFERING,
116 + nextSegmentId: 0,
117 + allPendingWork: 0,
118 + pendingRootWork: 0,
119 + completedRootSegment: null,
120 + pingedWork: pingedWork,
121 + clientRenderedBoundaries: [],
122 + completedBoundaries: [],
123 + partialBoundaries: [],
124 + };
125 + // This segment represents the root fallback.
126 + const rootSegment = createPendingSegment(request, 0, null);
127 + // There is no parent so conceptually, we're unblocked to flush this segment.
128 + rootSegment.parentFlushed = true;
129 + const rootWork = createSuspendedWork(
130 + request,
131 + children,
132 + null,
133 + rootSegment,
134 + null,
135 + );
136 + pingedWork.push(rootWork);
137 + return request;
138 +}
139 +
140 +function pingSuspendedWork(request: Request, work: SuspendedWork): void {
141 + const pingedWork = request.pingedWork;
142 + pingedWork.push(work);
143 + if (pingedWork.length === 1) {
144 + scheduleWork(() => performWork(request));
145 + }
146 +}
147 +
148 +function createSuspenseBoundary(request: Request): SuspenseBoundary {
149 + return {
150 + id: createSuspenseBoundaryID(request.responseState),
151 + rootSegmentID: -1,
152 + parentFlushed: false,
153 + pendingWork: 0,
154 + forceClientRender: false,
155 + completedSegments: [],
156 + byteSize: 0,
157 + };
158 }
159
39 -function performWork(request: OpaqueRequest): void {
40 - const element = (request.children: any);
41 - request.children = null;
42 - if (element && element.$$typeof !== REACT_ELEMENT_TYPE) {
160 +function createSuspendedWork(
161 + request: Request,
162 + node: ReactNodeList,
163 + blockedBoundary: Root | SuspenseBoundary,
164 + blockedSegment: Segment,
165 + assignID: null | SuspenseBoundaryID,
166 +): SuspendedWork {
167 + request.allPendingWork++;
168 + if (blockedBoundary === null) {
169 + request.pendingRootWork++;
170 + } else {
171 + blockedBoundary.pendingWork++;
172 + }
173 + const work = {
174 + node,
175 + ping: () => pingSuspendedWork(request, work),
176 + blockedBoundary,
177 + blockedSegment,
178 + assignID,
179 + };
180 + return work;
181 +}
182 +
183 +function createPendingSegment(
184 + request: Request,
185 + index: number,
186 + boundary: null | SuspenseBoundary,
187 +): Segment {
188 + return {
189 + status: PENDING,
190 + id: -1, // lazily assigned later
191 + index,
192 + parentFlushed: false,
193 + chunks: [],
194 + children: [],
195 + boundary,
196 + };
197 +}
198 +
199 +function reportError(request: Request, error: mixed): void {
200 + // TODO: Report errors on the server.
201 +}
202 +
203 +function fatalError(request: Request, error: mixed): void {
204 + // This is called outside error handling code such as if the root errors outside
205 + // a suspense boundary or if the root suspense boundary's fallback errors.
206 + // It's also called if React itself or its host configs errors.
207 + request.status = CLOSED;
208 + // TODO: Destroy the stream with an error. We weren't able to complete the root.
209 +}
210 +
211 +function renderNode(
212 + request: Request,
213 + parentBoundary: Root | SuspenseBoundary,
214 + segment: Segment,
215 + node: ReactNodeList,
216 +): void {
217 + if (typeof node === 'string') {
218 + pushTextInstance(segment.chunks, node);
219 return;
220 }
221 + if (
222 + typeof node !== 'object' ||
223 + !node ||
224 + (node: any).$$typeof !== REACT_ELEMENT_TYPE
225 + ) {
226 + throw new Error('Not yet implemented node type.');
227 + }
228 + const element: React$Element<any> = (node: any);
229 const type = element.type;
230 const props = element.props;
47 - if (typeof type !== 'string') {
231 + if (typeof type === 'function') {
232 + try {
233 + const result = type(props);
234 + renderNode(request, parentBoundary, segment, result);
235 + } catch (x) {
236 + if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
237 + // Something suspended, we'll need to create a new segment and resolve it later.
238 + const insertionIndex = segment.chunks.length;
239 + const newSegment = createPendingSegment(request, insertionIndex, null);
240 + const suspendedWork = createSuspendedWork(
241 + request,
242 + node,
243 + parentBoundary,
244 + newSegment,
245 + null,
246 + );
247 + const ping = suspendedWork.ping;
248 + x.then(ping, ping);
249 + // TODO: Emit place holder
250 + } else {
251 + // We can rethrow to terminate the rest of this tree.
252 + throw x;
253 + }
254 + }
255 + } else if (typeof type === 'string') {
256 + pushStartInstance(segment.chunks, type, props);
257 + renderNode(request, parentBoundary, segment, props.children);
258 + pushEndInstance(segment.chunks, type, props);
259 + } else if (type === REACT_SUSPENSE_TYPE) {
260 + // Each time we enter a suspense boundary, we split out into a new segment for
261 + // the fallback so that we can later replace that segment with the content.
262 + // This also lets us split out the main content even if it doesn't suspend,
263 + // in case it ends up generating a large subtree of content.
264 + const fallback: ReactNodeList = props.fallback;
265 + const content: ReactNodeList = props.children;
266 +
267 + const newBoundary = createSuspenseBoundary(request);
268 +
269 + const insertionIndex = segment.chunks.length;
270 + // The children of the boundary segment is actually the fallback.
271 + const boundarySegment = createPendingSegment(
272 + request,
273 + insertionIndex,
274 + newBoundary,
275 + );
276 + // We create suspended work for the fallback because we don't want to actually work
277 + // on it yet in case we finish the main content, so we queue for later.
278 + const suspendedFallbackWork = createSuspendedWork(
279 + request,
280 + fallback,
281 + parentBoundary,
282 + boundarySegment,
283 + newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
284 + );
285 + // TODO: This should be queued at a separate lower priority queue so that we only work
286 + // on preparing fallbacks if we don't have any more main content to work on.
287 + request.pingedWork.push(suspendedFallbackWork);
288 +
289 + // This segment is the actual child content. We can start rendering that immediately.
290 + const contentRootSegment = createPendingSegment(request, 0, null);
291 + // We mark the root segment as having its parent flushed. It's not really flushed but there is
292 + // no parent segment so there's nothing to wait on.
293 + contentRootSegment.parentFlushed = true;
294 + // TODO: Currently this is running synchronously. We could instead schedule this to pingedWork.
295 + // I suspect that there might be some efficiency benefits from not creating the suspended work
296 + // and instead just using the stack if possible. Particularly when we add contexts.
297 + const contentWork = createSuspendedWork(
298 + request,
299 + content,
300 + newBoundary,
301 + contentRootSegment,
302 + null,
303 + );
304 + retryWork(request, contentWork);
305 + } else {
306 + throw new Error('Not yet implemented element type.');
307 + }
308 +}
309 +
310 +function errorWork(
311 + request: Request,
312 + boundary: Root | SuspenseBoundary,
313 + segment: Segment,
314 + error: mixed,
315 +) {
316 + segment.status = ERRORED;
317 +
318 + request.allPendingWork--;
319 + if (boundary !== null) {
320 + boundary.pendingWork--;
321 + }
322 +
323 + // Report the error to a global handler.
324 + reportError(request, error);
325 + if (boundary === null) {
326 + fatalError(request, error);
327 + } else if (!boundary.forceClientRender) {
328 + boundary.forceClientRender = true;
329 + // Regardless of what happens next, this boundary won't be displayed,
330 + // so we can flush it, if the parent already flushed.
331 + if (boundary.parentFlushed) {
332 + // We don't have a preference where in the queue this goes since it's likely
333 + // to error on the client anyway. However, intentionally client-rendered
334 + // boundaries should be flushed earlier so that they can start on the client.
335 + // We reuse the same queue for errors.
336 + request.clientRenderedBoundaries.push(boundary);
337 + }
338 + }
339 +}
340 +
341 +function completeWork(
342 + request: Request,
343 + boundary: Root | SuspenseBoundary,
344 + segment: Segment,
345 +) {
346 + segment.status = COMPLETED;
347 + request.allPendingWork--;
348 +
349 + if (boundary === null) {
350 + request.pendingRootWork--;
351 + if (segment.parentFlushed) {
352 + invariant(
353 + request.completedRootSegment === null,
354 + 'There can only be one root segment. This is a bug in React.',
355 + );
356 + request.completedRootSegment = segment;
357 + }
358 return;
359 }
50 - request.completedChunks.push(formatChunk(type, props));
51 - if (request.flowing) {
52 - flushCompletedChunks(request);
360 +
361 + boundary.pendingWork--;
362 + if (boundary.forceClientRender) {
363 + // This already errored.
364 + return;
365 }
366 + if (boundary.pendingWork === 0) {
367 + // This must have been the last segment we were waiting on. This boundary is now complete.
368 + if (segment.parentFlushed) {
369 + // Our parent segment already flushed, so we need to schedule this segment to be emitted.
370 + boundary.completedSegments.push(segment);
371 + }
372 + if (boundary.parentFlushed) {
373 + // The segment might be part of a segment that didn't flush yet, but if the boundary's
374 + // parent flushed, we need to schedule the boundary to be emitted.
375 + request.completedBoundaries.push(boundary);
376 + }
377 + } else {
378 + if (segment.parentFlushed) {
379 + // Our parent already flushed, so we need to schedule this segment to be emitted.
380 + const completedSegments = boundary.completedSegments;
381 + completedSegments.push(segment);
382 + if (completedSegments.length === 1) {
383 + // This is the first time since we last flushed that we completed anything.
384 + // We can schedule this boundary to emit its partially completed segments early
385 + // in case the parent has already been flushed.
386 + if (boundary.parentFlushed) {
387 + request.partialBoundaries.push(boundary);
388 + }
389 + }
390 + }
391 + }
392 +}
393 +
394 +function retryWork(request: Request, work: SuspendedWork): void {
395 + const segment = work.blockedSegment;
396 + const boundary = work.blockedBoundary;
397 + try {
398 + let node = work.node;
399 + while (
400 + typeof node === 'object' &&
401 + node !== null &&
402 + (node: any).$$typeof === REACT_ELEMENT_TYPE &&
403 + typeof node.type === 'function'
404 + ) {
405 + // Doing this here lets us reuse this same Segment if the next component
406 + // also suspends.
407 + const element: React$Element<any> = (node: any);
408 + work.node = node;
409 + // TODO: Classes and legacy context etc.
410 + node = element.type(element.props);
411 + }
412 +
413 + renderNode(request, boundary, segment, node);
414
55 - flushBuffered(request.destination);
415 + completeWork(request, boundary, segment);
416 + } catch (x) {
417 + if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
418 + // Something suspended again, let's pick it back up later.
419 + const ping = work.ping;
420 + x.then(ping, ping);
421 + } else {
422 + errorWork(request, boundary, segment, x);
423 + }
424 + }
425 }
426
58 -function flushCompletedChunks(request: OpaqueRequest) {
59 - const destination = request.destination;
60 - const chunks = request.completedChunks;
61 - request.completedChunks = [];
427 +function performWork(request: Request): void {
428 + if (request.status === CLOSED) {
429 + return;
430 + }
431 + const prevDispatcher = ReactCurrentDispatcher.current;
432 + ReactCurrentDispatcher.current = Dispatcher;
433 +
434 + try {
435 + const pingedWork = request.pingedWork;
436 + let i;
437 + for (i = 0; i < pingedWork.length; i++) {
438 + const work = pingedWork[i];
439 + retryWork(request, work);
440 + }
441 + pingedWork.splice(0, i);
442 + if (request.status === FLOWING) {
443 + flushCompletedQueues(request);
444 + }
445 + } catch (error) {
446 + fatalError(request, error);
447 + } finally {
448 + ReactCurrentDispatcher.current = prevDispatcher;
449 + }
450 +}
451 +
452 +function flushSubtree(
453 + request: Request,
454 + destination: Destination,
455 + segment: Segment,
456 +): boolean {
457 + segment.parentFlushed = true;
458 + switch (segment.status) {
459 + case PENDING: {
460 + // We're emitting a placeholder for this segment to be filled in later.
461 + // Therefore we'll need to assign it an ID - to refer to it by.
462 + const segmentID = (segment.id = request.nextSegmentId++);
463 + return writePlaceholder(destination, segmentID);
464 + }
465 + case COMPLETED: {
466 + segment.status = FLUSHED;
467 + let r = true;
468 + const chunks = segment.chunks;
469 + let chunkIdx = 0;
470 + const children = segment.children;
471 + for (let childIdx = 0; childIdx < children.length; childIdx++) {
472 + const nextChild = children[childIdx];
473 + // Write all the chunks up until the next child.
474 + for (; chunkIdx < nextChild.index; chunkIdx++) {
475 + writeChunk(destination, chunks[chunkIdx]);
476 + }
477 + r = flushSegment(request, destination, nextChild);
478 + }
479 + // Finally just write all the remaining chunks
480 + for (; chunkIdx < chunks.length; chunkIdx++) {
481 + r = writeChunk(destination, chunks[chunkIdx]);
482 + }
483 + return r;
484 + }
485 + default: {
486 + invariant(
487 + false,
488 + 'Errored or already flushed boundaries should not be flushed again. This is a bug in React.',
489 + );
490 + }
491 + }
492 +}
493 +
494 +function flushSegment(
495 + request: Request,
496 + destination,
497 + segment: Segment,
498 +): boolean {
499 + const boundary = segment.boundary;
500 + if (boundary === null) {
501 + // Not a suspense boundary.
502 + return flushSubtree(request, destination, segment);
503 + }
504 + boundary.parentFlushed = true;
505 + // This segment is a Suspense boundary. We need to decide whether to
506 + // emit the content or the fallback now.
507 + if (boundary.forceClientRender) {
508 + // Emit a client rendered suspense boundary wrapper.
509 + // We never queue the inner boundary so we'll never emit its content or partial segments.
510 +
511 + writeStartClientRenderedSuspenseBoundary(destination, boundary.id);
512 +
513 + // Flush the fallback.
514 + flushSubtree(request, destination, segment);
515 +
516 + return writeEndSuspenseBoundary(destination);
517 + } else if (boundary.pendingWork > 0) {
518 + // This boundary is still loading. Emit a pending suspense boundary wrapper.
519 +
520 + // Assign an ID to refer to the future content by.
521 + boundary.rootSegmentID = request.nextSegmentId++;
522 + if (boundary.completedSegments.length > 0) {
523 + // If this is at least partially complete, we can queue it to be partially emmitted early.
524 + request.partialBoundaries.push(boundary);
525 + }
526 +
527 + writeStartPendingSuspenseBoundary(destination, boundary.id);
528 +
529 + // Flush the fallback.
530 + flushSubtree(request, destination, segment);
531 +
532 + return writeEndSuspenseBoundary(destination);
533 + } else if (boundary.byteSize > request.maxBoundarySize) {
534 + // This boundary is large and will be emitted separately so that we can progressively show
535 + // other content. We add it to the queue during the flush because we have to ensure that
536 + // the parent flushes first so that there's something to inject it into.
537 + // We also have to make sure that it's emitted into the queue in a deterministic slot.
538 + // I.e. we can't insert it here when it completes.
539 +
540 + // Assign an ID to refer to the future content by.
541 + boundary.rootSegmentID = request.nextSegmentId++;
542 +
543 + request.completedBoundaries.push(boundary);
544 + // Emit a pending rendered suspense boundary wrapper.
545 + writeStartPendingSuspenseBoundary(destination, boundary.id);
546 +
547 + // Flush the fallback.
548 + flushSubtree(request, destination, segment);
549 +
550 + return writeEndSuspenseBoundary(destination);
551 + } else {
552 + // We can inline this boundary's content as a complete boundary.
553 +
554 + writeStartCompletedSuspenseBoundary(destination, boundary.id);
555 +
556 + const completedSegments = boundary.completedSegments;
557 + invariant(
558 + completedSegments.length === 1,
559 + 'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
560 + );
561 + const contentSegment = completedSegments[0];
562 + flushSegment(request, destination, contentSegment);
563 +
564 + return writeEndSuspenseBoundary(destination);
565 + }
566 +}
567 +
568 +function flushClientRenderedBoundary(
569 + request: Request,
570 + destination: Destination,
571 + boundary: SuspenseBoundary,
572 +): boolean {
573 + return writeClientRenderBoundaryInstruction(
574 + destination,
575 + request.responseState,
576 + boundary.id,
577 + );
578 +}
579 +
580 +function flushSegmentContainer(
581 + request: Request,
582 + destination: Destination,
583 + segment: Segment,
584 +): boolean {
585 + writeStartSegment(destination, segment.id);
586 + flushSegment(request, destination, segment);
587 + return writeEndSegment(destination);
588 +}
589 +
590 +function flushCompletedBoundary(
591 + request: Request,
592 + destination: Destination,
593 + boundary: SuspenseBoundary,
594 +): boolean {
595 + const completedSegments = boundary.completedSegments;
596 + let i = 0;
597 + for (; i < completedSegments.length; i++) {
598 + const segment = completedSegments[i];
599 + flushPartiallyCompletedSegment(request, destination, boundary, segment);
600 + }
601 + completedSegments.length = 0;
602 +
603 + return writeCompletedBoundaryInstruction(
604 + destination,
605 + request.responseState,
606 + boundary.id,
607 + boundary.rootSegmentID,
608 + );
609 +}
610 +
611 +function flushPartialBoundary(
612 + request: Request,
613 + destination: Destination,
614 + boundary: SuspenseBoundary,
615 +): boolean {
616 + const completedSegments = boundary.completedSegments;
617 + let i = 0;
618 + for (; i < completedSegments.length; i++) {
619 + const segment = completedSegments[i];
620 + if (
621 + !flushPartiallyCompletedSegment(request, destination, boundary, segment)
622 + ) {
623 + i++;
624 + completedSegments.splice(0, i);
625 + // Only write as much as the buffer wants. Something higher priority
626 + // might want to write later.
627 + return false;
628 + }
629 + }
630 + completedSegments.splice(0, i);
631 + return true;
632 +}
633 +
634 +function flushPartiallyCompletedSegment(
635 + request: Request,
636 + destination: Destination,
637 + boundary: SuspenseBoundary,
638 + segment: Segment,
639 +): boolean {
640 + if (segment.status === FLUSHED) {
641 + // We've already flushed this inline.
642 + return true;
643 + }
644 +
645 + const segmentID = segment.id;
646 + if (segmentID === -1) {
647 + // This segment wasn't previously referred to. This happens at the root of
648 + // a boundary. We make kind of a leap here and assume this is the root.
649 + const rootSegmentID = (segment.id = boundary.rootSegmentID);
650 + invariant(
651 + rootSegmentID !== -1,
652 + 'A root segment ID must have been assigned by now. This is a bug in React.',
653 + );
654 + return flushSegmentContainer(request, destination, segment);
655 + } else {
656 + flushSegmentContainer(request, destination, segment);
657 + return writeCompletedSegmentInstruction(
658 + destination,
659 + request.responseState,
660 + segmentID,
661 + );
662 + }
663 +}
664
665 +let reentrant = false;
666 +function flushCompletedQueues(request: Request): void {
667 + if (reentrant) {
668 + return;
669 + }
670 + reentrant = true;
671 +
672 + const destination = request.destination;
673 beginWriting(destination);
674 try {
65 - for (let i = 0; i < chunks.length; i++) {
66 - const chunk = chunks[i];
67 - writeChunk(destination, chunk);
675 + // The structure of this is to go through each queue one by one and write
676 + // until the sink tells us to stop. When we should stop, we still finish writing
677 + // that item fully and then yield. At that point we remove the already completed
678 + // items up until the point we completed them.
679 +
680 + // TODO: Emit preloading.
681 +
682 + // TODO: It's kind of unfortunate to keep checking this array after we've already
683 + // emitted the root.
684 + const completedRootSegment = request.completedRootSegment;
685 + if (completedRootSegment !== null && request.pendingRootWork === 0) {
686 + flushSegment(request, destination, completedRootSegment);
687 + request.completedRootSegment = null;
688 + }
689 +
690 + // We emit client rendering instructions for already emitted boundaries first.
691 + // This is so that we can signal to the client to start client rendering them as
692 + // soon as possible.
693 + const clientRenderedBoundaries = request.clientRenderedBoundaries;
694 + let i;
695 + for (i = 0; i < clientRenderedBoundaries.length; i++) {
696 + const boundary = clientRenderedBoundaries[i];
697 + if (!flushClientRenderedBoundary(request, destination, boundary)) {
698 + request.status = BUFFERING;
699 + i++;
700 + clientRenderedBoundaries.splice(0, i);
701 + return;
702 + }
703 + }
704 + clientRenderedBoundaries.splice(0, i);
705 +
706 + // Next we emit any complete boundaries. It's better to favor boundaries
707 + // that are completely done since we can actually show them, than it is to emit
708 + // any individual segments from a partially complete boundary.
709 + const completedBoundaries = request.completedBoundaries;
710 + for (i = 0; i < completedBoundaries.length; i++) {
711 + const boundary = completedBoundaries[i];
712 + if (!flushCompletedBoundary(request, destination, boundary)) {
713 + request.status = BUFFERING;
714 + i++;
715 + completedBoundaries.splice(0, i);
716 + return;
717 + }
718 }
719 + completedBoundaries.splice(0, i);
720 +
721 + // Allow anything written so far to flush to the underlying sink before
722 + // we continue with lower priorities.
723 + completeWriting(destination);
724 + beginWriting(destination);
725 +
726 + // TODO: Here we'll emit data used by hydration.
727 +
728 + // Next we emit any segments of any boundaries that are partially complete
729 + // but not deeply complete.
730 + const partialBoundaries = request.partialBoundaries;
731 + for (i = 0; i < partialBoundaries.length; i++) {
732 + const boundary = partialBoundaries[i];
733 + if (!flushPartialBoundary(request, destination, boundary)) {
734 + request.status = BUFFERING;
735 + i++;
736 + partialBoundaries.splice(0, i);
737 + return;
738 + }
739 + }
740 + partialBoundaries.splice(0, i);
741 +
742 + // Next we check the completed boundaries again. This may have had
743 + // boundaries added to it in case they were too larged to be inlined.
744 + // New ones might be added in this loop.
745 + const largeBoundaries = request.completedBoundaries;
746 + for (i = 0; i < largeBoundaries.length; i++) {
747 + const boundary = largeBoundaries[i];
748 + if (!flushCompletedBoundary(request, destination, boundary)) {
749 + request.status = BUFFERING;
750 + i++;
751 + largeBoundaries.splice(0, i);
752 + return;
753 + }
754 + }
755 + largeBoundaries.splice(0, i);
756 } finally {
757 + reentrant = false;
758 completeWriting(destination);
759 + flushBuffered(destination);
760 + if (
761 + request.allPendingWork === 0 &&
762 + request.pingedWork.length === 0 &&
763 + request.clientRenderedBoundaries.length === 0 &&
764 + request.completedBoundaries.length === 0
765 + // We don't need to check any partially completed segments because
766 + // either they have pending work or they're complete.
767 + ) {
768 + // We're done.
769 + close(destination);
770 + }
771 }
72 - close(destination);
772 }
773
75 -export function startWork(request: OpaqueRequest): void {
76 - request.flowing = true;
774 +// TODO: Expose a way to abort further processing, without closing the connection from the outside.
775 +// This would put all waiting boundaries into client-only mode.
776 +
777 +export function startWork(request: Request): void {
778 + // TODO: Don't automatically start flowing. Expose an explicit signal. Auto-start once everything is done.
779 + request.status = FLOWING;
780 scheduleWork(() => performWork(request));
781 }
782
80 -export function startFlowing(request: OpaqueRequest): void {
81 - request.flowing = false;
82 - flushCompletedChunks(request);
783 +export function startFlowing(request: Request): void {
784 + if (request.status === CLOSED) {
785 + return;
786 + }
787 + request.status = FLOWING;
788 + try {
789 + flushCompletedQueues(request);
790 + } catch (error) {
791 + fatalError(request, error);
792 + }
793 +}
794 +
795 +function notYetImplemented(): void {
796 + throw new Error('Not yet implemented.');
797 }
798 +
799 +function unsupportedRefresh() {
800 + invariant(false, 'Cache cannot be refreshed during server rendering.');
801 +}
802 +
803 +function unsupportedStartTransition() {
804 + invariant(false, 'startTransition cannot be called during server rendering.');
805 +}
806 +
807 +function noop(): void {}
808 +
809 +const Dispatcher: DispatcherType = {
810 + useMemo<T>(nextCreate: () => T): T {
811 + return nextCreate();
812 + },
813 + useCallback<T>(callback: T): T {
814 + return callback;
815 + },
816 + useDebugValue(): void {},
817 + useDeferredValue<T>(value: T): T {
818 + return value;
819 + },
820 + useTransition(): [(callback: () => void) => void, boolean] {
821 + return [unsupportedStartTransition, false];
822 + },
823 + getCacheForType<T>(resourceType: () => T): T {
824 + throw new Error('Not yet implemented. Should mark as client rendered.');
825 + },
826 + readContext: (notYetImplemented: any),
827 + useContext: (notYetImplemented: any),
828 + useReducer: (notYetImplemented: any),
829 + useRef: (notYetImplemented: any),
830 + useState: (notYetImplemented: any),
831 + useLayoutEffect: noop,
832 + // useImperativeHandle is not run in the server environment
833 + useImperativeHandle: noop,
834 + // Effects are not run in the server environment.
835 + useEffect: noop,
836 + useOpaqueIdentifier: (notYetImplemented: any),
837 + useMutableSource: (notYetImplemented: any),
838 + useCacheRefresh(): <T>(?() => T, ?T) => void {
839 + return unsupportedRefresh;
840 + },
841 +};
packages/react-server/src/ReactNativeServerFormatConfig.js
+189 -9
@@ -7,17 +7,197 @@
7 * @flow
8 */
9
10 -import {convertStringToBuffer} from 'react-server/src/ReactServerStreamConfig';
10 +import type {Destination} from 'react-server/src/ReactServerStreamConfig';
11
12 -export function formatChunkAsString(type: string, props: Object): string {
13 - let str = '<' + type + '>';
14 - if (typeof props.children === 'string') {
15 - str += props.children;
12 +import {
13 + writeChunk,
14 + convertStringToBuffer,
15 +} from 'react-server/src/ReactServerStreamConfig';
16 +
17 +import invariant from 'shared/invariant';
18 +
19 +// Every list of children or string is null terminated.
20 +const END_TAG = 0;
21 +// Tree node tags.
22 +const INSTANCE_TAG = 1;
23 +const PLACEHOLDER_TAG = 2;
24 +const SUSPENSE_PENDING_TAG = 3;
25 +const SUSPENSE_COMPLETE_TAG = 4;
26 +const SUSPENSE_CLIENT_RENDER_TAG = 5;
27 +// Command tags.
28 +const SEGMENT_TAG = 1;
29 +const SUSPENSE_UPDATE_TO_COMPLETE_TAG = 2;
30 +const SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG = 3;
31 +
32 +const END = new Uint8Array(1);
33 +END[0] = END_TAG;
34 +const PLACEHOLDER = new Uint8Array(1);
35 +PLACEHOLDER[0] = PLACEHOLDER_TAG;
36 +const INSTANCE = new Uint8Array(1);
37 +INSTANCE[0] = INSTANCE_TAG;
38 +const SUSPENSE_PENDING = new Uint8Array(1);
39 +SUSPENSE_PENDING[0] = SUSPENSE_PENDING_TAG;
40 +const SUSPENSE_COMPLETE = new Uint8Array(1);
41 +SUSPENSE_COMPLETE[0] = SUSPENSE_COMPLETE_TAG;
42 +const SUSPENSE_CLIENT_RENDER = new Uint8Array(1);
43 +SUSPENSE_CLIENT_RENDER[0] = SUSPENSE_CLIENT_RENDER_TAG;
44 +
45 +const SEGMENT = new Uint8Array(1);
46 +SEGMENT[0] = SEGMENT_TAG;
47 +const SUSPENSE_UPDATE_TO_COMPLETE = new Uint8Array(1);
48 +SUSPENSE_UPDATE_TO_COMPLETE[0] = SUSPENSE_UPDATE_TO_COMPLETE_TAG;
49 +const SUSPENSE_UPDATE_TO_CLIENT_RENDER = new Uint8Array(1);
50 +SUSPENSE_UPDATE_TO_CLIENT_RENDER[0] = SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG;
51 +
52 +// Per response,
53 +export type ResponseState = {
54 + nextSuspenseID: number,
55 +};
56 +
57 +// Allows us to keep track of what we've already written so we can refer back to it.
58 +export function createResponseState(): ResponseState {
59 + return {
60 + nextSuspenseID: 0,
61 + };
62 +}
63 +
64 +// This object is used to lazily reuse the ID of the first generated node, or assign one.
65 +// This is very specific to DOM where we can't assign an ID to.
66 +export type SuspenseBoundaryID = number;
67 +
68 +export function createSuspenseBoundaryID(
69 + responseState: ResponseState,
70 +): SuspenseBoundaryID {
71 + return responseState.nextSuspenseID++;
72 +}
73 +
74 +const RAW_TEXT = convertStringToBuffer('RCTRawText');
75 +
76 +export function pushTextInstance(
77 + target: Array<Uint8Array>,
78 + text: string,
79 +): void {
80 + target.push(
81 + INSTANCE,
82 + RAW_TEXT, // Type
83 + END, // Null terminated type string
84 + // TODO: props { text: text }
85 + END, // End of children
86 + );
87 +}
88 +
89 +export function pushStartInstance(
90 + target: Array<Uint8Array>,
91 + type: string,
92 + props: Object,
93 +): void {
94 + target.push(
95 + INSTANCE,
96 + convertStringToBuffer(type),
97 + END, // Null terminated type string
98 + // TODO: props
99 + );
100 +}
101 +
102 +export function pushEndInstance(
103 + target: Array<Uint8Array>,
104 + type: string,
105 + props: Object,
106 +): void {
107 + target.push(END);
108 +}
109 +
110 +// IDs are formatted as little endian Uint16
111 +function formatID(id: number): Uint8Array {
112 + if (id > 0xffff) {
113 + invariant(
114 + false,
115 + 'More boundaries or placeholders than we expected to ever emit.',
116 + );
117 }
17 - str += '</' + type + '>';
18 - return str;
118 + const buffer = new Uint8Array(2);
119 + buffer[0] = (id >>> 8) & 0xff;
120 + buffer[1] = id & 0xff;
121 + return buffer;
122 +}
123 +
124 +// Structural Nodes
125 +
126 +// A placeholder is a node inside a hidden partial tree that can be filled in later, but before
127 +// display. It's never visible to users.
128 +export function writePlaceholder(
129 + destination: Destination,
130 + id: number,
131 +): boolean {
132 + writeChunk(destination, PLACEHOLDER);
133 + return writeChunk(destination, formatID(id));
134 +}
135 +
136 +// Suspense boundaries are encoded as comments.
137 +export function writeStartCompletedSuspenseBoundary(
138 + destination: Destination,
139 + id: SuspenseBoundaryID,
140 +): boolean {
141 + writeChunk(destination, SUSPENSE_COMPLETE);
142 + return writeChunk(destination, formatID(id));
143 +}
144 +export function writeStartPendingSuspenseBoundary(
145 + destination: Destination,
146 + id: SuspenseBoundaryID,
147 +): boolean {
148 + writeChunk(destination, SUSPENSE_PENDING);
149 + return writeChunk(destination, formatID(id));
150 +}
151 +export function writeStartClientRenderedSuspenseBoundary(
152 + destination: Destination,
153 + id: SuspenseBoundaryID,
154 +): boolean {
155 + writeChunk(destination, SUSPENSE_CLIENT_RENDER);
156 + return writeChunk(destination, formatID(id));
157 +}
158 +export function writeEndSuspenseBoundary(destination: Destination): boolean {
159 + return writeChunk(destination, END);
160 +}
161 +
162 +export function writeStartSegment(
163 + destination: Destination,
164 + id: number,
165 +): boolean {
166 + writeChunk(destination, SEGMENT);
167 + return writeChunk(destination, formatID(id));
168 +}
169 +export function writeEndSegment(destination: Destination): boolean {
170 + return writeChunk(destination, END);
171 +}
172 +
173 +// Instruction Set
174 +
175 +export function writeCompletedSegmentInstruction(
176 + destination: Destination,
177 + responseState: ResponseState,
178 + contentSegmentID: number,
179 +): boolean {
180 + // We don't need to emit this. Instead the client will keep track of pending placeholders.
181 + // TODO: Returning true here is not correct. Avoid having to call this function at all.
182 + return true;
183 +}
184 +
185 +export function writeCompletedBoundaryInstruction(
186 + destination: Destination,
187 + responseState: ResponseState,
188 + boundaryID: SuspenseBoundaryID,
189 + contentSegmentID: number,
190 +): boolean {
191 + writeChunk(destination, SUSPENSE_UPDATE_TO_COMPLETE);
192 + writeChunk(destination, formatID(boundaryID));
193 + return writeChunk(destination, formatID(contentSegmentID));
194 }
195
21 -export function formatChunk(type: string, props: Object): Uint8Array {
22 - return convertStringToBuffer(formatChunkAsString(type, props));
196 +export function writeClientRenderBoundaryInstruction(
197 + destination: Destination,
198 + responseState: ResponseState,
199 + boundaryID: SuspenseBoundaryID,
200 +): boolean {
201 + writeChunk(destination, SUSPENSE_UPDATE_TO_CLIENT_RENDER);
202 + return writeChunk(destination, formatID(boundaryID));
203 }
packages/react-server/src/__tests__/ReactServer-test.js
+8 -1
@@ -21,8 +21,15 @@ describe('ReactServer', () => {
21 ReactNoopServer = require('react-noop-renderer/server');
22 });
23
24 + function div(...children) {
25 + children = children.map(c =>
26 + typeof c === 'string' ? {text: c, hidden: false} : c,
27 + );
28 + return {type: 'div', children, prop: undefined, hidden: false};
29 + }
30 +
31 it('can call render', () => {
32 const result = ReactNoopServer.render(<div>hello world</div>);
26 - expect(result).toEqual([{type: 'div', props: {children: 'hello world'}}]);
33 + expect(result.root).toEqual(div('hello world'));
34 });
35 });
packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+23 -2
@@ -25,6 +25,27 @@
25
26 declare var $$$hostConfig: any;
27 export opaque type Destination = mixed; // eslint-disable-line no-undef
28 +export opaque type ResponseState = mixed;
29 +export opaque type SuspenseBoundaryID = mixed;
30
29 -export const formatChunkAsString = $$$hostConfig.formatChunkAsString;
30 -export const formatChunk = $$$hostConfig.formatChunk;
31 +export const createResponseState = $$$hostConfig.createResponseState;
32 +export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
33 +export const pushTextInstance = $$$hostConfig.pushTextInstance;
34 +export const pushStartInstance = $$$hostConfig.pushStartInstance;
35 +export const pushEndInstance = $$$hostConfig.pushEndInstance;
36 +export const writePlaceholder = $$$hostConfig.writePlaceholder;
37 +export const writeStartCompletedSuspenseBoundary =
38 + $$$hostConfig.writeStartCompletedSuspenseBoundary;
39 +export const writeStartPendingSuspenseBoundary =
40 + $$$hostConfig.writeStartPendingSuspenseBoundary;
41 +export const writeStartClientRenderedSuspenseBoundary =
42 + $$$hostConfig.writeStartClientRenderedSuspenseBoundary;
43 +export const writeEndSuspenseBoundary = $$$hostConfig.writeEndSuspenseBoundary;
44 +export const writeStartSegment = $$$hostConfig.writeStartSegment;
45 +export const writeEndSegment = $$$hostConfig.writeEndSegment;
46 +export const writeCompletedSegmentInstruction =
47 + $$$hostConfig.writeCompletedSegmentInstruction;
48 +export const writeCompletedBoundaryInstruction =
49 + $$$hostConfig.writeCompletedBoundaryInstruction;
50 +export const writeClientRenderBoundaryInstruction =
51 + $$$hostConfig.writeClientRenderBoundaryInstruction;
scripts/error-codes/codes.json
+9 -1
@@ -376,5 +376,13 @@
376 "385": "A mutable source was mutated while the %s component was rendering. This is not supported. Move any mutations into event handlers or effects.",
377 "386": "The current renderer does not support microtasks. This error is likely caused by a bug in React. Please file an issue.",
378 "387": "Should have a current fiber. This is a bug in React.",
379 - "388": "Expected to find a bailed out fiber. This is a bug in React."
379 + "388": "Expected to find a bailed out fiber. This is a bug in React.",
380 + "389": "There can only be one root segment. This is a bug in React.",
381 + "390": "Errored or already flushed boundaries should not be flushed again. This is a bug in React.",
382 + "391": "A previously unvisited boundary must have exactly one root segment. This is a bug in React.",
383 + "392": "A root segment ID must have been assigned by now. This is a bug in React.",
384 + "393": "Cache cannot be refreshed during server rendering.",
385 + "394": "startTransition cannot be called during server rendering.",
386 + "395": "An ID must have been assigned before we can complete the boundary.",
387 + "396": "More boundaries or placeholders than we expected to ever emit."
388 }