[Fizz/Float] Float for stylesheet resources (#25243)

* [Fizz/Float] Float for stylesheet resources

This commit implements Float in Fizz and on the Client. The initial set of supported APIs is roughly

1. Convert certain stylesheets into style Resources when opting in with precedence prop
2. Emit preloads for stylesheets and explicit preload tags
3. Dedupe all Resources by href
4. Implement ReactDOM.preload() to allow for imperative preloading
5. Implement ReactDOM.preinit() to allow for imperative preinitialization

Currently supports
1. style Resources (link rel "stylesheet")
2. font Resources (preload as "font")

later updates will include support for scripts and modules

packages/react-art/src/ReactARTHostConfig.js

@@ -243,6 +243,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
+export * from 'react-reconciler/src/ReactFiberHostConfigWithNoResources';
 
 export function appendInitialChild(parentInstance, child) {
   if (typeof child === 'string') {
@@ -455,3 +456,11 @@ export function detachDeletedInstance(node: Instance): void {
 export function requestPostPaintCallback(callback: (time: number) => void) {
   // noop
 }
+
+export function prepareRendererToRender(container: Container): void {
+  // noop
+}
+
+export function resetRendererAfterRender(): void {
+  // noop
+}

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

@@ -73,7 +73,6 @@ import {
   enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
   enableClientRenderFallbackOnTextMismatch,
-  enableFloat,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -1019,17 +1018,6 @@ export function diffHydratedProperties(
           : getPropertyInfo(propKey);
       if (rawProps[SUPPRESS_HYDRATION_WARNING] === true) {
         // Don't bother comparing. We're ignoring all these warnings.
-      } else if (
-        enableFloat &&
-        tag === 'link' &&
-        rawProps.rel === 'stylesheet' &&
-        propKey === 'precedence'
-      ) {
-        // @TODO this is a temporary rule while we haven't implemented HostResources yet. This is used to allow
-        // for hydrating Resources (at the moment, stylesheets with a precedence prop) by using a data attribute.
-        // When we implement HostResources there will be no hydration directly so this code can be deleted
-        // $FlowFixMe - Should be inferred as not undefined.
-        extraAttributeNames.delete('data-rprec');
       } else if (
         propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
         propKey === SUPPRESS_HYDRATION_WARNING ||

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

@@ -23,14 +23,15 @@ import type {
 
 import {
   HostComponent,
+  HostResource,
   HostText,
   HostRoot,
   SuspenseComponent,
 } from 'react-reconciler/src/ReactWorkTags';
 
 import {getParentSuspenseInstance} from './ReactDOMHostConfig';
 
-import {enableScopeAPI} from 'shared/ReactFeatureFlags';
+import {enableScopeAPI, enableFloat} from 'shared/ReactFeatureFlags';
 
 const randomKey = Math.random()
   .toString(36)
@@ -166,7 +167,8 @@ export function getInstanceFromNode(node: Node): Fiber | null {
       inst.tag === HostComponent ||
       inst.tag === HostText ||
       inst.tag === SuspenseComponent ||
-      inst.tag === HostRoot
+      inst.tag === HostRoot ||
+      (enableFloat ? inst.tag === HostResource : false)
     ) {
       return inst;
     } else {
@@ -181,7 +183,11 @@ export function getInstanceFromNode(node: Node): Fiber | null {
  * DOM node.
  */
 export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
-  if (inst.tag === HostComponent || inst.tag === HostText) {
+  if (
+    inst.tag === HostComponent ||
+    inst.tag === HostText ||
+    (enableFloat ? inst.tag === HostResource : false)
+  ) {
     // In Fiber this, is just the state node right now. We assume it will be
     // a host component or host text.
     return inst.stateNode;