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

[Float] handle resource Resource creation inside svg context #25599

Merged
merged 3 commits into from
Nov 1, 2022

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented Nov 1, 2022

title is a valid element descendent of svg. this PR adds a prohibition on turning titles in svg into Resources.

This PR also adds additional warnings if you render something that is almost a Resource inside an svg.

@gnoff gnoff requested a review from sebmarkbage November 1, 2022 16:03
@sizebot
Copy link

sizebot commented Nov 1, 2022

Comparing: ab075a2...6e949de

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 +0.16% 153.14 kB 153.38 kB +0.15% 48.80 kB 48.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.15% 155.06 kB 155.30 kB +0.19% 49.41 kB 49.50 kB
facebook-www/ReactDOM-prod.classic.js +0.14% 528.79 kB 529.53 kB +0.16% 94.47 kB 94.62 kB
facebook-www/ReactDOM-prod.modern.js +0.15% 514.04 kB 514.79 kB +0.15% 92.31 kB 92.45 kB
facebook-www/ReactDOMForked-prod.classic.js +0.14% 528.79 kB 529.53 kB +0.16% 94.47 kB 94.62 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactDOMTesting-dev.modern.js +0.36% 1,188.49 kB 1,192.73 kB +0.39% 262.85 kB 263.87 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.35% 1,218.37 kB 1,222.61 kB +0.39% 268.68 kB 269.72 kB
oss-stable-semver/react-dom/cjs/react-dom.development.js +0.34% 1,184.98 kB 1,189.02 kB +0.39% 262.61 kB 263.63 kB
oss-stable/react-dom/cjs/react-dom.development.js +0.34% 1,185.01 kB 1,189.04 kB +0.39% 262.64 kB 263.65 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js +0.34% 1,187.96 kB 1,192.00 kB +0.39% 263.13 kB 264.16 kB
oss-experimental/react-dom/cjs/react-dom.development.js +0.34% 1,195.06 kB 1,199.09 kB +0.39% 264.60 kB 265.62 kB
oss-stable-semver/react-dom/umd/react-dom.development.js +0.33% 1,242.74 kB 1,246.89 kB +0.39% 265.41 kB 266.45 kB
oss-stable/react-dom/umd/react-dom.development.js +0.33% 1,242.76 kB 1,246.92 kB +0.39% 265.43 kB 266.47 kB
oss-experimental/react-dom/umd/react-dom.development.js +0.33% 1,253.36 kB 1,257.52 kB +0.39% 267.38 kB 268.42 kB
facebook-www/ReactDOMForked-dev.modern.js +0.32% 1,314.60 kB 1,318.84 kB +0.36% 285.58 kB 286.62 kB
facebook-www/ReactDOM-dev.modern.js +0.32% 1,314.60 kB 1,318.84 kB +0.36% 285.58 kB 286.62 kB
facebook-www/ReactDOMForked-dev.classic.js +0.32% 1,339.45 kB 1,343.69 kB +0.38% 290.11 kB 291.23 kB
facebook-www/ReactDOM-dev.classic.js +0.32% 1,339.45 kB 1,343.69 kB +0.38% 290.12 kB 291.23 kB

Generated by 🚫 dangerJS against 6e949de

@gnoff gnoff changed the title do not make resources inside svg context [Float] handle resource Resource creation inside svg context Nov 1, 2022
Comment on lines +931 to +943
// This is subtle. in SVG scope the title tag is case sensitive. we don't want to skip
// titles in svg but we do want to skip them outside of svg. there is an edge case where
// you could do `React.createElement('TITLE', ...)` inside an svg scope but the SSR serializer
// will still emit lowercase. Practically speaking the only time the DOM will have a non-uppercased
// title tagName is if it is inside an svg.
// Other Resource types like META, BASE, LINK, and SCRIPT should be treated as resources even inside
// svg scope because they are invalid otherwise. We still don't need to handle the lowercase variant
// because if they are present in the DOM already they would have been hoisted outside the SVG scope
// as Resources. So while it would be correct to skip a <link> inside <svg> and this algorithm won't
// skip that link because the tagName will not be uppercased it functionally is irrelevant. If one
// tries to render incompatible types such as a non-resource stylesheet inside an svg the server will
// emit that invalid html and hydration will fail. In Dev this will present warnings guiding the
// developer on how to fix.
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

