Prefix html tags with doctype

facebook · Jun 28, 2024 · 0a19fad · 0a19fad
1 parent 8b8c255
commit 0a19fad
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/packages/react-html/src/ReactFizzConfigHTML.js b/packages/react-html/src/ReactFizzConfigHTML.js
@@ -41,10 +41,6 @@ import {
   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('');
-
 export type {
   RenderState,
   ResumableState,
@@ -81,6 +77,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,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');