Emit reactroot attribute on the first element we discover

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.

Author: sebmarkbage

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';
 
@@ -59,6 +60,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.
@@ -74,6 +76,7 @@ export function createResponseState(
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
+    hasEmittedRoot: false,
   };
 }
 
@@ -94,7 +97,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>
 };
 
@@ -487,6 +490,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,
@@ -618,6 +634,7 @@ function pushStartSelect(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -731,6 +748,7 @@ function pushStartOption(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   return children;
@@ -818,6 +836,7 @@ function pushInput(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -882,6 +901,7 @@ function pushStartTextArea(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
 
@@ -958,6 +978,7 @@ function pushSelfClosing(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -994,6 +1015,7 @@ function pushStartMenuItem(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   return null;
@@ -1032,6 +1054,7 @@ function pushStartGenericElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1086,6 +1109,7 @@ function pushStartCustomElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1127,6 +1151,7 @@ function pushStartPreformattedElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);