Add a DOCTYPE to the stream if the <html> tag is rendered (#21680)

This makes it a lot easier to render the whole document using React without needing to patch into the stream. We expect that currently people will still have to patch into the stream to do advanced things but eventually the goal is that you shouldn't need to.
facebook · Jun 14, 2021 · bd45ad0 · bd45ad0
1 parent a8f5e77
commit bd45ad0
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 13 deletions.
diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html
@@ -21,9 +21,14 @@ <h1>Fizz Example</h1>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let controller = new AbortController();
-      let stream = ReactDOMFizzServer.renderToReadableStream(<body>Success</body>, {
-        signal: controller.signal,
-      });
+      let stream = ReactDOMFizzServer.renderToReadableStream(
+        <html>
+          <body>Success</body>
+        </html>,
+        {
+          signal: controller.signal,
+        }
+      );
       let response = new Response(stream, {
         headers: {'Content-Type': 'text/html'},
       });

diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
@@ -28,8 +28,6 @@ export default function render(url, res) {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
         res.setHeader('Content-type', 'text/html');
-        // There's no way to render a doctype in React so prepend manually.
-        res.write('<!DOCTYPE html>');
         startWriting();
       },
       onError(x) {

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -58,6 +58,19 @@ describe('ReactDOMFizzServer', () => {
     expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
+  // @gate experimental
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const stream = ReactDOMFizzServer.renderToReadableStream(
+      <html>
+        <body>hello world</body>
+      </html>,
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+    );
+  });
+
   // @gate experimental
   it('emits all HTML as one unit if we wait until the end to start', async () => {
     let hasLoaded = false;

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -68,6 +68,22 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
+  // @gate experimental
+  it('should emit DOCTYPE at the root of the document', () => {
+    const {writable, output} = getTestWritable();
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      <html>
+        <body>hello world</body>
+      </html>,
+      writable,
+    );
+    startWriting();
+    jest.runAllTimers();
+    expect(output.result).toMatchInlineSnapshot(
+      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+    );
+  });
+
   // @gate experimental
   it('should start writing after startWriting', () => {
     const {writable, output} = getTestWritable();

diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -49,6 +49,7 @@ describe('rendering React components at document', () => {
       }
 
       const markup = ReactDOMServer.renderToString(<Root hello="world" />);
+      expect(markup).not.toContain('DOCTYPE');
       const testDocument = getTestDocument(markup);
       const body = testDocument.body;
 

diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -64,7 +64,7 @@ function renderToStringImpl(
       generateStaticMarkup,
       options ? options.identifierPrefix : undefined,
     ),
-    createRootFormatContext(undefined),
+    createRootFormatContext(),
     Infinity,
     onError,
     undefined,

diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -79,7 +79,7 @@ function renderToNodeStreamImpl(
     children,
     destination,
     createResponseState(false, options ? options.identifierPrefix : undefined),
-    createRootFormatContext(undefined),
+    createRootFormatContext(),
     Infinity,
     onError,
     onCompleteAll,

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -87,9 +87,10 @@ export function createResponseState(
 // Constants for the insertion mode we're currently writing in. We don't encode all HTML5 insertion
 // modes. We only include the variants as they matter for the sake of our purposes.
 // We don't actually provide the namespace therefore we use constants instead of the string.
-const HTML_MODE = 0;
-const SVG_MODE = 1;
-const MATHML_MODE = 2;
+const ROOT_HTML_MODE = 0; // Used for the root most element tag.
+export const HTML_MODE = 1;
+const SVG_MODE = 2;
+const MATHML_MODE = 3;
 const HTML_TABLE_MODE = 4;
 const HTML_TABLE_BODY_MODE = 5;
 const HTML_TABLE_ROW_MODE = 6;
@@ -121,7 +122,7 @@ export function createRootFormatContext(namespaceURI?: string): FormatContext {
       ? SVG_MODE
       : namespaceURI === 'http://www.w3.org/1998/Math/MathML'
       ? MATHML_MODE
-      : HTML_MODE;
+      : ROOT_HTML_MODE;
   return createFormatContext(insertionMode, null);
 }
 
@@ -160,6 +161,10 @@ export function getChildFormatContext(
     // entered plain HTML again.
     return createFormatContext(HTML_MODE, null);
   }
+  if (parentContext.insertionMode === ROOT_HTML_MODE) {
+    // We've emitted the root and is now in plain HTML mode.
+    return createFormatContext(HTML_MODE, null);
+  }
   return parentContext;
 }
 
@@ -1262,6 +1267,8 @@ function startChunkForTag(tag: string): PrecomputedChunk {
   return tagStartChunk;
 }
 
+const DOCTYPE: PrecomputedChunk = stringToPrecomputedChunk('<!DOCTYPE html>');
+
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
   type: string,
@@ -1371,6 +1378,21 @@ export function pushStartInstance(
         assignID,
       );
     }
+    case 'html': {
+      if (formatContext.insertionMode === ROOT_HTML_MODE) {
+        // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
+        // then we also emit the DOCTYPE as part of the root content as a convenience for
+        // rendering the whole document.
+        target.push(DOCTYPE);
+      }
+      return pushStartGenericElement(
+        target,
+        props,
+        type,
+        responseState,
+        assignID,
+      );
+    }
     default: {
       if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
         // Generic element
@@ -1541,6 +1563,7 @@ export function writeStartSegment(
   id: number,
 ): boolean {
   switch (formatContext.insertionMode) {
+    case ROOT_HTML_MODE:
     case HTML_MODE: {
       writeChunk(destination, startSegmentHTML);
       writeChunk(destination, responseState.segmentPrefix);
@@ -1597,6 +1620,7 @@ export function writeEndSegment(
   formatContext: FormatContext,
 ): boolean {
   switch (formatContext.insertionMode) {
+    case ROOT_HTML_MODE:
     case HTML_MODE: {
       return writeChunk(destination, endSegmentHTML);
     }

diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -7,7 +7,10 @@
  * @flow
  */
 
-import type {SuspenseBoundaryID} from './ReactDOMServerFormatConfig';
+import type {
+  SuspenseBoundaryID,
+  FormatContext,
+} from './ReactDOMServerFormatConfig';
 
 import {
   createResponseState as createResponseStateImpl,
@@ -16,6 +19,7 @@ import {
   writeStartClientRenderedSuspenseBoundary as writeStartClientRenderedSuspenseBoundaryImpl,
   writeEndCompletedSuspenseBoundary as writeEndCompletedSuspenseBoundaryImpl,
   writeEndClientRenderedSuspenseBoundary as writeEndClientRenderedSuspenseBoundaryImpl,
+  HTML_MODE,
 } from './ReactDOMServerFormatConfig';
 
 import type {
@@ -62,14 +66,20 @@ export function createResponseState(
   };
 }
 
+export function createRootFormatContext(): FormatContext {
+  return {
+    insertionMode: HTML_MODE, // We skip the root mode because we don't want to emit the DOCTYPE in legacy mode.
+    selectedValue: null,
+  };
+}
+
 export type {
   FormatContext,
   SuspenseBoundaryID,
   OpaqueIDType,
 } from './ReactDOMServerFormatConfig';
 
 export {
-  createRootFormatContext,
   getChildFormatContext,
   createSuspenseBoundaryID,
   makeServerID,