[docs] Fix iframe demos with emotion #24232
Conversation
oliviertassinari
force-pushed
the
docs-fix-portal-demos
branch
from
9e07514
to
53e0676
Compare
| const cache = React.useMemo( | ||
| () => | ||
| createCache({ | ||
| key: 'iframe-demo', |
There was a problem hiding this comment.
It seems that we can share the same cache between two iframe demos. The documentation only mentions that unique keys are required when using the same window/frame https://emotion.sh/docs/@emotion/cache#key.
@Andarist is it accurate?
There was a problem hiding this comment.
I don't believe that you can share the same cache between iframes because each one has to get their separate styles in their separate documents. Cache only checks the inserted keys and assumes that inserted keys are in sync with the inserted style elements - but if you share cache between "realms" then styles will really be only inserted into a single document.
There was a problem hiding this comment.
Separate note - useMemo doesn't give any semantic guarantees about caching (it's just like a perf hint). This probably doesn't matter for you here but to avoid useMemo refiring (even if document doesn't change!) you should put cache into a ref or into a state.
There was a problem hiding this comment.
Cache only checks the inserted keys and assumes that inserted keys are in sync with the inserted style elements
In the current configuration, each iframe has a different emotion cache instance in the React context with the same key. Is there a global side effect between different cache instances? (the document global side effect is not happening as we use different document, one per iframe). So far, the demos are rendered correctly.
useMemo doesn't give any semantic guarantees about caching
Would the style be broken if the emotion cache changes between two renders? I ask because I'm happy with a perf hint only.
There was a problem hiding this comment.
Is there a global side effect between different cache instances?
There is:
But it operates on the main script's document so it should simply not find any iframe styles in it and this should act like a noop - like you have mentioned.
Would the style be broken if the emotion cache changes between two renders? I ask because I'm happy with a perf hint only.
No - styles should not be affected. You would only end up with multiple copies of the same styles being injected and some perf hit caused by somewhat full subtree rerended (all context consumers would have to rerender)
There was a problem hiding this comment.
Ok great, awesome, thanks for the details
The problem was raised in #24097 (comment) and can be seen on:
https://next--material-ui.netlify.app/components/drawers/#persistent-drawer
It's a blocker to merge #24227 as the container only makes sense for a top-level layout, all the demos use an iframe.
Preview: https://deploy-preview-24232--material-ui.netlify.app/components/drawers/#persistent-drawer