[Fizz]: Unify preload queue (#27190)

Currently React attempts to prioritize certain preloads over others based on their type. This is at odds with allowing the user to control priority by ordering which calls are made first. There are some asset types that generally should just be prioritized first such as fonts since we don't know when fonts will be used and they either block display or may lead to fallback fonts being used. But for scripts and stylesheets we can emit them in the order received with other arbitrary preload types. We will eventually add support for emitting suspensey image preloads before other resources because these also block display however that implementation will look at which images are actually rendered rather than simply preloaded. DiffTrain build for [cb3404a](cb3404a)
facebook · Aug 7, 2023 · e6bc6ee · e6bc6ee
1 parent eddb096
commit e6bc6ee
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 257 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-9edf470d6ed1f3ac12c23a248e64293f367c1797
+cb3404a0ccd8b5edf5d2b90bd844742090e38f42
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-728bbc0a";
+var ReactVersion = "18.3.0-www-classic-94960c5b";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -6285,18 +6285,8 @@ function writePreamble(
   resources.bootstrapScripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.clear();
-  resources.explicitStylesheetPreloads.forEach(
-    flushResourceInPreamble,
-    destination
-  );
-  resources.explicitStylesheetPreloads.clear();
-  resources.explicitScriptPreloads.forEach(
-    flushResourceInPreamble,
-    destination
-  );
-  resources.explicitScriptPreloads.clear();
-  resources.explicitOtherPreloads.forEach(flushResourceInPreamble, destination);
-  resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks
+  resources.explicitPreloads.forEach(flushResourceInPreamble, destination);
+  resources.explicitPreloads.clear(); // Write embedding preloadChunks
 
   var preloadChunks = responseState.preloadChunks;
 
@@ -6352,12 +6342,8 @@ function writeHoistables(destination, resources, responseState) {
 
   resources.scripts.forEach(flushResourceLate, destination);
   resources.scripts.clear();
-  resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination);
-  resources.explicitStylesheetPreloads.clear();
-  resources.explicitScriptPreloads.forEach(flushResourceLate, destination);
-  resources.explicitScriptPreloads.clear();
-  resources.explicitOtherPreloads.forEach(flushResourceLate, destination);
-  resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks
+  resources.explicitPreloads.forEach(flushResourceLate, destination);
+  resources.explicitPreloads.clear(); // Write embedding preloadChunks
 
   var preloadChunks = responseState.preloadChunks;
 
@@ -6841,10 +6827,7 @@ function createResources() {
     stylePrecedences: new Map(),
     bootstrapScripts: new Set(),
     scripts: new Set(),
-    explicitStylesheetPreloads: new Set(),
-    // explicitImagePreloads: new Set(),
-    explicitScriptPreloads: new Set(),
-    explicitOtherPreloads: new Set(),
+    explicitPreloads: new Set(),
     // like a module global for currently rendering boundary
     boundaryResources: null
   };
@@ -7154,25 +7137,10 @@ function preload(href, options) {
       pushLinkImpl(resource.chunks, resource.props);
     }
 
-    switch (as) {
-      case "font": {
-        resources.fontPreloads.add(resource);
-        break;
-      }
-
-      case "style": {
-        resources.explicitStylesheetPreloads.add(resource);
-        break;
-      }
-
-      case "script": {
-        resources.explicitScriptPreloads.add(resource);
-        break;
-      }
-
-      default: {
-        resources.explicitOtherPreloads.add(resource);
-      }
+    if (as === "font") {
+      resources.fontPreloads.add(resource);
+    } else {
+      resources.explicitPreloads.add(resource);
     }
 
     flushResources(request);

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-9727d465";
+var ReactVersion = "18.3.0-www-modern-9d3aa62d";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -6285,18 +6285,8 @@ function writePreamble(
   resources.bootstrapScripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.clear();
-  resources.explicitStylesheetPreloads.forEach(
-    flushResourceInPreamble,
-    destination
-  );
-  resources.explicitStylesheetPreloads.clear();
-  resources.explicitScriptPreloads.forEach(
-    flushResourceInPreamble,
-    destination
-  );
-  resources.explicitScriptPreloads.clear();
-  resources.explicitOtherPreloads.forEach(flushResourceInPreamble, destination);
-  resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks
+  resources.explicitPreloads.forEach(flushResourceInPreamble, destination);
+  resources.explicitPreloads.clear(); // Write embedding preloadChunks
 
   var preloadChunks = responseState.preloadChunks;
 
@@ -6352,12 +6342,8 @@ function writeHoistables(destination, resources, responseState) {
 
   resources.scripts.forEach(flushResourceLate, destination);
   resources.scripts.clear();
-  resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination);
-  resources.explicitStylesheetPreloads.clear();
-  resources.explicitScriptPreloads.forEach(flushResourceLate, destination);
-  resources.explicitScriptPreloads.clear();
-  resources.explicitOtherPreloads.forEach(flushResourceLate, destination);
-  resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks
+  resources.explicitPreloads.forEach(flushResourceLate, destination);
+  resources.explicitPreloads.clear(); // Write embedding preloadChunks
 
   var preloadChunks = responseState.preloadChunks;
 
@@ -6841,10 +6827,7 @@ function createResources() {
     stylePrecedences: new Map(),
     bootstrapScripts: new Set(),
     scripts: new Set(),
-    explicitStylesheetPreloads: new Set(),
-    // explicitImagePreloads: new Set(),
-    explicitScriptPreloads: new Set(),
-    explicitOtherPreloads: new Set(),
+    explicitPreloads: new Set(),
     // like a module global for currently rendering boundary
     boundaryResources: null
   };
@@ -7154,25 +7137,10 @@ function preload(href, options) {
       pushLinkImpl(resource.chunks, resource.props);
     }
 
-    switch (as) {
-      case "font": {
-        resources.fontPreloads.add(resource);
-        break;
-      }
-
-      case "style": {
-        resources.explicitStylesheetPreloads.add(resource);
-        break;
-      }
-
-      case "script": {
-        resources.explicitScriptPreloads.add(resource);
-        break;
-      }
-
-      default: {
-        resources.explicitOtherPreloads.add(resource);
-      }
+    if (as === "font") {
+      resources.fontPreloads.add(resource);
+    } else {
+      resources.explicitPreloads.add(resource);
     }
 
     flushResources(request);

diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -1877,19 +1877,9 @@ function preload(href, options) {
         }),
         resources.preloadsMap.set(key, imageSizes),
         pushLinkImpl(imageSizes.chunks, imageSizes.props));
-      switch (as) {
-        case "font":
-          resources.fontPreloads.add(imageSizes);
-          break;
-        case "style":
-          resources.explicitStylesheetPreloads.add(imageSizes);
-          break;
-        case "script":
-          resources.explicitScriptPreloads.add(imageSizes);
-          break;
-        default:
-          resources.explicitOtherPreloads.add(imageSizes);
-      }
+      "font" === as
+        ? resources.fontPreloads.add(imageSizes)
+        : resources.explicitPreloads.add(imageSizes);
       enqueueFlush(request);
     }
   }
@@ -3655,21 +3645,11 @@ function flushCompletedQueues(request, destination) {
         );
         resources.scripts.forEach(flushResourceInPreamble, destination);
         resources.scripts.clear();
-        resources.explicitStylesheetPreloads.forEach(
+        resources.explicitPreloads.forEach(
           flushResourceInPreamble,
           destination
         );
-        resources.explicitStylesheetPreloads.clear();
-        resources.explicitScriptPreloads.forEach(
-          flushResourceInPreamble,
-          destination
-        );
-        resources.explicitScriptPreloads.clear();
-        resources.explicitOtherPreloads.forEach(
-          flushResourceInPreamble,
-          destination
-        );
-        resources.explicitOtherPreloads.clear();
+        resources.explicitPreloads.clear();
         var preloadChunks = responseState.preloadChunks;
         for (
           _responseState$extern = 0;
@@ -3714,21 +3694,8 @@ function flushCompletedQueues(request, destination) {
     resources$jscomp$0.precedences.forEach(preloadLateStyles, destination);
     resources$jscomp$0.scripts.forEach(flushResourceLate, destination);
     resources$jscomp$0.scripts.clear();
-    resources$jscomp$0.explicitStylesheetPreloads.forEach(
-      flushResourceLate,
-      destination
-    );
-    resources$jscomp$0.explicitStylesheetPreloads.clear();
-    resources$jscomp$0.explicitScriptPreloads.forEach(
-      flushResourceLate,
-      destination
-    );
-    resources$jscomp$0.explicitScriptPreloads.clear();
-    resources$jscomp$0.explicitOtherPreloads.forEach(
-      flushResourceLate,
-      destination
-    );
-    resources$jscomp$0.explicitOtherPreloads.clear();
+    resources$jscomp$0.explicitPreloads.forEach(flushResourceLate, destination);
+    resources$jscomp$0.explicitPreloads.clear();
     var preloadChunks$jscomp$0 = responseState$jscomp$0.preloadChunks;
     for (
       completedRootSegment = 0;
@@ -3955,9 +3922,7 @@ function renderToStringImpl(
       stylePrecedences: new Map(),
       bootstrapScripts: new Set(),
       scripts: new Set(),
-      explicitStylesheetPreloads: new Set(),
-      explicitScriptPreloads: new Set(),
-      explicitOtherPreloads: new Set(),
+      explicitPreloads: new Set(),
       boundaryResources: null
     };
   children = createRequest(
@@ -4019,4 +3984,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-e05f0ecc";
+exports.version = "18.3.0-www-classic-540364ea";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -1876,19 +1876,9 @@ function preload(href, options) {
         }),
         resources.preloadsMap.set(key, imageSizes),
         pushLinkImpl(imageSizes.chunks, imageSizes.props));
-      switch (as) {
-        case "font":
-          resources.fontPreloads.add(imageSizes);
-          break;
-        case "style":
-          resources.explicitStylesheetPreloads.add(imageSizes);
-          break;
-        case "script":
-          resources.explicitScriptPreloads.add(imageSizes);
-          break;
-        default:
-          resources.explicitOtherPreloads.add(imageSizes);
-      }
+      "font" === as
+        ? resources.fontPreloads.add(imageSizes)
+        : resources.explicitPreloads.add(imageSizes);
       enqueueFlush(request);
     }
   }
@@ -3553,21 +3543,11 @@ function flushCompletedQueues(request, destination) {
         );
         resources.scripts.forEach(flushResourceInPreamble, destination);
         resources.scripts.clear();
-        resources.explicitStylesheetPreloads.forEach(
+        resources.explicitPreloads.forEach(
           flushResourceInPreamble,
           destination
         );
-        resources.explicitStylesheetPreloads.clear();
-        resources.explicitScriptPreloads.forEach(
-          flushResourceInPreamble,
-          destination
-        );
-        resources.explicitScriptPreloads.clear();
-        resources.explicitOtherPreloads.forEach(
-          flushResourceInPreamble,
-          destination
-        );
-        resources.explicitOtherPreloads.clear();
+        resources.explicitPreloads.clear();
         var preloadChunks = responseState.preloadChunks;
         for (
           _responseState$extern = 0;
@@ -3612,21 +3592,8 @@ function flushCompletedQueues(request, destination) {
     resources$jscomp$0.precedences.forEach(preloadLateStyles, destination);
     resources$jscomp$0.scripts.forEach(flushResourceLate, destination);
     resources$jscomp$0.scripts.clear();
-    resources$jscomp$0.explicitStylesheetPreloads.forEach(
-      flushResourceLate,
-      destination
-    );
-    resources$jscomp$0.explicitStylesheetPreloads.clear();
-    resources$jscomp$0.explicitScriptPreloads.forEach(
-      flushResourceLate,
-      destination
-    );
-    resources$jscomp$0.explicitScriptPreloads.clear();
-    resources$jscomp$0.explicitOtherPreloads.forEach(
-      flushResourceLate,
-      destination
-    );
-    resources$jscomp$0.explicitOtherPreloads.clear();
+    resources$jscomp$0.explicitPreloads.forEach(flushResourceLate, destination);
+    resources$jscomp$0.explicitPreloads.clear();
     var preloadChunks$jscomp$0 = responseState$jscomp$0.preloadChunks;
     for (
       completedRootSegment = 0;
@@ -3853,9 +3820,7 @@ function renderToStringImpl(
       stylePrecedences: new Map(),
       bootstrapScripts: new Set(),
       scripts: new Set(),
-      explicitStylesheetPreloads: new Set(),
-      explicitScriptPreloads: new Set(),
-      explicitOtherPreloads: new Set(),
+      explicitPreloads: new Set(),
       boundaryResources: null
     };
   children = createRequest(
@@ -3917,4 +3882,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-432efc32";
+exports.version = "18.3.0-www-modern-c79c104a";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		9edf470d6ed1f3ac12c23a248e64293f367c1797
		cb3404a0ccd8b5edf5d2b90bd844742090e38f42