,
props: Object,
@@ -3907,14 +3951,17 @@ export function hoistPreambleState(
preambleState: PreambleState,
) {
const rootPreamble = renderState.preamble;
- if (rootPreamble.htmlChunks === null) {
+ if (rootPreamble.htmlChunks === null && preambleState.htmlChunks) {
rootPreamble.htmlChunks = preambleState.htmlChunks;
+ preambleState.contribution |= HTMLContribution;
}
- if (rootPreamble.headChunks === null) {
+ if (rootPreamble.headChunks === null && preambleState.headChunks) {
rootPreamble.headChunks = preambleState.headChunks;
+ preambleState.contribution |= HeadContribution;
}
- if (rootPreamble.bodyChunks === null) {
+ if (rootPreamble.bodyChunks === null && preambleState.bodyChunks) {
rootPreamble.bodyChunks = preambleState.bodyChunks;
+ preambleState.contribution |= BodyContribution;
}
}
@@ -4091,7 +4138,11 @@ export function writeStartClientRenderedSuspenseBoundary(
export function writeEndCompletedSuspenseBoundary(
destination: Destination,
renderState: RenderState,
+ preambleState: null | PreambleState,
): boolean {
+ if (preambleState) {
+ writePreambleContribution(destination, preambleState);
+ }
return writeChunkAndReturn(destination, endSuspenseBoundary);
}
export function writeEndPendingSuspenseBoundary(
@@ -4103,10 +4154,31 @@ export function writeEndPendingSuspenseBoundary(
export function writeEndClientRenderedSuspenseBoundary(
destination: Destination,
renderState: RenderState,
+ preambleState: null | PreambleState,
): boolean {
+ if (preambleState) {
+ writePreambleContribution(destination, preambleState);
+ }
return writeChunkAndReturn(destination, endSuspenseBoundary);
}
+const boundaryPreambleContributionChunkStart = stringToPrecomputedChunk('');
+
+function writePreambleContribution(
+ destination: Destination,
+ preambleState: PreambleState,
+) {
+ const contribution = preambleState.contribution;
+ if (contribution !== NoContribution) {
+ writeChunk(destination, boundaryPreambleContributionChunkStart);
+ // This is a number type so we can do the fast path without coercion checking
+ // eslint-disable-next-line react-internal/safe-string-coercion
+ writeChunk(destination, stringToChunk('' + contribution));
+ writeChunk(destination, boundaryPreambleContributionChunkEnd);
+ }
+}
+
const startSegmentHTML = stringToPrecomputedChunk('');
const endSegmentHTML = stringToPrecomputedChunk('
');
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index 491d322793941..ecd12d2ac5fd1 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -244,20 +244,30 @@ export function writeStartClientRenderedSuspenseBoundary(
export function writeEndCompletedSuspenseBoundary(
destination: Destination,
renderState: RenderState,
+ preambleState: null | PreambleState,
): boolean {
if (renderState.generateStaticMarkup) {
return true;
}
- return writeEndCompletedSuspenseBoundaryImpl(destination, renderState);
+ return writeEndCompletedSuspenseBoundaryImpl(
+ destination,
+ renderState,
+ preambleState,
+ );
}
export function writeEndClientRenderedSuspenseBoundary(
destination: Destination,
renderState: RenderState,
+ preambleState: null | PreambleState,
): boolean {
if (renderState.generateStaticMarkup) {
return true;
}
- return writeEndClientRenderedSuspenseBoundaryImpl(destination, renderState);
+ return writeEndClientRenderedSuspenseBoundaryImpl(
+ destination,
+ renderState,
+ preambleState,
+ );
}
export type TransitionStatus = FormStatus;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index ac6374600fc64..d0a1e484f2810 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -8923,7 +8923,7 @@ describe('ReactDOMFizzServer', () => {
);
});
- it('can server render Suspense before, after, and around ', async () => {
+ it('can render Suspense before, after, and around ', async () => {
function BlockedOn({value, children}) {
readText(value);
return children;
@@ -8989,9 +8989,33 @@ describe('ReactDOMFizzServer', () => {
,
);
+
+ const root = ReactDOMClient.hydrateRoot(document, );
+ await waitForAll([]);
+ expect(getVisibleChildren(document)).toEqual(
+
+
+
+
+
+ before
+ hello world
+ after
+
+ ,
+ );
+ assertConsoleErrorDev(['In HTML, cannot be a child of <#document>']);
+
+ root.unmount();
+ expect(getVisibleChildren(document)).toEqual(
+
+
+
+ ,
+ );
});
- it('can server render Suspense before, after, and around ', async () => {
+ it('can render Suspense before, after, and around ', async () => {
function BlockedOn({value, children}) {
readText(value);
return children;
@@ -9052,9 +9076,83 @@ describe('ReactDOMFizzServer', () => {
,
);
+
+ const root = ReactDOMClient.hydrateRoot(document,