[Fiber] use srcset to trigger load even on img mount (#30351)

In #23316 we fixed a bug where onload events were missed if they happened too early. This update adds support for srcset to retrigger the load event. Firefox unfortunately does not trigger a load even when you assign srcset so this won't work in every browser when you use srcset without src however it does close a gap in chrome at least DiffTrain build for [7f217d1](7f217d1)
facebook · Jul 25, 2024 · e1ad904 · e1ad904
1 parent ecd0adf
commit e1ad904
Show file tree

Hide file tree

Showing 34 changed files with 110 additions and 90 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-e8df0cf9f7c7f641192f19841db9bf34b6a0abf7
+7f217d1d88d3b628d97a714ce1573526080af47d
diff --git a/compiled/facebook-www/REVISION_TRANSFORMS b/compiled/facebook-www/REVISION_TRANSFORMS
@@ -1 +1 @@
-e8df0cf9f7c7f641192f19841db9bf34b6a0abf7
+7f217d1d88d3b628d97a714ce1573526080af47d
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
@@ -1993,7 +1993,7 @@ __DEV__ &&
     exports.useTransition = function () {
       return resolveDispatcher().useTransition();
     };
-    exports.version = "19.0.0-www-classic-e8df0cf9-20240725";
+    exports.version = "19.0.0-www-classic-7f217d1d-20240725";
     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
       "function" ===
         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
@@ -1973,7 +1973,7 @@ __DEV__ &&
     exports.useTransition = function () {
       return resolveDispatcher().useTransition();
     };
-    exports.version = "19.0.0-www-modern-e8df0cf9-20240725";
+    exports.version = "19.0.0-www-modern-7f217d1d-20240725";
     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
       "function" ===
         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js
@@ -662,4 +662,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-classic-e8df0cf9-20240725";
+exports.version = "19.0.0-www-classic-7f217d1d-20240725";
diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
@@ -662,4 +662,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-modern-e8df0cf9-20240725";
+exports.version = "19.0.0-www-modern-7f217d1d-20240725";
diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js
@@ -666,7 +666,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-classic-e8df0cf9-20240725";
+exports.version = "19.0.0-www-classic-7f217d1d-20240725";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js
@@ -666,7 +666,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-modern-e8df0cf9-20240725";
+exports.version = "19.0.0-www-modern-7f217d1d-20240725";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -17073,14 +17073,14 @@ __DEV__ &&
         scheduleRoot: scheduleRoot,
         setRefreshHandler: setRefreshHandler,
         getCurrentFiber: getCurrentFiberForDevTools,
-        reconcilerVersion: "19.0.0-www-classic-e8df0cf9-20240725"
+        reconcilerVersion: "19.0.0-www-classic-7f217d1d-20240725"
       });
     })({
       findFiberByHostInstance: function () {
         return null;
       },
       bundleType: 1,
-      version: "19.0.0-www-classic-e8df0cf9-20240725",
+      version: "19.0.0-www-classic-7f217d1d-20240725",
       rendererPackageName: "react-art"
     });
     var ClippingRectangle = TYPES.CLIPPING_RECTANGLE,

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -16481,14 +16481,14 @@ __DEV__ &&
         scheduleRoot: scheduleRoot,
         setRefreshHandler: setRefreshHandler,
         getCurrentFiber: getCurrentFiberForDevTools,
