Skip to content

Commit d64a73c

Browse files
gnoffgnoff
committed
[Fiber] support hydration when rendering Suspense anywhere
stacked on facebook#32163 This continues the work of making Suspense workable anywhere in a react-dom tree. See the prior PRs for how we handle server rendering and client rendering. In this change we update the hydration implementation to be able to locate expected nodes. In particular this means hydration understands now that the default hydration context is the document body when the container is above the body. One case that is unique to hydration is clearing Suspense boundaries. When hydration fails or when the server instructs the client to recover an errored boundary it's possible that the html, head, and body tags in the initial document were written from a fallback or a different primary content on the server and need to be replaced by the client render. However these tags (and in the case of head, their content) won't be inside the comment nodes that identify the bounds of the Suspense boundary. And when client rendering you may not even render the same singletons that were server rendered. So when server rendering a boudnary which contributes to the preamble (the html, head, and body tag openings plus the head contents) we emit a special marker comment just before closing the boundary out. This marker encodes which parts of the preamble this boundary owned. If we need to clear the suspense boundary on the client we read this marker and use it to reset the appropriate singleton state.
1 parent 6cd02da commit d64a73c

File tree

11 files changed

+837
-40
lines changed

11 files changed

+837
-40
lines changed

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

Lines changed: 108 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,13 @@ const SUSPENSE_START_DATA = '$';
206206
const SUSPENSE_END_DATA = '/$';
207207
const SUSPENSE_PENDING_START_DATA = '$?';
208208
const SUSPENSE_FALLBACK_START_DATA = '$!';
209+
const PREAMBLE_CONTRIBUTION_HTML = '1'; // 0b001
210+
const PREAMBLE_CONTRIBUTION_BODY = '2'; // 0b010
211+
const PREAMBLE_CONTRIBUTION_HTML_BODY = '3'; // 0b011;
212+
const PREAMBLE_CONTRIBUTION_HEAD = '4'; // 0b100;
213+
const PREAMBLE_CONTRIBUTION_HTML_HEAD = '5'; // 0b101;
214+
const PREAMBLE_CONTRIBUTION_BODY_HEAD = '6'; // 0b110;
215+
const PREAMBLE_CONTRIBUTION_TOTAL = '7'; // 0b111;
209216
const FORM_STATE_IS_MATCHING = 'F!';
210217
const FORM_STATE_IS_NOT_MATCHING = 'F';
211218

