Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fizz] Disallow complex children in <title> elements #24679

Merged
merged 4 commits into from
Jun 7, 2022

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented Jun 6, 2022

<title> Elements in the DOM can only have Text content. In Fizz if more than one text node is emitted an HTML comment node is used as a text separator. However content restriction of the DOM representation of the title element cause this separator to be displayed as escaped text which is not intended.

This commit special cases title handling, primarily to issue warnings if you pass complex children to <title>. At the moment title expects to receive a single child or an array of length 1. In both cases the type of that child must be string or number. If anything more complex is provided a warning will be logged to the console explaining why this is problematic.

There is no runtime behavior change so broken things are still broken (e.g. returning two text nodes which will cause a separator or using Suspense inside title children) but they should at least be accompanied by warnings that are useful.

One edge case that will now warn but won't technically break an application is if you use a Component that returns a single string as a child of title. This is a form of indirection that works but becasue we cannot discriminate between a Component that will follow the rules and one that violates them the warning is issued regardless.

@sizebot
Copy link

sizebot commented Jun 6, 2022

Comparing: 4f29ba1...d97aacc

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 = 131.83 kB 131.83 kB = 42.33 kB 42.33 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 137.10 kB 137.10 kB = 43.92 kB 43.92 kB
facebook-www/ReactDOM-prod.classic.js = 441.04 kB 441.04 kB = 80.69 kB 80.69 kB
facebook-www/ReactDOM-prod.modern.js = 426.35 kB 426.35 kB = 78.49 kB 78.49 kB
facebook-www/ReactDOMForked-prod.classic.js = 440.57 kB 440.57 kB = 80.61 kB 80.61 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactDOMServerStreaming-prod.modern.js +1.26% 81.91 kB 82.94 kB +0.52% 17.43 kB 17.52 kB
facebook-www/ReactDOMServer-prod.modern.js +1.24% 78.34 kB 79.32 kB +0.55% 16.42 kB 16.51 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +1.05% 242.18 kB 244.71 kB +0.59% 57.80 kB 58.14 kB
facebook-www/ReactDOMServer-dev.modern.js +1.03% 245.90 kB 248.43 kB +0.59% 58.65 kB 58.99 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js +0.96% 239.80 kB 242.10 kB +0.53% 58.42 kB 58.74 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js +0.96% 239.82 kB 242.12 kB +0.53% 58.44 kB 58.76 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.96% 240.30 kB 242.60 kB +0.55% 58.18 kB 58.50 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.96% 240.33 kB 242.62 kB +0.54% 58.20 kB 58.51 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js +0.95% 240.86 kB 243.15 kB +0.53% 58.31 kB 58.62 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js +0.95% 240.88 kB 243.18 kB +0.53% 58.33 kB 58.64 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js +0.95% 241.37 kB 243.66 kB +0.56% 58.86 kB 59.19 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.95% 241.87 kB 244.17 kB +0.53% 58.60 kB 58.90 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js +0.95% 242.01 kB 244.31 kB +0.56% 58.66 kB 58.99 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js +0.95% 242.04 kB 244.33 kB +0.57% 58.68 kB 59.02 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js +0.95% 242.43 kB 244.72 kB +0.59% 58.72 kB 59.07 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js +0.94% 243.58 kB 245.88 kB +0.53% 59.11 kB 59.43 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js +0.94% 251.56 kB 253.93 kB +0.58% 59.08 kB 59.42 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js +0.94% 251.58 kB 253.95 kB +0.57% 59.10 kB 59.44 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js +0.94% 252.09 kB 254.46 kB +0.58% 58.82 kB 59.16 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js +0.94% 252.12 kB 254.49 kB +0.58% 58.84 kB 59.18 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js +0.94% 253.22 kB 255.59 kB +0.61% 59.49 kB 59.85 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js +0.93% 253.75 kB 256.12 kB +0.60% 59.25 kB 59.60 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.72% 37.89 kB 38.16 kB +0.41% 12.56 kB 12.61 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.71% 37.91 kB 38.19 kB +0.41% 12.58 kB 12.63 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.70% 38.39 kB 38.66 kB +0.44% 12.74 kB 12.80 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js +0.69% 38.62 kB 38.88 kB +0.42% 13.18 kB 13.24 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js +0.69% 38.64 kB 38.91 kB +0.42% 13.20 kB 13.26 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js +0.68% 39.12 kB 39.38 kB +0.41% 13.36 kB 13.42 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.64% 34.17 kB 34.39 kB +0.49% 11.37 kB 11.43 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.64% 34.19 kB 34.41 kB +0.50% 11.39 kB 11.45 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.63% 34.28 kB 34.49 kB +0.54% 11.49 kB 11.55 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.63% 34.30 kB 34.52 kB +0.53% 11.51 kB 11.57 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.63% 34.61 kB 34.83 kB +0.41% 11.54 kB 11.59 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.63% 34.72 kB 34.94 kB +0.53% 11.65 kB 11.71 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js +0.61% 35.44 kB 35.65 kB +0.62% 12.26 kB 12.34 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js +0.61% 35.46 kB 35.68 kB +0.61% 12.28 kB 12.36 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js +0.61% 35.34 kB 35.55 kB +0.42% 12.16 kB 12.21 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js +0.61% 35.36 kB 35.58 kB +0.42% 12.18 kB 12.23 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js +0.60% 35.78 kB 35.99 kB +0.49% 12.33 kB 12.39 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js +0.60% 35.88 kB 36.10 kB +0.46% 12.44 kB 12.50 kB

Generated by 🚫 dangerJS against d97aacc

? children[0] || null
: children;
if (Array.isArray(child)) {
// child will only be an Array if it has lenght > 1 based on how it was constructed
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can still be <title>{[['foo']]}</title> which is still fine to make an error but that's not quite the same as what the error message lets on.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup, missed that, but got it corrected

gnoff added 3 commits June 7, 2022 00:02
<title> Elements in the DOM can only have Text content. In Fizz if more than one text node is emitted an HTML comment node is used as a text separator. Unfortunately because of the content restriction of the DOM representation of the title element this separator is displayed as escaped text which is not what the component author intended.

This commit special cases title handling, primarily to issue warnings if you pass complex children to <title>. At the moment title expects to receive a single child or an array of length 1. In both cases the type of that child must be string or number. If anything more complex is provided a warning will be logged to the console explaining why this is problematic.

There is no runtime behavior change so broken things are still broken (e.g. returning two text nodes which will cause a separator or using Suspense inside title children) but they should at least be accompanied by warnings that are useful.

One edge case that will now warn but won't technically break an application is if you use a Component that returns a single string as a child of title. This is a form of indirection that works but becasue we cannot discriminate between a Component that will follow the rules and one that violates them the warning is issued regardless.
@gnoff gnoff merged commit bcbeb52 into facebook:main Jun 7, 2022
@gnoff gnoff deleted the title-children branch June 7, 2022 07:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants