track resources in different roots separately

[gnoff]

Style Resources that are depended on in different root Nodes need to be tracked separately. We expose a modified function for the host config to call which returns the current RootHostContainer if it exists and we getRootNode.

A FloatRoot is either a Document or ShadowRoot. For style resources we will append into the document.head if the FloatRoot is a Document and we will append into the ShadowRoot directly if the FloatRoot is a ShadowRoot.

[sophiebits]

Perhaps one way to do it would be to expose the root host context that we have in the client renderer (see getRootHostContext and getChildHostContext) to the methods that need it, and store the stylesheet info there?

[sizebot]

Comparing: ea04a48...ba369c8

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	=	135.46 kB	135.46 kB	+0.08%	43.41 kB	43.44 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.16%	147.72 kB	147.96 kB	+0.32%	47.17 kB	47.32 kB
facebook-www/ReactDOM-prod.classic.js	=	491.70 kB	491.72 kB	=	87.49 kB	87.50 kB
facebook-www/ReactDOM-prod.modern.js	=	477.00 kB	477.00 kB	+0.03%	85.24 kB	85.27 kB
facebook-www/ReactDOMForked-prod.classic.js	=	491.70 kB	491.72 kB	=	87.49 kB	87.50 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against ba369c8

[gnoff]

Ah yeah that's a great idea. Unfortunately it is only called on push and not pop. I need to know when we get back to the parent container

[gnoff]

Oh nm, i misunderstood. Yeah maybe I could stash it there. I wonder if it's a big deal going from a string to an object value though in prod

[sebmarkbage]

A more interesting test (in addition) might be to use a child within the shadow root to show that it's not just that the container might be a shadow root but it might also be inside a shadow root.

[gnoff]

Pushed a new test that I think covers what you are asking about here

[sebmarkbage]

This should really be done in here:

react/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js

Lines 36 to 44 in 9f8a98a

	const randomKey = Math.random()
	.toString(36)
	.slice(2);
	const internalInstanceKey = '__reactFiber$' + randomKey;
	const internalPropsKey = '__reactProps$' + randomKey;
	const internalContainerInstanceKey = '__reactContainer$' + randomKey;
	const internalEventHandlersKey = '__reactEvents$' + randomKey;
	const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;
	const internalEventHandlesSetKey = '__reactHandles$' + randomKey;

So that we put all these hacks in one place.

[sebmarkbage]

Nit on moving the _rstyles to follow the pattern in ReactDOMComponentTree.

[sebmarkbage]

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

[sebmarkbage]

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.