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';
 
@@ -58,6 +59,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.
@@ -73,6 +75,7 @@ export function createResponseState(
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
+    hasEmittedRoot: false,
   };
 }
 
@@ -93,7 +96,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>
 };
 
@@ -486,6 +489,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,
@@ -617,6 +633,7 @@ function pushStartSelect(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -730,6 +747,7 @@ function pushStartOption(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   return children;
@@ -817,6 +835,7 @@ function pushInput(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -881,6 +900,7 @@ function pushStartTextArea(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
 
@@ -957,6 +977,7 @@ function pushSelfClosing(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -993,6 +1014,7 @@ function pushStartMenuItem(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   return null;
@@ -1031,6 +1053,7 @@ function pushStartGenericElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1089,6 +1112,7 @@ function pushStartCustomElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1130,6 +1154,7 @@ function pushStartPreformattedElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);