Emit reactroot attribute on the first element we discover (#21154)

This may not be the first root element if the root is a fragment and the second one unsuspends first. But this tag doesn't work well for root fragments anyway.
facebook · Apr 14, 2021 · 266c26a · 266c26a
1 parent a4a940d
commit 266c26a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -116,6 +116,10 @@ describe('ReactDOMFizzServer', () => {
  // We assume this is a React added ID that's a non-visual implementation detail.
  continue;
  }
+ if (attributes[i].name === 'data-reactroot') {
+ // We ignore React injected attributes.
+ continue;
+ }
  props[attributes[i].name] = attributes[i].value;
  }
  props.children = getVisibleChildren(node);

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -55,7 +55,9 @@ describe('ReactDOMFizzServer', () => {
  <div>hello world</div>,
  );
  const result = await readResult(stream);
- expect(result).toMatchInlineSnapshot(`"<div>hello world<!-- --></div>"`);
+ expect(result).toMatchInlineSnapshot(
+ `"<div data-reactroot=\\"\\">hello world<!-- --></div>"`,
+ );
  });
 
  // @gate experimental
@@ -94,7 +96,7 @@ describe('ReactDOMFizzServer', () => {
 
  const result = await readResult(stream);
  expect(result).toMatchInlineSnapshot(
- `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
+ `"<div data-reactroot=\\"\\"><!--$-->Done<!-- --><!--/$--></div>"`,
  );
  });
 

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -66,7 +66,7 @@ describe('ReactDOMFizzServer', () => {
  startWriting();
  jest.runAllTimers();
  expect(output.result).toMatchInlineSnapshot(
- `"<div>hello world<!-- --></div>"`,
+ `"<div data-reactroot=\\"\\">hello world<!-- --></div>"`,
  );
  });
 
@@ -84,7 +84,7 @@ describe('ReactDOMFizzServer', () => {
  // Then React starts writing.
  startWriting();
  expect(output.result).toMatchInlineSnapshot(
- `"<!doctype html><html><head><title>test</title><head><body><div>hello world<!-- --></div>"`,
+ `"<!doctype html><html><head><title>test</title><head><body><div data-reactroot=\\"\\">hello world<!-- --></div>"`,
  );
  });
 
@@ -132,7 +132,7 @@ describe('ReactDOMFizzServer', () => {
  // Then React starts writing.
  startWriting();
  expect(output.result).toMatchInlineSnapshot(
- `"<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!-- --><!--/$--></div>"`,
+ `"<!doctype html><html><head><title>test</title><head><body><div data-reactroot=\\"\\"><!--$-->Done<!-- --><!--/$--></div>"`,
  );
  });
 

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -32,6 +32,7 @@ import {
  OVERLOADED_BOOLEAN,
  NUMERIC,
  POSITIVE_NUMERIC,
+ ROOT_ATTRIBUTE_NAME,
 } from '../shared/DOMProperty';
 import {isUnitlessNumber} from '../shared/CSSProperty';
 
@@ -63,6 +64,7 @@ export type ResponseState = {
  sentCompleteSegmentFunction: boolean,
  sentCompleteBoundaryFunction: boolean,
  sentClientRenderFunction: boolean,
+ hasEmittedRoot: boolean,
 };
 
 // Allows us to keep track of what we've already written so we can refer back to it.
@@ -79,6 +81,7 @@ export function createResponseState(
  sentCompleteSegmentFunction: false,
  sentCompleteBoundaryFunction: false,
  sentClientRenderFunction: false,
+ hasEmittedRoot: false,
  };
 }
 
@@ -99,7 +102,7 @@ type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
 // Lets us keep track of contextual state and pick it back up after suspending.
 export type FormatContext = {
- insertionMode: InsertionMode, // root/svg/html/mathml/table
+ insertionMode: InsertionMode, // svg/html/mathml/table
  selectedValue: null | string | Array<string>, // the selected value(s) inside a <select>, or null outside <select>
 };
 
@@ -508,6 +511,19 @@ const endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
 const idAttr = stringToPrecomputedChunk(' id="');
 const attrEnd = stringToPrecomputedChunk('"');
 
+const reactRootAttribute = stringToPrecomputedChunk(
+ ' ' + ROOT_ATTRIBUTE_NAME + '=""',
+);
+function pushReactRoot(
+ target: Array<Chunk | PrecomputedChunk>,
+ responseState: ResponseState,
+): void {
+ if (!responseState.hasEmittedRoot) {
+ responseState.hasEmittedRoot = true;
+ target.push(reactRootAttribute);
+ }
+}
+
 function pushID(
  target: Array<Chunk | PrecomputedChunk>,
  responseState: ResponseState,
@@ -639,6 +655,7 @@ function pushStartSelect(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTag);
  pushInnerHTML(target, innerHTML, children);
@@ -752,6 +769,7 @@ function pushStartOption(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTag);
  return children;
@@ -839,6 +857,7 @@ function pushInput(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTagSelfClosing);
  return null;
@@ -903,6 +922,7 @@ function pushStartTextArea(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTag);
 
@@ -979,6 +999,7 @@ function pushSelfClosing(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTagSelfClosing);
  return null;
@@ -1015,6 +1036,7 @@ function pushStartMenuItem(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTag);
  return null;
@@ -1053,6 +1075,7 @@ function pushStartGenericElement(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTag);
  pushInnerHTML(target, innerHTML, children);
@@ -1111,6 +1134,7 @@ function pushStartCustomElement(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTag);
  pushInnerHTML(target, innerHTML, children);
@@ -1152,6 +1176,7 @@ function pushStartPreformattedElement(
  if (assignID !== null) {
  pushID(target, responseState, assignID, props.id);
  }
+ pushReactRoot(target, responseState);
 
  target.push(endOfStartTag);