From 204a8f750fe025291c0dfeb60c71d8e6a620a0e8 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 20 Sep 2023 12:23:04 -0700
Subject: [PATCH 01/10] This change refactors the implementation of Stylesheet
 resources and Style tag Resources. The Style tag resource was already handled
 with special rules because it does not Flush is the same way as other
 resources do. This change reimagines the precedences as a combination of a
 style tag rules queue and a list of stylesheets.

This change eliminates a number of conditionals by embedding these variants in the data represenation itself.

This change also moves the binary encoding to work time rather than flush time.

Since style resources were the only type that actually used the `type` property I've removed this making resource object size slightly smaller
---
 .../src/server/ReactFizzConfigDOM.js          | 377 ++++++++----------
 .../src/server/ReactFizzConfigDOMLegacy.js    |  10 +-
 2 files changed, 166 insertions(+), 221 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 5dd228795ca87..9eb6780fe5de1 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -152,8 +152,7 @@ export type RenderState = {
   fontPreloads: Set<PreloadResource>,
   highImagePreloads: Set<PreloadResource>,
   // usedImagePreloads: Set<PreloadResource>,
-  precedences: Map<string, Map<string, StyleResource>>,
-  stylePrecedences: Map<string, StyleTagResource>,
+  precedences: Map<string, Precedence>,
   bootstrapScripts: Set<PreloadResource>,
   scripts: Set<ScriptResource>,
   bulkPreloads: Set<PreloadResource>,
@@ -2158,38 +2157,23 @@ function pushLink(
             }
           }
           const resource = {
-            type: 'stylesheet',
             chunks: ([]: Array<Chunk | PrecomputedChunk>),
             state,
             props: resourceProps,
           };
           resumableState.stylesMap[key] = null;
           if (!stylesInPrecedence) {
-            stylesInPrecedence = new Map();
-            renderState.precedences.set(precedence, stylesInPrecedence);
-            const emptyStyleResource = {
-              type: 'style',
-              chunks: ([]: Array<Chunk | PrecomputedChunk>),
-              state: NoState,
-              props: {
-                precedence,
-                hrefs: ([]: Array<string>),
-              },
+            stylesInPrecedence = {
+              precedence: stringToChunk(escapeTextForBrowser(precedence)),
+              rules: ([]: Array<Chunk | PrecomputedChunk>),
+              hrefs: ([]: Array<Chunk | PrecomputedChunk>),
+              sheets: (new Map(): Map<string, StylesheetResource>),
             };
-            stylesInPrecedence.set('', emptyStyleResource);
-            if (__DEV__) {
-              if (renderState.stylePrecedences.has(precedence)) {
-                console.error(
-                  'React constructed an empty style resource when a style resource already exists for this precedence: "%s". This is a bug in React.',
-                  precedence,
-                );
-              }
-            }
-            renderState.stylePrecedences.set(precedence, emptyStyleResource);
+            renderState.precedences.set(precedence, stylesInPrecedence);
           }
-          stylesInPrecedence.set(key, resource);
+          stylesInPrecedence.sheets.set(key, resource);
           if (renderState.boundaryResources) {
-            renderState.boundaryResources.add(resource);
+            renderState.boundaryResources.sheets.add(resource);
           }
         } else {
           // We need to track whether this boundary should wait on this resource or not.
@@ -2198,10 +2182,10 @@ function pushLink(
           // and then it wouldn't be recreated in the RenderState and there's no need to track
           // it again since we should've hoisted it to the shell already.
           if (stylesInPrecedence) {
-            const resource = stylesInPrecedence.get(key);
+            const resource = stylesInPrecedence.sheets.get(key);
             if (resource) {
               if (renderState.boundaryResources) {
-                renderState.boundaryResources.add(resource);
+                renderState.boundaryResources.sheets.add(resource);
               }
             }
           }
@@ -2335,44 +2319,32 @@ function pushStyle(
     }
 
     const key = getResourceKey('style', href);
-    let resource = renderState.stylePrecedences.get(precedence);
+    let stylesInPrecedence = renderState.precedences.get(precedence);
     if (!resumableState.stylesMap.hasOwnProperty(key)) {
-      if (!resource) {
-        resource = {
-          type: 'style',
-          chunks: [],
-          state: NoState,
-          props: {
-            precedence,
-            hrefs: [href],
-          },
+      if (!stylesInPrecedence) {
+        stylesInPrecedence = {
+          precedence: stringToChunk(escapeTextForBrowser(precedence)),
+          rules: ([]: Array<Chunk | PrecomputedChunk>),
+          hrefs: [stringToChunk(escapeTextForBrowser(href))],
+          sheets: (new Map(): Map<string, StylesheetResource>),
         };
-        renderState.stylePrecedences.set(precedence, resource);
-        const stylesInPrecedence: Map<string, StyleResource> = new Map();
-        stylesInPrecedence.set('', resource);
-        if (__DEV__) {
-          if (renderState.precedences.has(precedence)) {
-            console.error(
-              'React constructed a new style precedence set when one already exists for this precedence: "%s". This is a bug in React.',
-              precedence,
-            );
-          }
-        }
         renderState.precedences.set(precedence, stylesInPrecedence);
       } else {
-        resource.props.hrefs.push(href);
+        stylesInPrecedence.hrefs.push(
+          stringToChunk(escapeTextForBrowser(href)),
+        );
       }
       resumableState.stylesMap[key] = null;
-      pushStyleContents(resource.chunks, props);
+      pushStyleContents(stylesInPrecedence.rules, props);
     }
-    if (resource) {
+    if (stylesInPrecedence) {
       // We need to track whether this boundary should wait on this resource or not.
       // Typically this resource should always exist since we either had it or just created
       // it. However, it's possible when you resume that the style has already been emitted
       // and then it wouldn't be recreated in the RenderState and there's no need to track
       // it again since we should've hoisted it to the shell already.
       if (renderState.boundaryResources) {
-        renderState.boundaryResources.add(resource);
+        renderState.boundaryResources.precedences.add(stylesInPrecedence);
       }
     }
 
@@ -2546,7 +2518,6 @@ function pushImg(
         referrerPolicy: props.referrerPolicy,
       };
       resource = {
-        type: 'preload',
         chunks: [],
         state: NoState,
         props: preloadProps,
@@ -2903,7 +2874,6 @@ function pushScript(
     // We can make this <script> into a ScriptResource
     if (!resumableState.scriptsMap.hasOwnProperty(key)) {
       const resource: ScriptResource = {
-        type: 'script',
         chunks: [],
         state: NoState,
         props: null,
@@ -4130,51 +4100,54 @@ let destinationHasCapacity = true;
 
 function flushStyleTagsLateForBoundary(
   this: Destination,
-  resource: StyleResource,
+  stylesInPrecedence: Precedence,
 ) {
-  if (
-    resource.type === 'stylesheet' &&
-    (resource.state & FlushedInPreamble) === NoState
-  ) {
-    currentlyRenderingBoundaryHasStylesToHoist = true;
-  } else if (resource.type === 'style') {
-    const chunks = resource.chunks;
-    const hrefs = resource.props.hrefs;
-    let i = 0;
-    if (chunks.length) {
-      writeChunk(this, lateStyleTagResourceOpen1);
-      writeChunk(
-        this,
-        stringToChunk(escapeTextForBrowser(resource.props.precedence)),
-      );
-      if (hrefs.length) {
-        writeChunk(this, lateStyleTagResourceOpen2);
-        for (; i < hrefs.length - 1; i++) {
-          writeChunk(this, stringToChunk(escapeTextForBrowser(hrefs[i])));
-          writeChunk(this, spaceSeparator);
-        }
-        writeChunk(this, stringToChunk(escapeTextForBrowser(hrefs[i])));
-      }
-      writeChunk(this, lateStyleTagResourceOpen3);
-      for (i = 0; i < chunks.length; i++) {
-        writeChunk(this, chunks[i]);
-      }
-      destinationHasCapacity = writeChunkAndReturn(
-        this,
-        lateStyleTagTemplateClose,
+  const rules = stylesInPrecedence.rules;
+  const hrefs = stylesInPrecedence.hrefs;
+  if (__DEV__) {
+    if (rules.length > 0 && hrefs.length === 0) {
+      console.error(
+        'React expected to have at least one href for an a hoistable style but found none. This is a bug in React.',
       );
+    }
+  }
+  let i = 0;
+  if (hrefs.length) {
+    writeChunk(this, lateStyleTagResourceOpen1);
+    writeChunk(this, stylesInPrecedence.precedence);
+    writeChunk(this, lateStyleTagResourceOpen2);
+    for (; i < hrefs.length - 1; i++) {
+      writeChunk(this, hrefs[i]);
+      writeChunk(this, spaceSeparator);
+    }
+    writeChunk(this, hrefs[i]);
+    writeChunk(this, lateStyleTagResourceOpen3);
+    for (i = 0; i < rules.length; i++) {
+      writeChunk(this, rules[i]);
+    }
+    destinationHasCapacity = writeChunkAndReturn(
+      this,
+      lateStyleTagTemplateClose,
+    );
 
-      // We wrote style tags for this boundary and we may need to emit a script
-      // to hoist them.
-      currentlyRenderingBoundaryHasStylesToHoist = true;
+    // We wrote style tags for this boundary and we may need to emit a script
+    // to hoist them.
+    currentlyRenderingBoundaryHasStylesToHoist = true;
 
-      // style resources can flush continuously since more rules may be written into
-      // them with new hrefs. Instead of marking it flushed, we simply reset the chunks
-      // and hrefs
-      chunks.length = 0;
-      hrefs.length = 0;
-    }
+    // style resources can flush continuously since more rules may be written into
+    // them with new hrefs. Instead of marking it flushed, we simply reset the chunks
+    // and hrefs
+    rules.length = 0;
+    hrefs.length = 0;
+  }
+}
+
+function hasStylesToHoist(stylesheet: StylesheetResource): boolean {
+  if ((stylesheet.state & FlushedInPreamble) === NoState) {
+    currentlyRenderingBoundaryHasStylesToHoist = true;
+    return true;
   }
+  return false;
 }
 
 export function writeResourcesForBoundary(
@@ -4186,8 +4159,15 @@ export function writeResourcesForBoundary(
   currentlyRenderingBoundaryHasStylesToHoist = false;
   destinationHasCapacity = true;
 
-  // Flush each Boundary resource
-  boundaryResources.forEach(flushStyleTagsLateForBoundary, destination);
+  // Flush style tags for each precedence this boundary depends on
+  boundaryResources.precedences.forEach(
+    flushStyleTagsLateForBoundary,
+    destination,
+  );
+
+  // Determine if this boundary has stylesheets that need to be awaited upon completion
+  boundaryResources.sheets.forEach(hasStylesToHoist);
+
   if (currentlyRenderingBoundaryHasStylesToHoist) {
     renderState.stylesToHoist = true;
   }
@@ -4214,45 +4194,23 @@ function flushResourceLate<T: Resource>(this: Destination, resource: T) {
   }
 }
 
-// This must always be read after flushing stylesheet styles. we know we will encounter a style resource
-// per precedence and it will be set before ready so we cast this to avoid an extra check at runtime
-let precedenceStyleTagResource: StyleTagResource = (null: any);
-
-// This flags let's us opt out of flushing a placeholder style tag to emit the precedence in the right order.
-// If a stylesheet was flushed then we have the precedence order preserved and only need to emit <style> tags
-// if there are actual chunks to flush
-let didFlushPrecedence = false;
-
 function flushStyleInPreamble(
   this: Destination,
-  resource: StyleResource,
+  resource: StylesheetResource,
   key: string,
-  map: Map<string, StyleResource>,
+  map: Map<string, StylesheetResource>,
 ) {
   const chunks = resource.chunks;
-  if (resource.state & Flushed) {
-    // In theory this should never happen because we clear from the
-    // Set on flush but to ensure correct semantics we don't emit
-    // anything if we are in this state.
-    map.delete(key);
-  } else {
-    // We can emit this style or stylesheet as is.
-    if (resource.type === 'style') {
-      precedenceStyleTagResource = resource;
-      return;
-    }
 
-    // We still need to encode stylesheet chunks
-    // because unlike most Hoistables and Resources we do not eagerly encode
-    // them during render. This is because if we flush late we have to send a
-    // different encoding and we don't want to encode multiple times
-    pushLinkImpl(chunks, resource.props);
-    for (let i = 0; i < chunks.length; i++) {
-      writeChunk(this, chunks[i]);
-    }
-    resource.state |= FlushedInPreamble;
-    didFlushPrecedence = true;
+  // We still need to encode stylesheet chunks
+  // because unlike most Hoistables and Resources we do not eagerly encode
+  // them during render. This is because if we flush late we have to send a
+  // different encoding and we don't want to encode multiple times
+  pushLinkImpl(chunks, resource.props);
+  for (let i = 0; i < chunks.length; i++) {
+    writeChunk(this, chunks[i]);
   }
+  resource.state |= FlushedInPreamble;
 }
 
 const styleTagResourceOpen1 = stringToPrecomputedChunk(
@@ -4264,54 +4222,52 @@ const styleTagResourceOpen3 = stringToPrecomputedChunk('">');
 
 const styleTagResourceClose = stringToPrecomputedChunk('</style>');
 
-function flushAllStylesInPreamble(
+function flushPrecedenceInPreamble(
   this: Destination,
-  map: Map<string, StyleResource>,
+  stylesInPrecedence: Precedence,
   precedence: string,
 ) {
-  didFlushPrecedence = false;
-  map.forEach(flushStyleInPreamble, this);
-  map.clear();
-
-  const chunks = precedenceStyleTagResource.chunks;
-  const hrefs = precedenceStyleTagResource.props.hrefs;
-  if (didFlushPrecedence === false || chunks.length) {
+  const hasStylesheets = stylesInPrecedence.sheets.size > 0;
+  stylesInPrecedence.sheets.forEach(flushStyleInPreamble, this);
+  stylesInPrecedence.sheets.clear();
+
+  const rules = stylesInPrecedence.rules;
+  const hrefs = stylesInPrecedence.hrefs;
+  // If we don't emit any stylesheets at this precedence we still need to maintain the precedence
+  // order so even if there are no rules for style tags at this precedence we emit an empty style
+  // tag with the data-precedence attribute
+  if (!hasStylesheets || hrefs.length) {
     writeChunk(this, styleTagResourceOpen1);
-    writeChunk(this, stringToChunk(escapeTextForBrowser(precedence)));
+    writeChunk(this, stylesInPrecedence.precedence);
     let i = 0;
     if (hrefs.length) {
       writeChunk(this, styleTagResourceOpen2);
       for (; i < hrefs.length - 1; i++) {
-        writeChunk(this, stringToChunk(escapeTextForBrowser(hrefs[i])));
+        writeChunk(this, hrefs[i]);
         writeChunk(this, spaceSeparator);
       }
-      writeChunk(this, stringToChunk(escapeTextForBrowser(hrefs[i])));
+      writeChunk(this, hrefs[i]);
     }
     writeChunk(this, styleTagResourceOpen3);
-    for (i = 0; i < chunks.length; i++) {
-      writeChunk(this, chunks[i]);
+    for (i = 0; i < rules.length; i++) {
+      writeChunk(this, rules[i]);
     }
     writeChunk(this, styleTagResourceClose);
 
     // style resources can flush continuously since more rules may be written into
     // them with new hrefs. Instead of marking it flushed, we simply reset the chunks
     // and hrefs
-    chunks.length = 0;
+    rules.length = 0;
     hrefs.length = 0;
   }
 }
 
-function preloadLateStyle(this: Destination, resource: StyleResource) {
+function preloadLateStyle(this: Destination, resource: StylesheetResource) {
   if (resource.state & PreloadFlushed) {
     // This resource has already had a preload flushed
     return;
   }
 
-  if (resource.type === 'style') {
-    // <style> tags do not need to be preloaded
-    return;
-  }
-
   const chunks = resource.chunks;
   const preloadProps = preloadAsStylePropsFromProps(
     resource.props.href,
@@ -4327,11 +4283,11 @@ function preloadLateStyle(this: Destination, resource: StyleResource) {
 
 function preloadLateStyles(
   this: Destination,
-  map: Map<string, StyleResource>,
+  stylesInPrecedence: Precedence,
   precedence: string,
 ) {
-  map.forEach(preloadLateStyle, this);
-  map.clear();
+  stylesInPrecedence.sheets.forEach(preloadLateStyle, this);
+  stylesInPrecedence.sheets.clear();
 }
 
 // We don't bother reporting backpressure at the moment because we expect to
@@ -4410,7 +4366,7 @@ export function writePreamble(
   renderState.highImagePreloads.clear();
 
   // Flush unblocked stylesheets by precedence
-  renderState.precedences.forEach(flushAllStylesInPreamble, destination);
+  renderState.precedences.forEach(flushPrecedenceInPreamble, destination);
 
   const importMapChunks = renderState.importMapChunks;
   for (i = 0; i < importMapChunks.length; i++) {
@@ -4548,10 +4504,8 @@ function writeStyleResourceDependenciesInJS(
   writeChunk(destination, arrayFirstOpenBracket);
 
   let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
-  boundaryResources.forEach(resource => {
-    if (resource.type === 'style') {
-      // Style dependencies don't require coordinated reveal and can be omitted
-    } else if (resource.state & FlushedInPreamble) {
+  boundaryResources.sheets.forEach(resource => {
+    if (resource.state & FlushedInPreamble) {
       // We can elide this dependency because it was flushed in the shell and
       // should be ready before content is shown on the client
     } else if (resource.state & Flushed) {
@@ -4565,7 +4519,7 @@ function writeStyleResourceDependenciesInJS(
       );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
-    } else if (resource.type === 'stylesheet') {
+    } else {
       // We need to emit the whole resource for insertion on the client
       writeChunk(destination, nextArrayOpenBrackChunk);
       writeStyleResourceDependencyInJS(
@@ -4743,10 +4697,8 @@ function writeStyleResourceDependenciesInAttr(
   writeChunk(destination, arrayFirstOpenBracket);
 
   let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
-  boundaryResources.forEach(resource => {
-    if (resource.type === 'style') {
-      // Style dependencies don't require coordinated reveal and can be omitted
-    } else if (resource.state & FlushedInPreamble) {
+  boundaryResources.sheets.forEach(resource => {
+    if (resource.state & FlushedInPreamble) {
       // We can elide this dependency because it was flushed in the shell and
       // should be ready before content is shown on the client
     } else if (resource.state & Flushed) {
@@ -4760,7 +4712,7 @@ function writeStyleResourceDependenciesInAttr(
       );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
-    } else if (resource.type === 'stylesheet') {
+    } else {
       // We need to emit the whole resource for insertion on the client
       writeChunk(destination, nextArrayOpenBrackChunk);
       writeStyleResourceDependencyInAttr(
@@ -4946,11 +4898,7 @@ const Blocked /*            */ = 0b0100;
 // This generally only makes sense for Resources other than PreloadResource
 const PreloadFlushed /*     */ = 0b1000;
 
-type TResource<
-  T: 'stylesheet' | 'style' | 'script' | 'preload' | 'preconnect',
-  P,
-> = {
-  type: T,
+type TResource<P> = {
   chunks: Array<Chunk | PrecomputedChunk>,
   state: ResourceStateTag,
   props: P,
@@ -4961,7 +4909,7 @@ type PreconnectProps = {
   href: string,
   [string]: mixed,
 };
-type PreconnectResource = TResource<'preconnect', null>;
+type PreconnectResource = TResource<null>;
 
 type PreloadAsProps = {
   rel: 'preload',
@@ -4975,7 +4923,7 @@ type PreloadModuleProps = {
   [string]: ?string,
 };
 type PreloadProps = PreloadAsProps | PreloadModuleProps;
-type PreloadResource = TResource<'preload', PreloadProps>;
+type PreloadResource = TResource<PreloadProps>;
 
 type StylesheetProps = {
   rel: 'stylesheet',
@@ -4983,15 +4931,7 @@ type StylesheetProps = {
   'data-precedence': string,
   [string]: mixed,
 };
-type StylesheetResource = TResource<'stylesheet', StylesheetProps>;
-
-type StyleTagProps = {
-  hrefs: Array<string>,
-  precedence: string,
-};
-type StyleTagResource = TResource<'style', StyleTagProps>;
-
-type StyleResource = StylesheetResource | StyleTagResource;
+type StylesheetResource = TResource<StylesheetProps>;
 
 type ScriptProps = {
   async: true,
@@ -5004,18 +4944,31 @@ type ModuleProps = {
   type: 'module',
   [string]: mixed,
 };
-type ScriptResource = TResource<'script', null>;
+type ScriptResource = TResource<null>;
 
 type Resource =
-  | StyleResource
+  | StylesheetResource
   | ScriptResource
   | PreloadResource
   | PreconnectResource;
 
-export type BoundaryResources = Set<StyleResource>;
+export type BoundaryResources = {
+  precedences: Set<Precedence>,
+  sheets: Set<StylesheetResource>,
+};
+
+export type Precedence = {
+  precedence: Chunk | PrecomputedChunk,
+  rules: Array<Chunk | PrecomputedChunk>,
+  hrefs: Array<Chunk | PrecomputedChunk>,
+  sheets: Map<string, StylesheetResource>,
+};
 
 export function createBoundaryResources(): BoundaryResources {
-  return new Set();
+  return {
+    precedences: new Set(),
+    sheets: new Set(),
+  };
 }
 
 export function setCurrentlyRenderingBoundaryResourcesTarget(
@@ -5049,7 +5002,6 @@ function prefetchDNS(href: string) {
     const key = getResourceKey('prefetchDNS', href);
     if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
       const resource: PreconnectResource = {
-        type: 'preconnect',
         chunks: [],
         state: NoState,
         props: null,
@@ -5087,7 +5039,6 @@ function preconnect(href: string, crossOrigin: ?CrossOriginEnum) {
     }]${href}`;
     if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
       const resource: PreconnectResource = {
-        type: 'preconnect',
         chunks: [],
         state: NoState,
         props: null,
@@ -5139,7 +5090,6 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
         options,
       );
       const resource: PreloadResource = {
-        type: 'preload',
         chunks: [],
         state: NoState,
         props,
@@ -5190,7 +5140,6 @@ function preloadModule(
         options,
       );
       const resource: PreloadResource = {
-        type: 'preload',
         chunks: [],
         state: NoState,
         props,
@@ -5246,7 +5195,6 @@ function preinitStyle(
         options,
       );
       const resource = {
-        type: 'stylesheet',
         chunks: ([]: Array<Chunk | PrecomputedChunk>),
         state,
         props,
@@ -5254,29 +5202,15 @@ function preinitStyle(
       resumableState.stylesMap[key] = null;
       let stylesInPrecedence = renderState.precedences.get(precedence);
       if (!stylesInPrecedence) {
-        stylesInPrecedence = new Map();
-        renderState.precedences.set(precedence, stylesInPrecedence);
-        const emptyStyleResource = {
-          type: 'style',
-          chunks: ([]: Array<Chunk | PrecomputedChunk>),
-          state: NoState,
-          props: {
-            precedence,
-            hrefs: ([]: Array<string>),
-          },
+        stylesInPrecedence = {
+          precedence: stringToChunk(escapeTextForBrowser(precedence)),
+          rules: ([]: Array<Chunk | PrecomputedChunk>),
+          hrefs: ([]: Array<Chunk | PrecomputedChunk>),
+          sheets: (new Map(): Map<string, StylesheetResource>),
         };
-        stylesInPrecedence.set('', emptyStyleResource);
-        if (__DEV__) {
-          if (renderState.stylePrecedences.has(precedence)) {
-            console.error(
-              'React constructed an empty style resource when a style resource already exists for this precedence: "%s". This is a bug in React.',
-              precedence,
-            );
-          }
-        }
-        renderState.stylePrecedences.set(precedence, emptyStyleResource);
+        renderState.precedences.set(precedence, stylesInPrecedence);
       }
-      stylesInPrecedence.set(key, resource);
+      stylesInPrecedence.sheets.set(key, resource);
       flushResources(request);
     }
     return;
@@ -5302,7 +5236,6 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
     const key = getResourceKey('script', src);
     if (!resumableState.scriptsMap.hasOwnProperty(key)) {
       const resource: ScriptResource = {
-        type: 'script',
         chunks: [],
         state: NoState,
         props: null,
@@ -5345,7 +5278,6 @@ function preinitModuleScript(
     const key = getResourceKey('script', src);
     if (!resumableState.scriptsMap.hasOwnProperty(key)) {
       const resource: ScriptResource = {
-        type: 'script',
         chunks: [],
         state: NoState,
         props: null,
@@ -5401,7 +5333,6 @@ function preloadBootstrapScript(
     crossOrigin,
   };
   const resource: PreloadResource = {
-    type: 'preload',
     chunks: [],
     state: NoState,
     props,
@@ -5445,7 +5376,6 @@ function preloadBootstrapModule(
     crossOrigin,
   };
   const resource: PreloadResource = {
-    type: 'preload',
     chunks: [],
     state: NoState,
     props,
@@ -5466,7 +5396,6 @@ function internalPreinitScript(
   const key = getResourceKey('script', src);
   if (!resumableState.scriptsMap.hasOwnProperty(key)) {
     const resource: ScriptResource = {
-      type: 'script',
       chunks,
       state: NoState,
       props: null,
@@ -5519,8 +5448,18 @@ function adoptPreloadPropsForScriptProps(
     resourceProps.integrity = preloadProps.integrity;
 }
 
-function hoistStyleResource(this: BoundaryResources, resource: StyleResource) {
-  this.add(resource);
+function hoistPrecedenceDependency(
+  this: BoundaryResources,
+  stylesInPrecedence: Precedence,
+) {
+  this.precedences.add(stylesInPrecedence);
+}
+
+function hoistStylesheetDependency(
+  this: BoundaryResources,
+  resource: StylesheetResource,
+) {
+  this.sheets.add(resource);
 }
 
 export function hoistResources(
@@ -5529,7 +5468,11 @@ export function hoistResources(
 ): void {
   const currentBoundaryResources = renderState.boundaryResources;
   if (currentBoundaryResources) {
-    source.forEach(hoistStyleResource, currentBoundaryResources);
+    source.precedences.forEach(
+      hoistPrecedenceDependency,
+      currentBoundaryResources,
+    );
+    source.sheets.forEach(hoistStylesheetDependency, currentBoundaryResources);
   }
 }
 
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index d92258936c4a9..471cf21cf71b0 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ResumableState, BoundaryResources} from './ReactFizzConfigDOM';
+import type {
+  ResumableState,
+  BoundaryResources,
+  Precedence,
+} from './ReactFizzConfigDOM';
 
 import {
   createRenderState as createRenderStateImpl,
@@ -50,8 +54,7 @@ export type RenderState = {
   fontPreloads: Set<any>,
   highImagePreloads: Set<any>,
   // usedImagePreloads: Set<any>,
-  precedences: Map<string, Map<any, any>>,
-  stylePrecedences: Map<string, any>,
+  precedences: Map<string, Precedence>,
   bootstrapScripts: Set<any>,
   scripts: Set<any>,
   bulkPreloads: Set<any>,
@@ -95,7 +98,6 @@ export function createRenderState(
     highImagePreloads: renderState.highImagePreloads,
     // usedImagePreloads: renderState.usedImagePreloads,
     precedences: renderState.precedences,
-    stylePrecedences: renderState.stylePrecedences,
     bootstrapScripts: renderState.bootstrapScripts,
     scripts: renderState.scripts,
     bulkPreloads: renderState.bulkPreloads,

From b9aeb26024bd30b72dde490b30802fa4dd1a89c3 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 20 Sep 2023 21:29:33 -0700
Subject: [PATCH 02/10] [Fizz][Float] Refactor Resources

Refactors Resources to have a more compact and memory efficient struture. Resources generally are just an Array of chunks. A resource is flushed when it's chunks is length zero. A resource does not have any other state.

Stylesheets and Style tags are different and have been modeled as a unit as a Precedence. This object stores the style rules to flush as part of style tags using precedence as well as all the stylesheets associated with the precedence. Stylesheets still need to track state because it affects how we issue boundary completion instructions. Additionally stylesheets encode chunks lazily because we may never write them as html if they are discovered late.

The preload props transfer is now maximally compact (only stores the props we would ever actually adopt) and only stores props for stylesheets and scripts because other preloads have no resource counterpart to adopt props into. The ResumableState maps that track which keys have been observed are being overloaded. Previously if a key was found it meant that a resource already exists (either in this render or in a prior prerender). Now we discriminate between null and object values. If map value is null we can assume the resource exists but if it is an object that represents a prior preload for that resource and the resource must still be constructed.
---
 .../src/server/ReactFizzConfigDOM.js          | 590 +++++++++---------
 1 file changed, 284 insertions(+), 306 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 9eb6780fe5de1..62f83c7fcf6e9 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -148,17 +148,17 @@ export type RenderState = {
   hoistableChunks: Array<Chunk | PrecomputedChunk>,
 
   // Flushing queues for Resource dependencies
-  preconnects: Set<PreconnectResource>,
-  fontPreloads: Set<PreloadResource>,
-  highImagePreloads: Set<PreloadResource>,
+  preconnects: Set<Resource>,
+  fontPreloads: Set<Resource>,
+  highImagePreloads: Set<Resource>,
   // usedImagePreloads: Set<PreloadResource>,
   precedences: Map<string, Precedence>,
-  bootstrapScripts: Set<PreloadResource>,
-  scripts: Set<ScriptResource>,
-  bulkPreloads: Set<PreloadResource>,
+  bootstrapScripts: Set<Resource>,
+  scripts: Set<Resource>,
+  bulkPreloads: Set<Resource>,
 
   // Temporarily keeps track of key to preload resources before shell flushes.
-  preloadsMap: Map<string, PreloadResource>,
+  preloadsMap: Map<string, Resource>,
 
   // Module-global-like reference for current boundary resources
   boundaryResources: ?BoundaryResources,
@@ -188,10 +188,9 @@ export type ResumableState = {
   hasHtml: boolean,
 
   // Resources - Request local cache
-  preloadsMap: {[key: string]: PreloadProps},
+  preloadsMap: {[key: string]: null},
   preconnectsMap: {[key: string]: null},
-  stylesMap: {[key: string]: null},
-  scriptsMap: {[key: string]: null},
+  resourcesMap: {[key: string]: null | AdoptablePreloadPropsTuple},
 };
 
 const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
@@ -497,8 +496,7 @@ export function createResumableState(
     // persistent
     preloadsMap: {},
     preconnectsMap: {},
-    stylesMap: {},
-    scriptsMap: {},
+    resourcesMap: {},
   };
 }
 
@@ -2101,7 +2099,7 @@ function pushLink(
 
     if (props.rel === 'stylesheet') {
       // This <link> may hoistable as a Stylesheet Resource, otherwise it will emit in place
-      const key = getResourceKey('style', href);
+      const key = getResourceKey(href);
       if (
         typeof precedence !== 'string' ||
         props.disabled != null ||
@@ -2136,32 +2134,12 @@ function pushLink(
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
         let stylesInPrecedence = renderState.precedences.get(precedence);
-        if (!resumableState.stylesMap.hasOwnProperty(key)) {
-          const resourceProps = stylesheetPropsFromRawProps(props);
-          let state = NoState;
-          if (resumableState.preloadsMap.hasOwnProperty(key)) {
-            const preloadProps: PreloadProps = resumableState.preloadsMap[key];
-            adoptPreloadPropsForStylesheetProps(resourceProps, preloadProps);
-            const preloadResource = renderState.preloadsMap.get(key);
-            if (preloadResource) {
-              // If we already had a preload we don't want that resource to flush directly.
-              // We let the newly created resource govern flushing.
-              preloadResource.state |= Blocked;
-              if (preloadResource.state & Flushed) {
-                state = PreloadFlushed;
-              }
-            } else {
-              // If we resumed then we assume that this was already flushed
-              // by the shell.
-              state = PreloadFlushed;
-            }
-          }
-          const resource = {
-            chunks: ([]: Array<Chunk | PrecomputedChunk>),
-            state,
-            props: resourceProps,
-          };
-          resumableState.stylesMap[key] = null;
+        const maybePreloadProps = resumableState.resourcesMap.hasOwnProperty(
+          key,
+        )
+          ? resumableState.resourcesMap[key]
+          : undefined;
+        if (maybePreloadProps !== null) {
           if (!stylesInPrecedence) {
             stylesInPrecedence = {
               precedence: stringToChunk(escapeTextForBrowser(precedence)),
@@ -2171,6 +2149,33 @@ function pushLink(
             };
             renderState.precedences.set(precedence, stylesInPrecedence);
           }
+
+          // We are going to create a stylesheet resource so we do not want any preload resources
+          // to be created after this
+          resumableState.preloadsMap[key] = null;
+
+          const resource: StylesheetResource = {
+            state: PENDING,
+            props: stylesheetPropsFromRawProps(props),
+          };
+
+          if (maybePreloadProps) {
+            const preloadProps: AdoptablePreloadPropsTuple = maybePreloadProps;
+            adoptPreloadProps(resource.props, preloadProps);
+
+            const preloadResource = renderState.preloadsMap.get(key);
+            if (preloadResource && preloadResource.length > 0) {
+              // Preload has not flushed yet, we'll clear the chunks to avoid flushing.
+              preloadResource.length = 0;
+            } else {
+              // Either the preload resource from this render already flushed or a preload
+              // from a prerender flushed already. Either way we want to avoid flushing a
+              // preload for the stylesheet
+              resource.state = PRELOADED;
+            }
+          }
+
+          resumableState.resourcesMap[key] = null;
           stylesInPrecedence.sheets.set(key, resource);
           if (renderState.boundaryResources) {
             renderState.boundaryResources.sheets.add(resource);
@@ -2318,9 +2323,9 @@ function pushStyle(
       }
     }
 
-    const key = getResourceKey('style', href);
+    const key = getResourceKey(href);
     let stylesInPrecedence = renderState.precedences.get(precedence);
-    if (!resumableState.stylesMap.hasOwnProperty(key)) {
+    if (!resumableState.resourcesMap.hasOwnProperty(key)) {
       if (!stylesInPrecedence) {
         stylesInPrecedence = {
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
@@ -2334,7 +2339,7 @@ function pushStyle(
           stringToChunk(escapeTextForBrowser(href)),
         );
       }
-      resumableState.stylesMap[key] = null;
+      resumableState.resourcesMap[key] = null;
       pushStyleContents(stylesInPrecedence.rules, props);
     }
     if (stylesInPrecedence) {
@@ -2447,23 +2452,6 @@ function pushStyleContents(
   return;
 }
 
-function getImagePreloadKey(
-  href: string,
-  imageSrcSet: ?string,
-  imageSizes: ?string,
-) {
-  let uniquePart = '';
-  if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
-    uniquePart += '[' + imageSrcSet + ']';
-    if (typeof imageSizes === 'string') {
-      uniquePart += '[' + imageSizes + ']';
-    }
-  } else {
-    uniquePart += '[][]' + href;
-  }
-  return getResourceKey('image', uniquePart);
-}
-
 function pushImg(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
@@ -2474,7 +2462,9 @@ function pushImg(
   const {src, srcSet} = props;
   if (
     props.loading !== 'lazy' &&
-    (typeof src === 'string' || typeof srcSet === 'string') &&
+    (src || srcSet) &&
+    (typeof src === 'string' || src == null) &&
+    (typeof srcSet === 'string' || srcSet == null) &&
     props.fetchPriority !== 'low' &&
     pictureTagInScope === false &&
     // We exclude data URIs in src and srcSet since these should not be preloaded
@@ -2497,9 +2487,9 @@ function pushImg(
   ) {
     // We have a suspensey image and ought to preload it to optimize the loading of display blocking
     // resumableState.
-    const {sizes} = props;
-    const key = getImagePreloadKey(src, srcSet, sizes);
-    let resource: void | PreloadResource;
+    const sizes = typeof props.sizes === 'string' ? props.sizes : undefined;
+    const key = getImageResourceKey(src, srcSet, sizes);
+    let resource: void | Resource;
     if (!resumableState.preloadsMap.hasOwnProperty(key)) {
       const preloadProps: PreloadProps = {
         rel: 'preload',
@@ -2517,14 +2507,10 @@ function pushImg(
         fetchPriority: props.fetchPriority,
         referrerPolicy: props.referrerPolicy,
       };
-      resource = {
-        chunks: [],
-        state: NoState,
-        props: preloadProps,
-      };
-      resumableState.preloadsMap[key] = preloadProps;
+      resource = [];
+      resumableState.preloadsMap[key] = null;
       renderState.preloadsMap.set(key, resource);
-      pushLinkImpl(resource.chunks, preloadProps);
+      pushLinkImpl(resource, preloadProps);
     } else {
       resource = renderState.preloadsMap.get(key);
     }
@@ -2870,32 +2856,35 @@ function pushScript(
     }
 
     const src = props.src;
-    const key = getResourceKey('script', src);
+    const key = getResourceKey(src);
     // We can make this <script> into a ScriptResource
-    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
-      const resource: ScriptResource = {
-        chunks: [],
-        state: NoState,
-        props: null,
-      };
-      resumableState.scriptsMap[key] = null;
-      // Add to the script flushing queue
-      renderState.scripts.add(resource);
+    const maybePreloadProps = resumableState.resourcesMap.hasOwnProperty(key)
+      ? resumableState.resourcesMap[key]
+      : undefined;
+    if (maybePreloadProps !== null) {
+      // We are going to create a script resource so we do not want any new preload
+      // resources to get created for this key
+      resumableState.preloadsMap[key] = null;
 
       let scriptProps = props;
-      if (resumableState.preloadsMap.hasOwnProperty(key)) {
-        const preloadProps: PreloadProps = resumableState.preloadsMap[key];
+      if (maybePreloadProps) {
+        const preloadProps: AdoptablePreloadPropsTuple = maybePreloadProps;
         scriptProps = {...props};
-        adoptPreloadPropsForScriptProps(scriptProps, preloadProps);
+        adoptPreloadProps(scriptProps, preloadProps);
+
         const preloadResource = renderState.preloadsMap.get(key);
         if (preloadResource) {
-          // If we already had a preload we don't want that resource to flush directly.
-          // We let the newly created resource govern flushing.
-          preloadResource.state |= Blocked;
+          // clear out the preload chunks so it does not flush
+          preloadResource.length = 0;
         }
       }
+
+      const resource: Resource = [];
+      resumableState.resourcesMap[key] = null;
+      // Add to the script flushing queue
+      renderState.scripts.add(resource);
       // encode the tag as Chunks
-      pushScriptImpl(resource.chunks, scriptProps);
+      pushScriptImpl(resource, scriptProps);
     }
 
     if (textEmbedded) {
@@ -4143,7 +4132,9 @@ function flushStyleTagsLateForBoundary(
 }
 
 function hasStylesToHoist(stylesheet: StylesheetResource): boolean {
-  if ((stylesheet.state & FlushedInPreamble) === NoState) {
+  // We need to reveal boundaries with styles whenever a stylesheet it depends on is either
+  // not flushed or flushed after the preamble (shell).
+  if (stylesheet.state !== PREAMBLE) {
     currentlyRenderingBoundaryHasStylesToHoist = true;
     return true;
   }
@@ -4174,43 +4165,31 @@ export function writeResourcesForBoundary(
   return destinationHasCapacity;
 }
 
-function flushResourceInPreamble<T: Resource>(this: Destination, resource: T) {
-  if ((resource.state & (Flushed | Blocked)) === NoState) {
-    const chunks = resource.chunks;
-    for (let i = 0; i < chunks.length; i++) {
-      writeChunk(this, chunks[i]);
-    }
-    resource.state |= FlushedInPreamble;
+function flushResource(this: Destination, resource: Resource) {
+  for (let i = 0; i < resource.length; i++) {
+    writeChunk(this, resource[i]);
   }
+  resource.length = 0;
 }
 
-function flushResourceLate<T: Resource>(this: Destination, resource: T) {
-  if ((resource.state & (Flushed | Blocked)) === NoState) {
-    const chunks = resource.chunks;
-    for (let i = 0; i < chunks.length; i++) {
-      writeChunk(this, chunks[i]);
-    }
-    resource.state |= FlushedLate;
-  }
-}
+const stylesheetFlushingQueue: Array<Chunk | PrecomputedChunk> = [];
 
 function flushStyleInPreamble(
   this: Destination,
-  resource: StylesheetResource,
+  stylesheet: StylesheetResource,
   key: string,
   map: Map<string, StylesheetResource>,
 ) {
-  const chunks = resource.chunks;
-
   // We still need to encode stylesheet chunks
   // because unlike most Hoistables and Resources we do not eagerly encode
   // them during render. This is because if we flush late we have to send a
   // different encoding and we don't want to encode multiple times
-  pushLinkImpl(chunks, resource.props);
-  for (let i = 0; i < chunks.length; i++) {
-    writeChunk(this, chunks[i]);
+  pushLinkImpl(stylesheetFlushingQueue, stylesheet.props);
+  for (let i = 0; i < stylesheetFlushingQueue.length; i++) {
+    writeChunk(this, stylesheetFlushingQueue[i]);
   }
-  resource.state |= FlushedInPreamble;
+  stylesheetFlushingQueue.length = 0;
+  stylesheet.state = PREAMBLE;
 }
 
 const styleTagResourceOpen1 = stringToPrecomputedChunk(
@@ -4262,23 +4241,19 @@ function flushPrecedenceInPreamble(
   }
 }
 
-function preloadLateStyle(this: Destination, resource: StylesheetResource) {
-  if (resource.state & PreloadFlushed) {
-    // This resource has already had a preload flushed
-    return;
-  }
-
-  const chunks = resource.chunks;
-  const preloadProps = preloadAsStylePropsFromProps(
-    resource.props.href,
-    resource.props,
-  );
-  pushLinkImpl(chunks, preloadProps);
-  for (let i = 0; i < chunks.length; i++) {
-    writeChunk(this, chunks[i]);
+function preloadLateStyle(this: Destination, stylesheet: StylesheetResource) {
+  if (stylesheet.state === PENDING) {
+    stylesheet.state = PRELOADED;
+    const preloadProps = preloadAsStylePropsFromProps(
+      stylesheet.props.href,
+      stylesheet.props,
+    );
+    pushLinkImpl(stylesheetFlushingQueue, preloadProps);
+    for (let i = 0; i < stylesheetFlushingQueue.length; i++) {
+      writeChunk(this, stylesheetFlushingQueue[i]);
+    }
+    stylesheetFlushingQueue.length = 0;
   }
-  resource.state |= PreloadFlushed;
-  chunks.length = 0;
 }
 
 function preloadLateStyles(
@@ -4350,7 +4325,7 @@ export function writePreamble(
   charsetChunks.length = 0;
 
   // emit preconnect resources
-  renderState.preconnects.forEach(flushResourceInPreamble, destination);
+  renderState.preconnects.forEach(flushResource, destination);
   renderState.preconnects.clear();
 
   const preconnectChunks = renderState.preconnectChunks;
@@ -4359,10 +4334,10 @@ export function writePreamble(
   }
   preconnectChunks.length = 0;
 
-  renderState.fontPreloads.forEach(flushResourceInPreamble, destination);
+  renderState.fontPreloads.forEach(flushResource, destination);
   renderState.fontPreloads.clear();
 
-  renderState.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  renderState.highImagePreloads.forEach(flushResource, destination);
   renderState.highImagePreloads.clear();
 
   // Flush unblocked stylesheets by precedence
@@ -4374,12 +4349,12 @@ export function writePreamble(
   }
   importMapChunks.length = 0;
 
-  renderState.bootstrapScripts.forEach(flushResourceInPreamble, destination);
+  renderState.bootstrapScripts.forEach(flushResource, destination);
 
-  renderState.scripts.forEach(flushResourceInPreamble, destination);
+  renderState.scripts.forEach(flushResource, destination);
   renderState.scripts.clear();
 
-  renderState.bulkPreloads.forEach(flushResourceInPreamble, destination);
+  renderState.bulkPreloads.forEach(flushResource, destination);
   renderState.bulkPreloads.clear();
 
   // Write embedding preloadChunks
@@ -4425,7 +4400,7 @@ export function writeHoistables(
   // We omit charsetChunks because we have already sent the shell and if it wasn't
   // already sent it is too late now.
 
-  renderState.preconnects.forEach(flushResourceLate, destination);
+  renderState.preconnects.forEach(flushResource, destination);
   renderState.preconnects.clear();
 
   const preconnectChunks = renderState.preconnectChunks;
@@ -4434,10 +4409,10 @@ export function writeHoistables(
   }
   preconnectChunks.length = 0;
 
-  renderState.fontPreloads.forEach(flushResourceLate, destination);
+  renderState.fontPreloads.forEach(flushResource, destination);
   renderState.fontPreloads.clear();
 
-  renderState.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  renderState.highImagePreloads.forEach(flushResource, destination);
   renderState.highImagePreloads.clear();
 
   // Preload any stylesheets. these will emit in a render instruction that follows this
@@ -4452,10 +4427,10 @@ export function writeHoistables(
   // bootstrap scripts should flush above script priority but these can only flush in the preamble
   // so we elide the code here for performance
 
-  renderState.scripts.forEach(flushResourceLate, destination);
+  renderState.scripts.forEach(flushResource, destination);
   renderState.scripts.clear();
 
-  renderState.bulkPreloads.forEach(flushResourceLate, destination);
+  renderState.bulkPreloads.forEach(flushResource, destination);
   renderState.bulkPreloads.clear();
 
   // Write embedding preloadChunks
@@ -4505,10 +4480,10 @@ function writeStyleResourceDependenciesInJS(
 
   let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
   boundaryResources.sheets.forEach(resource => {
-    if (resource.state & FlushedInPreamble) {
+    if (resource.state === PREAMBLE) {
       // We can elide this dependency because it was flushed in the shell and
       // should be ready before content is shown on the client
-    } else if (resource.state & Flushed) {
+    } else if (resource.state === LATE) {
       // We only need to emit the href because this resource flushed in an earlier
       // boundary already which encoded the attributes necessary to construct
       // the resource instance on the client.
@@ -4531,7 +4506,7 @@ function writeStyleResourceDependenciesInJS(
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
 
-      resource.state |= FlushedLate;
+      resource.state = LATE;
     }
   });
   writeChunk(destination, arrayCloseBracket);
@@ -4698,10 +4673,10 @@ function writeStyleResourceDependenciesInAttr(
 
   let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
   boundaryResources.sheets.forEach(resource => {
-    if (resource.state & FlushedInPreamble) {
+    if (resource.state === PREAMBLE) {
       // We can elide this dependency because it was flushed in the shell and
       // should be ready before content is shown on the client
-    } else if (resource.state & Flushed) {
+    } else if (resource.state === LATE) {
       // We only need to emit the href because this resource flushed in an earlier
       // boundary already which encoded the attributes necessary to construct
       // the resource instance on the client.
@@ -4724,7 +4699,7 @@ function writeStyleResourceDependenciesInAttr(
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
 
-      resource.state |= FlushedLate;
+      resource.state = LATE;
     }
   });
   writeChunk(destination, arrayCloseBracket);
@@ -4885,31 +4860,17 @@ function writeStyleResourceAttributeInAttr(
  * Resources
  */
 
-type ResourceStateTag = number;
-const NoState /*            */ = 0b0000;
-// These tags indicate whether the Resource was flushed and in which phase
-const FlushedInPreamble /*  */ = 0b0001;
-const FlushedLate /*        */ = 0b0010;
-const Flushed /*            */ = 0b0011;
-// This tag indicates whether this Resource is blocked from flushing.
-// This currently is only used with stylesheets that are blocked by a Boundary
-const Blocked /*            */ = 0b0100;
-// This tag indicates whether this Resource has been preloaded.
-// This generally only makes sense for Resources other than PreloadResource
-const PreloadFlushed /*     */ = 0b1000;
-
-type TResource<P> = {
-  chunks: Array<Chunk | PrecomputedChunk>,
-  state: ResourceStateTag,
-  props: P,
-};
+type StylesheetState = 0 | 1 | 2 | 3;
+const PENDING: StylesheetState = 0;
+const PRELOADED: StylesheetState = 1;
+const PREAMBLE: StylesheetState = 2;
+const LATE: StylesheetState = 3;
 
 type PreconnectProps = {
   rel: 'preconnect' | 'dns-prefetch',
   href: string,
   [string]: mixed,
 };
-type PreconnectResource = TResource<null>;
 
 type PreloadAsProps = {
   rel: 'preload',
@@ -4923,15 +4884,6 @@ type PreloadModuleProps = {
   [string]: ?string,
 };
 type PreloadProps = PreloadAsProps | PreloadModuleProps;
-type PreloadResource = TResource<PreloadProps>;
-
-type StylesheetProps = {
-  rel: 'stylesheet',
-  href: string,
-  'data-precedence': string,
-  [string]: mixed,
-};
-type StylesheetResource = TResource<StylesheetProps>;
 
 type ScriptProps = {
   async: true,
@@ -4944,13 +4896,19 @@ type ModuleProps = {
   type: 'module',
   [string]: mixed,
 };
-type ScriptResource = TResource<null>;
 
-type Resource =
-  | StylesheetResource
-  | ScriptResource
-  | PreloadResource
-  | PreconnectResource;
+type Resource = Array<Chunk | PrecomputedChunk>;
+
+type StylesheetProps = {
+  rel: 'stylesheet',
+  href: string,
+  'data-precedence': string,
+  [string]: mixed,
+};
+type StylesheetResource = {
+  props: StylesheetProps,
+  state: StylesheetState,
+};
 
 export type BoundaryResources = {
   precedences: Set<Precedence>,
@@ -4978,8 +4936,29 @@ export function setCurrentlyRenderingBoundaryResourcesTarget(
   renderState.boundaryResources = boundaryResources;
 }
 
-function getResourceKey(as: string, href: string): string {
-  return `[${as}]${href}`;
+function getResourceKey(href: string): string {
+  return href;
+}
+
+function getImageResourceKey(
+  href: string,
+  imageSrcSet: ?string,
+  imageSizes: ?string,
+): string {
+  if (imageSrcSet) {
+    return imageSrcSet + '\n' + (imageSizes || '');
+  }
+  return href;
+}
+
+function getPreconnectResourceKey(
+  href: string,
+  crossOrigin: ?CrossOriginEnum,
+): string {
+  if (typeof crossOrigin === 'string') {
+    return href + '\n' + crossOrigin;
+  }
+  return href;
 }
 
 function prefetchDNS(href: string) {
@@ -4999,18 +4978,11 @@ function prefetchDNS(href: string) {
   const renderState = getRenderState(request);
 
   if (typeof href === 'string' && href) {
-    const key = getResourceKey('prefetchDNS', href);
+    const key = getResourceKey(href);
     if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
-      const resource: PreconnectResource = {
-        chunks: [],
-        state: NoState,
-        props: null,
-      };
+      const resource: Resource = [];
       resumableState.preconnectsMap[key] = null;
-      pushLinkImpl(
-        resource.chunks,
-        ({href, rel: 'dns-prefetch'}: PreconnectProps),
-      );
+      pushLinkImpl(resource, ({href, rel: 'dns-prefetch'}: PreconnectProps));
       renderState.preconnects.add(resource);
     }
     flushResources(request);
@@ -5034,18 +5006,12 @@ function preconnect(href: string, crossOrigin: ?CrossOriginEnum) {
   const renderState = getRenderState(request);
 
   if (typeof href === 'string' && href) {
-    const key = `[preconnect][${
-      typeof crossOrigin === 'string' ? crossOrigin : 'null'
-    }]${href}`;
+    const key = getPreconnectResourceKey(href, crossOrigin);
     if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
-      const resource: PreconnectResource = {
-        chunks: [],
-        state: NoState,
-        props: null,
-      };
+      const resource: Resource = [];
       resumableState.preconnectsMap[key] = null;
       pushLinkImpl(
-        resource.chunks,
+        resource,
         ({rel: 'preconnect', href, crossOrigin}: PreconnectProps),
       );
       renderState.preconnects.add(resource);
@@ -5072,15 +5038,33 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
   if (as && href) {
     options = options || {};
     let key: string;
+
     if (as === 'image') {
       // For image preloads the key contains either the imageSrcSet + imageSizes or the href but not
       // both. This is to prevent identical calls with the same srcSet and sizes to be duplicated
       // by varying the href. this is an edge case but it is the most correct behavior.
-      key = getImagePreloadKey(href, options.imageSrcSet, options.imageSizes);
+      key = getImageResourceKey(href, options.imageSrcSet, options.imageSizes);
     } else {
-      key = getResourceKey(as, href);
+      key = getResourceKey(href);
     }
+
     if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+      resumableState.preloadsMap[key] = null;
+
+      // If we already have a script or stylesheet resource for this key we need to bail out since we
+      // do not want to create this resource. Otherwise we want to capture certain preload props to
+      // apply to a later encountered resource
+      if (as === 'style' || as === 'script') {
+        if (resumableState.resourcesMap.hasOwnProperty(key)) {
+          return;
+        } else {
+          resumableState.resourcesMap[key] = [
+            options.crossOrigin,
+            options.integrity,
+          ];
+        }
+      }
+
       const props = Object.assign(
         ({
           rel: 'preload',
@@ -5089,17 +5073,12 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
         }: PreloadProps),
         options,
       );
-      const resource: PreloadResource = {
-        chunks: [],
-        state: NoState,
-        props,
-      };
-      resumableState.preloadsMap[key] = props;
+      const resource: Resource = [];
       renderState.preloadsMap.set(key, resource);
-      pushLinkImpl(resource.chunks, props);
+      pushLinkImpl(resource, props);
       if (as === 'font') {
         renderState.fontPreloads.add(resource);
-      } else if (as === 'image' && resource.props.fetchPriority === 'high') {
+      } else if (as === 'image' && props.fetchPriority === 'high') {
         renderState.highImagePreloads.add(resource);
       } else {
         renderState.bulkPreloads.add(resource);
@@ -5128,9 +5107,7 @@ function preloadModule(
   const resumableState = getResumableState(request);
   const renderState = getRenderState(request);
   if (href) {
-    const as =
-      options && typeof options.as === 'string' ? options.as : 'script';
-    const key = getResourceKey(as, href);
+    const key = getResourceKey(href);
     if (!resumableState.preloadsMap.hasOwnProperty(key)) {
       const props: PreloadModuleProps = Object.assign(
         ({
@@ -5139,14 +5116,10 @@ function preloadModule(
         }: PreloadModuleProps),
         options,
       );
-      const resource: PreloadResource = {
-        chunks: [],
-        state: NoState,
-        props,
-      };
-      resumableState.preloadsMap[key] = props;
+      const resource: Resource = [];
+      resumableState.preloadsMap[key] = null;
       renderState.preloadsMap.set(key, resource);
-      pushLinkImpl(resource.chunks, resource.props);
+      pushLinkImpl(resource, props);
       renderState.bulkPreloads.add(resource);
     }
     flushResources(request);
@@ -5173,34 +5146,14 @@ function preinitStyle(
   const resumableState = getResumableState(request);
   const renderState = getRenderState(request);
   if (href) {
-    const as = 'style';
-    const key = getResourceKey(as, href);
-    if (!resumableState.stylesMap.hasOwnProperty(key)) {
-      precedence = precedence || 'default';
-      let state = NoState;
-      const preloadResource = renderState.preloadsMap.get(key);
-      if (preloadResource && preloadResource.state & Flushed) {
-        state = PreloadFlushed;
-      } else if (resumableState.preloadsMap.hasOwnProperty(key)) {
-        // If we resumed then we assume that this was already flushed
-        // by the shell.
-        state = PreloadFlushed;
-      }
-      const props: StylesheetProps = Object.assign(
-        ({
-          rel: 'stylesheet',
-          href,
-          'data-precedence': precedence,
-        }: StylesheetProps),
-        options,
-      );
-      const resource = {
-        chunks: ([]: Array<Chunk | PrecomputedChunk>),
-        state,
-        props,
-      };
-      resumableState.stylesMap[key] = null;
-      let stylesInPrecedence = renderState.precedences.get(precedence);
+    precedence = precedence || 'default';
+    const key = getResourceKey(href);
+
+    let stylesInPrecedence = renderState.precedences.get(precedence);
+    const maybePreloadProps = resumableState.resourcesMap.hasOwnProperty(key)
+      ? resumableState.resourcesMap[key]
+      : undefined;
+    if (maybePreloadProps !== null) {
       if (!stylesInPrecedence) {
         stylesInPrecedence = {
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
@@ -5210,10 +5163,42 @@ function preinitStyle(
         };
         renderState.precedences.set(precedence, stylesInPrecedence);
       }
+
+      // We are going to create a stylesheet resource so we do not want any preload resources
+      // to be created after this
+      resumableState.preloadsMap[key] = null;
+
+      const resource = {
+        state: PENDING,
+        props: Object.assign(
+          ({
+            rel: 'stylesheet',
+            href,
+            'data-precedence': precedence,
+          }: StylesheetProps),
+          options,
+        ),
+      };
+
+      if (maybePreloadProps) {
+        const preloadProps: AdoptablePreloadPropsTuple = maybePreloadProps;
+        adoptPreloadProps(resource.props, preloadProps);
+
+        const preloadResource = renderState.preloadsMap.get(key);
+        if (preloadResource && preloadResource.length > 0) {
+          // Preload has not flushed yet, we'll clear the chunks to avoid flushing.
+          preloadResource.length = 0;
+        } else {
+          // Either the preload resource from this render already flushed or a preload
+          // from a prerender flushed already. Either way we want to avoid flushing a
+          // preload for the stylesheet
+          resource.state = PRELOADED;
+        }
+      }
+      resumableState.resourcesMap[key] = null;
       stylesInPrecedence.sheets.set(key, resource);
       flushResources(request);
     }
-    return;
   }
 }
 
@@ -5233,14 +5218,15 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
   const resumableState = getResumableState(request);
   const renderState = getRenderState(request);
   if (src) {
-    const key = getResourceKey('script', src);
-    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
-      const resource: ScriptResource = {
-        chunks: [],
-        state: NoState,
-        props: null,
-      };
-      resumableState.scriptsMap[key] = null;
+    const key = getResourceKey(src);
+    const maybePreloadProps = resumableState.resourcesMap.hasOwnProperty(key)
+      ? resumableState.resourcesMap[key]
+      : undefined;
+    if (maybePreloadProps !== null) {
+      // We are going to create a script resource so we do not want any new preload
+      // resources to get created for this key
+      resumableState.preloadsMap[key] = null;
+
       const props: ScriptProps = Object.assign(
         ({
           src,
@@ -5248,8 +5234,23 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
         }: ScriptProps),
         options,
       );
+      if (maybePreloadProps) {
+        const preloadProps: AdoptablePreloadPropsTuple = maybePreloadProps;
+        adoptPreloadProps(props, preloadProps);
+
+        const preloadResource = renderState.preloadsMap.get(key);
+        if (preloadResource) {
+          // clear out the preload chunks so it does not flush
+          preloadResource.length = 0;
+        }
+      }
+
+      const resource: Resource = [];
+      resumableState.resourcesMap[key] = null;
+      // Add to the script flushing queue
       renderState.scripts.add(resource);
-      pushScriptImpl(resource.chunks, props);
+      // encode the tag as Chunks
+      pushScriptImpl(resource, props);
       flushResources(request);
     }
     return;
@@ -5275,14 +5276,10 @@ function preinitModuleScript(
   const resumableState = getResumableState(request);
   const renderState = getRenderState(request);
   if (src) {
-    const key = getResourceKey('script', src);
-    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
-      const resource: ScriptResource = {
-        chunks: [],
-        state: NoState,
-        props: null,
-      };
-      resumableState.scriptsMap[key] = null;
+    const key = getResourceKey(src);
+    if (!resumableState.resourcesMap.hasOwnProperty(key)) {
+      const resource: Resource = [];
+      resumableState.resourcesMap[key] = null;
       const props = Object.assign(
         ({
           src,
@@ -5292,7 +5289,7 @@ function preinitModuleScript(
         options,
       );
       renderState.scripts.add(resource);
-      pushScriptImpl(resource.chunks, props);
+      pushScriptImpl(resource, props);
       flushResources(request);
     }
     return;
@@ -5311,7 +5308,7 @@ function preloadBootstrapScript(
   integrity: ?string,
   crossOrigin: ?string,
 ): void {
-  const key = getResourceKey('script', src);
+  const key = getResourceKey(src);
   if (__DEV__) {
     if (resumableState.preloadsMap.hasOwnProperty(key)) {
       // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
@@ -5332,15 +5329,11 @@ function preloadBootstrapScript(
     integrity,
     crossOrigin,
   };
-  const resource: PreloadResource = {
-    chunks: [],
-    state: NoState,
-    props,
-  };
-  resumableState.preloadsMap[key] = props;
+  const resource: Resource = [];
+  resumableState.preloadsMap[key] = null;
   renderState.preloadsMap.set(key, resource);
   renderState.bootstrapScripts.add(resource);
-  pushLinkImpl(resource.chunks, props);
+  pushLinkImpl(resource, props);
 }
 
 // This function is only safe to call at Request start time since it assumes
@@ -5355,7 +5348,7 @@ function preloadBootstrapModule(
   integrity: ?string,
   crossOrigin: ?string,
 ): void {
-  const key = getResourceKey('script', src);
+  const key = getResourceKey(src);
   if (__DEV__) {
     if (resumableState.preloadsMap.hasOwnProperty(key)) {
       // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
@@ -5375,15 +5368,11 @@ function preloadBootstrapModule(
     integrity,
     crossOrigin,
   };
-  const resource: PreloadResource = {
-    chunks: [],
-    state: NoState,
-    props,
-  };
-  resumableState.preloadsMap[key] = props;
+  const resource: Resource = [];
+  resumableState.preloadsMap[key] = null;
   renderState.preloadsMap.set(key, resource);
   renderState.bootstrapScripts.add(resource);
-  pushLinkImpl(resource.chunks, props);
+  pushLinkImpl(resource, props);
   return;
 }
 
@@ -5393,14 +5382,10 @@ function internalPreinitScript(
   src: string,
   chunks: Array<Chunk | PrecomputedChunk>,
 ): void {
-  const key = getResourceKey('script', src);
-  if (!resumableState.scriptsMap.hasOwnProperty(key)) {
-    const resource: ScriptResource = {
-      chunks,
-      state: NoState,
-      props: null,
-    };
-    resumableState.scriptsMap[key] = null;
+  const key = getResourceKey(src);
+  if (!resumableState.resourcesMap.hasOwnProperty(key)) {
+    const resource: Resource = chunks;
+    resumableState.resourcesMap[key] = null;
     renderState.scripts.add(resource);
   }
   return;
@@ -5428,24 +5413,17 @@ function stylesheetPropsFromRawProps(rawProps: any): StylesheetProps {
   };
 }
 
-function adoptPreloadPropsForStylesheetProps(
-  resourceProps: StylesheetProps,
-  preloadProps: PreloadProps,
-): void {
-  if (resourceProps.crossOrigin == null)
-    resourceProps.crossOrigin = preloadProps.crossOrigin;
-  if (resourceProps.integrity == null)
-    resourceProps.integrity = preloadProps.integrity;
-}
+type AdoptablePreloadPropsTuple = [
+  /* crossOrigin */ ?string,
+  /* integrity */ ?string,
+];
 
-function adoptPreloadPropsForScriptProps(
-  resourceProps: ScriptProps,
-  preloadProps: PreloadProps,
+function adoptPreloadProps(
+  target: StylesheetProps | ScriptProps,
+  tuple: AdoptablePreloadPropsTuple,
 ): void {
-  if (resourceProps.crossOrigin == null)
-    resourceProps.crossOrigin = preloadProps.crossOrigin;
-  if (resourceProps.integrity == null)
-    resourceProps.integrity = preloadProps.integrity;
+  if (target.crossOrigin == null) target.crossOrigin = tuple[0];
+  if (target.integrity == null) target.integrity = tuple[1];
 }
 
 function hoistPrecedenceDependency(

From 52fa7fa58f7e12cf0e060cfef796a36c264a2fac Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Thu, 21 Sep 2023 19:28:18 -0700
Subject: [PATCH 03/10] Unifies the key identity of preloads and resources.
 Some resources do not have a loadable type and we identify these as
 UnknownResources. For example fonts and images are preloadable but not
 actually loadable so we bucket them in this unknown category

We use an array to identify a preload state.

I've cleaned up the implementaiton of preloads for bootstrap scripts and modules
I've also added support for nonce for preloadModule and preinitModule.
---
 .../src/server/ReactFizzConfigDOM.js          | 612 +++++++++++-------
 .../ReactDOMFizzServerBrowser-test.js         |   4 +-
 .../__tests__/ReactDOMFizzServerNode-test.js  |   2 +-
 .../ReactDOMFizzStaticBrowser-test.js         |   2 +-
 .../__tests__/ReactDOMFizzStaticNode-test.js  |   2 +-
 .../react-dom/src/shared/ReactDOMTypes.js     |   6 +-
 .../ReactDOMServerFB-test.internal.js         |   2 +-
 7 files changed, 406 insertions(+), 224 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 62f83c7fcf6e9..94332dedb3b1c 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -173,6 +173,30 @@ export type RenderState = {
   ...
 };
 
+type Exists = null;
+type Preloaded = [];
+// Credentials here are things that affect whether a browser will make a request
+// as well as things that affect which connection the browser will use for that request.
+// We want these to be aligned across preloads and resources because otherwise the preload
+// will be wasted.
+// We investigated whether referrerPolicy should be included here but from experimentation
+// it seems that browsers do not treat this as part of the http cache key and does not affect
+// which connection is used.
+type PreloadedWithCredentials = [
+  /* crossOrigin */ ?string,
+  /* integrity */ ?string,
+];
+
+const EXISTS: Exists = null;
+// This constant is to mark preloads that have no unique credentials
+// to convey. It should never be checked by identity and we should not
+// assume Preload values in ResumableState equal this value because they
+// will have come from some parsed input.
+const PRELOAD_SIGIL: Preloaded = [];
+if (__DEV__) {
+  Object.freeze(PRELOAD_SIGIL);
+}
+
 // Per response, global state that is not contextual to the rendering subtree.
 // This is resumable and therefore should be serializable.
 export type ResumableState = {
@@ -188,9 +212,31 @@ export type ResumableState = {
   hasHtml: boolean,
 
   // Resources - Request local cache
-  preloadsMap: {[key: string]: null},
-  preconnectsMap: {[key: string]: null},
-  resourcesMap: {[key: string]: null | AdoptablePreloadPropsTuple},
+  unknownResources: {
+    [asType: string]: {
+      [href: string]: Preloaded,
+    },
+  },
+  dnsResources: {[key: string]: Exists},
+  connectResources: {
+    default: {[key: string]: Exists},
+    anonymous: {[key: string]: Exists},
+    credentials: {[key: string]: Exists},
+  },
+  styleResources: {
+    [key: string]: Exists | Preloaded | PreloadedWithCredentials,
+  },
+  scriptResources: {
+    [key: string]: Exists | Preloaded | PreloadedWithCredentials,
+  },
+  moduleUnknownResources: {
+    [asType: string]: {
+      [href: string]: Preloaded,
+    },
+  },
+  moduleScriptResources: {
+    [key: string]: Exists | Preloaded | PreloadedWithCredentials,
+  },
 };
 
 const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
@@ -357,25 +403,30 @@ export function createRenderState(
   if (bootstrapScripts !== undefined) {
     for (let i = 0; i < bootstrapScripts.length; i++) {
       const scriptConfig = bootstrapScripts[i];
-      const src =
-        typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
-      const integrity =
-        typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
-      const crossOrigin =
-        typeof scriptConfig === 'string' || scriptConfig.crossOrigin == null
-          ? undefined
-          : scriptConfig.crossOrigin === 'use-credentials'
-          ? 'use-credentials'
-          : '';
-
-      preloadBootstrapScript(
-        resumableState,
-        renderState,
-        src,
+      let src, crossOrigin, integrity;
+      const props: PreloadAsProps = ({
+        rel: 'preload',
+        as: 'script',
+        fetchPriority: 'low',
         nonce,
-        integrity,
-        crossOrigin,
-      );
+      }: any);
+      if (typeof scriptConfig === 'string') {
+        props.href = src = scriptConfig;
+      } else {
+        props.href = src = scriptConfig.src;
+        props.integrity = integrity =
+          typeof scriptConfig.integrity === 'string'
+            ? scriptConfig.integrity
+            : undefined;
+        props.crossOrigin = crossOrigin =
+          typeof scriptConfig === 'string' || scriptConfig.crossOrigin == null
+            ? undefined
+            : scriptConfig.crossOrigin === 'use-credentials'
+            ? 'use-credentials'
+            : '';
+      }
+
+      preloadBootstrapScriptOrModule(resumableState, renderState, src, props);
 
       bootstrapChunks.push(
         startScriptSrc,
@@ -387,7 +438,7 @@ export function createRenderState(
           stringToChunk(escapeTextForBrowser(nonce)),
         );
       }
-      if (integrity) {
+      if (typeof integrity === 'string') {
         bootstrapChunks.push(
           scriptIntegirty,
           stringToChunk(escapeTextForBrowser(integrity)),
@@ -405,25 +456,29 @@ export function createRenderState(
   if (bootstrapModules !== undefined) {
     for (let i = 0; i < bootstrapModules.length; i++) {
       const scriptConfig = bootstrapModules[i];
-      const src =
-        typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
-      const integrity =
-        typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
-      const crossOrigin =
-        typeof scriptConfig === 'string' || scriptConfig.crossOrigin == null
-          ? undefined
-          : scriptConfig.crossOrigin === 'use-credentials'
-          ? 'use-credentials'
-          : '';
-
-      preloadBootstrapModule(
-        resumableState,
-        renderState,
-        src,
+      let src, crossOrigin, integrity;
+      const props: PreloadModuleProps = ({
+        rel: 'modulepreload',
+        fetchPriority: 'low',
         nonce,
-        integrity,
-        crossOrigin,
-      );
+      }: any);
+      if (typeof scriptConfig === 'string') {
+        props.href = src = scriptConfig;
+      } else {
+        props.href = src = scriptConfig.src;
+        props.integrity = integrity =
+          typeof scriptConfig.integrity === 'string'
+            ? scriptConfig.integrity
+            : undefined;
+        props.crossOrigin = crossOrigin =
+          typeof scriptConfig === 'string' || scriptConfig.crossOrigin == null
+            ? undefined
+            : scriptConfig.crossOrigin === 'use-credentials'
+            ? 'use-credentials'
+            : '';
+      }
+
+      preloadBootstrapScriptOrModule(resumableState, renderState, src, props);
 
       bootstrapChunks.push(
         startModuleSrc,
@@ -436,7 +491,7 @@ export function createRenderState(
           stringToChunk(escapeTextForBrowser(nonce)),
         );
       }
-      if (integrity) {
+      if (typeof integrity === 'string') {
         bootstrapChunks.push(
           scriptIntegirty,
           stringToChunk(escapeTextForBrowser(integrity)),
@@ -494,9 +549,17 @@ export function createResumableState(
     // @TODO add bootstrap script to implicit preloads
 
     // persistent
-    preloadsMap: {},
-    preconnectsMap: {},
-    resourcesMap: {},
+    unknownResources: {},
+    dnsResources: {},
+    connectResources: {
+      default: {},
+      anonymous: {},
+      credentials: {},
+    },
+    styleResources: {},
+    scriptResources: {},
+    moduleUnknownResources: {},
+    moduleScriptResources: {},
   };
 }
 
@@ -2134,12 +2197,16 @@ function pushLink(
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
         let stylesInPrecedence = renderState.precedences.get(precedence);
-        const maybePreloadProps = resumableState.resourcesMap.hasOwnProperty(
-          key,
-        )
-          ? resumableState.resourcesMap[key]
+        const hasKey = resumableState.styleResources.hasOwnProperty(key);
+        const resourceState = hasKey
+          ? resumableState.styleResources[key]
           : undefined;
-        if (maybePreloadProps !== null) {
+        if (resourceState !== EXISTS) {
+          // We are going to create this resource now so it is marked as Exists
+          resumableState.styleResources[key] = EXISTS;
+
+          // If this is the first time we've encountered this precedence we need
+          // to create a PrecedenceQueue
           if (!stylesInPrecedence) {
             stylesInPrecedence = {
               precedence: stringToChunk(escapeTextForBrowser(precedence)),
@@ -2150,32 +2217,38 @@ function pushLink(
             renderState.precedences.set(precedence, stylesInPrecedence);
           }
 
-          // We are going to create a stylesheet resource so we do not want any preload resources
-          // to be created after this
-          resumableState.preloadsMap[key] = null;
-
           const resource: StylesheetResource = {
             state: PENDING,
             props: stylesheetPropsFromRawProps(props),
           };
 
-          if (maybePreloadProps) {
-            const preloadProps: AdoptablePreloadPropsTuple = maybePreloadProps;
-            adoptPreloadProps(resource.props, preloadProps);
+          if (resourceState) {
+            // When resourceState is truty it is a Preload state. We cast it for clarity
+            const preloadState: Preloaded | PreloadedWithCredentials =
+              resourceState;
+            if (preloadState.length === 2) {
+              adoptPreloadCredentials(resource.props, preloadState);
+            }
 
             const preloadResource = renderState.preloadsMap.get(key);
             if (preloadResource && preloadResource.length > 0) {
-              // Preload has not flushed yet, we'll clear the chunks to avoid flushing.
+              // The Preload for this resource was created in this render pass and has not flushed yet so
+              // we need to clear it to avoid it flushing.
               preloadResource.length = 0;
             } else {
-              // Either the preload resource from this render already flushed or a preload
-              // from a prerender flushed already. Either way we want to avoid flushing a
-              // preload for the stylesheet
+              // Either the preload resource from this render already flushed in this render pass
+              // or the preload flushed in a prior pass (prerender). In either case we need to mark
+              // this resource as already having been preloaded.
               resource.state = PRELOADED;
             }
+          } else {
+            // We don't need to check whether a preloadResource exists in the renderState
+            // because if it did exist then the resourceState would also exist and we would
+            // have hit the primary if condition above.
           }
 
-          resumableState.resourcesMap[key] = null;
+          // We add the newly created resource to our PrecedenceQueue and if necessary
+          // track the resource with the currently rendering boundary
           stylesInPrecedence.sheets.set(key, resource);
           if (renderState.boundaryResources) {
             renderState.boundaryResources.sheets.add(resource);
@@ -2325,8 +2398,26 @@ function pushStyle(
 
     const key = getResourceKey(href);
     let stylesInPrecedence = renderState.precedences.get(precedence);
-    if (!resumableState.resourcesMap.hasOwnProperty(key)) {
+    const hasKey = resumableState.styleResources.hasOwnProperty(key);
+    const resourceState = hasKey
+      ? resumableState.styleResources[key]
+      : undefined;
+    if (resourceState !== EXISTS) {
+      // We are going to create this resource now so it is marked as Exists
+      resumableState.styleResources[key] = EXISTS;
+
+      if (__DEV__) {
+        if (resourceState) {
+          console.error(
+            'React encountered a hoistable style tag for the same href as a preload: "%s". When using a style tag to inline styles you should not also preload it as a stylsheet.',
+            href,
+          );
+        }
+      }
+
       if (!stylesInPrecedence) {
+        // This is the first time we've encountered this precedence we need
+        // to create a PrecedenceQueue.
         stylesInPrecedence = {
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
           rules: ([]: Array<Chunk | PrecomputedChunk>),
@@ -2335,11 +2426,11 @@ function pushStyle(
         };
         renderState.precedences.set(precedence, stylesInPrecedence);
       } else {
+        // We have seen this precedence before and need to track this href
         stylesInPrecedence.hrefs.push(
           stringToChunk(escapeTextForBrowser(href)),
         );
       }
-      resumableState.resourcesMap[key] = null;
       pushStyleContents(stylesInPrecedence.rules, props);
     }
     if (stylesInPrecedence) {
@@ -2489,8 +2580,16 @@ function pushImg(
     // resumableState.
     const sizes = typeof props.sizes === 'string' ? props.sizes : undefined;
     const key = getImageResourceKey(src, srcSet, sizes);
+    const hasAsType = resumableState.unknownResources.hasOwnProperty('image');
+    let hasKey = false;
+    if (!hasAsType) {
+      resumableState.unknownResources.image = {};
+    } else {
+      hasKey = resumableState.unknownResources.image.hasOwnProperty(key);
+    }
+
     let resource: void | Resource;
-    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+    if (!hasKey) {
       const preloadProps: PreloadProps = {
         rel: 'preload',
         as: 'image',
@@ -2508,8 +2607,7 @@ function pushImg(
         referrerPolicy: props.referrerPolicy,
       };
       resource = [];
-      resumableState.preloadsMap[key] = null;
-      renderState.preloadsMap.set(key, resource);
+      resumableState.unknownResources.image[key] = PRELOAD_SIGIL;
       pushLinkImpl(resource, preloadProps);
     } else {
       resource = renderState.preloadsMap.get(key);
@@ -2858,29 +2956,38 @@ function pushScript(
     const src = props.src;
     const key = getResourceKey(src);
     // We can make this <script> into a ScriptResource
-    const maybePreloadProps = resumableState.resourcesMap.hasOwnProperty(key)
-      ? resumableState.resourcesMap[key]
-      : undefined;
-    if (maybePreloadProps !== null) {
-      // We are going to create a script resource so we do not want any new preload
-      // resources to get created for this key
-      resumableState.preloadsMap[key] = null;
+
+    const resources =
+      props.type === 'module'
+        ? resumableState.moduleScriptResources
+        : resumableState.scriptResources;
+
+    const hasKey = resources.hasOwnProperty(key);
+    const resourceState = hasKey ? resources[key] : undefined;
+    if (resourceState !== EXISTS) {
+      // We are going to create this resource now so it is marked as Exists
+      resources[key] = EXISTS;
 
       let scriptProps = props;
-      if (maybePreloadProps) {
-        const preloadProps: AdoptablePreloadPropsTuple = maybePreloadProps;
-        scriptProps = {...props};
-        adoptPreloadProps(scriptProps, preloadProps);
+      if (resourceState) {
+        // When resourceState is truty it is a Preload state. We cast it for clarity
+        const preloadState: Preloaded | PreloadedWithCredentials =
+          resourceState;
+        if (preloadState.length === 2) {
+          scriptProps = {...props};
+          adoptPreloadCredentials(scriptProps, preloadState);
+        }
 
         const preloadResource = renderState.preloadsMap.get(key);
         if (preloadResource) {
-          // clear out the preload chunks so it does not flush
+          // the preload resource exists was created in this render. Now that we have
+          // a script resource which will emit earlier than a preload would if it
+          // hasn't already flushed we prevent it from flushing by zeroing the length
           preloadResource.length = 0;
         }
       }
 
       const resource: Resource = [];
-      resumableState.resourcesMap[key] = null;
       // Add to the script flushing queue
       renderState.scripts.add(resource);
       // encode the tag as Chunks
@@ -4890,7 +4997,7 @@ type ScriptProps = {
   src: string,
   [string]: mixed,
 };
-type ModuleProps = {
+type ModuleScriptProps = {
   async: true,
   src: string,
   type: 'module',
@@ -4951,16 +5058,6 @@ function getImageResourceKey(
   return href;
 }
 
-function getPreconnectResourceKey(
-  href: string,
-  crossOrigin: ?CrossOriginEnum,
-): string {
-  if (typeof crossOrigin === 'string') {
-    return href + '\n' + crossOrigin;
-  }
-  return href;
-}
-
 function prefetchDNS(href: string) {
   if (!enableFloat) {
     return;
@@ -4979,9 +5076,9 @@ function prefetchDNS(href: string) {
 
   if (typeof href === 'string' && href) {
     const key = getResourceKey(href);
-    if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
+    if (!resumableState.dnsResources.hasOwnProperty(key)) {
       const resource: Resource = [];
-      resumableState.preconnectsMap[key] = null;
+      resumableState.dnsResources[key] = EXISTS;
       pushLinkImpl(resource, ({href, rel: 'dns-prefetch'}: PreconnectProps));
       renderState.preconnects.add(resource);
     }
@@ -5006,10 +5103,16 @@ function preconnect(href: string, crossOrigin: ?CrossOriginEnum) {
   const renderState = getRenderState(request);
 
   if (typeof href === 'string' && href) {
-    const key = getPreconnectResourceKey(href, crossOrigin);
-    if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
+    const resources =
+      crossOrigin === 'use-credentials'
+        ? resumableState.connectResources.credentials
+        : typeof crossOrigin === 'string'
+        ? resumableState.connectResources.anonymous
+        : resumableState.connectResources.default;
+    const key = getResourceKey(href);
+    if (!resources.hasOwnProperty(key)) {
       const resource: Resource = [];
-      resumableState.preconnectsMap[key] = null;
+      resources[key] = EXISTS;
       pushLinkImpl(
         resource,
         ({rel: 'preconnect', href, crossOrigin}: PreconnectProps),
@@ -5048,23 +5151,28 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
       key = getResourceKey(href);
     }
 
-    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
-      resumableState.preloadsMap[key] = null;
-
-      // If we already have a script or stylesheet resource for this key we need to bail out since we
-      // do not want to create this resource. Otherwise we want to capture certain preload props to
-      // apply to a later encountered resource
-      if (as === 'style' || as === 'script') {
-        if (resumableState.resourcesMap.hasOwnProperty(key)) {
-          return;
+    let resources;
+    switch (as) {
+      case 'style': {
+        resources = resumableState.styleResources;
+        break;
+      }
+      case 'script': {
+        resources = resumableState.scriptResources;
+        break;
+      }
+      default: {
+        const hasAsType = resumableState.unknownResources.hasOwnProperty(as);
+        if (hasAsType) {
+          resources = resumableState.unknownResources[as];
         } else {
-          resumableState.resourcesMap[key] = [
-            options.crossOrigin,
-            options.integrity,
-          ];
+          resources = ({}: ResumableState['unknownResources']['asType']);
+          resumableState.unknownResources[as] = resources;
         }
       }
+    }
 
+    if (!resources.hasOwnProperty(key)) {
       const props = Object.assign(
         ({
           rel: 'preload',
@@ -5074,13 +5182,42 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
         options,
       );
       const resource: Resource = [];
-      renderState.preloadsMap.set(key, resource);
       pushLinkImpl(resource, props);
-      if (as === 'font') {
+
+      // We are going to preload this resource. We need to determine if preload credentials are necessary
+      if (as === 'style' || as === 'script') {
+        // Helping flow out here a little bit
+        const styleOrScriptResources:
+          | ResumableState['styleResources']
+          | ResumableState['scriptResources'] = (resources: any);
+        if (
+          typeof options.crossOrigin === 'string' ||
+          typeof options.integrity === 'string'
+        ) {
+          styleOrScriptResources[key] = [
+            options.crossOrigin,
+            options.integrity,
+          ];
+        } else {
+          styleOrScriptResources[key] = PRELOAD_SIGIL;
+        }
+        renderState.bulkPreloads.add(resource);
+        // We only need to track preloads in the renderState for styles, scripts and images
+        renderState.preloadsMap.set(key, resource);
+      } else if (as === 'font') {
+        resources[key] = PRELOAD_SIGIL;
         renderState.fontPreloads.add(resource);
-      } else if (as === 'image' && props.fetchPriority === 'high') {
-        renderState.highImagePreloads.add(resource);
+      } else if (as === 'image') {
+        resources[key] = PRELOAD_SIGIL;
+        if (props.fetchPriority === 'high') {
+          renderState.highImagePreloads.add(resource);
+        } else {
+          renderState.bulkPreloads.add(resource);
+        }
+        // We only need to track preloads in the renderState for styles, scripts and images
+        renderState.preloadsMap.set(key, resource);
       } else {
+        resources[key] = PRELOAD_SIGIL;
         renderState.bulkPreloads.add(resource);
       }
     }
@@ -5108,7 +5245,26 @@ function preloadModule(
   const renderState = getRenderState(request);
   if (href) {
     const key = getResourceKey(href);
-    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+    const as =
+      options && typeof options.as === 'string' ? options.as : 'script';
+
+    let resources;
+    switch (as) {
+      case 'script': {
+        resources = resumableState.moduleScriptResources;
+        break;
+      }
+      default: {
+        const hasAsType = resumableState.unknownResources.hasOwnProperty(as);
+        if (hasAsType) {
+          resources = resumableState.unknownResources[as];
+        } else {
+          resources = ({}: ResumableState['unknownResources']['asType']);
+          resumableState.unknownResources[as] = resources;
+        }
+      }
+    }
+    if (!resources.hasOwnProperty(key)) {
       const props: PreloadModuleProps = Object.assign(
         ({
           rel: 'modulepreload',
@@ -5117,10 +5273,26 @@ function preloadModule(
         options,
       );
       const resource: Resource = [];
-      resumableState.preloadsMap[key] = null;
-      renderState.preloadsMap.set(key, resource);
       pushLinkImpl(resource, props);
       renderState.bulkPreloads.add(resource);
+
+      if (as === 'script') {
+        const moduleScriptResources: ResumableState['moduleScriptResources'] =
+          (resources: any);
+        if (
+          options &&
+          (typeof options.crossOrigin === 'string' ||
+            typeof options.integrity === 'string')
+        ) {
+          moduleScriptResources[key] = [options.crossOrigin, options.integrity];
+        } else {
+          moduleScriptResources[key] = PRELOAD_SIGIL;
+        }
+        // for scripts we need to track the preload so we can associate
+        renderState.preloadsMap.set(key, resource);
+      } else {
+        resources[key] = PRELOAD_SIGIL;
+      }
     }
     flushResources(request);
   }
@@ -5150,10 +5322,16 @@ function preinitStyle(
     const key = getResourceKey(href);
 
     let stylesInPrecedence = renderState.precedences.get(precedence);
-    const maybePreloadProps = resumableState.resourcesMap.hasOwnProperty(key)
-      ? resumableState.resourcesMap[key]
+    const hasKey = resumableState.styleResources.hasOwnProperty(key);
+    const resourceState = hasKey
+      ? resumableState.styleResources[key]
       : undefined;
-    if (maybePreloadProps !== null) {
+    if (resourceState !== EXISTS) {
+      // We are going to create this resource now so it is marked as Exists
+      resumableState.styleResources[key] = EXISTS;
+
+      // If this is the first time we've encountered this precedence we need
+      // to create a PrecedenceQueue
       if (!stylesInPrecedence) {
         stylesInPrecedence = {
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
@@ -5164,10 +5342,6 @@ function preinitStyle(
         renderState.precedences.set(precedence, stylesInPrecedence);
       }
 
-      // We are going to create a stylesheet resource so we do not want any preload resources
-      // to be created after this
-      resumableState.preloadsMap[key] = null;
-
       const resource = {
         state: PENDING,
         props: Object.assign(
@@ -5180,23 +5354,36 @@ function preinitStyle(
         ),
       };
 
-      if (maybePreloadProps) {
-        const preloadProps: AdoptablePreloadPropsTuple = maybePreloadProps;
-        adoptPreloadProps(resource.props, preloadProps);
+      if (resourceState) {
+        // When resourceState is truty it is a Preload state. We cast it for clarity
+        const preloadState: Preloaded | PreloadedWithCredentials =
+          resourceState;
+        if (preloadState.length === 2) {
+          adoptPreloadCredentials(resource.props, preloadState);
+        }
 
         const preloadResource = renderState.preloadsMap.get(key);
         if (preloadResource && preloadResource.length > 0) {
-          // Preload has not flushed yet, we'll clear the chunks to avoid flushing.
+          // The Preload for this resource was created in this render pass and has not flushed yet so
+          // we need to clear it to avoid it flushing.
           preloadResource.length = 0;
         } else {
-          // Either the preload resource from this render already flushed or a preload
-          // from a prerender flushed already. Either way we want to avoid flushing a
-          // preload for the stylesheet
+          // Either the preload resource from this render already flushed in this render pass
+          // or the preload flushed in a prior pass (prerender). In either case we need to mark
+          // this resource as already having been preloaded.
           resource.state = PRELOADED;
         }
+      } else {
+        // We don't need to check whether a preloadResource exists in the renderState
+        // because if it did exist then the resourceState would also exist and we would
+        // have hit the primary if condition above.
       }
-      resumableState.resourcesMap[key] = null;
+
+      // We add the newly created resource to our PrecedenceQueue and if necessary
+      // track the resource with the currently rendering boundary
       stylesInPrecedence.sheets.set(key, resource);
+
+      // Notify the request that there are resources to flush even if no work is currently happening
       flushResources(request);
     }
   }
@@ -5219,13 +5406,14 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
   const renderState = getRenderState(request);
   if (src) {
     const key = getResourceKey(src);
-    const maybePreloadProps = resumableState.resourcesMap.hasOwnProperty(key)
-      ? resumableState.resourcesMap[key]
+
+    const hasKey = resumableState.scriptResources.hasOwnProperty(key);
+    const resourceState = hasKey
+      ? resumableState.scriptResources[key]
       : undefined;
-    if (maybePreloadProps !== null) {
-      // We are going to create a script resource so we do not want any new preload
-      // resources to get created for this key
-      resumableState.preloadsMap[key] = null;
+    if (resourceState !== EXISTS) {
+      // We are going to create this resource now so it is marked as Exists
+      resumableState.scriptResources[key] = EXISTS;
 
       const props: ScriptProps = Object.assign(
         ({
@@ -5234,23 +5422,29 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
         }: ScriptProps),
         options,
       );
-      if (maybePreloadProps) {
-        const preloadProps: AdoptablePreloadPropsTuple = maybePreloadProps;
-        adoptPreloadProps(props, preloadProps);
+      if (resourceState) {
+        // When resourceState is truty it is a Preload state. We cast it for clarity
+        const preloadState: Preloaded | PreloadedWithCredentials =
+          resourceState;
+        if (preloadState.length === 2) {
+          adoptPreloadCredentials(props, preloadState);
+        }
 
         const preloadResource = renderState.preloadsMap.get(key);
         if (preloadResource) {
-          // clear out the preload chunks so it does not flush
+          // the preload resource exists was created in this render. Now that we have
+          // a script resource which will emit earlier than a preload would if it
+          // hasn't already flushed we prevent it from flushing by zeroing the length
           preloadResource.length = 0;
         }
       }
 
       const resource: Resource = [];
-      resumableState.resourcesMap[key] = null;
       // Add to the script flushing queue
       renderState.scripts.add(resource);
       // encode the tag as Chunks
       pushScriptImpl(resource, props);
+      // Notify the request that there are resources to flush even if no work is currently happening
       flushResources(request);
     }
     return;
@@ -5277,19 +5471,45 @@ function preinitModuleScript(
   const renderState = getRenderState(request);
   if (src) {
     const key = getResourceKey(src);
-    if (!resumableState.resourcesMap.hasOwnProperty(key)) {
-      const resource: Resource = [];
-      resumableState.resourcesMap[key] = null;
+    const hasKey = resumableState.moduleScriptResources.hasOwnProperty(key);
+    const resourceState = hasKey
+      ? resumableState.moduleScriptResources[key]
+      : undefined;
+    if (resourceState !== EXISTS) {
+      // We are going to create this resource now so it is marked as Exists
+      resumableState.moduleScriptResources[key] = EXISTS;
+
       const props = Object.assign(
         ({
           src,
           type: 'module',
           async: true,
-        }: ModuleProps),
+        }: ModuleScriptProps),
         options,
       );
+      if (resourceState) {
+        // When resourceState is truty it is a Preload state. We cast it for clarity
+        const preloadState: Preloaded | PreloadedWithCredentials =
+          resourceState;
+        if (preloadState.length === 2) {
+          adoptPreloadCredentials(props, preloadState);
+        }
+
+        const preloadResource = renderState.preloadsMap.get(key);
+        if (preloadResource) {
+          // the preload resource exists was created in this render. Now that we have
+          // a script resource which will emit earlier than a preload would if it
+          // hasn't already flushed we prevent it from flushing by zeroing the length
+          preloadResource.length = 0;
+        }
+      }
+
+      const resource: Resource = [];
+      // Add to the script flushing queue
       renderState.scripts.add(resource);
+      // encode the tag as Chunks
       pushScriptImpl(resource, props);
+      // Notify the request that there are resources to flush even if no work is currently happening
       flushResources(request);
     }
     return;
@@ -5297,83 +5517,46 @@ function preinitModuleScript(
 }
 
 // This function is only safe to call at Request start time since it assumes
-// that each script has not already been preloaded. If we find a need to preload
+// that each module has not already been preloaded. If we find a need to preload
 // scripts at any other point in time we will need to check whether the preload
 // already exists and not assume it
-function preloadBootstrapScript(
+function preloadBootstrapScriptOrModule(
   resumableState: ResumableState,
   renderState: RenderState,
-  src: string,
-  nonce: ?string,
-  integrity: ?string,
-  crossOrigin: ?string,
+  href: string,
+  props: PreloadProps,
 ): void {
-  const key = getResourceKey(src);
-  if (__DEV__) {
-    if (resumableState.preloadsMap.hasOwnProperty(key)) {
-      // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
-      // If a userspace preload can preempt it then this assumption is broken and we need to reconsider this strategy
-      // rather than instruct the user to not preload their bootstrap scripts themselves
-      console.error(
-        'Internal React Error: React expected bootstrap script with src "%s" to not have been preloaded already. please file an issue',
-        src,
-      );
-    }
+  if (!enableFloat) {
+    return;
   }
-  const props: PreloadProps = {
-    rel: 'preload',
-    href: src,
-    as: 'script',
-    fetchPriority: 'low',
-    nonce,
-    integrity,
-    crossOrigin,
-  };
-  const resource: Resource = [];
-  resumableState.preloadsMap[key] = null;
-  renderState.preloadsMap.set(key, resource);
-  renderState.bootstrapScripts.add(resource);
-  pushLinkImpl(resource, props);
-}
+  const key = getResourceKey(href);
 
-// This function is only safe to call at Request start time since it assumes
-// that each module has not already been preloaded. If we find a need to preload
-// scripts at any other point in time we will need to check whether the preload
-// already exists and not assume it
-function preloadBootstrapModule(
-  resumableState: ResumableState,
-  renderState: RenderState,
-  src: string,
-  nonce: ?string,
-  integrity: ?string,
-  crossOrigin: ?string,
-): void {
-  const key = getResourceKey(src);
   if (__DEV__) {
-    if (resumableState.preloadsMap.hasOwnProperty(key)) {
+    if (
+      resumableState.scriptResources.hasOwnProperty(key) ||
+      resumableState.moduleScriptResources.hasOwnProperty(key)
+    ) {
       // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
       // If a userspace preload can preempt it then this assumption is broken and we need to reconsider this strategy
       // rather than instruct the user to not preload their bootstrap scripts themselves
       console.error(
-        'Internal React Error: React expected bootstrap module with src "%s" to not have been preloaded already. please file an issue',
-        src,
+        'Internal React Error: React expected bootstrap script or module with src "%s" to not have been preloaded already. please file an issue',
+        href,
       );
     }
   }
-  const props: PreloadModuleProps = {
-    rel: 'modulepreload',
-    href: src,
-    fetchPriority: 'low',
-    nonce,
-    integrity,
-    crossOrigin,
-  };
+
+  // The href used for bootstrap scripts and bootstrap modules should never be
+  // used to preinit the resource. If a script can be preinited then it shouldn't
+  // be a bootstrap script/module and if it is a bootstrap script/module then it
+  // must not be safe to emit early. To avoid possibly allowing for preinits of
+  // bootstrap scripts/modules we occlude these keys.
+  resumableState.scriptResources[key] = EXISTS;
+  resumableState.moduleScriptResources[key] = EXISTS;
+
   const resource: Resource = [];
-  resumableState.preloadsMap[key] = null;
-  renderState.preloadsMap.set(key, resource);
-  renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource, props);
-  return;
+  renderState.bootstrapScripts.add(resource);
 }
 
 function internalPreinitScript(
@@ -5383,9 +5566,9 @@ function internalPreinitScript(
   chunks: Array<Chunk | PrecomputedChunk>,
 ): void {
   const key = getResourceKey(src);
-  if (!resumableState.resourcesMap.hasOwnProperty(key)) {
+  if (!resumableState.scriptResources.hasOwnProperty(key)) {
     const resource: Resource = chunks;
-    resumableState.resourcesMap[key] = null;
+    resumableState.scriptResources[key] = EXISTS;
     renderState.scripts.add(resource);
   }
   return;
@@ -5413,17 +5596,12 @@ function stylesheetPropsFromRawProps(rawProps: any): StylesheetProps {
   };
 }
 
-type AdoptablePreloadPropsTuple = [
-  /* crossOrigin */ ?string,
-  /* integrity */ ?string,
-];
-
-function adoptPreloadProps(
-  target: StylesheetProps | ScriptProps,
-  tuple: AdoptablePreloadPropsTuple,
+function adoptPreloadCredentials(
+  target: StylesheetProps | ScriptProps | ModuleScriptProps,
+  preloadState: PreloadedWithCredentials,
 ): void {
-  if (target.crossOrigin == null) target.crossOrigin = tuple[0];
-  if (target.integrity == null) target.integrity = tuple[1];
+  if (target.crossOrigin == null) target.crossOrigin = preloadState[0];
+  if (target.integrity == null) target.integrity = preloadState[1];
 }
 
 function hoistPrecedenceDependency(
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index f6fa50d2504b5..ab5f8509260df 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -84,7 +84,7 @@ describe('ReactDOMFizzServerBrowser', () => {
     );
     const result = await readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
@@ -505,7 +505,7 @@ describe('ReactDOMFizzServerBrowser', () => {
     );
     const result = await readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script" fetchPriority="low" nonce="R4nd0m"/><link rel="modulepreload" href="init.mjs" fetchPriority="low" nonce="R4nd0m"/><div>hello world</div><script nonce="${nonce}">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
+      `"<link rel="preload" as="script" fetchPriority="low" nonce="R4nd0m" href="init.js"/><link rel="modulepreload" fetchPriority="low" nonce="R4nd0m" href="init.mjs"/><div>hello world</div><script nonce="${nonce}">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
     );
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 4a20f1be57f77..f7bab722bb386 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -98,7 +98,7 @@ describe('ReactDOMFizzServerNode', () => {
     pipe(writable);
     jest.runAllTimers();
     expect(output.result).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
index 58e34316b0782..9ec0f2c97c9fb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
@@ -145,7 +145,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
     });
     const prelude = await readContent(result.prelude);
     expect(prelude).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
index 01f3bf66bbea0..a049ec4c49222 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
@@ -86,7 +86,7 @@ describe('ReactDOMFizzStaticNode', () => {
     );
     const prelude = await readContent(result.prelude);
     expect(prelude).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index af54a9e27bc65..c12b5e9969fd5 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -24,6 +24,7 @@ export type PreloadModuleOptions = {
   as?: string,
   crossOrigin?: string,
   integrity?: string,
+  nonce?: string,
 };
 export type PreinitOptions = {
   as: string,
@@ -37,6 +38,7 @@ export type PreinitModuleOptions = {
   as?: string,
   crossOrigin?: string,
   integrity?: string,
+  nonce?: string,
 };
 
 export type CrossOriginEnum = '' | 'use-credentials';
@@ -56,6 +58,7 @@ export type PreloadModuleImplOptions = {
   as?: ?string,
   crossOrigin?: ?CrossOriginEnum,
   integrity?: ?string,
+  nonce?: ?string,
 };
 export type PreinitStyleOptions = {
   crossOrigin?: ?string,
@@ -70,7 +73,8 @@ export type PreinitScriptOptions = {
 };
 export type PreinitModuleScriptOptions = {
   crossOrigin?: ?CrossOriginEnum,
-  integrity?: string,
+  integrity?: ?string,
+  nonce?: ?string,
 };
 
 export type HostDispatcher = {
diff --git a/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js
index ddb2efd72e5bb..35b41cbd230d0 100644
--- a/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -59,7 +59,7 @@ describe('ReactDOMServerFB', () => {
     });
     const result = readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<link rel="preload" href="init.js" as="script" fetchPriority="low"/><link rel="modulepreload" href="init.mjs" fetchPriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
     );
   });
 

From de72972d88adac9d5ce4b66222bde47211299207 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Thu, 21 Sep 2023 19:34:28 -0700
Subject: [PATCH 04/10] renames type Precedence to PrecedenceQueue to better
 describe what it is. A precedence is now always the string value and the
 precedence queue is the thing that holds info about style tag rules and
 stylesheets that need to be flushed for that precedence

---
 .../src/server/ReactFizzConfigDOM.js          | 89 +++++++++----------
 .../src/server/ReactFizzConfigDOMLegacy.js    |  4 +-
 2 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 94332dedb3b1c..99a8feb2736f5 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -152,7 +152,7 @@ export type RenderState = {
   fontPreloads: Set<Resource>,
   highImagePreloads: Set<Resource>,
   // usedImagePreloads: Set<PreloadResource>,
-  precedences: Map<string, Precedence>,
+  precedences: Map<string, PrecedenceQueue>,
   bootstrapScripts: Set<Resource>,
   scripts: Set<Resource>,
   bulkPreloads: Set<Resource>,
@@ -2196,7 +2196,7 @@ function pushLink(
         return pushLinkImpl(target, props);
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
-        let stylesInPrecedence = renderState.precedences.get(precedence);
+        let precedenceQueue = renderState.precedences.get(precedence);
         const hasKey = resumableState.styleResources.hasOwnProperty(key);
         const resourceState = hasKey
           ? resumableState.styleResources[key]
@@ -2207,14 +2207,14 @@ function pushLink(
 
           // If this is the first time we've encountered this precedence we need
           // to create a PrecedenceQueue
-          if (!stylesInPrecedence) {
-            stylesInPrecedence = {
+          if (!precedenceQueue) {
+            precedenceQueue = {
               precedence: stringToChunk(escapeTextForBrowser(precedence)),
               rules: ([]: Array<Chunk | PrecomputedChunk>),
               hrefs: ([]: Array<Chunk | PrecomputedChunk>),
               sheets: (new Map(): Map<string, StylesheetResource>),
             };
-            renderState.precedences.set(precedence, stylesInPrecedence);
+            renderState.precedences.set(precedence, precedenceQueue);
           }
 
           const resource: StylesheetResource = {
@@ -2249,7 +2249,7 @@ function pushLink(
 
           // We add the newly created resource to our PrecedenceQueue and if necessary
           // track the resource with the currently rendering boundary
-          stylesInPrecedence.sheets.set(key, resource);
+          precedenceQueue.sheets.set(key, resource);
           if (renderState.boundaryResources) {
             renderState.boundaryResources.sheets.add(resource);
           }
@@ -2259,8 +2259,8 @@ function pushLink(
           // it. However, it's possible when you resume that the style has already been emitted
           // and then it wouldn't be recreated in the RenderState and there's no need to track
           // it again since we should've hoisted it to the shell already.
-          if (stylesInPrecedence) {
-            const resource = stylesInPrecedence.sheets.get(key);
+          if (precedenceQueue) {
+            const resource = precedenceQueue.sheets.get(key);
             if (resource) {
               if (renderState.boundaryResources) {
                 renderState.boundaryResources.sheets.add(resource);
@@ -2397,7 +2397,7 @@ function pushStyle(
     }
 
     const key = getResourceKey(href);
-    let stylesInPrecedence = renderState.precedences.get(precedence);
+    let precedenceQueue = renderState.precedences.get(precedence);
     const hasKey = resumableState.styleResources.hasOwnProperty(key);
     const resourceState = hasKey
       ? resumableState.styleResources[key]
@@ -2415,32 +2415,30 @@ function pushStyle(
         }
       }
 
-      if (!stylesInPrecedence) {
+      if (!precedenceQueue) {
         // This is the first time we've encountered this precedence we need
         // to create a PrecedenceQueue.
-        stylesInPrecedence = {
+        precedenceQueue = {
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
           rules: ([]: Array<Chunk | PrecomputedChunk>),
           hrefs: [stringToChunk(escapeTextForBrowser(href))],
           sheets: (new Map(): Map<string, StylesheetResource>),
         };
-        renderState.precedences.set(precedence, stylesInPrecedence);
+        renderState.precedences.set(precedence, precedenceQueue);
       } else {
         // We have seen this precedence before and need to track this href
-        stylesInPrecedence.hrefs.push(
-          stringToChunk(escapeTextForBrowser(href)),
-        );
+        precedenceQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
       }
-      pushStyleContents(stylesInPrecedence.rules, props);
+      pushStyleContents(precedenceQueue.rules, props);
     }
-    if (stylesInPrecedence) {
+    if (precedenceQueue) {
       // We need to track whether this boundary should wait on this resource or not.
       // Typically this resource should always exist since we either had it or just created
       // it. However, it's possible when you resume that the style has already been emitted
       // and then it wouldn't be recreated in the RenderState and there's no need to track
       // it again since we should've hoisted it to the shell already.
       if (renderState.boundaryResources) {
-        renderState.boundaryResources.precedences.add(stylesInPrecedence);
+        renderState.boundaryResources.precedences.add(precedenceQueue);
       }
     }
 
@@ -4196,10 +4194,10 @@ let destinationHasCapacity = true;
 
 function flushStyleTagsLateForBoundary(
   this: Destination,
-  stylesInPrecedence: Precedence,
+  precedenceQueue: PrecedenceQueue,
 ) {
-  const rules = stylesInPrecedence.rules;
-  const hrefs = stylesInPrecedence.hrefs;
+  const rules = precedenceQueue.rules;
+  const hrefs = precedenceQueue.hrefs;
   if (__DEV__) {
     if (rules.length > 0 && hrefs.length === 0) {
       console.error(
@@ -4210,7 +4208,7 @@ function flushStyleTagsLateForBoundary(
   let i = 0;
   if (hrefs.length) {
     writeChunk(this, lateStyleTagResourceOpen1);
-    writeChunk(this, stylesInPrecedence.precedence);
+    writeChunk(this, precedenceQueue.precedence);
     writeChunk(this, lateStyleTagResourceOpen2);
     for (; i < hrefs.length - 1; i++) {
       writeChunk(this, hrefs[i]);
@@ -4310,21 +4308,21 @@ const styleTagResourceClose = stringToPrecomputedChunk('</style>');
 
 function flushPrecedenceInPreamble(
   this: Destination,
-  stylesInPrecedence: Precedence,
+  precedenceQueue: PrecedenceQueue,
   precedence: string,
 ) {
-  const hasStylesheets = stylesInPrecedence.sheets.size > 0;
-  stylesInPrecedence.sheets.forEach(flushStyleInPreamble, this);
-  stylesInPrecedence.sheets.clear();
+  const hasStylesheets = precedenceQueue.sheets.size > 0;
+  precedenceQueue.sheets.forEach(flushStyleInPreamble, this);
+  precedenceQueue.sheets.clear();
 
-  const rules = stylesInPrecedence.rules;
-  const hrefs = stylesInPrecedence.hrefs;
+  const rules = precedenceQueue.rules;
+  const hrefs = precedenceQueue.hrefs;
   // If we don't emit any stylesheets at this precedence we still need to maintain the precedence
   // order so even if there are no rules for style tags at this precedence we emit an empty style
   // tag with the data-precedence attribute
   if (!hasStylesheets || hrefs.length) {
     writeChunk(this, styleTagResourceOpen1);
-    writeChunk(this, stylesInPrecedence.precedence);
+    writeChunk(this, precedenceQueue.precedence);
     let i = 0;
     if (hrefs.length) {
       writeChunk(this, styleTagResourceOpen2);
@@ -4365,11 +4363,10 @@ function preloadLateStyle(this: Destination, stylesheet: StylesheetResource) {
 
 function preloadLateStyles(
   this: Destination,
-  stylesInPrecedence: Precedence,
-  precedence: string,
+  precedenceQueue: PrecedenceQueue,
 ) {
-  stylesInPrecedence.sheets.forEach(preloadLateStyle, this);
-  stylesInPrecedence.sheets.clear();
+  precedenceQueue.sheets.forEach(preloadLateStyle, this);
+  precedenceQueue.sheets.clear();
 }
 
 // We don't bother reporting backpressure at the moment because we expect to
@@ -5018,11 +5015,11 @@ type StylesheetResource = {
 };
 
 export type BoundaryResources = {
-  precedences: Set<Precedence>,
+  precedences: Set<PrecedenceQueue>,
   sheets: Set<StylesheetResource>,
 };
 
-export type Precedence = {
+export type PrecedenceQueue = {
   precedence: Chunk | PrecomputedChunk,
   rules: Array<Chunk | PrecomputedChunk>,
   hrefs: Array<Chunk | PrecomputedChunk>,
@@ -5321,7 +5318,7 @@ function preinitStyle(
     precedence = precedence || 'default';
     const key = getResourceKey(href);
 
-    let stylesInPrecedence = renderState.precedences.get(precedence);
+    let precedenceQueue = renderState.precedences.get(precedence);
     const hasKey = resumableState.styleResources.hasOwnProperty(key);
     const resourceState = hasKey
       ? resumableState.styleResources[key]
@@ -5332,14 +5329,14 @@ function preinitStyle(
 
       // If this is the first time we've encountered this precedence we need
       // to create a PrecedenceQueue
-      if (!stylesInPrecedence) {
-        stylesInPrecedence = {
+      if (!precedenceQueue) {
+        precedenceQueue = {
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
           rules: ([]: Array<Chunk | PrecomputedChunk>),
           hrefs: ([]: Array<Chunk | PrecomputedChunk>),
           sheets: (new Map(): Map<string, StylesheetResource>),
         };
-        renderState.precedences.set(precedence, stylesInPrecedence);
+        renderState.precedences.set(precedence, precedenceQueue);
       }
 
       const resource = {
@@ -5381,7 +5378,7 @@ function preinitStyle(
 
       // We add the newly created resource to our PrecedenceQueue and if necessary
       // track the resource with the currently rendering boundary
-      stylesInPrecedence.sheets.set(key, resource);
+      precedenceQueue.sheets.set(key, resource);
 
       // Notify the request that there are resources to flush even if no work is currently happening
       flushResources(request);
@@ -5604,18 +5601,18 @@ function adoptPreloadCredentials(
   if (target.integrity == null) target.integrity = preloadState[1];
 }
 
-function hoistPrecedenceDependency(
+function hoistPrecedenceQueueDependency(
   this: BoundaryResources,
-  stylesInPrecedence: Precedence,
+  precedenceQueue: PrecedenceQueue,
 ) {
-  this.precedences.add(stylesInPrecedence);
+  this.precedences.add(precedenceQueue);
 }
 
 function hoistStylesheetDependency(
   this: BoundaryResources,
-  resource: StylesheetResource,
+  stylesheet: StylesheetResource,
 ) {
-  this.sheets.add(resource);
+  this.sheets.add(stylesheet);
 }
 
 export function hoistResources(
@@ -5625,7 +5622,7 @@ export function hoistResources(
   const currentBoundaryResources = renderState.boundaryResources;
   if (currentBoundaryResources) {
     source.precedences.forEach(
-      hoistPrecedenceDependency,
+      hoistPrecedenceQueueDependency,
       currentBoundaryResources,
     );
     source.sheets.forEach(hoistStylesheetDependency, currentBoundaryResources);
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index 471cf21cf71b0..5c397bd581de3 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -10,7 +10,7 @@
 import type {
   ResumableState,
   BoundaryResources,
-  Precedence,
+  PrecedenceQueue,
 } from './ReactFizzConfigDOM';
 
 import {
@@ -54,7 +54,7 @@ export type RenderState = {
   fontPreloads: Set<any>,
   highImagePreloads: Set<any>,
   // usedImagePreloads: Set<any>,
-  precedences: Map<string, Precedence>,
+  precedences: Map<string, PrecedenceQueue>,
   bootstrapScripts: Set<any>,
   scripts: Set<any>,
   bulkPreloads: Set<any>,

From b88f4178b426f2786d8bbd937a1fac25c47800c5 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Fri, 22 Sep 2023 09:37:38 -0700
Subject: [PATCH 05/10] Preloads need to be stashed during a render because
 they may need to be put in a different flushing queue or may need to be
 prevented from flushing. This only applies to a few resource types however,
 stylesheet, images, scripts, and moduleScripts. Another problem is that our
 resources are keyed using a compound key of href and the resource type but
 our preloadsMap only used href. This change also updates the preloads
 tracking object to have a similar compound key structure so there is not
 chance of collisions based on same href for different resources types
 (however rare this is in practice)

---
 .../src/server/ReactFizzConfigDOM.js          | 235 ++++++++++--------
 .../src/server/ReactFizzConfigDOMLegacy.js    |  24 +-
 2 files changed, 147 insertions(+), 112 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 99a8feb2736f5..409f317dc61ff 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -158,7 +158,12 @@ export type RenderState = {
   bulkPreloads: Set<Resource>,
 
   // Temporarily keeps track of key to preload resources before shell flushes.
-  preloadsMap: Map<string, Resource>,
+  preloads: {
+    images: Map<string, Resource>,
+    stylesheets: Map<string, Resource>,
+    scripts: Map<string, Resource>,
+    moduleScripts: Map<string, Resource>,
+  },
 
   // Module-global-like reference for current boundary resources
   boundaryResources: ?BoundaryResources,
@@ -392,7 +397,12 @@ export function createRenderState(
     scripts: new Set(),
     bulkPreloads: new Set(),
 
-    preloadsMap: new Map(),
+    preloads: {
+      images: new Map(),
+      stylesheets: new Map(),
+      scripts: new Map(),
+      moduleScripts: new Map(),
+    },
 
     nonce,
     // like a module global for currently rendering boundary
@@ -2230,7 +2240,7 @@ function pushLink(
               adoptPreloadCredentials(resource.props, preloadState);
             }
 
-            const preloadResource = renderState.preloadsMap.get(key);
+            const preloadResource = renderState.preloads.stylesheets.get(key);
             if (preloadResource && preloadResource.length > 0) {
               // The Preload for this resource was created in this render pass and has not flushed yet so
               // we need to clear it to avoid it flushing.
@@ -2578,16 +2588,13 @@ function pushImg(
     // resumableState.
     const sizes = typeof props.sizes === 'string' ? props.sizes : undefined;
     const key = getImageResourceKey(src, srcSet, sizes);
-    const hasAsType = resumableState.unknownResources.hasOwnProperty('image');
-    let hasKey = false;
-    if (!hasAsType) {
-      resumableState.unknownResources.image = {};
-    } else {
-      hasKey = resumableState.unknownResources.image.hasOwnProperty(key);
-    }
+    const resources: ResumableState['unknownResources']['asType'] =
+      resumableState.unknownResources.hasOwnProperty('image')
+        ? resumableState.unknownResources.image
+        : (resumableState.unknownResources.image = {});
 
     let resource: void | Resource;
-    if (!hasKey) {
+    if (!resources.hasOwnProperty(key)) {
       const preloadProps: PreloadProps = {
         rel: 'preload',
         as: 'image',
@@ -2605,10 +2612,10 @@ function pushImg(
         referrerPolicy: props.referrerPolicy,
       };
       resource = [];
-      resumableState.unknownResources.image[key] = PRELOAD_SIGIL;
+      resources[key] = PRELOAD_SIGIL;
       pushLinkImpl(resource, preloadProps);
     } else {
-      resource = renderState.preloadsMap.get(key);
+      resource = renderState.preloads.images.get(key);
     }
     if (resource) {
       if (
@@ -2955,10 +2962,14 @@ function pushScript(
     const key = getResourceKey(src);
     // We can make this <script> into a ScriptResource
 
-    const resources =
-      props.type === 'module'
-        ? resumableState.moduleScriptResources
-        : resumableState.scriptResources;
+    let resources, preloads;
+    if (props.type === 'module') {
+      resources = resumableState.moduleScriptResources;
+      preloads = renderState.preloads.moduleScripts;
+    } else {
+      resources = resumableState.scriptResources;
+      preloads = renderState.preloads.scripts;
+    }
 
     const hasKey = resources.hasOwnProperty(key);
     const resourceState = hasKey ? resources[key] : undefined;
@@ -2976,7 +2987,7 @@ function pushScript(
           adoptPreloadCredentials(scriptProps, preloadState);
         }
 
-        const preloadResource = renderState.preloadsMap.get(key);
+        const preloadResource = preloads.get(key);
         if (preloadResource) {
           // the preload resource exists was created in this render. Now that we have
           // a script resource which will emit earlier than a preload would if it
@@ -5001,7 +5012,7 @@ type ModuleScriptProps = {
   [string]: mixed,
 };
 
-type Resource = Array<Chunk | PrecomputedChunk>;
+export type Resource = Array<Chunk | PrecomputedChunk>;
 
 type StylesheetProps = {
   rel: 'stylesheet',
@@ -5148,76 +5159,92 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
       key = getResourceKey(href);
     }
 
-    let resources;
     switch (as) {
       case 'style': {
-        resources = resumableState.styleResources;
+        if (resumableState.styleResources.hasOwnProperty(key)) {
+          // we can return if we already have this resource
+          return;
+        }
+        const resource = ([]: Resource);
+        pushLinkImpl(
+          resource,
+          Object.assign(({rel: 'preload', href, as}: PreloadAsProps), options),
+        );
+        resumableState.styleResources[key] =
+          typeof options.crossOrigin === 'string' ||
+          typeof options.integrity === 'string'
+            ? [options.crossOrigin, options.integrity]
+            : PRELOAD_SIGIL;
+        renderState.preloads.stylesheets.set(key, resource);
+        renderState.bulkPreloads.add(resource);
         break;
       }
       case 'script': {
-        resources = resumableState.scriptResources;
+        if (resumableState.scriptResources.hasOwnProperty(key)) {
+          // we can return if we already have this resource
+          return;
+        }
+        const resource = ([]: Resource);
+        renderState.preloads.scripts.set(key, resource);
+        renderState.bulkPreloads.add(resource);
+        pushLinkImpl(
+          resource,
+          Object.assign(({rel: 'preload', href, as}: PreloadAsProps), options),
+        );
+        resumableState.scriptResources[key] =
+          typeof options.crossOrigin === 'string' ||
+          typeof options.integrity === 'string'
+            ? [options.crossOrigin, options.integrity]
+            : PRELOAD_SIGIL;
         break;
       }
       default: {
         const hasAsType = resumableState.unknownResources.hasOwnProperty(as);
+        let resources;
         if (hasAsType) {
           resources = resumableState.unknownResources[as];
+          if (resources.hasOwnProperty(key)) {
+            // we can return if we already have this resource
+            return;
+          }
         } else {
           resources = ({}: ResumableState['unknownResources']['asType']);
           resumableState.unknownResources[as] = resources;
         }
-      }
-    }
-
-    if (!resources.hasOwnProperty(key)) {
-      const props = Object.assign(
-        ({
-          rel: 'preload',
-          href: as === 'image' && options.imageSrcSet ? undefined : href,
-          as,
-        }: PreloadProps),
-        options,
-      );
-      const resource: Resource = [];
-      pushLinkImpl(resource, props);
-
-      // We are going to preload this resource. We need to determine if preload credentials are necessary
-      if (as === 'style' || as === 'script') {
-        // Helping flow out here a little bit
-        const styleOrScriptResources:
-          | ResumableState['styleResources']
-          | ResumableState['scriptResources'] = (resources: any);
-        if (
-          typeof options.crossOrigin === 'string' ||
-          typeof options.integrity === 'string'
-        ) {
-          styleOrScriptResources[key] = [
-            options.crossOrigin,
-            options.integrity,
-          ];
-        } else {
-          styleOrScriptResources[key] = PRELOAD_SIGIL;
-        }
-        renderState.bulkPreloads.add(resource);
-        // We only need to track preloads in the renderState for styles, scripts and images
-        renderState.preloadsMap.set(key, resource);
-      } else if (as === 'font') {
-        resources[key] = PRELOAD_SIGIL;
-        renderState.fontPreloads.add(resource);
-      } else if (as === 'image') {
-        resources[key] = PRELOAD_SIGIL;
-        if (props.fetchPriority === 'high') {
-          renderState.highImagePreloads.add(resource);
-        } else {
-          renderState.bulkPreloads.add(resource);
+        const resource = ([]: Resource);
+        const props = Object.assign(
+          ({
+            rel: 'preload',
+            href,
+            as,
+          }: PreloadAsProps),
+          options,
+        );
+        switch (as) {
+          case 'font':
+            renderState.fontPreloads.add(resource);
+            break;
+          case 'image':
+            renderState.preloads.images.set(key, resource);
+            if (options.imageSrcSet) {
+              // There is a bug in Safari where imageSrcSet is not respected on preload links
+              // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+              // This harms older browers that do not support imageSrcSet by making their preloads not work
+              // but this population is shrinking fast and is already small so we accept this tradeoff.
+              props.href = null;
+            }
+            if (options.fetchPriority === 'high') {
+              renderState.highImagePreloads.add(resource);
+            }
+          // intentional fall through
+          default:
+            renderState.bulkPreloads.add(resource);
         }
-        // We only need to track preloads in the renderState for styles, scripts and images
-        renderState.preloadsMap.set(key, resource);
-      } else {
+        pushLinkImpl(resource, props);
         resources[key] = PRELOAD_SIGIL;
-        renderState.bulkPreloads.add(resource);
       }
     }
+    // If we got this far we created a new resource
     flushResources(request);
   }
 }
@@ -5245,52 +5272,54 @@ function preloadModule(
     const as =
       options && typeof options.as === 'string' ? options.as : 'script';
 
-    let resources;
+    let resource;
     switch (as) {
       case 'script': {
-        resources = resumableState.moduleScriptResources;
+        if (resumableState.moduleScriptResources.hasOwnProperty(key)) {
+          // we can return if we already have this resource
+          return;
+        }
+        resource = ([]: Resource);
+        resumableState.moduleScriptResources[key] =
+          options &&
+          (typeof options.crossOrigin === 'string' ||
+            typeof options.integrity === 'string')
+            ? [options.crossOrigin, options.integrity]
+            : PRELOAD_SIGIL;
+        renderState.preloads.moduleScripts.set(key, resource);
         break;
       }
       default: {
-        const hasAsType = resumableState.unknownResources.hasOwnProperty(as);
+        const hasAsType =
+          resumableState.moduleUnknownResources.hasOwnProperty(as);
+        let resources;
         if (hasAsType) {
           resources = resumableState.unknownResources[as];
+          if (resources.hasOwnProperty(key)) {
+            // we can return if we already have this resource
+            return;
+          }
         } else {
-          resources = ({}: ResumableState['unknownResources']['asType']);
-          resumableState.unknownResources[as] = resources;
+          resources = ({}: ResumableState['moduleUnknownResources']['asType']);
+          resumableState.moduleUnknownResources[as] = resources;
         }
+        resource = ([]: Resource);
+        resources[key] = PRELOAD_SIGIL;
       }
     }
-    if (!resources.hasOwnProperty(key)) {
-      const props: PreloadModuleProps = Object.assign(
+
+    pushLinkImpl(
+      resource,
+      Object.assign(
         ({
           rel: 'modulepreload',
           href,
         }: PreloadModuleProps),
         options,
-      );
-      const resource: Resource = [];
-      pushLinkImpl(resource, props);
-      renderState.bulkPreloads.add(resource);
-
-      if (as === 'script') {
-        const moduleScriptResources: ResumableState['moduleScriptResources'] =
-          (resources: any);
-        if (
-          options &&
-          (typeof options.crossOrigin === 'string' ||
-            typeof options.integrity === 'string')
-        ) {
-          moduleScriptResources[key] = [options.crossOrigin, options.integrity];
-        } else {
-          moduleScriptResources[key] = PRELOAD_SIGIL;
-        }
-        // for scripts we need to track the preload so we can associate
-        renderState.preloadsMap.set(key, resource);
-      } else {
-        resources[key] = PRELOAD_SIGIL;
-      }
-    }
+      ),
+    );
+    renderState.bulkPreloads.add(resource);
+    // If we got this far we created a new resource
     flushResources(request);
   }
 }
@@ -5359,7 +5388,7 @@ function preinitStyle(
           adoptPreloadCredentials(resource.props, preloadState);
         }
 
-        const preloadResource = renderState.preloadsMap.get(key);
+        const preloadResource = renderState.preloads.stylesheets.get(key);
         if (preloadResource && preloadResource.length > 0) {
           // The Preload for this resource was created in this render pass and has not flushed yet so
           // we need to clear it to avoid it flushing.
@@ -5427,7 +5456,7 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
           adoptPreloadCredentials(props, preloadState);
         }
 
-        const preloadResource = renderState.preloadsMap.get(key);
+        const preloadResource = renderState.preloads.scripts.get(key);
         if (preloadResource) {
           // the preload resource exists was created in this render. Now that we have
           // a script resource which will emit earlier than a preload would if it
@@ -5492,7 +5521,7 @@ function preinitModuleScript(
           adoptPreloadCredentials(props, preloadState);
         }
 
-        const preloadResource = renderState.preloadsMap.get(key);
+        const preloadResource = renderState.preloads.moduleScripts.get(key);
         if (preloadResource) {
           // the preload resource exists was created in this render. Now that we have
           // a script resource which will emit earlier than a preload would if it
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index 5c397bd581de3..81a749adbed09 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -11,6 +11,7 @@ import type {
   ResumableState,
   BoundaryResources,
   PrecedenceQueue,
+  Resource,
 } from './ReactFizzConfigDOM';
 
 import {
@@ -50,15 +51,20 @@ export type RenderState = {
   importMapChunks: Array<Chunk | PrecomputedChunk>,
   preloadChunks: Array<Chunk | PrecomputedChunk>,
   hoistableChunks: Array<Chunk | PrecomputedChunk>,
-  preconnects: Set<any>,
-  fontPreloads: Set<any>,
-  highImagePreloads: Set<any>,
-  // usedImagePreloads: Set<any>,
+  preconnects: Set<Resource>,
+  fontPreloads: Set<Resource>,
+  highImagePreloads: Set<Resource>,
+  // usedImagePreloads: Set<Resource>,
   precedences: Map<string, PrecedenceQueue>,
-  bootstrapScripts: Set<any>,
-  scripts: Set<any>,
-  bulkPreloads: Set<any>,
-  preloadsMap: Map<string, any>,
+  bootstrapScripts: Set<Resource>,
+  scripts: Set<Resource>,
+  bulkPreloads: Set<Resource>,
+  preloads: {
+    images: Map<string, Resource>,
+    stylesheets: Map<string, Resource>,
+    scripts: Map<string, Resource>,
+    moduleScripts: Map<string, Resource>,
+  },
   boundaryResources: ?BoundaryResources,
   stylesToHoist: boolean,
   // This is an extra field for the legacy renderer
@@ -101,7 +107,7 @@ export function createRenderState(
     bootstrapScripts: renderState.bootstrapScripts,
     scripts: renderState.scripts,
     bulkPreloads: renderState.bulkPreloads,
-    preloadsMap: renderState.preloadsMap,
+    preloads: renderState.preloads,
     boundaryResources: renderState.boundaryResources,
     stylesToHoist: renderState.stylesToHoist,
 

From 027587104d2ce1ecf17b1afef78ec0b2af83f36a Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Fri, 22 Sep 2023 15:01:31 -0700
Subject: [PATCH 06/10] Adds a test case to ensure that regardless of what
 order prelaods and resources are created there is at most one preload per
 resource. This affects stylesheets, scripts, and moduleScripts only

---
 .../src/__tests__/ReactDOMFloat-test.js       | 458 ++++++++++++++++++
 1 file changed, 458 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index bff5b6b262e87..ce5db42ae6a35 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -4119,6 +4119,464 @@ body {
     );
   });
 
+  it('should preload only once even if you discover a stylesheet, script, or moduleScript late', async () => {
+    function App() {
+      // We start with preinitializing some resources first
+      ReactDOM.preinit('shell preinit/shell', {as: 'style'});
+      ReactDOM.preinit('shell preinit/shell', {as: 'script'});
+      ReactDOM.preinitModule('shell preinit/shell', {as: 'script'});
+
+      // We initiate all the shell preloads
+      ReactDOM.preload('shell preinit/shell', {as: 'style'});
+      ReactDOM.preload('shell preinit/shell', {as: 'script'});
+      ReactDOM.preloadModule('shell preinit/shell', {as: 'script'});
+
+      ReactDOM.preload('shell/shell preinit', {as: 'style'});
+      ReactDOM.preload('shell/shell preinit', {as: 'script'});
+      ReactDOM.preloadModule('shell/shell preinit', {as: 'script'});
+
+      ReactDOM.preload('shell/shell render', {as: 'style'});
+      ReactDOM.preload('shell/shell render', {as: 'script'});
+      ReactDOM.preloadModule('shell/shell render');
+
+      ReactDOM.preload('shell/late preinit', {as: 'style'});
+      ReactDOM.preload('shell/late preinit', {as: 'script'});
+      ReactDOM.preloadModule('shell/late preinit');
+
+      ReactDOM.preload('shell/late render', {as: 'style'});
+      ReactDOM.preload('shell/late render', {as: 'script'});
+      ReactDOM.preloadModule('shell/late render');
+
+      // we preinit later ones that should be created by
+      ReactDOM.preinit('shell/shell preinit', {as: 'style'});
+      ReactDOM.preinit('shell/shell preinit', {as: 'script'});
+      ReactDOM.preinitModule('shell/shell preinit');
+
+      ReactDOM.preinit('late/shell preinit', {as: 'style'});
+      ReactDOM.preinit('late/shell preinit', {as: 'script'});
+      ReactDOM.preinitModule('late/shell preinit');
+      return (
+        <html>
+          <body>
+            <link
+              rel="stylesheet"
+              precedence="default"
+              href="shell/shell render"
+            />
+            <script async={true} src="shell/shell render" />
+            <script type="module" async={true} src="shell/shell render" />
+            <link
+              rel="stylesheet"
+              precedence="default"
+              href="late/shell render"
+            />
+            <script async={true} src="late/shell render" />
+            <script type="module" async={true} src="late/shell render" />
+            <Suspense fallback="late...">
+              <BlockedOn value="late">
+                <Late />
+              </BlockedOn>
+            </Suspense>
+            <Suspense fallback="later...">
+              <BlockedOn value="later">
+                <Later />
+              </BlockedOn>
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+
+    function Late() {
+      ReactDOM.preload('late/later preinit', {as: 'style'});
+      ReactDOM.preload('late/later preinit', {as: 'script'});
+      ReactDOM.preloadModule('late/later preinit');
+
+      ReactDOM.preload('late/later render', {as: 'style'});
+      ReactDOM.preload('late/later render', {as: 'script'});
+      ReactDOM.preloadModule('late/later render');
+
+      ReactDOM.preload('late/shell preinit', {as: 'style'});
+      ReactDOM.preload('late/shell preinit', {as: 'script'});
+      ReactDOM.preloadModule('late/shell preinit');
+
+      ReactDOM.preload('late/shell render', {as: 'style'});
+      ReactDOM.preload('late/shell render', {as: 'script'});
+      ReactDOM.preloadModule('late/shell render');
+
+      // late preinits don't actually flush so we won't see this in the DOM as a stylesehet but we should see
+      // the preload for this resource
+      ReactDOM.preinit('shell/late preinit', {as: 'style'});
+      ReactDOM.preinit('shell/late preinit', {as: 'script'});
+      ReactDOM.preinitModule('shell/late preinit');
+      return (
+        <>
+          Late
+          <link
+            rel="stylesheet"
+            precedence="default"
+            href="shell/late render"
+          />
+          <script async={true} src="shell/late render" />
+          <script type="module" async={true} src="shell/late render" />
+        </>
+      );
+    }
+
+    function Later() {
+      // late preinits don't actually flush so we won't see this in the DOM as a stylesehet but we should see
+      // the preload for this resource
+      ReactDOM.preinit('late/later preinit', {as: 'style'});
+      ReactDOM.preinit('late/later preinit', {as: 'script'});
+      ReactDOM.preinitModule('late/later preinit');
+      return (
+        <>
+          Later
+          <link
+            rel="stylesheet"
+            precedence="default"
+            href="late/later render"
+          />
+          <script async={true} src="late/later render" />
+          <script type="module" async={true} src="late/later render" />
+        </>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell preinit/shell"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell render"
+          />
+          <script async="" src="shell preinit/shell" />
+          <script async="" src="shell preinit/shell" type="module" />
+          <script async="" src="shell/shell preinit" />
+          <script async="" src="shell/shell preinit" type="module" />
+          <script async="" src="late/shell preinit" />
+          <script async="" src="late/shell preinit" type="module" />
+          <script async="" src="shell/shell render" />
+          <script async="" src="shell/shell render" type="module" />
+          <script async="" src="late/shell render" />
+          <script async="" src="late/shell render" type="module" />
+          <link rel="preload" as="style" href="shell/late preinit" />
+          <link rel="preload" as="script" href="shell/late preinit" />
+          <link rel="modulepreload" href="shell/late preinit" />
+          <link rel="preload" as="style" href="shell/late render" />
+          <link rel="preload" as="script" href="shell/late render" />
+          <link rel="modulepreload" href="shell/late render" />
+        </head>
+        <body>
+          {'late...'}
+          {'later...'}
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('late');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell preinit/shell"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell render"
+          />
+          {/* FROM HERE */}
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/late render"
+          />
+          {/** TO HERE:
+           * This was hoisted by boundary complete instruction. The preload was already emitted in the
+           * shell but we see it below because this was inserted clientside by precedence.
+           * We don't observe the "shell/late preinit" because these do not flush unless they are flushing
+           * with the shell
+           * */}
+          <script async="" src="shell preinit/shell" />
+          <script async="" src="shell preinit/shell" type="module" />
+          <script async="" src="shell/shell preinit" />
+          <script async="" src="shell/shell preinit" type="module" />
+          <script async="" src="late/shell preinit" />
+          <script async="" src="late/shell preinit" type="module" />
+          <script async="" src="shell/shell render" />
+          <script async="" src="shell/shell render" type="module" />
+          <script async="" src="late/shell render" />
+          <script async="" src="late/shell render" type="module" />
+          <link rel="preload" as="style" href="shell/late preinit" />
+          <link rel="preload" as="script" href="shell/late preinit" />
+          <link rel="modulepreload" href="shell/late preinit" />
+          <link rel="preload" as="style" href="shell/late render" />
+          <link rel="preload" as="script" href="shell/late render" />
+          <link rel="modulepreload" href="shell/late render" />
+        </head>
+        <body>
+          {'late...'}
+          {'later...'}
+          {/* FROM HERE */}
+          <script async="" src="shell/late preinit" />
+          <script async="" src="shell/late preinit" type="module" />
+          <script async="" src="shell/late render" />
+          <script async="" src="shell/late render" type="module" />
+          <link rel="preload" as="style" href="late/later preinit" />
+          <link rel="preload" as="script" href="late/later preinit" />
+          <link rel="modulepreload" href="late/later preinit" />
+          <link rel="preload" as="style" href="late/later render" />
+          <link rel="preload" as="script" href="late/later render" />
+          <link rel="modulepreload" href="late/later render" />
+          {/** TO HERE:
+           * These resources streamed into the body during the boundary flush. Scripts go first then
+           * preloads according to our streaming queue priorities. Note also that late/shell resources
+           * where the resource already emitted in the shell and the preload is invoked later do not
+           * end up with a preload in the document at all.
+           * */}
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('later');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell preinit/shell"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/late render"
+          />
+          {/* FROM HERE */}
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/later render"
+          />
+          {/** TO HERE:
+           * This was hoisted by boundary complete instruction. The preload was already emitted in the
+           * shell but we see it below because this was inserted clientside by precedence
+           * We don't observe the "late/later preinit" because these do not flush unless they are flushing
+           * with the shell
+           * */}
+          <script async="" src="shell preinit/shell" />
+          <script async="" src="shell preinit/shell" type="module" />
+          <script async="" src="shell/shell preinit" />
+          <script async="" src="shell/shell preinit" type="module" />
+          <script async="" src="late/shell preinit" />
+          <script async="" src="late/shell preinit" type="module" />
+          <script async="" src="shell/shell render" />
+          <script async="" src="shell/shell render" type="module" />
+          <script async="" src="late/shell render" />
+          <script async="" src="late/shell render" type="module" />
+          <link rel="preload" as="style" href="shell/late preinit" />
+          <link rel="preload" as="script" href="shell/late preinit" />
+          <link rel="modulepreload" href="shell/late preinit" />
+          <link rel="preload" as="style" href="shell/late render" />
+          <link rel="preload" as="script" href="shell/late render" />
+          <link rel="modulepreload" href="shell/late render" />
+        </head>
+        <body>
+          {'late...'}
+          {'later...'}
+          <script async="" src="shell/late preinit" />
+          <script async="" src="shell/late preinit" type="module" />
+          <script async="" src="shell/late render" />
+          <script async="" src="shell/late render" type="module" />
+          <link rel="preload" as="style" href="late/later preinit" />
+          <link rel="preload" as="script" href="late/later preinit" />
+          <link rel="modulepreload" href="late/later preinit" />
+          <link rel="preload" as="style" href="late/later render" />
+          <link rel="preload" as="script" href="late/later render" />
+          <link rel="modulepreload" href="late/later render" />
+          {/* FROM HERE */}
+          <script async="" src="late/later preinit" />
+          <script async="" src="late/later preinit" type="module" />
+          <script async="" src="late/later render" />
+          <script async="" src="late/later render" type="module" />
+          {/** TO HERE:
+           * These resources streamed into the body during the boundary flush. Scripts go first then
+           * preloads according to our streaming queue priorities
+           * */}
+        </body>
+      </html>,
+    );
+    loadStylesheets();
+    assertLog([
+      'load stylesheet: shell preinit/shell',
+      'load stylesheet: shell/shell preinit',
+      'load stylesheet: late/shell preinit',
+      'load stylesheet: shell/shell render',
+      'load stylesheet: late/shell render',
+      'load stylesheet: shell/late render',
+      'load stylesheet: late/later render',
+    ]);
+
+    ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell preinit/shell"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/late render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/later render"
+          />
+          {/* FROM HERE */}
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/late preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/later preinit"
+          />
+          {/** TO HERE:
+           * The client render patches in the two missing preinit stylesheets when hydration happens
+           * Note that this is only because we repeated the calls to preinit on the client
+           * */}
+          <script async="" src="shell preinit/shell" />
+          <script async="" src="shell preinit/shell" type="module" />
+          <script async="" src="shell/shell preinit" />
+          <script async="" src="shell/shell preinit" type="module" />
+          <script async="" src="late/shell preinit" />
+          <script async="" src="late/shell preinit" type="module" />
+          <script async="" src="shell/shell render" />
+          <script async="" src="shell/shell render" type="module" />
+          <script async="" src="late/shell render" />
+          <script async="" src="late/shell render" type="module" />
+          <link rel="preload" as="style" href="shell/late preinit" />
+          <link rel="preload" as="script" href="shell/late preinit" />
+          <link rel="modulepreload" href="shell/late preinit" />
+          <link rel="preload" as="style" href="shell/late render" />
+          <link rel="preload" as="script" href="shell/late render" />
+          <link rel="modulepreload" href="shell/late render" />
+        </head>
+        <body>
+          {'Late'}
+          {'Later'}
+          <script async="" src="shell/late preinit" />
+          <script async="" src="shell/late preinit" type="module" />
+          <script async="" src="shell/late render" />
+          <script async="" src="shell/late render" type="module" />
+          <link rel="preload" as="style" href="late/later preinit" />
+          <link rel="preload" as="script" href="late/later preinit" />
+          <link rel="modulepreload" href="late/later preinit" />
+          <link rel="preload" as="style" href="late/later render" />
+          <link rel="preload" as="script" href="late/later render" />
+          <link rel="modulepreload" href="late/later render" />
+          <script async="" src="late/later preinit" />
+          <script async="" src="late/later preinit" type="module" />
+          <script async="" src="late/later render" />
+          <script async="" src="late/later render" type="module" />
+        </body>
+      </html>,
+    );
+  });
+
   describe('ReactDOM.prefetchDNS(href)', () => {
     it('creates a dns-prefetch resource when called', async () => {
       function App({url}) {

From e78140c7080e32b7fd81e5131b3baffac944d5e6 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Fri, 22 Sep 2023 15:20:36 -0700
Subject: [PATCH 07/10] Adds a test to cover the case where you preload a
 stylesheet but then render a styletag with the href using precedence. This is
 probably done as a mistake (accidentally using the same href) but if you are
 going to inline on your own then you should also take care not to preload

---
 .../src/__tests__/ReactDOMFloat-test.js       | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index ce5db42ae6a35..42036d366ea8e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -4119,6 +4119,43 @@ body {
     );
   });
 
+  it('should warn if you preload a stylesheet and then render a style tag with the same href', async () => {
+    const style = 'body { color: red; }';
+    function App() {
+      ReactDOM.preload('foo', {as: 'style'});
+      return (
+        <html>
+          <body>
+            hello
+            <style precedence="default" href="foo">
+              {style}
+            </style>
+          </body>
+        </html>
+      );
+    }
+
+    await expect(async () => {
+      await act(() => {
+        renderToPipeableStream(<App />).pipe(writable);
+      });
+    }).toErrorDev([
+      'React encountered a hoistable style tag for the same href as a preload: "foo". When using a style tag to inline styles you should not also preload it as a stylsheet.',
+    ]);
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <style data-precedence="default" data-href="foo">
+            {style}
+          </style>
+          <link rel="preload" as="style" href="foo" />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+  });
+
   it('should preload only once even if you discover a stylesheet, script, or moduleScript late', async () => {
     function App() {
       // We start with preinitializing some resources first

From c3a0d27e3829a5856021aa40340487a1b653de51 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Fri, 22 Sep 2023 17:50:47 -0700
Subject: [PATCH 08/10] Models image resources as their own type to encode the
 "promotion" behavior when an img tag is rendered and we promote the priority

---
 .../src/server/ReactFizzConfigDOM.js          | 155 +++++++++++-------
 .../src/__tests__/ReactDOMFloat-test.js       |  81 +++++++++
 2 files changed, 178 insertions(+), 58 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 409f317dc61ff..52f997dcf5e00 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -228,6 +228,9 @@ export type ResumableState = {
     anonymous: {[key: string]: Exists},
     credentials: {[key: string]: Exists},
   },
+  imageResources: {
+    [key: string]: Preloaded,
+  },
   styleResources: {
     [key: string]: Exists | Preloaded | PreloadedWithCredentials,
   },
@@ -566,6 +569,7 @@ export function createResumableState(
       anonymous: {},
       credentials: {},
     },
+    imageResources: {},
     styleResources: {},
     scriptResources: {},
     moduleUnknownResources: {},
@@ -2588,36 +2592,48 @@ function pushImg(
     // resumableState.
     const sizes = typeof props.sizes === 'string' ? props.sizes : undefined;
     const key = getImageResourceKey(src, srcSet, sizes);
-    const resources: ResumableState['unknownResources']['asType'] =
-      resumableState.unknownResources.hasOwnProperty('image')
-        ? resumableState.unknownResources.image
-        : (resumableState.unknownResources.image = {});
 
-    let resource: void | Resource;
-    if (!resources.hasOwnProperty(key)) {
-      const preloadProps: PreloadProps = {
-        rel: 'preload',
-        as: 'image',
-        // There is a bug in Safari where imageSrcSet is not respected on preload links
-        // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
-        // This harms older browers that do not support imageSrcSet by making their preloads not work
-        // but this population is shrinking fast and is already small so we accept this tradeoff.
-        href: srcSet ? undefined : src,
-        imageSrcSet: srcSet,
-        imageSizes: sizes,
-        crossOrigin: props.crossOrigin,
-        integrity: props.integrity,
-        type: props.type,
-        fetchPriority: props.fetchPriority,
-        referrerPolicy: props.referrerPolicy,
-      };
-      resource = [];
-      resources[key] = PRELOAD_SIGIL;
-      pushLinkImpl(resource, preloadProps);
-    } else {
-      resource = renderState.preloads.images.get(key);
-    }
+    const promotablePreloads = renderState.preloads.images;
+
+    let resource = promotablePreloads.get(key);
     if (resource) {
+      // We consider whether this preload can be promoted to higher priority flushing queue.
+      // The only time a resource will exist here is if it was created during this render
+      // and was not already in the high priority queue.
+      if (
+        props.fetchPriority === 'high' ||
+        renderState.highImagePreloads.size < 10
+      ) {
+        // Delete the resource from the map since we are promoting it and don't want to
+        // reenter this branch in a second pass for duplicate img hrefs.
+        promotablePreloads.delete(key);
+
+        // $FlowFixMe - Flow should understand that this is a Resource if the condition was true
+        renderState.highImagePreloads.add(resource);
+      }
+    } else if (!resumableState.imageResources.hasOwnProperty(key)) {
+      // We must construct a new preload resource
+      resumableState.imageResources[key] = PRELOAD_SIGIL;
+      resource = [];
+      pushLinkImpl(
+        resource,
+        ({
+          rel: 'preload',
+          as: 'image',
+          // There is a bug in Safari where imageSrcSet is not respected on preload links
+          // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+          // This harms older browers that do not support imageSrcSet by making their preloads not work
+          // but this population is shrinking fast and is already small so we accept this tradeoff.
+          href: srcSet ? undefined : src,
+          imageSrcSet: srcSet,
+          imageSizes: sizes,
+          crossOrigin: props.crossOrigin,
+          integrity: props.integrity,
+          type: props.type,
+          fetchPriority: props.fetchPriority,
+          referrerPolicy: props.referrerPolicy,
+        }: PreloadProps),
+      );
       if (
         props.fetchPriority === 'high' ||
         renderState.highImagePreloads.size < 10
@@ -2625,6 +2641,9 @@ function pushImg(
         renderState.highImagePreloads.add(resource);
       } else {
         renderState.bulkPreloads.add(resource);
+        // We can bump the priority up if the same img is rendered later
+        // with fetchPriority="high"
+        promotablePreloads.set(key, resource);
       }
     }
   }
@@ -5057,8 +5076,8 @@ function getResourceKey(href: string): string {
 
 function getImageResourceKey(
   href: string,
-  imageSrcSet: ?string,
-  imageSizes: ?string,
+  imageSrcSet?: ?string,
+  imageSizes?: ?string,
 ): string {
   if (imageSrcSet) {
     return imageSrcSet + '\n' + (imageSizes || '');
@@ -5147,20 +5166,48 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
   const resumableState = getResumableState(request);
   const renderState = getRenderState(request);
   if (as && href) {
-    options = options || {};
-    let key: string;
-
-    if (as === 'image') {
-      // For image preloads the key contains either the imageSrcSet + imageSizes or the href but not
-      // both. This is to prevent identical calls with the same srcSet and sizes to be duplicated
-      // by varying the href. this is an edge case but it is the most correct behavior.
-      key = getImageResourceKey(href, options.imageSrcSet, options.imageSizes);
-    } else {
-      key = getResourceKey(href);
-    }
-
     switch (as) {
+      case 'image': {
+        let imageSrcSet, imageSizes, fetchPriority;
+        if (options) {
+          imageSrcSet = options.imageSrcSet;
+          imageSizes = options.imageSizes;
+          fetchPriority = options.fetchPriority;
+        }
+        const key = getImageResourceKey(href, imageSrcSet, imageSizes);
+        if (resumableState.imageResources.hasOwnProperty(key)) {
+          // we can return if we already have this resource
+          return;
+        }
+        resumableState.imageResources[key] = PRELOAD_SIGIL;
+        const resource = ([]: Resource);
+        pushLinkImpl(
+          resource,
+          Object.assign(
+            ({
+              rel: 'preload',
+              // There is a bug in Safari where imageSrcSet is not respected on preload links
+              // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+              // This harms older browers that do not support imageSrcSet by making their preloads not work
+              // but this population is shrinking fast and is already small so we accept this tradeoff.
+              href: imageSrcSet ? undefined : href,
+              as,
+            }: PreloadAsProps),
+            options,
+          ),
+        );
+        if (fetchPriority === 'high') {
+          renderState.highImagePreloads.add(resource);
+        } else {
+          renderState.bulkPreloads.add(resource);
+          // Stash the resource in case we need to promote it to higher priority
+          // when an img tag is rendered
+          renderState.preloads.images.set(key, resource);
+        }
+        break;
+      }
       case 'style': {
+        const key = getResourceKey(href);
         if (resumableState.styleResources.hasOwnProperty(key)) {
           // we can return if we already have this resource
           return;
@@ -5171,8 +5218,9 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
           Object.assign(({rel: 'preload', href, as}: PreloadAsProps), options),
         );
         resumableState.styleResources[key] =
-          typeof options.crossOrigin === 'string' ||
-          typeof options.integrity === 'string'
+          options &&
+          (typeof options.crossOrigin === 'string' ||
+            typeof options.integrity === 'string')
             ? [options.crossOrigin, options.integrity]
             : PRELOAD_SIGIL;
         renderState.preloads.stylesheets.set(key, resource);
@@ -5180,6 +5228,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
         break;
       }
       case 'script': {
+        const key = getResourceKey(href);
         if (resumableState.scriptResources.hasOwnProperty(key)) {
           // we can return if we already have this resource
           return;
@@ -5192,13 +5241,15 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
           Object.assign(({rel: 'preload', href, as}: PreloadAsProps), options),
         );
         resumableState.scriptResources[key] =
-          typeof options.crossOrigin === 'string' ||
-          typeof options.integrity === 'string'
+          options &&
+          (typeof options.crossOrigin === 'string' ||
+            typeof options.integrity === 'string')
             ? [options.crossOrigin, options.integrity]
             : PRELOAD_SIGIL;
         break;
       }
       default: {
+        const key = getResourceKey(href);
         const hasAsType = resumableState.unknownResources.hasOwnProperty(as);
         let resources;
         if (hasAsType) {
@@ -5224,18 +5275,6 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
           case 'font':
             renderState.fontPreloads.add(resource);
             break;
-          case 'image':
-            renderState.preloads.images.set(key, resource);
-            if (options.imageSrcSet) {
-              // There is a bug in Safari where imageSrcSet is not respected on preload links
-              // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
-              // This harms older browers that do not support imageSrcSet by making their preloads not work
-              // but this population is shrinking fast and is already small so we accept this tradeoff.
-              props.href = null;
-            }
-            if (options.fetchPriority === 'high') {
-              renderState.highImagePreloads.add(resource);
-            }
           // intentional fall through
           default:
             renderState.bulkPreloads.add(resource);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 42036d366ea8e..8fc6ef45ab2e2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -4014,6 +4014,87 @@ body {
     );
   });
 
+  it('can promote images to high priority when at least one instance specifies a high fetchPriority', async () => {
+    function App() {
+      // If a ends up in a higher priority queue than b it will flush first
+      ReactDOM.preload('a', {as: 'image'});
+      ReactDOM.preload('b', {as: 'image'});
+      return (
+        <html>
+          <body>
+            <link rel="stylesheet" href="foo" precedence="default" />
+            <img src="1" />
+            <img src="2" />
+            <img src="3" />
+            <img src="4" />
+            <img src="5" />
+            <img src="6" />
+            <img src="7" />
+            <img src="8" />
+            <img src="9" />
+            <img src="10" />
+            <img src="11" />
+            <img src="12" />
+            <img src="a" fetchPriority="low" />
+            <img src="a" />
+            <img src="a" fetchPriority="high" />
+            <img src="a" />
+            <img src="a" />
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          {/* The First 10 high priority images were just the first 10 rendered images */}
+          <link rel="preload" as="image" href="1" />
+          <link rel="preload" as="image" href="2" />
+          <link rel="preload" as="image" href="3" />
+          <link rel="preload" as="image" href="4" />
+          <link rel="preload" as="image" href="5" />
+          <link rel="preload" as="image" href="6" />
+          <link rel="preload" as="image" href="7" />
+          <link rel="preload" as="image" href="8" />
+          <link rel="preload" as="image" href="9" />
+          <link rel="preload" as="image" href="10" />
+          {/* The "a" image was rendered a few times but since at least one of those was with
+          fetchPriorty="high" it ends up in the high priority queue */}
+          <link rel="preload" as="image" href="a" />
+          {/* Stylesheets come in between high priority images and regular preloads */}
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          {/* The remainig images that preloaded at regular priority */}
+          <link rel="preload" as="image" href="b" />
+          <link rel="preload" as="image" href="11" />
+          <link rel="preload" as="image" href="12" />
+        </head>
+        <body>
+          <img src="1" />
+          <img src="2" />
+          <img src="3" />
+          <img src="4" />
+          <img src="5" />
+          <img src="6" />
+          <img src="7" />
+          <img src="8" />
+          <img src="9" />
+          <img src="10" />
+          <img src="11" />
+          <img src="12" />
+          <img src="a" fetchpriority="low" />
+          <img src="a" />
+          <img src="a" fetchpriority="high" />
+          <img src="a" />
+          <img src="a" />
+        </body>
+      </html>,
+    );
+  });
+
   it('preloads from rendered images properly use srcSet and sizes', async () => {
     function App() {
       ReactDOM.preload('1', {as: 'image', imageSrcSet: 'ss1'});

From c21887f9a978d022216bdc183b71d2e518ef8870 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Sat, 23 Sep 2023 10:30:39 -0700
Subject: [PATCH 09/10] Adds a test demonstrating preload credential transfer
 across prerender/resume

---
 .../__tests__/ReactDOMFizzStaticFloat-test.js | 275 ++++++++++++++++++
 .../react-dom/src/test-utils/FizzTestUtils.js |   5 +-
 2 files changed, 278 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzStaticFloat-test.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticFloat-test.js
new file mode 100644
index 0000000000000..9a825bf1e3871
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticFloat-test.js
@@ -0,0 +1,275 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {
+  getVisibleChildren,
+  insertNodesAndExecuteScripts,
+} from '../test-utils/FizzTestUtils';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+
+let React;
+let ReactDOM;
+let ReactDOMFizzServer;
+let ReactDOMFizzStatic;
+let Suspense;
+let container;
+
+describe('ReactDOMFizzStaticFloat', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMFizzServer = require('react-dom/server.browser');
+    if (__EXPERIMENTAL__) {
+      ReactDOMFizzStatic = require('react-dom/static.browser');
+    }
+    Suspense = React.Suspense;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  async function readIntoContainer(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+    const temp = document.createElement('div');
+    temp.innerHTML = result;
+    await insertNodesAndExecuteScripts(temp, container, null);
+  }
+
+  // @gate enablePostpone
+  it('should transfer connection credentials across prerender and resume for stylesheets, scripts, and moduleScripts', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return (
+        <>
+          <link rel="stylesheet" href="style creds" precedence="default" />
+          <script async={true} src="script creds" data-meaningful="" />
+          <script
+            type="module"
+            async={true}
+            src="module creds"
+            data-meaningful=""
+          />
+          <link rel="stylesheet" href="style anon" precedence="default" />
+          <script async={true} src="script anon" data-meaningful="" />
+          <script
+            type="module"
+            async={true}
+            src="module default"
+            data-meaningful=""
+          />
+        </>
+      );
+    }
+
+    function App() {
+      ReactDOM.preload('style creds', {
+        as: 'style',
+        crossOrigin: 'use-credentials',
+      });
+      ReactDOM.preload('script creds', {
+        as: 'script',
+        crossOrigin: 'use-credentials',
+        integrity: 'script-hash',
+      });
+      ReactDOM.preloadModule('module creds', {
+        crossOrigin: 'use-credentials',
+        integrity: 'module-hash',
+      });
+      ReactDOM.preload('style anon', {
+        as: 'style',
+        crossOrigin: 'anonymous',
+      });
+      ReactDOM.preload('script anon', {
+        as: 'script',
+        crossOrigin: 'foobar',
+      });
+      ReactDOM.preloadModule('module default', {
+        integrity: 'module-hash',
+      });
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Postpone />
+          </Suspense>
+        </div>
+      );
+    }
+
+    jest.mock('script creds', () => {}, {
+      virtual: true,
+    });
+    jest.mock('module creds', () => {}, {
+      virtual: true,
+    });
+    jest.mock('script anon', () => {}, {
+      virtual: true,
+    });
+    jest.mock('module default', () => {}, {
+      virtual: true,
+    });
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual([
+      <link
+        rel="preload"
+        as="style"
+        href="style creds"
+        crossorigin="use-credentials"
+      />,
+      <link
+        rel="preload"
+        as="script"
+        href="script creds"
+        crossorigin="use-credentials"
+        integrity="script-hash"
+      />,
+      <link
+        rel="modulepreload"
+        href="module creds"
+        crossorigin="use-credentials"
+        integrity="module-hash"
+      />,
+      <link rel="preload" as="style" href="style anon" crossorigin="" />,
+      <link rel="preload" as="script" href="script anon" crossorigin="" />,
+      <link
+        rel="modulepreload"
+        href="module default"
+        integrity="module-hash"
+      />,
+      <div>Loading...</div>,
+    ]);
+
+    prerendering = false;
+    const content = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(content);
+
+    // Dispatch load event to injected stylesheet
+    const linkCreds = document.querySelector(
+      'link[rel="stylesheet"][href="style creds"]',
+    );
+    const linkAnon = document.querySelector(
+      'link[rel="stylesheet"][href="style anon"]',
+    );
+    const event = document.createEvent('Events');
+    event.initEvent('load', true, true);
+    linkCreds.dispatchEvent(event);
+    linkAnon.dispatchEvent(event);
+
+    // Wait for the instruction microtasks to flush.
+    await 0;
+    await 0;
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="style creds"
+            crossorigin="use-credentials"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="style anon"
+            crossorigin=""
+          />
+        </head>
+        <body>
+          <div>
+            <link
+              rel="preload"
+              as="style"
+              href="style creds"
+              crossorigin="use-credentials"
+            />
+            <link
+              rel="preload"
+              as="script"
+              href="script creds"
+              crossorigin="use-credentials"
+              integrity="script-hash"
+            />
+            <link
+              rel="modulepreload"
+              href="module creds"
+              crossorigin="use-credentials"
+              integrity="module-hash"
+            />
+            <link rel="preload" as="style" href="style anon" crossorigin="" />
+            <link rel="preload" as="script" href="script anon" crossorigin="" />
+            <link
+              rel="modulepreload"
+              href="module default"
+              integrity="module-hash"
+            />
+            <div />
+            <script
+              async=""
+              src="script creds"
+              crossorigin="use-credentials"
+              integrity="script-hash"
+              data-meaningful=""
+            />
+            <script
+              type="module"
+              async=""
+              src="module creds"
+              crossorigin="use-credentials"
+              integrity="module-hash"
+              data-meaningful=""
+            />
+            <script
+              async=""
+              src="script anon"
+              crossorigin=""
+              data-meaningful=""
+            />
+            <script
+              type="module"
+              async=""
+              src="module default"
+              integrity="module-hash"
+              data-meaningful=""
+            />
+          </div>
+        </body>
+      </html>,
+    );
+  });
+});
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
index 96654d8ccb21e..3e83dd5292633 100644
--- a/packages/react-dom/src/test-utils/FizzTestUtils.js
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -93,6 +93,7 @@ async function executeScript(script: Element) {
         'You must set the current document to the global document to use script src in tests',
       );
     }
+
     try {
       // $FlowFixMe
       require(scriptSrc);
@@ -177,8 +178,8 @@ function getVisibleChildren(element: Element): React$Node {
   while (node) {
     if (node.nodeType === 1) {
       if (
-        node.tagName !== 'SCRIPT' &&
-        node.tagName !== 'script' &&
+        ((node.tagName !== 'SCRIPT' && node.tagName !== 'script') ||
+          node.hasAttribute('data-meaningful')) &&
         node.tagName !== 'TEMPLATE' &&
         node.tagName !== 'template' &&
         !node.hasAttribute('hidden') &&

From c003f8ac8d3e6d048e939bb11380f904acf8f0dc Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 26 Sep 2023 09:25:42 -0700
Subject: [PATCH 10/10] PrecedenceQueue -> StyleQueue

---
 .../src/server/ReactFizzConfigDOM.js          | 149 +++++++++---------
 .../src/server/ReactFizzConfigDOMLegacy.js    |   6 +-
 2 files changed, 74 insertions(+), 81 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 52f997dcf5e00..9c82cb6579231 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -152,7 +152,7 @@ export type RenderState = {
   fontPreloads: Set<Resource>,
   highImagePreloads: Set<Resource>,
   // usedImagePreloads: Set<PreloadResource>,
-  precedences: Map<string, PrecedenceQueue>,
+  styles: Map<string, StyleQueue>,
   bootstrapScripts: Set<Resource>,
   scripts: Set<Resource>,
   bulkPreloads: Set<Resource>,
@@ -197,9 +197,9 @@ const EXISTS: Exists = null;
 // to convey. It should never be checked by identity and we should not
 // assume Preload values in ResumableState equal this value because they
 // will have come from some parsed input.
-const PRELOAD_SIGIL: Preloaded = [];
+const PRELOAD_NO_CREDS: Preloaded = [];
 if (__DEV__) {
-  Object.freeze(PRELOAD_SIGIL);
+  Object.freeze(PRELOAD_NO_CREDS);
 }
 
 // Per response, global state that is not contextual to the rendering subtree.
@@ -394,8 +394,7 @@ export function createRenderState(
     fontPreloads: new Set(),
     highImagePreloads: new Set(),
     // usedImagePreloads: new Set(),
-    precedences: new Map(),
-    stylePrecedences: new Map(),
+    styles: new Map(),
     bootstrapScripts: new Set(),
     scripts: new Set(),
     bulkPreloads: new Set(),
@@ -2210,7 +2209,7 @@ function pushLink(
         return pushLinkImpl(target, props);
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
-        let precedenceQueue = renderState.precedences.get(precedence);
+        let styleQueue = renderState.styles.get(precedence);
         const hasKey = resumableState.styleResources.hasOwnProperty(key);
         const resourceState = hasKey
           ? resumableState.styleResources[key]
@@ -2220,15 +2219,15 @@ function pushLink(
           resumableState.styleResources[key] = EXISTS;
 
           // If this is the first time we've encountered this precedence we need
-          // to create a PrecedenceQueue
-          if (!precedenceQueue) {
-            precedenceQueue = {
+          // to create a StyleQueue
+          if (!styleQueue) {
+            styleQueue = {
               precedence: stringToChunk(escapeTextForBrowser(precedence)),
               rules: ([]: Array<Chunk | PrecomputedChunk>),
               hrefs: ([]: Array<Chunk | PrecomputedChunk>),
               sheets: (new Map(): Map<string, StylesheetResource>),
             };
-            renderState.precedences.set(precedence, precedenceQueue);
+            renderState.styles.set(precedence, styleQueue);
           }
 
           const resource: StylesheetResource = {
@@ -2261,11 +2260,11 @@ function pushLink(
             // have hit the primary if condition above.
           }
 
-          // We add the newly created resource to our PrecedenceQueue and if necessary
+          // We add the newly created resource to our StyleQueue and if necessary
           // track the resource with the currently rendering boundary
-          precedenceQueue.sheets.set(key, resource);
+          styleQueue.sheets.set(key, resource);
           if (renderState.boundaryResources) {
-            renderState.boundaryResources.sheets.add(resource);
+            renderState.boundaryResources.stylesheets.add(resource);
           }
         } else {
           // We need to track whether this boundary should wait on this resource or not.
@@ -2273,11 +2272,11 @@ function pushLink(
           // it. However, it's possible when you resume that the style has already been emitted
           // and then it wouldn't be recreated in the RenderState and there's no need to track
           // it again since we should've hoisted it to the shell already.
-          if (precedenceQueue) {
-            const resource = precedenceQueue.sheets.get(key);
+          if (styleQueue) {
+            const resource = styleQueue.sheets.get(key);
             if (resource) {
               if (renderState.boundaryResources) {
-                renderState.boundaryResources.sheets.add(resource);
+                renderState.boundaryResources.stylesheets.add(resource);
               }
             }
           }
@@ -2411,7 +2410,7 @@ function pushStyle(
     }
 
     const key = getResourceKey(href);
-    let precedenceQueue = renderState.precedences.get(precedence);
+    let styleQueue = renderState.styles.get(precedence);
     const hasKey = resumableState.styleResources.hasOwnProperty(key);
     const resourceState = hasKey
       ? resumableState.styleResources[key]
@@ -2429,30 +2428,30 @@ function pushStyle(
         }
       }
 
-      if (!precedenceQueue) {
+      if (!styleQueue) {
         // This is the first time we've encountered this precedence we need
-        // to create a PrecedenceQueue.
-        precedenceQueue = {
+        // to create a StyleQueue.
+        styleQueue = {
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
           rules: ([]: Array<Chunk | PrecomputedChunk>),
           hrefs: [stringToChunk(escapeTextForBrowser(href))],
           sheets: (new Map(): Map<string, StylesheetResource>),
         };
-        renderState.precedences.set(precedence, precedenceQueue);
+        renderState.styles.set(precedence, styleQueue);
       } else {
         // We have seen this precedence before and need to track this href
-        precedenceQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
+        styleQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
       }
-      pushStyleContents(precedenceQueue.rules, props);
+      pushStyleContents(styleQueue.rules, props);
     }
-    if (precedenceQueue) {
+    if (styleQueue) {
       // We need to track whether this boundary should wait on this resource or not.
       // Typically this resource should always exist since we either had it or just created
       // it. However, it's possible when you resume that the style has already been emitted
       // and then it wouldn't be recreated in the RenderState and there's no need to track
       // it again since we should've hoisted it to the shell already.
       if (renderState.boundaryResources) {
-        renderState.boundaryResources.precedences.add(precedenceQueue);
+        renderState.boundaryResources.styles.add(styleQueue);
       }
     }
 
@@ -2613,7 +2612,7 @@ function pushImg(
       }
     } else if (!resumableState.imageResources.hasOwnProperty(key)) {
       // We must construct a new preload resource
-      resumableState.imageResources[key] = PRELOAD_SIGIL;
+      resumableState.imageResources[key] = PRELOAD_NO_CREDS;
       resource = [];
       pushLinkImpl(
         resource,
@@ -4224,10 +4223,10 @@ let destinationHasCapacity = true;
 
 function flushStyleTagsLateForBoundary(
   this: Destination,
-  precedenceQueue: PrecedenceQueue,
+  styleQueue: StyleQueue,
 ) {
-  const rules = precedenceQueue.rules;
-  const hrefs = precedenceQueue.hrefs;
+  const rules = styleQueue.rules;
+  const hrefs = styleQueue.hrefs;
   if (__DEV__) {
     if (rules.length > 0 && hrefs.length === 0) {
       console.error(
@@ -4238,7 +4237,7 @@ function flushStyleTagsLateForBoundary(
   let i = 0;
   if (hrefs.length) {
     writeChunk(this, lateStyleTagResourceOpen1);
-    writeChunk(this, precedenceQueue.precedence);
+    writeChunk(this, styleQueue.precedence);
     writeChunk(this, lateStyleTagResourceOpen2);
     for (; i < hrefs.length - 1; i++) {
       writeChunk(this, hrefs[i]);
@@ -4286,13 +4285,10 @@ export function writeResourcesForBoundary(
   destinationHasCapacity = true;
 
   // Flush style tags for each precedence this boundary depends on
-  boundaryResources.precedences.forEach(
-    flushStyleTagsLateForBoundary,
-    destination,
-  );
+  boundaryResources.styles.forEach(flushStyleTagsLateForBoundary, destination);
 
   // Determine if this boundary has stylesheets that need to be awaited upon completion
-  boundaryResources.sheets.forEach(hasStylesToHoist);
+  boundaryResources.stylesheets.forEach(hasStylesToHoist);
 
   if (currentlyRenderingBoundaryHasStylesToHoist) {
     renderState.stylesToHoist = true;
@@ -4336,23 +4332,23 @@ const styleTagResourceOpen3 = stringToPrecomputedChunk('">');
 
 const styleTagResourceClose = stringToPrecomputedChunk('</style>');
 
-function flushPrecedenceInPreamble(
+function flushStylesInPreamble(
   this: Destination,
-  precedenceQueue: PrecedenceQueue,
+  styleQueue: StyleQueue,
   precedence: string,
 ) {
-  const hasStylesheets = precedenceQueue.sheets.size > 0;
-  precedenceQueue.sheets.forEach(flushStyleInPreamble, this);
-  precedenceQueue.sheets.clear();
+  const hasStylesheets = styleQueue.sheets.size > 0;
+  styleQueue.sheets.forEach(flushStyleInPreamble, this);
+  styleQueue.sheets.clear();
 
-  const rules = precedenceQueue.rules;
-  const hrefs = precedenceQueue.hrefs;
+  const rules = styleQueue.rules;
+  const hrefs = styleQueue.hrefs;
   // If we don't emit any stylesheets at this precedence we still need to maintain the precedence
   // order so even if there are no rules for style tags at this precedence we emit an empty style
   // tag with the data-precedence attribute
   if (!hasStylesheets || hrefs.length) {
     writeChunk(this, styleTagResourceOpen1);
-    writeChunk(this, precedenceQueue.precedence);
+    writeChunk(this, styleQueue.precedence);
     let i = 0;
     if (hrefs.length) {
       writeChunk(this, styleTagResourceOpen2);
@@ -4391,12 +4387,9 @@ function preloadLateStyle(this: Destination, stylesheet: StylesheetResource) {
   }
 }
 
-function preloadLateStyles(
-  this: Destination,
-  precedenceQueue: PrecedenceQueue,
-) {
-  precedenceQueue.sheets.forEach(preloadLateStyle, this);
-  precedenceQueue.sheets.clear();
+function preloadLateStyles(this: Destination, styleQueue: StyleQueue) {
+  styleQueue.sheets.forEach(preloadLateStyle, this);
+  styleQueue.sheets.clear();
 }
 
 // We don't bother reporting backpressure at the moment because we expect to
@@ -4475,7 +4468,7 @@ export function writePreamble(
   renderState.highImagePreloads.clear();
 
   // Flush unblocked stylesheets by precedence
-  renderState.precedences.forEach(flushPrecedenceInPreamble, destination);
+  renderState.styles.forEach(flushStylesInPreamble, destination);
 
   const importMapChunks = renderState.importMapChunks;
   for (i = 0; i < importMapChunks.length; i++) {
@@ -4551,7 +4544,7 @@ export function writeHoistables(
 
   // Preload any stylesheets. these will emit in a render instruction that follows this
   // but we want to kick off preloading as soon as possible
-  renderState.precedences.forEach(preloadLateStyles, destination);
+  renderState.styles.forEach(preloadLateStyles, destination);
 
   // We only hoist importmaps that are configured through createResponse and that will
   // always flush in the preamble. Generally we don't expect people to render them as
@@ -4613,7 +4606,7 @@ function writeStyleResourceDependenciesInJS(
   writeChunk(destination, arrayFirstOpenBracket);
 
   let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
-  boundaryResources.sheets.forEach(resource => {
+  boundaryResources.stylesheets.forEach(resource => {
     if (resource.state === PREAMBLE) {
       // We can elide this dependency because it was flushed in the shell and
       // should be ready before content is shown on the client
@@ -4806,7 +4799,7 @@ function writeStyleResourceDependenciesInAttr(
   writeChunk(destination, arrayFirstOpenBracket);
 
   let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
-  boundaryResources.sheets.forEach(resource => {
+  boundaryResources.stylesheets.forEach(resource => {
     if (resource.state === PREAMBLE) {
       // We can elide this dependency because it was flushed in the shell and
       // should be ready before content is shown on the client
@@ -5045,11 +5038,11 @@ type StylesheetResource = {
 };
 
 export type BoundaryResources = {
-  precedences: Set<PrecedenceQueue>,
-  sheets: Set<StylesheetResource>,
+  styles: Set<StyleQueue>,
+  stylesheets: Set<StylesheetResource>,
 };
 
-export type PrecedenceQueue = {
+export type StyleQueue = {
   precedence: Chunk | PrecomputedChunk,
   rules: Array<Chunk | PrecomputedChunk>,
   hrefs: Array<Chunk | PrecomputedChunk>,
@@ -5058,8 +5051,8 @@ export type PrecedenceQueue = {
 
 export function createBoundaryResources(): BoundaryResources {
   return {
-    precedences: new Set(),
-    sheets: new Set(),
+    styles: new Set(),
+    stylesheets: new Set(),
   };
 }
 
@@ -5179,7 +5172,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
           // we can return if we already have this resource
           return;
         }
-        resumableState.imageResources[key] = PRELOAD_SIGIL;
+        resumableState.imageResources[key] = PRELOAD_NO_CREDS;
         const resource = ([]: Resource);
         pushLinkImpl(
           resource,
@@ -5222,7 +5215,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
           (typeof options.crossOrigin === 'string' ||
             typeof options.integrity === 'string')
             ? [options.crossOrigin, options.integrity]
-            : PRELOAD_SIGIL;
+            : PRELOAD_NO_CREDS;
         renderState.preloads.stylesheets.set(key, resource);
         renderState.bulkPreloads.add(resource);
         break;
@@ -5245,7 +5238,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
           (typeof options.crossOrigin === 'string' ||
             typeof options.integrity === 'string')
             ? [options.crossOrigin, options.integrity]
-            : PRELOAD_SIGIL;
+            : PRELOAD_NO_CREDS;
         break;
       }
       default: {
@@ -5280,7 +5273,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
             renderState.bulkPreloads.add(resource);
         }
         pushLinkImpl(resource, props);
-        resources[key] = PRELOAD_SIGIL;
+        resources[key] = PRELOAD_NO_CREDS;
       }
     }
     // If we got this far we created a new resource
@@ -5324,7 +5317,7 @@ function preloadModule(
           (typeof options.crossOrigin === 'string' ||
             typeof options.integrity === 'string')
             ? [options.crossOrigin, options.integrity]
-            : PRELOAD_SIGIL;
+            : PRELOAD_NO_CREDS;
         renderState.preloads.moduleScripts.set(key, resource);
         break;
       }
@@ -5343,7 +5336,7 @@ function preloadModule(
           resumableState.moduleUnknownResources[as] = resources;
         }
         resource = ([]: Resource);
-        resources[key] = PRELOAD_SIGIL;
+        resources[key] = PRELOAD_NO_CREDS;
       }
     }
 
@@ -5386,7 +5379,7 @@ function preinitStyle(
     precedence = precedence || 'default';
     const key = getResourceKey(href);
 
-    let precedenceQueue = renderState.precedences.get(precedence);
+    let styleQueue = renderState.styles.get(precedence);
     const hasKey = resumableState.styleResources.hasOwnProperty(key);
     const resourceState = hasKey
       ? resumableState.styleResources[key]
@@ -5396,15 +5389,15 @@ function preinitStyle(
       resumableState.styleResources[key] = EXISTS;
 
       // If this is the first time we've encountered this precedence we need
-      // to create a PrecedenceQueue
-      if (!precedenceQueue) {
-        precedenceQueue = {
+      // to create a StyleQueue
+      if (!styleQueue) {
+        styleQueue = {
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
           rules: ([]: Array<Chunk | PrecomputedChunk>),
           hrefs: ([]: Array<Chunk | PrecomputedChunk>),
           sheets: (new Map(): Map<string, StylesheetResource>),
         };
-        renderState.precedences.set(precedence, precedenceQueue);
+        renderState.styles.set(precedence, styleQueue);
       }
 
       const resource = {
@@ -5444,9 +5437,9 @@ function preinitStyle(
         // have hit the primary if condition above.
       }
 
-      // We add the newly created resource to our PrecedenceQueue and if necessary
+      // We add the newly created resource to our StyleQueue and if necessary
       // track the resource with the currently rendering boundary
-      precedenceQueue.sheets.set(key, resource);
+      styleQueue.sheets.set(key, resource);
 
       // Notify the request that there are resources to flush even if no work is currently happening
       flushResources(request);
@@ -5669,18 +5662,18 @@ function adoptPreloadCredentials(
   if (target.integrity == null) target.integrity = preloadState[1];
 }
 
-function hoistPrecedenceQueueDependency(
+function hoistStyleQueueDependency(
   this: BoundaryResources,
-  precedenceQueue: PrecedenceQueue,
+  styleQueue: StyleQueue,
 ) {
-  this.precedences.add(precedenceQueue);
+  this.styles.add(styleQueue);
 }
 
 function hoistStylesheetDependency(
   this: BoundaryResources,
   stylesheet: StylesheetResource,
 ) {
-  this.sheets.add(stylesheet);
+  this.stylesheets.add(stylesheet);
 }
 
 export function hoistResources(
@@ -5689,11 +5682,11 @@ export function hoistResources(
 ): void {
   const currentBoundaryResources = renderState.boundaryResources;
   if (currentBoundaryResources) {
-    source.precedences.forEach(
-      hoistPrecedenceQueueDependency,
+    source.styles.forEach(hoistStyleQueueDependency, currentBoundaryResources);
+    source.stylesheets.forEach(
+      hoistStylesheetDependency,
       currentBoundaryResources,
     );
-    source.sheets.forEach(hoistStylesheetDependency, currentBoundaryResources);
   }
 }
 
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index 81a749adbed09..2f1504bfece50 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -10,7 +10,7 @@
 import type {
   ResumableState,
   BoundaryResources,
-  PrecedenceQueue,
+  StyleQueue,
   Resource,
 } from './ReactFizzConfigDOM';
 
@@ -55,7 +55,7 @@ export type RenderState = {
   fontPreloads: Set<Resource>,
   highImagePreloads: Set<Resource>,
   // usedImagePreloads: Set<Resource>,
-  precedences: Map<string, PrecedenceQueue>,
+  styles: Map<string, StyleQueue>,
   bootstrapScripts: Set<Resource>,
   scripts: Set<Resource>,
   bulkPreloads: Set<Resource>,
@@ -103,7 +103,7 @@ export function createRenderState(
     fontPreloads: renderState.fontPreloads,
     highImagePreloads: renderState.highImagePreloads,
     // usedImagePreloads: renderState.usedImagePreloads,
-    precedences: renderState.precedences,
+    styles: renderState.styles,
     bootstrapScripts: renderState.bootstrapScripts,
     scripts: renderState.scripts,
     bulkPreloads: renderState.bulkPreloads,