-        reconcilerVersion: "19.0.0-www-modern-e8df0cf9-20240725"
+        reconcilerVersion: "19.0.0-www-modern-7f217d1d-20240725"
       });
     })({
       findFiberByHostInstance: function () {
         return null;
       },
       bundleType: 1,
-      version: "19.0.0-www-modern-e8df0cf9-20240725",
+      version: "19.0.0-www-modern-7f217d1d-20240725",
       rendererPackageName: "react-art"
     });
     var ClippingRectangle = TYPES.CLIPPING_RECTANGLE,

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -10761,7 +10761,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "19.0.0-www-classic-e8df0cf9-20240725",
+    version: "19.0.0-www-classic-7f217d1d-20240725",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1375 = {
@@ -10792,7 +10792,7 @@ var internals$jscomp$inline_1375 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-e8df0cf9-20240725"
+  reconcilerVersion: "19.0.0-www-classic-7f217d1d-20240725"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1376 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
@@ -10264,7 +10264,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "19.0.0-www-modern-e8df0cf9-20240725",
+    version: "19.0.0-www-modern-7f217d1d-20240725",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1361 = {
@@ -10295,7 +10295,7 @@ var internals$jscomp$inline_1361 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-e8df0cf9-20240725"
+  reconcilerVersion: "19.0.0-www-modern-7f217d1d-20240725"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1362 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -12887,7 +12887,9 @@ __DEV__ &&
             props.autoFocus && instance.focus();
             break a;
           case "img":
-            props.src && (instance.src = props.src);
+            props.src
+              ? (instance.src = props.src)
+              : props.srcSet && (instance.srcset = props.srcSet);
         }
       } catch (error$18) {
         captureCommitPhaseError(finishedWork, finishedWork.return, error$18);
@@ -27693,11 +27695,11 @@ __DEV__ &&
         : flushSyncErrorInBuildsThatSupportLegacyMode;
     (function () {
       var isomorphicReactPackageVersion = React.version;
-      if ("19.0.0-www-classic-e8df0cf9-20240725" !== isomorphicReactPackageVersion)
+      if ("19.0.0-www-classic-7f217d1d-20240725" !== isomorphicReactPackageVersion)
         throw Error(
           'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n  - react:      ' +
             (isomorphicReactPackageVersion +
-              "\n  - react-dom:  19.0.0-www-classic-e8df0cf9-20240725\nLearn more: https://react.dev/warnings/version-mismatch")
+              "\n  - react-dom:  19.0.0-www-classic-7f217d1d-20240725\nLearn more: https://react.dev/warnings/version-mismatch")
         );
     })();
     ("function" === typeof Map &&
@@ -27763,12 +27765,12 @@ __DEV__ &&
           scheduleRoot: scheduleRoot,
           setRefreshHandler: setRefreshHandler,
           getCurrentFiber: getCurrentFiberForDevTools,
-          reconcilerVersion: "19.0.0-www-classic-e8df0cf9-20240725"
+          reconcilerVersion: "19.0.0-www-classic-7f217d1d-20240725"
         });
       })({
         findFiberByHostInstance: getClosestInstanceFromNode,
         bundleType: 1,
-        version: "19.0.0-www-classic-e8df0cf9-20240725",
+        version: "19.0.0-www-classic-7f217d1d-20240725",
         rendererPackageName: "react-dom"
       }) &&
       canUseDOM &&
@@ -28404,7 +28406,7 @@ __DEV__ &&
     exports.useFormStatus = function () {
       return resolveDispatcher().useHostTransitionStatus();
     };
-    exports.version = "19.0.0-www-classic-e8df0cf9-20240725";
+    exports.version = "19.0.0-www-classic-7f217d1d-20240725";
     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
       "function" ===
         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -12485,7 +12485,9 @@ __DEV__ &&
             props.autoFocus && instance.focus();
             break a;
           case "img":
-            props.src && (instance.src = props.src);
+            props.src
+              ? (instance.src = props.src)
+              : props.srcSet && (instance.srcset = props.srcSet);
         }
       } catch (error$18) {
         captureCommitPhaseError(finishedWork, finishedWork.return, error$18);
@@ -26795,11 +26797,11 @@ __DEV__ &&
       return_targetInst = null;
     (function () {
       var isomorphicReactPackageVersion = React.version;
-      if ("19.0.0-www-modern-e8df0cf9-20240725" !== isomorphicReactPackageVersion)
+      if ("19.0.0-www-modern-7f217d1d-20240725" !== isomorphicReactPackageVersion)
         throw Error(
           'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n  - react:      ' +
             (isomorphicReactPackageVersion +
-              "\n  - react-dom:  19.0.0-www-modern-e8df0cf9-20240725\nLearn more: https://react.dev/warnings/version-mismatch")
+              "\n  - react-dom:  19.0.0-www-modern-7f217d1d-20240725\nLearn more: https://react.dev/warnings/version-mismatch")
         );
     })();
     ("function" === typeof Map &&
@@ -26864,12 +26866,12 @@ __DEV__ &&
           scheduleRoot: scheduleRoot,
           setRefreshHandler: setRefreshHandler,
           getCurrentFiber: getCurrentFiberForDevTools,
-          reconcilerVersion: "19.0.0-www-modern-e8df0cf9-20240725"
+          reconcilerVersion: "19.0.0-www-modern-7f217d1d-20240725"
         });
       })({
         findFiberByHostInstance: getClosestInstanceFromNode,
         bundleType: 1,
-        version: "19.0.0-www-modern-e8df0cf9-20240725",
+        version: "19.0.0-www-modern-7f217d1d-20240725",
         rendererPackageName: "react-dom"
       }) &&
       canUseDOM &&
@@ -27457,7 +27459,7 @@ __DEV__ &&
     exports.useFormStatus = function () {
       return resolveDispatcher().useHostTransitionStatus();
     };
