amirho/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2026-02-23 20:23:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Sebastian Markbåge
2024-06-28 15:35:12 +02:00
committed by GitHub
parent 1e241f9d6c
commit 0d1fdb5c2e
3 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react-html/src/ReactFizzConfigHTML.js vendored
View File

@@ -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';

11
packages/react-html/src/__tests__/ReactHTMLClient-test.js vendored
View File

@@ -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');

14
packages/react-html/src/__tests__/ReactHTMLServer-test.js vendored
View File

@@ -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');