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.

Sign up for GitHub

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

track resources in different roots separately #25388

Merged
merged 7 commits into from
Oct 4, 2022
Merged

track resources in different roots separately #25388

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e091a0e
track resources in different roots separately
gnoff Oct 4, 2022
97d2944
flow types
gnoff Oct 4, 2022
20eb42f
add test demonstrating portals deep into shadowRoots
gnoff Oct 4, 2022
2f4a34c
revert hostcontext changes
gnoff Oct 4, 2022
9fb2f82
lints
gnoff Oct 4, 2022
b5170b2
funge style cache key a la ReactDOMComponentTree
gnoff Oct 4, 2022
ba369c8
hide hacks in componentTree
gnoff Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 16 additions & 11 deletions packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,12 @@ export function cleanupAfterRenderResources() {
// from Internals -> ReactDOM -> FloatClient -> Internals so this doesn't introduce a new one.
export const ReactDOMClientDispatcher = {preload, preinit};

type FloatDocument = Document & {_rstyles?: Map<string, StyleResource>};
type FloatShadowRoot = ShadowRoot & {_rstyles?: Map<string, StyleResource>};
type FloatRoot = FloatDocument | FloatShadowRoot;
const randomKey = Math.random()
.toString(36)
.slice(2);
const stylesCacheKey = '__reactStyles$' + randomKey;
Copy link
Collaborator

Choose a reason for hiding this comment

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

This should also go into the same file as the others.

Copy link
Collaborator

Choose a reason for hiding this comment

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

So that we can change strategy, for example to WeakMaps or group multiple to one expando instead of several different ones for the same node etc.


type FloatRoot = Document | ShadowRoot;

// global maps of Resources
const preloadResources: Map<string, PreloadResource> = new Map();
Expand Down Expand Up @@ -146,6 +149,14 @@ function getDocumentFromRoot(root: FloatRoot): Document {
return root.ownerDocument || root;
}

function getStylesFromRoot(root: FloatRoot): Map<string, StyleResource> {
let styles = (root: any)[stylesCacheKey];
if (!styles) {
styles = (root: any)[stylesCacheKey] = new Map();
}
return styles;
}

// --------------------------------------
// ReactDOM.Preload
// --------------------------------------
Expand Down Expand Up @@ -242,10 +253,7 @@ function preinit(href: string, options: PreinitOptions) {

switch (as) {
case 'style': {
let styleResources = resourceRoot._rstyles;
if (!styleResources) {
styleResources = resourceRoot._rstyles = new Map();
}
const styleResources = getStylesFromRoot(resourceRoot);
const precedence = options.precedence || 'default';
let resource = styleResources.get(href);
if (resource) {
Expand Down Expand Up @@ -337,10 +345,7 @@ export function getResource(
const {rel} = pendingProps;
switch (rel) {
case 'stylesheet': {
let styleResources = resourceRoot._rstyles;
if (!styleResources) {
styleResources = resourceRoot._rstyles = new Map();
}
const styleResources = getStylesFromRoot(resourceRoot);
let didWarn;
if (__DEV__) {
if (currentProps) {
Expand Down