@@ -986,6 +993,37 @@ export function clearSuspenseBoundary(
986993
data === SUSPENSE_FALLBACK_START_DATA
987994
) {
988995
depth++;
996+
} else if (data.length === 1) {
997+
const ownerDocument = parentInstance.ownerDocument;
998+
999+
switch (data) {
1000+
case PREAMBLE_CONTRIBUTION_TOTAL:
1001+
case PREAMBLE_CONTRIBUTION_HTML_BODY:
1002+
case PREAMBLE_CONTRIBUTION_HTML_HEAD:
1003+
case PREAMBLE_CONTRIBUTION_HTML:
1004+
const documentElement: Element =
1005+
(ownerDocument.documentElement: any);
1006+
releaseSingletonInstance(documentElement);
1007+
}
1008+
switch (data) {
1009+
case PREAMBLE_CONTRIBUTION_TOTAL:
1010+
case PREAMBLE_CONTRIBUTION_HTML_BODY:
1011+
case PREAMBLE_CONTRIBUTION_BODY:
1012+
case PREAMBLE_CONTRIBUTION_BODY_HEAD:
1013+
const body: Element = (ownerDocument.body: any);
1014+
releaseSingletonInstance(body);
1015+
}
1016+
switch (data) {
1017+
case PREAMBLE_CONTRIBUTION_TOTAL:
1018+
case PREAMBLE_CONTRIBUTION_HEAD:
1019+
case PREAMBLE_CONTRIBUTION_BODY_HEAD:
1020+
case PREAMBLE_CONTRIBUTION_HTML_HEAD:
1021+
const head: Element = (ownerDocument.head: any);
1022+
releaseSingletonInstance(head);
1023+
// We need to clear the head because this is the only singleton that can have children that
1024+
// were part of this boundary but are not inside this boundary.
1025+
clearHead(head);
1026+
}
9891027
}
9901028
}
9911029
// $FlowFixMe[incompatible-type] we bail out when we get a null
@@ -1499,7 +1537,7 @@ function clearContainerSparingly(container: Node) {
14991537
case 'STYLE': {
15001538
continue;
15011539
}
1502-
// Stylesheet tags are retained because tehy may likely come from 3rd party scripts and extensions
1540+
// Stylesheet tags are retained because they may likely come from 3rd party scripts and extensions
15031541
case 'LINK': {
15041542
if (((node: any): HTMLLinkElement).rel.toLowerCase() === 'stylesheet') {
15051543
continue;
@@ -1511,6 +1549,27 @@ function clearContainerSparingly(container: Node) {
15111549
return;
15121550
}
15131551

1552+
function clearHead(head: Element): void {
1553+
let node = head.firstChild;
1554+
while (node) {
1555+
const nextNode = node.nextSibling;
1556+
const nodeName = node.nodeName;
1557+
if (
1558+
isMarkedHoistable(node) ||
1559+
nodeName === 'SCRIPT' ||
1560+
nodeName === 'STYLE' ||
1561+
(nodeName === 'LINK' &&
1562+
((node: any): HTMLLinkElement).rel.toLowerCase() === 'stylesheet')
1563+
) {
1564+
// retain these nodes
1565+
} else {
1566+
head.removeChild(node);
1567+
}
1568+
node = nextNode;
1569+
}
1570+
return;
1571+
}
1572+
15141573
// Making this so we can eventually move all of the instance caching to the commit phase.
15151574
// Currently this is only used to associate fiber and props to instances for hydrating
15161575
// HostSingletons. The reason we need it here is we only want to make this binding on commit
@@ -1872,7 +1931,20 @@ export function getFirstHydratableChild(
18721931
export function getFirstHydratableChildWithinContainer(
18731932
parentContainer: Container,
18741933
): null | HydratableInstance {
1875-
return getNextHydratable(parentContainer.firstChild);
1934+
let parentElement: Element;
1935+
switch (parentContainer.nodeType) {
1936+
case DOCUMENT_NODE:
1937+
parentElement = (parentContainer: any).body;
1938+
break;
1939+
default: {
1940+
if (parentContainer.nodeName === 'HTML') {
1941+
parentElement = (parentContainer: any).ownerDocument.body;
1942+
} else {
1943+
parentElement = (parentContainer: any);
1944+
}
1945+
}
1946+
}
1947+
return getNextHydratable(parentElement.firstChild);
18761948
}
18771949

18781950
export function getFirstHydratableChildWithinSuspenseInstance(
@@ -1881,6 +1953,40 @@ export function getFirstHydratableChildWithinSuspenseInstance(
18811953
return getNextHydratable(parentInstance.nextSibling);
18821954
}
18831955

1956+
// If it were possible to have more than one scope singleton in a DOM tree
1957+
// we would need to model this as a stack but since you can only have one <head>
1958+
// and head is the only singleton that is a scope in DOM we can get away with
1959+
// tracking this as a single value.
1960+
let previousHydratableOnEnteringScopedSingleton: null | HydratableInstance =
1961+
null;
1962+
1963+
export function getFirstHydratableChildWithinSingleton(
1964+
type: string,
1965+
singletonInstance: Instance,
1966+
currentHydratableInstance: null | HydratableInstance,
1967+
): null | HydratableInstance {
1968+
if (isSingletonScope(type)) {
1969+
previousHydratableOnEnteringScopedSingleton = currentHydratableInstance;
1970+
return getNextHydratable(singletonInstance.firstChild);
1971+
} else {
1972+
return currentHydratableInstance;
1973+
}
1974+
}
1975+
1976+
export function getNextHydratableSiblingAfterSingleton(
1977+
type: string,
1978+
currentHydratableInstance: null | HydratableInstance,
1979+
): null | HydratableInstance {
1980+
if (isSingletonScope(type)) {
1981+
const previousHydratableInstance =
1982+
previousHydratableOnEnteringScopedSingleton;
1983+
previousHydratableOnEnteringScopedSingleton = null;
1984+
return previousHydratableInstance;
1985+
} else {
1986+
return currentHydratableInstance;
1987+
}
1988+
}
1989+
18841990
export function describeHydratableInstanceForDevWarnings(
18851991
instance: HydratableInstance,
18861992
): string | {type: string, props: $ReadOnly<Props>} {

‎packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

Lines changed: 78 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -684,16 +684,23 @@ export function completeResumableState(resumableState: ResumableState): void {
684684
resumableState.bootstrapModules = undefined;
685685
}
686686

687+
const NoContribution /* */ = 0b000;
688+
const HTMLContribution /* */ = 0b001;
689+
const BodyContribution /* */ = 0b010;
690+
const HeadContribution /* */ = 0b100;
691+
687692
export type PreambleState = {
688693
htmlChunks: null | Array<Chunk | PrecomputedChunk>,
689694
headChunks: null | Array<Chunk | PrecomputedChunk>,
690695
bodyChunks: null | Array<Chunk | PrecomputedChunk>,
696+
contribution: number,
691697
};
692698
export function createPreambleState(): PreambleState {
693699
return {
694700
htmlChunks: null,
695701
headChunks: null,
696702
bodyChunks: null,
703+
contribution: NoContribution,
697704
};
698705
}
699706

@@ -3227,7 +3234,7 @@ function pushStartHead(
32273234
throw new Error(`The ${'`<head>`'} tag may only be rendered once.`);
32283235
}
32293236
preamble.headChunks = [];
3230-
return pushStartGenericElement(preamble.headChunks, props, 'head');
3237+
return pushStartSingletonElement(preamble.headChunks, props, 'head');
32313238
} else {
32323239
// This <head> is deep and is likely just an error. we emit it inline though.
32333240
// Validation should warn that this tag is the the wrong spot.
@@ -3251,7 +3258,7 @@ function pushStartBody(
32513258
}
32523259

32533260
preamble.bodyChunks = [];
3254-
return pushStartGenericElement(preamble.bodyChunks, props, 'body');
3261+
return pushStartSingletonElement(preamble.bodyChunks, props, 'body');
32553262
} else {
32563263
// This <head> is deep and is likely just an error. we emit it inline though.
32573264
// Validation should warn that this tag is the the wrong spot.
@@ -3275,7 +3282,7 @@ function pushStartHtml(
32753282
}
32763283

32773284
preamble.htmlChunks = [DOCTYPE];
3278-
return pushStartGenericElement(preamble.htmlChunks, props, 'html');
3285+
return pushStartSingletonElement(preamble.htmlChunks, props, 'html');
32793286
} else {
32803287
// This <html> is deep and is likely just an error. we emit it inline though.
32813288
// Validation should warn that this tag is the the wrong spot.
@@ -3416,6 +3423,43 @@ function pushScriptImpl(
34163423
return null;
34173424
}
34183425

3426+
// This is a fork of pushStartGenericElement because we don't ever want to do
3427+
// the children as strign optimization on that path when rendering singletons.
3428+
// When we eliminate that special path we can delete this fork and unify it again
3429+
function pushStartSingletonElement(
3430+
target: Array<Chunk | PrecomputedChunk>,
3431+
props: Object,
3432+
tag: string,
3433+
): ReactNodeList {
3434+
target.push(startChunkForTag(tag));
3435+
3436+
let children = null;
3437+
let innerHTML = null;
3438+
for (const propKey in props) {
3439+
if (hasOwnProperty.call(props, propKey)) {
3440+
const propValue = props[propKey];
3441+
if (propValue == null) {
3442+
continue;
3443+
}
3444+
switch (propKey) {
3445+
case 'children':
3446+
children = propValue;
3447+
break;
3448+
case 'dangerouslySetInnerHTML':
3449+
innerHTML = propValue;
3450+
break;
3451+
default:
3452+
pushAttribute(target, propKey, propValue);
3453+
break;
3454+
}
3455+
}
3456+
}
3457+
3458+
target.push(endOfStartTag);
3459+
pushInnerHTML(target, innerHTML, children);
3460+
return children;
3461+
}
3462+
34193463
function pushStartGenericElement(
34203464
target: Array<Chunk | PrecomputedChunk>,
34213465
props: Object,
@@ -3907,14 +3951,17 @@ export function hoistPreambleState(
39073951
preambleState: PreambleState,
39083952
) {
39093953
const rootPreamble = renderState.preamble;
3910-
if (rootPreamble.htmlChunks === null) {
3954+
if (rootPreamble.htmlChunks === null && preambleState.htmlChunks) {
39113955
rootPreamble.htmlChunks = preambleState.htmlChunks;
3956+
preambleState.contribution |= HTMLContribution;
39123957
}
3913-
if (rootPreamble.headChunks === null) {
3958+
if (rootPreamble.headChunks === null && preambleState.headChunks) {
39143959
rootPreamble.headChunks = preambleState.headChunks;
3960+
preambleState.contribution |= HeadContribution;
39153961
}
3916-
if (rootPreamble.bodyChunks === null) {
3962+
if (rootPreamble.bodyChunks === null && preambleState.bodyChunks) {
39173963
rootPreamble.bodyChunks = preambleState.bodyChunks;
3964+
preambleState.contribution |= BodyContribution;
39183965
}
39193966
}
39203967

@@ -4091,7 +4138,11 @@ export function writeStartClientRenderedSuspenseBoundary(
40914138
export function writeEndCompletedSuspenseBoundary(
40924139
destination: Destination,
40934140
renderState: RenderState,
4141+
preambleState: null | PreambleState,
40944142
): boolean {
4143+
if (preambleState) {
4144+
writePreambleContribution(destination, preambleState);
4145+
}
40954146
return writeChunkAndReturn(destination, endSuspenseBoundary);
40964147
}
40974148
export function writeEndPendingSuspenseBoundary(
@@ -4103,10 +4154,31 @@ export function writeEndPendingSuspenseBoundary(
41034154
export function writeEndClientRenderedSuspenseBoundary(
41044155
destination: Destination,
41054156
renderState: RenderState,
4157+
preambleState: null | PreambleState,
41064158
): boolean {
4159+
if (preambleState) {
4160+
writePreambleContribution(destination, preambleState);
4161+
}
41074162
return writeChunkAndReturn(destination, endSuspenseBoundary);
41084163
}
41094164

4165+
const boundaryPreambleContributionChunkStart = stringToPrecomputedChunk('<!--');
4166+
const boundaryPreambleContributionChunkEnd = stringToPrecomputedChunk('-->');
4167+
4168+
function writePreambleContribution(
4169+
destination: Destination,
4170+
preambleState: PreambleState,
4171+
) {
4172+
const contribution = preambleState.contribution;
4173+
if (contribution !== NoContribution) {
4174+
writeChunk(destination, boundaryPreambleContributionChunkStart);
4175+
// This is a number type so we can do the fast path without coercion checking
4176+
// eslint-disable-next-line react-internal/safe-string-coercion
4177+
writeChunk(destination, stringToChunk('' + contribution));
4178+
writeChunk(destination, boundaryPreambleContributionChunkEnd);
4179+
}
4180+
}
4181+
41104182
const startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
41114183
const startSegmentHTML2 = stringToPrecomputedChunk('">');
41124184
const endSegmentHTML = stringToPrecomputedChunk('</div>');

‎packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,20 +244,30 @@ export function writeStartClientRenderedSuspenseBoundary(
244244
export function writeEndCompletedSuspenseBoundary(
245245
destination: Destination,
246246
renderState: RenderState,
247+
preambleState: null | PreambleState,
247248
): boolean {
248249
if (renderState.generateStaticMarkup) {
249250
return true;
250251
}
251-
return writeEndCompletedSuspenseBoundaryImpl(destination, renderState);
252+
return writeEndCompletedSuspenseBoundaryImpl(
253+
destination,
254+
renderState,
255+
preambleState,
256+
);
252257
}
253258
export function writeEndClientRenderedSuspenseBoundary(
254259
destination: Destination,
255260
renderState: RenderState,
261+
preambleState: null | PreambleState,
256262
): boolean {
257263
if (renderState.generateStaticMarkup) {
258264
return true;
259265
}
260-
return writeEndClientRenderedSuspenseBoundaryImpl(destination, renderState);
266+
return writeEndClientRenderedSuspenseBoundaryImpl(
267+
destination,
268+
renderState,
269+
preambleState,
270+
);
261271
}
262272

263273
export type TransitionStatus = FormStatus;

0 commit comments

Comments
 (0)