Add doctype to renderToMarkup when html tags are rendered (#30122)

sebmarkbage · web-flow · commit 0d1fdb5c2ebd · 2024-06-28T09:35:12.000-04:00
Stacked on top of #30121. This is the same thing we do for `renderToReadableStream` so that you don't have to manually inject it into the stream. The only reason we didn't for `renderToString` / `renderToStaticMarkup` was to preserve legacy behavior but since this is a new API we can change that. If you're rendering a partial it doesn't matter. This is likely what you'd do for RSS feeds. The question is if you can reliably rely on the doctype being used while rendering e-mails since many clients are so quirky. However, if you're careful it also doesn't hurt so it seems best to include it.
diff --git a/packages/react-html/src/ReactFizzConfigHTML.js b/packages/react-html/src/ReactFizzConfigHTML.js
@@ -36,14 +36,7 @@ export const isPrimaryRenderer = false;
 // Disable Client Hooks
 export const supportsClientAPIs = false;
 
-import {
-  stringToChunk,
-  stringToPrecomputedChunk,
-} from 'react-server/src/ReactServerStreamConfig';
-
-// this chunk is empty on purpose because we do not want to emit the DOCTYPE
-// when markup is rendering HTML
-export const doctypeChunk: PrecomputedChunk = stringToPrecomputedChunk('');
+import {stringToChunk} from 'react-server/src/ReactServerStreamConfig';
 
 export type {
   RenderState,
@@ -81,6 +74,7 @@ export {
   resetResumableState,
   completeResumableState,
   emitEarlyPreloads,
+  doctypeChunk,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
 import escapeTextForBrowser from 'react-dom-bindings/src/server/escapeTextForBrowser';
diff --git a/packages/react-html/src/__tests__/ReactHTMLClient-test.js b/packages/react-html/src/__tests__/ReactHTMLClient-test.js
@@ -28,6 +28,17 @@ describe('ReactHTML', () => {
     expect(html).toBe('<div>hello world</div>');
   });
 
+  it('should prefix html tags with a doctype', async () => {
+    const html = await ReactHTML.renderToMarkup(
+      <html>
+        <body>hello</body>
+      </html>,
+    );
+    expect(html).toBe(
+      '<!DOCTYPE html><html><head></head><body>hello</body></html>',
+    );
+  });
+
   it('should error on useState', async () => {
     function Component() {
       const [state] = React.useState('hello');
diff --git a/packages/react-html/src/__tests__/ReactHTMLServer-test.js b/packages/react-html/src/__tests__/ReactHTMLServer-test.js
@@ -38,6 +38,20 @@ describe('ReactHTML', () => {
     expect(html).toBe('<div>hello world</div>');
   });
 
+  it('should prefix html tags with a doctype', async () => {
+    const html = await ReactHTML.renderToMarkup(
+      // We can't use JSX because that's client-JSX in our tests.
+      React.createElement(
+        'html',
+        null,
+        React.createElement('body', null, 'hello'),
+      ),
+    );
+    expect(html).toBe(
+      '<!DOCTYPE html><html><head></head><body>hello</body></html>',
+    );
+  });
+
   it('should error on useState', async () => {
     function Component() {
       const [state] = React.useState('hello');
