[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)
facebook · May 31, 2023 · ea7881e · ea7881e
1 parent cea3a73
commit ea7881e
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 79 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-b864ad4397e7b366ece9ecfdfafa5660ae6b8390
+ae31d2ea3c3f9f0a87ff2c6193484d5d8786bc5f
diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/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) {

diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/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) {

diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/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";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/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";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		b864ad4397e7b366ece9ecfdfafa5660ae6b8390
		ae31d2ea3c3f9f0a87ff2c6193484d5d8786bc5f