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

gnoff · 2023-10-12T21:52:50Z

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: #27286

…g 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.

react-sizebot · 2023-10-12T21:57:38Z

Comparing: ea8a861...78db6ca

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	174.53 kB	174.53 kB	=	54.29 kB	54.29 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	176.61 kB	176.61 kB	=	54.94 kB	54.94 kB
facebook-www/ReactDOM-prod.classic.js	=	565.12 kB	565.12 kB	=	99.42 kB	99.42 kB
facebook-www/ReactDOM-prod.modern.js	=	548.98 kB	548.98 kB	=	96.50 kB	96.50 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 78db6ca

…ementPropertySupport` (#27511) 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: #27286 DiffTrain build for [bb77852](bb77852)

…experimental prefix for server action APIs (#56809) The latest React canary builds have a few changes that need to be adopted for compatability. 1. the `useFormState` and `useFormStatus` hooks in `react-dom` and the `formData` opiont in `react-dom/server` are no longer prefixed with `experimental_` 2. server content (an undocumented React feature) has been removed. Next only had trivial intenral use of this API and did not expose a coherent feature to Next users (no ability to seed context on refetches). It is still possible that some users used the React server context APIs which is why this should go into Next 14. ### React upstream changes - facebook/react#27513 - facebook/react#27514 - facebook/react#27511 - facebook/react#27508 - facebook/react#27502 - facebook/react#27474 - facebook/react#26789 - facebook/react#27500 - facebook/react#27488 - facebook/react#27458 - facebook/react#27471 - facebook/react#27470 - facebook/react#27464 - facebook/react#27456 - facebook/react#27462 - facebook/react#27461 - facebook/react#27460 - facebook/react#27459 - facebook/react#27454 - facebook/react#27457 - facebook/react#27453 - facebook/react#27401 - facebook/react#27443 - facebook/react#27445 - facebook/react#27364 - facebook/react#27440 - facebook/react#27436 --------- Co-authored-by: Zack Tanner <zacktanner@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jiachi Liu <inbox@huozhi.im>

…ementPropertySupport` (facebook#27511) 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: facebook#27286

…ementPropertySupport` (#27511) 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: #27286 DiffTrain build for commit bb77852.

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Oct 12, 2023

gnoff changed the title ~~The enableCustomElementPropertySupport flag changes React's handlin…~~ [Fizz] Fix children rendering in custom elements with enableCustomElementPropertySupport Oct 12, 2023

gnoff requested review from sebmarkbage and sophiebits October 12, 2023 21:56

sebmarkbage approved these changes Oct 12, 2023

View reviewed changes

gnoff merged commit bb77852 into facebook:main Oct 12, 2023
36 checks passed

gnoff deleted the fix-server-custom-elements branch October 12, 2023 22:02

gnoff mentioned this pull request Oct 13, 2023

Update React from d900fadbf to 09fbee89d. Removes server context and experimental prefix for server action APIs vercel/next.js#56809

Merged

kelihansen mentioned this pull request Oct 16, 2023

Enabling server actions breaks hydration of custom elements vercel/next.js#56867

Closed

1 task

sophiebits mentioned this pull request Oct 19, 2023

Bug: renderToString and renderToStaticMarkup skipping children for HTML custom elements #27403

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

gnoff commented Oct 12, 2023 •

edited

Loading

react-sizebot commented Oct 12, 2023

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

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

Conversation

gnoff commented Oct 12, 2023 • edited Loading

react-sizebot commented Oct 12, 2023

Critical size changes

Significant size changes

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

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

gnoff commented Oct 12, 2023 •

edited

Loading