[Fizz] preload bootstrapModules (#26754)

stacked on #26753

Adds support for preloading bootstrapModules. We don't yet support
modules in Float's public interface but this implementation should be
compatible with what we do when we add it.

DiffTrain build for [ae31d2e](ae31d2e)

Author: gnoff

compiled/facebook-www/REVISION

@@ -1 +1 @@
-b864ad4397e7b366ece9ecfdfafa5660ae6b8390
+ae31d2ea3c3f9f0a87ff2c6193484d5d8786bc5f

compiled/facebook-www/ReactDOMServer-dev.classic.js

@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-classic-b863116e";
+var ReactVersion = "18.3.0-www-classic-d2e90a0e";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -2498,6 +2498,7 @@ function createResponseState$1(
       var _integrity =
         typeof _scriptConfig === "string" ? undefined : _scriptConfig.integrity;
 
+      preloadBootstrapModule(resources, _src, nonce, _integrity);
       bootstrapChunks.push(
         startModuleSrc,
         stringToChunk(escapeTextForBrowser(_src))
@@ -4083,7 +4084,7 @@ function pushLink(
         }
 
         pushLinkImpl(resource.chunks, resource.props);
-        resources.usedStylesheets.add(resource);
+        resources.usedStylesheets.set(key, resource);
         return pushLinkImpl(target, props);
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
@@ -6297,9 +6298,7 @@ function writePreamble(
   resources.fontPreloads.clear(); // Flush unblocked stylesheets by precedence
 
   resources.precedences.forEach(flushAllStylesInPreamble, destination);
-  resources.usedStylesheets.forEach(function (resource) {
-    var key = getResourceKey(resource.props.as, resource.props.href);
-
+  resources.usedStylesheets.forEach(function (resource, key) {
     if (resources.stylesMap.has(key));
     else {
       var _chunks = resource.chunks;
@@ -6377,9 +6376,7 @@ function writeHoistables(destination, resources, responseState) {
   // but we want to kick off preloading as soon as possible
 
   resources.precedences.forEach(preloadLateStyles, destination);
-  resources.usedStylesheets.forEach(function (resource) {
-    var key = getResourceKey(resource.props.as, resource.props.href);
-
+  resources.usedStylesheets.forEach(function (resource, key) {
     if (resources.stylesMap.has(key));
     else {
       var chunks = resource.chunks;
@@ -6881,7 +6878,7 @@ function createResources() {
     // usedImagePreloads: new Set(),
     precedences: new Map(),
     stylePrecedences: new Map(),
-    usedStylesheets: new Set(),
+    usedStylesheets: new Map(),
     scripts: new Set(),
     usedScripts: new Set(),
     explicitStylesheetPreloads: new Set(),
@@ -7505,6 +7502,42 @@ function preloadBootstrapScript(resources, src, nonce, integrity) {
   resources.preloadsMap.set(key, resource);
   resources.explicitScriptPreloads.add(resource);
   pushLinkImpl(resource.chunks, props);
+} // 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(resources, src, nonce, integrity) {
+  var key = getResourceKey("script", src);
+
+  {
+    if (resources.preloadsMap.has(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
+      error(
+        'Internal React Error: React expected bootstrap module with src "%s" to not have been preloaded already. please file an issue',
+        src
+      );
+    }
+  }
+
+  var props = {
+    rel: "modulepreload",
+    href: src,
+    nonce: nonce,
+    integrity: integrity
+  };
+  var resource = {
+    type: "preload",
+    chunks: [],
+    state: NoState,
+    props: props
+  };
+  resources.preloadsMap.set(key, resource);
+  resources.explicitScriptPreloads.add(resource);
+  pushLinkImpl(resource.chunks, props);
+  return;
 }
 
 function internalPreinitScript(resources, src, chunks) {

compiled/facebook-www/ReactDOMServer-dev.modern.js

@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-modern-f30fea22";
+var ReactVersion = "18.3.0-www-modern-341d0376";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -2498,6 +2498,7 @@ function createResponseState$1(
       var _integrity =
         typeof _scriptConfig === "string" ? undefined : _scriptConfig.integrity;
 
+      preloadBootstrapModule(resources, _src, nonce, _integrity);
       bootstrapChunks.push(
         startModuleSrc,
         stringToChunk(escapeTextForBrowser(_src))
@@ -4083,7 +4084,7 @@ function pushLink(
         }
 
         pushLinkImpl(resource.chunks, resource.props);
-        resources.usedStylesheets.add(resource);
+        resources.usedStylesheets.set(key, resource);
         return pushLinkImpl(target, props);
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
@@ -6297,9 +6298,7 @@ function writePreamble(
   resources.fontPreloads.clear(); // Flush unblocked stylesheets by precedence
 
   resources.precedences.forEach(flushAllStylesInPreamble, destination);
-  resources.usedStylesheets.forEach(function (resource) {
-    var key = getResourceKey(resource.props.as, resource.props.href);
-
+  resources.usedStylesheets.forEach(function (resource, key) {
     if (resources.stylesMap.has(key));
     else {
       var _chunks = resource.chunks;
@@ -6377,9 +6376,7 @@ function writeHoistables(destination, resources, responseState) {
   // but we want to kick off preloading as soon as possible
 
   resources.precedences.forEach(preloadLateStyles, destination);
-  resources.usedStylesheets.forEach(function (resource) {
-    var key = getResourceKey(resource.props.as, resource.props.href);
-
+  resources.usedStylesheets.forEach(function (resource, key) {
     if (resources.stylesMap.has(key));
     else {
       var chunks = resource.chunks;
@@ -6881,7 +6878,7 @@ function createResources() {
     // usedImagePreloads: new Set(),
     precedences: new Map(),
     stylePrecedences: new Map(),
-    usedStylesheets: new Set(),
+    usedStylesheets: new Map(),
     scripts: new Set(),
     usedScripts: new Set(),
     explicitStylesheetPreloads: new Set(),
@@ -7505,6 +7502,42 @@ function preloadBootstrapScript(resources, src, nonce, integrity) {
   resources.preloadsMap.set(key, resource);
   resources.explicitScriptPreloads.add(resource);
   pushLinkImpl(resource.chunks, props);
+} // 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(resources, src, nonce, integrity) {
+  var key = getResourceKey("script", src);
+
+  {
+    if (resources.preloadsMap.has(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
+      error(
+        'Internal React Error: React expected bootstrap module with src "%s" to not have been preloaded already. please file an issue',
+        src
+      );
+    }
+  }
+
+  var props = {
+    rel: "modulepreload",
+    href: src,
+    nonce: nonce,
+    integrity: integrity
+  };
+  var resource = {
+    type: "preload",
+    chunks: [],
+    state: NoState,
+    props: props
+  };
+  resources.preloadsMap.set(key, resource);
+  resources.explicitScriptPreloads.add(resource);
+  pushLinkImpl(resource.chunks, props);
+  return;
 }
 
 function internalPreinitScript(resources, src, chunks) {

compiled/facebook-www/ReactDOMServer-prod.classic.js

@@ -538,7 +538,7 @@ function pushLink(
           }),
           resources.preloadsMap.set(responseState, textEmbedded)),
         pushLinkImpl(textEmbedded.chunks, textEmbedded.props),
-        resources.usedStylesheets.add(textEmbedded),
+        resources.usedStylesheets.set(responseState, textEmbedded),
         pushLinkImpl(target, props)
       );
     href = resources.stylesMap.get(responseState);
@@ -1666,12 +1666,8 @@ function writePreamble(
   resources.fontPreloads.forEach(flushResourceInPreamble, destination);
   resources.fontPreloads.clear();
   resources.precedences.forEach(flushAllStylesInPreamble, destination);
-  resources.usedStylesheets.forEach(function (resource) {
-    if (
-      !resources.stylesMap.has(
-        "[" + resource.props.as + "]" + resource.props.href
-      )
-    )
+  resources.usedStylesheets.forEach(function (resource, key) {
+    if (!resources.stylesMap.has(key))
       for (resource = resource.chunks, i = 0; i < resource.length; i++)
         destination.push(resource[i]);
   });
@@ -1713,12 +1709,8 @@ function writeHoistables(destination, resources, responseState) {
   resources.fontPreloads.forEach(flushResourceLate, destination);
   resources.fontPreloads.clear();
   resources.precedences.forEach(preloadLateStyles, destination);
-  resources.usedStylesheets.forEach(function (resource) {
-    if (
-      !resources.stylesMap.has(
-        "[" + resource.props.as + "]" + resource.props.href
-      )
-    )
+  resources.usedStylesheets.forEach(function (resource, key) {
+    if (!resources.stylesMap.has(key))
       for (resource = resource.chunks, i = 0; i < resource.length; i++)
         destination.push(resource[i]);
   });
@@ -3949,7 +3941,7 @@ function renderToStringImpl(
       fontPreloads: new Set(),
       precedences: new Map(),
       stylePrecedences: new Map(),
-      usedStylesheets: new Set(),
+      usedStylesheets: new Map(),
       scripts: new Set(),
       usedScripts: new Set(),
       explicitStylesheetPreloads: new Set(),
@@ -4016,4 +4008,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-classic-0354aaeb";
+exports.version = "18.3.0-www-classic-bb704388";

compiled/facebook-www/ReactDOMServer-prod.modern.js

@@ -537,7 +537,7 @@ function pushLink(
           }),
           resources.preloadsMap.set(responseState, textEmbedded)),
         pushLinkImpl(textEmbedded.chunks, textEmbedded.props),
-        resources.usedStylesheets.add(textEmbedded),
+        resources.usedStylesheets.set(responseState, textEmbedded),
         pushLinkImpl(target, props)
       );
     href = resources.stylesMap.get(responseState);
@@ -1665,12 +1665,8 @@ function writePreamble(
   resources.fontPreloads.forEach(flushResourceInPreamble, destination);
   resources.fontPreloads.clear();
   resources.precedences.forEach(flushAllStylesInPreamble, destination);
-  resources.usedStylesheets.forEach(function (resource) {
-    if (
-      !resources.stylesMap.has(
-        "[" + resource.props.as + "]" + resource.props.href
-      )
-    )
+  resources.usedStylesheets.forEach(function (resource, key) {
+    if (!resources.stylesMap.has(key))
       for (resource = resource.chunks, i = 0; i < resource.length; i++)
         destination.push(resource[i]);
   });
@@ -1712,12 +1708,8 @@ function writeHoistables(destination, resources, responseState) {
   resources.fontPreloads.forEach(flushResourceLate, destination);
   resources.fontPreloads.clear();
   resources.precedences.forEach(preloadLateStyles, destination);
-  resources.usedStylesheets.forEach(function (resource) {
-    if (
-      !resources.stylesMap.has(
-        "[" + resource.props.as + "]" + resource.props.href
-      )
-    )
+  resources.usedStylesheets.forEach(function (resource, key) {
+    if (!resources.stylesMap.has(key))
       for (resource = resource.chunks, i = 0; i < resource.length; i++)
         destination.push(resource[i]);
   });
@@ -3847,7 +3839,7 @@ function renderToStringImpl(
       fontPreloads: new Set(),
       precedences: new Map(),
       stylePrecedences: new Map(),
-      usedStylesheets: new Set(),
+      usedStylesheets: new Map(),
       scripts: new Set(),
       usedScripts: new Set(),
       explicitStylesheetPreloads: new Set(),
@@ -3914,4 +3906,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-modern-d90171db";
+exports.version = "18.3.0-www-modern-7ad5a939";