please check my rationale here

return hostContextDev.namespace;
} else {
const hostContextProd: HostContextProd = (hostContext: any);
return hostContextProd;
Copy link
Collaborator

Choose a reason for hiding this comment

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

All the other helpers that call out to external things in ReactDOMComponent read the namespace first and then pass it in as an argument to them.

I think we need to rip out getHostContext call and put those in the reconciler and then call the host config with the host context like we do for createInstance and others.

It's too fragile. I don't actually know if it's even correct to call it in the child reconciler. I think that might actually be wrong in some cases because I'm not sure that it's guaranteed to have the right context. Regardless, that code in the reconciler is what needs to provide that guarantee.

Once you pass it in to isHostResourceType, then you can get the namespace in isHostResourceType and pass it into ReactDOMFloatClient. It's free in prod since it's just the same value and hopefully the whole ReactDOMFloatClient gets inlined.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is unforutnately buried pretty deep in the reconciliation pass. I'd have to thread it through reconcileChildren. I can do this but before I go and make that happen I want to make sure that's actually viable.

An alternative is we let the reconciliation create HostComponents always and then we "upgrade" them to Resource when we beginWork and currrent === null similar to how Memo's can become SimpleMemos

Copy link
Collaborator

@sebmarkbage sebmarkbage Nov 1, 2022

Choose a reason for hiding this comment

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

You can start by just calling it right before calling isHostResourceType. At least then it's in the reconciler code instead of the bindings. It's a pretty cheap call too that could possibly even be reorganized by the compiler.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Or it could be cheap #25609

Copy link
Collaborator

@sebmarkbage sebmarkbage left a comment

Choose a reason for hiding this comment

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

Stamp to unblock but left a couple of refactoring notes.

@gnoff gnoff merged commit 5f7ef8c into facebook:main Nov 1, 2022
@gnoff gnoff deleted the float-svg branch November 1, 2022 21:57
GrinZero added a commit to GrinZero/react that referenced this pull request Nov 7, 2022
* 'main' of ssh://github.com/GrinZero/react: (163 commits)
  Do not unmount layout effects if ancestor Offscreen is hidden (facebook#25628)
  Remove check in renderDidSuspendDelayIfPossible (facebook#25630)
  [ServerRenderer] Move fizz external runtime implementation to react-dom-bindings (facebook#25617)
  Unwrap sync resolved thenables without suspending  (facebook#25615)
  refactor isHostResourceType to not receive the context from reconciler and not leak types (facebook#25610)
  Make host context use null as empty and only error in dev (facebook#25609)
  [Float] handle resource Resource creation inside svg context (facebook#25599)
  Allow uncached IO to stablize (facebook#25561)
  [ServerRenderer] Setup for adding data attributes streaming format (facebook#25567)
  Do not unmount layout effects on initial Offscreen mount (facebook#25592)
  Fix type check for null (facebook#25595)
  Clean up vestige of useOpaqueIdentifier (facebook#25587)
  Extract logic for detecting bad fallback to helper
  Split suspended work loop logic into separate functions
  In work loop, add enum of reasons for suspending
  Strict Mode: Reuse memoized result from first pass (facebook#25583)
  Detect and warn if use(promise) is wrapped with try/catch block (facebook#25543)
  Remove old react-fetch, react-fs and react-pg libraries (facebook#25577)
  Try assigning fetch to globalThis if global assignment fails (facebook#25571)
  [Float] handle noscript context for Resources (facebook#25559)
  ...

# Conflicts:
#	scripts/rollup/build.js
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Nov 7, 2022
Summary:
This sync includes the following changes:
- **[4bd245e9e](facebook/react@4bd245e9e )**: Do not unmount layout effects if ancestor Offscreen is hidden ([#25628](facebook/react#25628)) //<Samuel Susla>//
- **[df61e708c](facebook/react@df61e708c )**: Remove check in renderDidSuspendDelayIfPossible ([#25630](facebook/react#25630)) //<Andrew Clark>//
- **[1a08f1478](facebook/react@1a08f1478 )**: [ServerRenderer] Move fizz external runtime implementation to react-dom-bindings ([#25617](facebook/react#25617)) //<mofeiZ>//
- **[1a902623a](facebook/react@1a902623a )**: Unwrap sync resolved thenables without suspending  ([#25615](facebook/react#25615)) //<Andrew Clark>//
- **[4ea063b56](facebook/react@4ea063b56 )**: refactor isHostResourceType to not receive the context from reconciler and not leak types ([#25610](facebook/react#25610)) //<Josh Story>//
- **[8e69bc45a](facebook/react@8e69bc45a )**: Make host context use null as empty and only error in dev ([#25609](facebook/react#25609)) //<Sebastian Markbåge>//
- **[5f7ef8c4c](facebook/react@5f7ef8c4c )**: [Float] handle resource Resource creation inside svg context ([#25599](facebook/react#25599)) //<Josh Story>//
- **[36426e6cb](facebook/react@36426e6cb )**: Allow uncached IO to stablize ([#25561](facebook/react#25561)) //<Andrew Clark>//
- **[6883d7944](facebook/react@6883d7944 )**: [ServerRenderer] Setup for adding data attributes streaming format ([#25567](facebook/react#25567)) //<mofeiZ>//

Changelog:
[General][Changed] - React Native sync for revisions ab075a2...4bd245e

jest_e2e[run_all_tests]

Reviewed By: GijsWeterings

Differential Revision: D41028209

fbshipit-source-id: a67fdcd441ddd50784f7c1ce402eaecdb5e3126d
rickhanlonii pushed a commit that referenced this pull request Dec 3, 2022
`title` is a valid element descendent of `svg`. this PR adds a
prohibition on turning titles in svg into Resources.

This PR also adds additional warnings if you render something that is
almost a Resource inside an svg.
mofeiZ pushed a commit to mofeiZ/react that referenced this pull request Dec 5, 2022
…k#25599)

`title` is a valid element descendent of `svg`. this PR adds a
prohibition on turning titles in svg into Resources.

This PR also adds additional warnings if you render something that is
almost a Resource inside an svg.
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
This sync includes the following changes:
- **[4bd245e9e](facebook/react@4bd245e9e )**: Do not unmount layout effects if ancestor Offscreen is hidden ([facebook#25628](facebook/react#25628)) //<Samuel Susla>//
- **[df61e708c](facebook/react@df61e708c )**: Remove check in renderDidSuspendDelayIfPossible ([facebook#25630](facebook/react#25630)) //<Andrew Clark>//
- **[1a08f1478](facebook/react@1a08f1478 )**: [ServerRenderer] Move fizz external runtime implementation to react-dom-bindings ([facebook#25617](facebook/react#25617)) //<mofeiZ>//
- **[1a902623a](facebook/react@1a902623a )**: Unwrap sync resolved thenables without suspending  ([facebook#25615](facebook/react#25615)) //<Andrew Clark>//
- **[4ea063b56](facebook/react@4ea063b56 )**: refactor isHostResourceType to not receive the context from reconciler and not leak types ([facebook#25610](facebook/react#25610)) //<Josh Story>//
- **[8e69bc45a](facebook/react@8e69bc45a )**: Make host context use null as empty and only error in dev ([facebook#25609](facebook/react#25609)) //<Sebastian Markbåge>//
- **[5f7ef8c4c](facebook/react@5f7ef8c4c )**: [Float] handle resource Resource creation inside svg context ([facebook#25599](facebook/react#25599)) //<Josh Story>//
- **[36426e6cb](facebook/react@36426e6cb )**: Allow uncached IO to stablize ([facebook#25561](facebook/react#25561)) //<Andrew Clark>//
- **[6883d7944](facebook/react@6883d7944 )**: [ServerRenderer] Setup for adding data attributes streaming format ([facebook#25567](facebook/react#25567)) //<mofeiZ>//

Changelog:
[General][Changed] - React Native sync for revisions ab075a2...4bd245e

jest_e2e[run_all_tests]

Reviewed By: GijsWeterings

Differential Revision: D41028209

fbshipit-source-id: a67fdcd441ddd50784f7c1ce402eaecdb5e3126d
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