Update React ot latest canary (#53881)

Updated React from cb3404a0c to f359f9b41. ### React upstream changes - facebook/react#27191 - facebook/react#27209 - facebook/react#27199 - facebook/react#27218 - facebook/react#27217 - facebook/react#27212
vercel · Aug 12, 2023 · 2b38118 · 2b38118
1 parent 4056994
commit 2b38118
Show file tree

Hide file tree

Showing 52 changed files with 3,148 additions and 2,265 deletions.
diff --git a/package.json b/package.json
@@ -189,14 +189,14 @@
     "random-seed": "0.3.0",
     "react": "18.2.0",
     "react-17": "npm:[email protected]",
-    "react-builtin": "npm:[email protected]cb3404a0c-20230807",
+    "react-builtin": "npm:[email protected]1a001dac6-20230812",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:[email protected]",
-    "react-dom-builtin": "npm:[email protected]cb3404a0c-20230807",
-    "react-dom-experimental-builtin": "npm:[email protected]cb3404a0c-20230807",
-    "react-experimental-builtin": "npm:[email protected]cb3404a0c-20230807",
-    "react-server-dom-webpack": "18.3.0-canary-cb3404a0c-20230807",
-    "react-server-dom-webpack-experimental": "npm:[email protected]cb3404a0c-20230807",
+    "react-dom-builtin": "npm:[email protected]1a001dac6-20230812",
+    "react-dom-experimental-builtin": "npm:[email protected]1a001dac6-20230812",
+    "react-experimental-builtin": "npm:[email protected]1a001dac6-20230812",
+    "react-server-dom-webpack": "18.3.0-canary-1a001dac6-20230812",
+    "react-server-dom-webpack-experimental": "npm:[email protected]1a001dac6-20230812",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -206,8 +206,8 @@
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
     "satori": "0.10.1",
-    "scheduler-builtin": "npm:[email protected]cb3404a0c-20230807",
-    "scheduler-experimental-builtin": "npm:[email protected]cb3404a0c-20230807",
+    "scheduler-builtin": "npm:[email protected]1a001dac6-20230812",
+    "scheduler-experimental-builtin": "npm:[email protected]1a001dac6-20230812",
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",
     "semver": "7.3.7",

diff --git a/...xt/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js b/...xt/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js
@@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") {
 var React = require("next/dist/compiled/react-experimental");
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '18.3.0-experimental-cb3404a0c-20230807';
+var ReactVersion = '18.3.0-experimental-1a001dac6-20230812';
 
 var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
@@ -3693,6 +3693,75 @@ function pushStyleContents(target, props) {
   return;
 }
 
+function getImagePreloadKey(href, imageSrcSet, imageSizes) {
+  var uniquePart = '';
+
+  if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
+    uniquePart += '[' + imageSrcSet + ']';
+
+    if (typeof imageSizes === 'string') {
+      uniquePart += '[' + imageSizes + ']';
+    }
+  } else {
+    uniquePart += '[][]' + href;
+  }
+
+  return getResourceKey('image', uniquePart);
+}
+
+function pushImg(target, props, resources) {
+  var src = props.src,
+      srcSet = props.srcSet;
+
+  if (props.loading !== 'lazy' && (typeof src === 'string' || typeof srcSet === 'string') && props.fetchPriority !== 'low' && // We exclude data URIs in src and srcSet since these should not be preloaded
+  !(typeof src === 'string' && src[4] === ':' && (src[0] === 'd' || src[0] === 'D') && (src[1] === 'a' || src[1] === 'A') && (src[2] === 't' || src[2] === 'T') && (src[3] === 'a' || src[3] === 'A')) && !(typeof srcSet === 'string' && srcSet[4] === ':' && (srcSet[0] === 'd' || srcSet[0] === 'D') && (srcSet[1] === 'a' || srcSet[1] === 'A') && (srcSet[2] === 't' || srcSet[2] === 'T') && (srcSet[3] === 'a' || srcSet[3] === 'A'))) {
+    // We have a suspensey image and ought to preload it to optimize the loading of display blocking
+    // resources.
+    var sizes = props.sizes;
+    var key = getImagePreloadKey(src, srcSet, sizes);
+    var resource = resources.preloadsMap.get(key);
+
+    if (!resource) {
+      resource = {
+        type: 'preload',
+        chunks: [],
+        state: NoState,
+        props: {
+          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
+        }
+      };
+      resources.preloadsMap.set(key, resource);
+
+      {
+        markAsRenderedResourceDEV(resource, props);
+      }
+
+      pushLinkImpl(resource.chunks, resource.props);
+    }
+
+    if (props.fetchPriority === 'high' || resources.highImagePreloads.size < 10) {
+      resources.highImagePreloads.add(resource);
+    } else {
+      resources.bulkPreloads.add(resource);
+    }
+  }
+
+  return pushSelfClosing(target, props, 'img');
+}
+
 function pushSelfClosing(target, props, tag) {
   target.push(startChunkForTag(tag));
 
@@ -4263,6 +4332,11 @@ function pushStartInstance(target, type, props, resources, responseState, format
       {
         return pushStartPreformattedElement(target, props, type);
       }
+
+    case 'img':
+      {
+        return pushImg(target, props, resources) ;
+      }
     // Omitted close tags
 
     case 'base':
@@ -4271,7 +4345,6 @@ function pushStartInstance(target, type, props, resources, responseState, format
     case 'col':
     case 'embed':
     case 'hr':
-    case 'img':
     case 'keygen':
     case 'param':
     case 'source':
@@ -5160,14 +5233,16 @@ function writePreamble(destination, resources, responseState, willFlushAllSegmen
 
   preconnectChunks.length = 0;
   resources.fontPreloads.forEach(flushResourceInPreamble, destination);
-  resources.fontPreloads.clear(); // Flush unblocked stylesheets by precedence
+  resources.fontPreloads.clear();
+  resources.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  resources.highImagePreloads.clear(); // Flush unblocked stylesheets by precedence
 
   resources.precedences.forEach(flushAllStylesInPreamble, destination);
   resources.bootstrapScripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.clear();
-  resources.explicitPreloads.forEach(flushResourceInPreamble, destination);
-  resources.explicitPreloads.clear(); // Write embedding preloadChunks
+  resources.bulkPreloads.forEach(flushResourceInPreamble, destination);
+  resources.bulkPreloads.clear(); // Write embedding preloadChunks
 
   var preloadChunks = responseState.preloadChunks;
 
@@ -5215,16 +5290,18 @@ function writeHoistables(destination, resources, responseState) {
 
   preconnectChunks.length = 0;
   resources.fontPreloads.forEach(flushResourceLate, destination);
-  resources.fontPreloads.clear(); // Preload any stylesheets. these will emit in a render instruction that follows this
+  resources.fontPreloads.clear();
+  resources.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  resources.highImagePreloads.clear(); // Preload any stylesheets. these will emit in a render instruction that follows this
   // but we want to kick off preloading as soon as possible
 
   resources.precedences.forEach(preloadLateStyles, destination); // bootstrap scripts should flush above script priority but these can only flush in the preamble
   // so we elide the code here for performance
 
   resources.scripts.forEach(flushResourceLate, destination);
   resources.scripts.clear();
-  resources.explicitPreloads.forEach(flushResourceLate, destination);
-  resources.explicitPreloads.clear(); // Write embedding preloadChunks
+  resources.bulkPreloads.forEach(flushResourceLate, destination);
+  resources.bulkPreloads.clear(); // Write embedding preloadChunks
 
   var preloadChunks = responseState.preloadChunks;
 
@@ -5641,12 +5718,13 @@ function createResources() {
     // cleared on flush
     preconnects: new Set(),
     fontPreloads: new Set(),
+    highImagePreloads: new Set(),
     // usedImagePreloads: new Set(),
     precedences: new Map(),
     stylePrecedences: new Map(),
     bootstrapScripts: new Set(),
     scripts: new Set(),
-    explicitPreloads: new Set(),
+    bulkPreloads: new Set(),
     // like a module global for currently rendering boundary
     boundaryResources: null
   };
@@ -5803,19 +5881,7 @@ function preload(href, options) {
       // by varying the href. this is an edge case but it is the most correct behavior.
       var imageSrcSet = options.imageSrcSet,
           imageSizes = options.imageSizes;
-      var uniquePart = '';
-
-      if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
-        uniquePart += '[' + imageSrcSet + ']';
-
-        if (typeof imageSizes === 'string') {
-          uniquePart += '[' + imageSizes + ']';
-        }
-      } else {
-        uniquePart += '[][]' + href;
-      }
-
-      key = getResourceKey(as, uniquePart);
+      key = getImagePreloadKey(href, imageSrcSet, imageSizes);
     } else {
       key = getResourceKey(as, href);
     }
@@ -5874,8 +5940,10 @@ function preload(href, options) {
 
     if (as === 'font') {
       resources.fontPreloads.add(resource);
+    } else if (as === 'image' && options.fetchPriority === 'high') {
+      resources.highImagePreloads.add(resource);
     } else {
-      resources.explicitPreloads.add(resource);
+      resources.bulkPreloads.add(resource);
     }
 
     flushResources(request);