Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Fizz] Fix children rendering in custom elements with enableCustomElementPropertySupport (#27511)

Browse Source 
The `enableCustomElementPropertySupport` flag changes React's handling
of custom elements in a way that is more useful that just treating every
prop as an attribute. However when server rendering we have no choice
but to serialize props as attributes. When this flag is on and React
supports more prop types on the client like functions and objects the
server implementation needs to be a bit more naunced in how it renders
these components. With this flag on `false`, function, and object props
are omitted entirely and `true` is normalized to `""`. There was a bug
however in the implementation which caused children more complex than a
single string to be omitted because it matched the object type filter.
This change reorganizes the code a bit to put these filters in the
default prop handline case, leaving children, style, and innerHTML to be
handled via normal logic.

fixes: https://github.com/facebook/react/issues/27286
This commit is contained in:
Josh Story
2023-10-12 15:02:26 -07:00
committed by GitHub
parent ea8a8619ce
commit bb778528d1
2 changed files with 45 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
Vendored
+19 -22
View File
@@ -3134,32 +3134,13 @@ function pushStartCustomElement(
let children = null;
let innerHTML = null;
for (let propKey in props) {
for (const propKey in props) {
if (hasOwnProperty.call(props, propKey)) {
let propValue = props[propKey];
if (propValue == null) {
continue;
}
if (
enableCustomElementPropertySupport &&
(typeof propValue === 'function' || typeof propValue === 'object')
) {
// It is normal to render functions and objects on custom elements when
// client rendering, but when server rendering the output isn't useful,
// so skip it.
continue;
}
if (enableCustomElementPropertySupport && propValue === false) {
continue;
}
if (enableCustomElementPropertySupport && propValue === true) {
propValue = '';
}
if (enableCustomElementPropertySupport && propKey === 'className') {
// className gets rendered as class on the client, so it should be
// rendered as class on the server.
propKey = 'class';
}
let attributeName = propKey;
switch (propKey) {
case 'children':
children = propValue;
@@ -3174,15 +3155,31 @@ function pushStartCustomElement(
case 'suppressHydrationWarning':
// Ignored. These are built-in to React on the client.
break;
case 'className':
if (enableCustomElementPropertySupport) {
// className gets rendered as class on the client, so it should be
// rendered as class on the server.
attributeName = 'class';
}
// intentional fallthrough
default:
if (
isAttributeNameSafe(propKey) &&
typeof propValue !== 'function' &&
typeof propValue !== 'symbol'
) {
if (enableCustomElementPropertySupport) {
if (propValue === false) {
continue;
} else if (propValue === true) {
propValue = '';
} else if (typeof propValue === 'object') {
continue;
}
}
target.push(
attributeSeparator,
stringToChunk(propKey),
stringToChunk(attributeName),
attributeAssign,
stringToChunk(escapeTextForBrowser(propValue)),
attributeEnd,
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
Vendored
+26
View File
@@ -3624,6 +3624,32 @@ describe('ReactDOMFizzServer', () => {
);
});
// bugfix: https://github.com/facebook/react/issues/27286 affecting enableCustomElementPropertySupport flag
it('can render custom elements with children on ther server', async () => {
await act(() => {
renderToPipeableStream(
<html>
<body>
<my-element>
<div>foo</div>
</my-element>
</body>
</html>,
).pipe(writable);
});
expect(getVisibleChildren(document)).toEqual(
<html>
<head />
<body>
<my-element>
<div>foo</div>
</my-element>
</body>
</html>,
);
});
describe('error escaping', () => {
it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
window.__outlet = {};