-    exports.version = "19.0.0-www-modern-e8df0cf9-20240725";
+    exports.version = "19.0.0-www-modern-7f217d1d-20240725";
     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
       "function" ===
         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -8790,7 +8790,9 @@ function commitHostComponentMount(finishedWork) {
         props.autoFocus && instance.focus();
         break a;
       case "img":
-        props.src && (instance.src = props.src);
+        props.src
+          ? (instance.src = props.src)
+          : props.srcSet && (instance.srcset = props.srcSet);
     }
   } catch (error) {
     captureCommitPhaseError(finishedWork, finishedWork.return, error);
@@ -17233,14 +17235,14 @@ function getCrossOriginStringAs(as, input) {
 }
 var isomorphicReactPackageVersion$jscomp$inline_1772 = React.version;
 if (
-  "19.0.0-www-classic-e8df0cf9-20240725" !==
+  "19.0.0-www-classic-7f217d1d-20240725" !==
   isomorphicReactPackageVersion$jscomp$inline_1772
 )
   throw Error(
     formatProdErrorMessage(
       527,
       isomorphicReactPackageVersion$jscomp$inline_1772,
-      "19.0.0-www-classic-e8df0cf9-20240725"
+      "19.0.0-www-classic-7f217d1d-20240725"
     )
   );
 function flushSyncFromReconciler(fn) {
@@ -17286,7 +17288,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1779 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-classic-e8df0cf9-20240725",
+  version: "19.0.0-www-classic-7f217d1d-20240725",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2211 = {
@@ -17316,7 +17318,7 @@ var internals$jscomp$inline_2211 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-e8df0cf9-20240725"
+  reconcilerVersion: "19.0.0-www-classic-7f217d1d-20240725"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2212 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17772,4 +17774,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-classic-e8df0cf9-20240725";
+exports.version = "19.0.0-www-classic-7f217d1d-20240725";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -8362,7 +8362,9 @@ function commitHostComponentMount(finishedWork) {
         props.autoFocus && instance.focus();
         break a;
       case "img":
-        props.src && (instance.src = props.src);
+        props.src
+          ? (instance.src = props.src)
+          : props.srcSet && (instance.srcset = props.srcSet);
     }
   } catch (error) {
     captureCommitPhaseError(finishedWork, finishedWork.return, error);
@@ -16598,14 +16600,14 @@ function getCrossOriginStringAs(as, input) {
 }
 var isomorphicReactPackageVersion$jscomp$inline_1743 = React.version;
 if (
-  "19.0.0-www-modern-e8df0cf9-20240725" !==
+  "19.0.0-www-modern-7f217d1d-20240725" !==
   isomorphicReactPackageVersion$jscomp$inline_1743
 )
   throw Error(
     formatProdErrorMessage(
       527,
       isomorphicReactPackageVersion$jscomp$inline_1743,
-      "19.0.0-www-modern-e8df0cf9-20240725"
+      "19.0.0-www-modern-7f217d1d-20240725"
     )
   );
 Internals.findDOMNode = function (componentOrElement) {
@@ -16624,7 +16626,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1745 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-modern-e8df0cf9-20240725",
+  version: "19.0.0-www-modern-7f217d1d-20240725",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2202 = {
@@ -16654,7 +16656,7 @@ var internals$jscomp$inline_2202 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-e8df0cf9-20240725"
+  reconcilerVersion: "19.0.0-www-modern-7f217d1d-20240725"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2203 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17017,4 +17019,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-modern-e8df0cf9-20240725";
+exports.version = "19.0.0-www-modern-7f217d1d-20240725";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -9222,7 +9222,9 @@ function commitHostComponentMount(finishedWork) {
         props.autoFocus && instance.focus();
         break a;
       case "img":
-        props.src && (instance.src = props.src);
+        props.src
+          ? (instance.src = props.src)
+          : props.srcSet && (instance.srcset = props.srcSet);
     }
   } catch (error) {
     captureCommitPhaseError(finishedWork, finishedWork.return, error);
@@ -18008,14 +18010,14 @@ function getCrossOriginStringAs(as, input) {
 }
 var isomorphicReactPackageVersion$jscomp$inline_1860 = React.version;
 if (
-  "19.0.0-www-classic-e8df0cf9-20240725" !==
+  "19.0.0-www-classic-7f217d1d-20240725" !==
   isomorphicReactPackageVersion$jscomp$inline_1860
 )
   throw Error(
     formatProdErrorMessage(
       527,
       isomorphicReactPackageVersion$jscomp$inline_1860,
-      "19.0.0-www-classic-e8df0cf9-20240725"
+      "19.0.0-www-classic-7f217d1d-20240725"
     )
   );
 function flushSyncFromReconciler(fn) {
@@ -18061,7 +18063,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1867 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-classic-e8df0cf9-20240725",
+  version: "19.0.0-www-classic-7f217d1d-20240725",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -18105,7 +18107,7 @@ var devToolsConfig$jscomp$inline_1867 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-e8df0cf9-20240725"
+  reconcilerVersion: "19.0.0-www-classic-7f217d1d-20240725"
 });
 function ReactDOMRoot(internalRoot) {
   this._internalRoot = internalRoot;
@@ -18548,7 +18550,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-classic-e8df0cf9-20240725";
+exports.version = "19.0.0-www-classic-7f217d1d-20240725";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&