diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index c55bd963ee..15937f744e 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -86acc10f2596e1a6fe2fd57a5b325de85175800b +fc929cf4ead35f99c4e9612a95e8a0bb8f5df25d diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index f0e9c088cb..af94e0849a 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-modern-5fb44b73"; +var ReactVersion = "18.3.0-www-modern-58022814"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 7aad9b2206..022460b2c5 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-modern-520e6c62"; +var ReactVersion = "18.3.0-www-modern-c8bee3bc"; var LegacyRoot = 0; var ConcurrentRoot = 1; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index 9b445d4d8e..a1ab96c5aa 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -9858,7 +9858,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-modern-e8821afc", + version: "18.3.0-www-modern-12c03e2f", rendererPackageName: "react-art" }; var internals$jscomp$inline_1298 = { @@ -9889,7 +9889,7 @@ var internals$jscomp$inline_1298 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-e8821afc" + reconcilerVersion: "18.3.0-www-modern-12c03e2f" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1299 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index c59f788a8a..90ac281397 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -34178,7 +34178,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-3dccae4a"; +var ReactVersion = "18.3.0-www-classic-00cc677f"; function createPortal$1( children, @@ -42068,65 +42068,6 @@ function propNamesListJoin(list, combinator) { } } -function validatePreloadArguments(href, options) { - { - if (!href || typeof href !== "string") { - var typeOfArg = getValueDescriptorExpectingObjectForWarning(href); - - error( - "ReactDOM.preload() expected the first argument to be a string representing an href but found %s instead.", - typeOfArg - ); - } else if (typeof options !== "object" || options === null) { - var _typeOfArg = getValueDescriptorExpectingObjectForWarning(options); - - error( - 'ReactDOM.preload() expected the second argument to be an options argument containing at least an "as" property' + - ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".', - _typeOfArg, - href - ); - } else { - var as = options.as; - - switch (as) { - // Font specific validation of options - case "font": { - if (options.crossOrigin === "use-credentials") { - error( - 'ReactDOM.preload() was called with an "as" type of "font" and with a "crossOrigin" option of "use-credentials".' + - ' Fonts preloading must use crossOrigin "anonymous" to be functional. Please update your font preload to omit' + - ' the crossOrigin option or change it to any other value than "use-credentials" (Browsers default all other values' + - ' to anonymous mode). The href for the preload call where this warning originated is "%s"', - href - ); - } - - break; - } - - case "script": - case "style": { - break; - } - // We have an invalid as type and need to warn - - default: { - var typeOfAs = getValueDescriptorExpectingEnumForWarning(as); - - error( - 'ReactDOM.preload() expected a valid "as" type in the options (second) argument but found %s instead.' + - " Please use one of the following valid values instead: %s. The href for the preload call where this" + - ' warning originated is "%s".', - typeOfAs, - '"style", "font", or "script"', - href - ); - } - } - } - } -} function validatePreinitArguments(href, options) { { if (!href || typeof href !== "string") { @@ -42137,12 +42078,12 @@ function validatePreinitArguments(href, options) { typeOfArg ); } else if (typeof options !== "object" || options === null) { - var _typeOfArg2 = getValueDescriptorExpectingObjectForWarning(options); + var _typeOfArg = getValueDescriptorExpectingObjectForWarning(options); error( 'ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' + ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".', - _typeOfArg2, + _typeOfArg, href ); } else { @@ -43755,7 +43696,35 @@ function preconnect$1(href, options) { function preload$1(href, options) { { - validatePreloadArguments(href, options); + // TODO move this to ReactDOMFloat and expose a stricter function interface or possibly + // typed functions (preloadImage, preloadStyle, ...) + var encountered = ""; + + if (typeof href !== "string" || !href) { + encountered += + "The `href` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(href) + + "."; + } + + if (options == null || typeof options !== "object") { + encountered += + "The `options` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(options) + + "."; + } else if (typeof options.as !== "string" || !options.as) { + encountered += + "The `as` option encountered was " + + getValueDescriptorExpectingObjectForWarning(options.as) + + "."; + } + + if (encountered) { + error( + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `` tag. %s', + encountered + ); + } } var ownerDocument = getDocumentForImperativeFloatMethods(); @@ -43765,13 +43734,42 @@ function preload$1(href, options) { href && typeof options === "object" && options !== null && + typeof options.as === "string" && + options.as && ownerDocument ) { var as = options.as; - var limitedEscapedHref = - escapeSelectorAttributeValueInsideDoubleQuotes(href); var preloadSelector = - 'link[rel="preload"][as="' + as + '"][href="' + limitedEscapedHref + '"]'; // Some preloads are keyed under their selector. This happens when the preload is for + 'link[rel="preload"][as="' + + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + + if (as === "image") { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + + if (typeof imageSrcSet === "string" && imageSrcSet !== "") { + preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'; + + if (typeof imageSizes === "string") { + preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]'; + } + } else { + preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'; + } + } else { + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + } // Some preloads are keyed under their selector. This happens when the preload is for // an arbitrary type. Other preloads are keyed under the resource key they represent a preload for. // Here we figure out which key to use to determine if we have a preload already. @@ -43817,14 +43815,20 @@ function preload$1(href, options) { function preloadPropsFromPreloadOptions(href, as, options) { return { - href: href, rel: "preload", as: as, + // 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: as === "image" && options.imageSrcSet ? undefined : href, crossOrigin: as === "font" ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }; } diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 318dd4b092..1dacb0bfd7 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -34023,7 +34023,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-520e6c62"; +var ReactVersion = "18.3.0-www-modern-c8bee3bc"; function createPortal$1( children, @@ -42578,65 +42578,6 @@ function propNamesListJoin(list, combinator) { } } -function validatePreloadArguments(href, options) { - { - if (!href || typeof href !== "string") { - var typeOfArg = getValueDescriptorExpectingObjectForWarning(href); - - error( - "ReactDOM.preload() expected the first argument to be a string representing an href but found %s instead.", - typeOfArg - ); - } else if (typeof options !== "object" || options === null) { - var _typeOfArg = getValueDescriptorExpectingObjectForWarning(options); - - error( - 'ReactDOM.preload() expected the second argument to be an options argument containing at least an "as" property' + - ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".', - _typeOfArg, - href - ); - } else { - var as = options.as; - - switch (as) { - // Font specific validation of options - case "font": { - if (options.crossOrigin === "use-credentials") { - error( - 'ReactDOM.preload() was called with an "as" type of "font" and with a "crossOrigin" option of "use-credentials".' + - ' Fonts preloading must use crossOrigin "anonymous" to be functional. Please update your font preload to omit' + - ' the crossOrigin option or change it to any other value than "use-credentials" (Browsers default all other values' + - ' to anonymous mode). The href for the preload call where this warning originated is "%s"', - href - ); - } - - break; - } - - case "script": - case "style": { - break; - } - // We have an invalid as type and need to warn - - default: { - var typeOfAs = getValueDescriptorExpectingEnumForWarning(as); - - error( - 'ReactDOM.preload() expected a valid "as" type in the options (second) argument but found %s instead.' + - " Please use one of the following valid values instead: %s. The href for the preload call where this" + - ' warning originated is "%s".', - typeOfAs, - '"style", "font", or "script"', - href - ); - } - } - } - } -} function validatePreinitArguments(href, options) { { if (!href || typeof href !== "string") { @@ -42647,12 +42588,12 @@ function validatePreinitArguments(href, options) { typeOfArg ); } else if (typeof options !== "object" || options === null) { - var _typeOfArg2 = getValueDescriptorExpectingObjectForWarning(options); + var _typeOfArg = getValueDescriptorExpectingObjectForWarning(options); error( 'ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' + ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".', - _typeOfArg2, + _typeOfArg, href ); } else { @@ -44265,7 +44206,35 @@ function preconnect$1(href, options) { function preload$1(href, options) { { - validatePreloadArguments(href, options); + // TODO move this to ReactDOMFloat and expose a stricter function interface or possibly + // typed functions (preloadImage, preloadStyle, ...) + var encountered = ""; + + if (typeof href !== "string" || !href) { + encountered += + "The `href` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(href) + + "."; + } + + if (options == null || typeof options !== "object") { + encountered += + "The `options` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(options) + + "."; + } else if (typeof options.as !== "string" || !options.as) { + encountered += + "The `as` option encountered was " + + getValueDescriptorExpectingObjectForWarning(options.as) + + "."; + } + + if (encountered) { + error( + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `` tag. %s', + encountered + ); + } } var ownerDocument = getDocumentForImperativeFloatMethods(); @@ -44275,13 +44244,42 @@ function preload$1(href, options) { href && typeof options === "object" && options !== null && + typeof options.as === "string" && + options.as && ownerDocument ) { var as = options.as; - var limitedEscapedHref = - escapeSelectorAttributeValueInsideDoubleQuotes(href); var preloadSelector = - 'link[rel="preload"][as="' + as + '"][href="' + limitedEscapedHref + '"]'; // Some preloads are keyed under their selector. This happens when the preload is for + 'link[rel="preload"][as="' + + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + + if (as === "image") { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + + if (typeof imageSrcSet === "string" && imageSrcSet !== "") { + preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'; + + if (typeof imageSizes === "string") { + preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]'; + } + } else { + preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'; + } + } else { + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + } // Some preloads are keyed under their selector. This happens when the preload is for // an arbitrary type. Other preloads are keyed under the resource key they represent a preload for. // Here we figure out which key to use to determine if we have a preload already. @@ -44327,14 +44325,20 @@ function preload$1(href, options) { function preloadPropsFromPreloadOptions(href, as, options) { return { - href: href, rel: "preload", as: as, + // 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: as === "image" && options.imageSrcSet ? undefined : href, crossOrigin: as === "font" ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }; } diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index b0d4984969..e982afea7c 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -15278,40 +15278,64 @@ function preload$1(href, options) { href && "object" === typeof options && null !== options && + "string" === typeof options.as && + options.as && ownerDocument ) { var as = options.as, - limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href), - key = (limitedEscapedHref = + preloadSelector = 'link[rel="preload"][as="' + - as + - '"][href="' + - limitedEscapedHref + - '"]'); + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + if ("image" === as) { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + "string" === typeof imageSrcSet && "" !== imageSrcSet + ? ((preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'), + "string" === typeof imageSizes && + (preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]')) + : (preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'); + } else + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + imageSrcSet = preloadSelector; switch (as) { case "style": - key = getStyleKey(href); + imageSrcSet = getStyleKey(href); break; case "script": - key = getScriptKey(href); + imageSrcSet = getScriptKey(href); } - preloadPropsMap.has(key) || + preloadPropsMap.has(imageSrcSet) || ((href = { - href: href, rel: "preload", as: as, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }), - preloadPropsMap.set(key, href), - null !== ownerDocument.querySelector(limitedEscapedHref) || + preloadPropsMap.set(imageSrcSet, href), + null !== ownerDocument.querySelector(preloadSelector) || ("style" === as && - ownerDocument.querySelector(getStylesheetSelectorFromKey(key))) || + ownerDocument.querySelector( + getStylesheetSelectorFromKey(imageSrcSet) + )) || ("script" === as && - ownerDocument.querySelector("script[async]" + key)) || + ownerDocument.querySelector("script[async]" + imageSrcSet)) || ((as = ownerDocument.createElement("link")), setInitialProperties(as, "link", href), markNodeAsHoistable(as), @@ -16644,7 +16668,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1815 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-c1034a44", + version: "18.3.0-www-classic-ad09e4c6", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2184 = { @@ -16674,7 +16698,7 @@ var internals$jscomp$inline_2184 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-c1034a44" + reconcilerVersion: "18.3.0-www-classic-ad09e4c6" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2185 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16917,4 +16941,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-c1034a44"; +exports.version = "18.3.0-www-classic-ad09e4c6"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 5dea352fd7..1faa0c5efd 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -15508,40 +15508,64 @@ function preload$1(href, options) { href && "object" === typeof options && null !== options && + "string" === typeof options.as && + options.as && ownerDocument ) { var as = options.as, - limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href), - key = (limitedEscapedHref = + preloadSelector = 'link[rel="preload"][as="' + - as + - '"][href="' + - limitedEscapedHref + - '"]'); + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + if ("image" === as) { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + "string" === typeof imageSrcSet && "" !== imageSrcSet + ? ((preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'), + "string" === typeof imageSizes && + (preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]')) + : (preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'); + } else + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + imageSrcSet = preloadSelector; switch (as) { case "style": - key = getStyleKey(href); + imageSrcSet = getStyleKey(href); break; case "script": - key = getScriptKey(href); + imageSrcSet = getScriptKey(href); } - preloadPropsMap.has(key) || + preloadPropsMap.has(imageSrcSet) || ((href = { - href: href, rel: "preload", as: as, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }), - preloadPropsMap.set(key, href), - null !== ownerDocument.querySelector(limitedEscapedHref) || + preloadPropsMap.set(imageSrcSet, href), + null !== ownerDocument.querySelector(preloadSelector) || ("style" === as && - ownerDocument.querySelector(getStylesheetSelectorFromKey(key))) || + ownerDocument.querySelector( + getStylesheetSelectorFromKey(imageSrcSet) + )) || ("script" === as && - ownerDocument.querySelector("script[async]" + key)) || + ownerDocument.querySelector("script[async]" + imageSrcSet)) || ((as = ownerDocument.createElement("link")), setInitialProperties(as, "link", href), markNodeAsHoistable(as), @@ -16173,7 +16197,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1774 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-e8821afc", + version: "18.3.0-www-modern-12c03e2f", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2148 = { @@ -16204,7 +16228,7 @@ var internals$jscomp$inline_2148 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-e8821afc" + reconcilerVersion: "18.3.0-www-modern-12c03e2f" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2149 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16375,4 +16399,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-e8821afc"; +exports.version = "18.3.0-www-modern-12c03e2f"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index fc3239558a..b5aabbbfb6 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -16053,40 +16053,64 @@ function preload$1(href, options) { href && "object" === typeof options && null !== options && + "string" === typeof options.as && + options.as && ownerDocument ) { var as = options.as, - limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href), - key = (limitedEscapedHref = + preloadSelector = 'link[rel="preload"][as="' + - as + - '"][href="' + - limitedEscapedHref + - '"]'); + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + if ("image" === as) { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + "string" === typeof imageSrcSet && "" !== imageSrcSet + ? ((preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'), + "string" === typeof imageSizes && + (preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]')) + : (preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'); + } else + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + imageSrcSet = preloadSelector; switch (as) { case "style": - key = getStyleKey(href); + imageSrcSet = getStyleKey(href); break; case "script": - key = getScriptKey(href); + imageSrcSet = getScriptKey(href); } - preloadPropsMap.has(key) || + preloadPropsMap.has(imageSrcSet) || ((href = { - href: href, rel: "preload", as: as, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }), - preloadPropsMap.set(key, href), - null !== ownerDocument.querySelector(limitedEscapedHref) || + preloadPropsMap.set(imageSrcSet, href), + null !== ownerDocument.querySelector(preloadSelector) || ("style" === as && - ownerDocument.querySelector(getStylesheetSelectorFromKey(key))) || + ownerDocument.querySelector( + getStylesheetSelectorFromKey(imageSrcSet) + )) || ("script" === as && - ownerDocument.querySelector("script[async]" + key)) || + ownerDocument.querySelector("script[async]" + imageSrcSet)) || ((as = ownerDocument.createElement("link")), setInitialProperties(as, "link", href), markNodeAsHoistable(as), @@ -17419,7 +17443,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1900 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-1233fa25", + version: "18.3.0-www-classic-7ccd9d57", rendererPackageName: "react-dom" }; (function (internals) { @@ -17463,7 +17487,7 @@ var devToolsConfig$jscomp$inline_1900 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-1233fa25" + reconcilerVersion: "18.3.0-www-classic-7ccd9d57" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -17693,7 +17717,7 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-1233fa25"; +exports.version = "18.3.0-www-classic-7ccd9d57"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index 84bc0f0cde..92f4d0c706 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -16277,40 +16277,64 @@ function preload$1(href, options) { href && "object" === typeof options && null !== options && + "string" === typeof options.as && + options.as && ownerDocument ) { var as = options.as, - limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href), - key = (limitedEscapedHref = + preloadSelector = 'link[rel="preload"][as="' + - as + - '"][href="' + - limitedEscapedHref + - '"]'); + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + if ("image" === as) { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + "string" === typeof imageSrcSet && "" !== imageSrcSet + ? ((preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'), + "string" === typeof imageSizes && + (preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]')) + : (preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'); + } else + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + imageSrcSet = preloadSelector; switch (as) { case "style": - key = getStyleKey(href); + imageSrcSet = getStyleKey(href); break; case "script": - key = getScriptKey(href); + imageSrcSet = getScriptKey(href); } - preloadPropsMap.has(key) || + preloadPropsMap.has(imageSrcSet) || ((href = { - href: href, rel: "preload", as: as, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }), - preloadPropsMap.set(key, href), - null !== ownerDocument.querySelector(limitedEscapedHref) || + preloadPropsMap.set(imageSrcSet, href), + null !== ownerDocument.querySelector(preloadSelector) || ("style" === as && - ownerDocument.querySelector(getStylesheetSelectorFromKey(key))) || + ownerDocument.querySelector( + getStylesheetSelectorFromKey(imageSrcSet) + )) || ("script" === as && - ownerDocument.querySelector("script[async]" + key)) || + ownerDocument.querySelector("script[async]" + imageSrcSet)) || ((as = ownerDocument.createElement("link")), setInitialProperties(as, "link", href), markNodeAsHoistable(as), @@ -16942,7 +16966,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1859 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-d08e2742", + version: "18.3.0-www-modern-ead8d24c", rendererPackageName: "react-dom" }; (function (internals) { @@ -16987,7 +17011,7 @@ var devToolsConfig$jscomp$inline_1859 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-d08e2742" + reconcilerVersion: "18.3.0-www-modern-ead8d24c" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17145,7 +17169,7 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-d08e2742"; +exports.version = "18.3.0-www-modern-ead8d24c"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js index c4927c227d..f5599078ca 100644 --- 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-4d7a4acb"; +var ReactVersion = "18.3.0-www-classic-0ce6ac3f"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -6997,20 +6997,31 @@ function preload(href, options) { var resources = getResources(request); { + var encountered = ""; + if (typeof href !== "string" || !href) { + encountered += + " The `href` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(href) + + "."; + } + + if (options == null || typeof options !== "object") { + encountered += + " The `options` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(options) + + "."; + } else if (typeof options.as !== "string" || !options.as) { + encountered += + " The `as` option encountered was " + + getValueDescriptorExpectingObjectForWarning(options.as) + + "."; + } + + if (encountered) { error( - "ReactDOM.preload(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.", - getValueDescriptorExpectingObjectForWarning(href) - ); - } else if (options == null || typeof options !== "object") { - error( - "ReactDOM.preload(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preloaded but encountered %s instead.", - getValueDescriptorExpectingEnumForWarning(options) - ); - } else if (typeof options.as !== "string") { - error( - 'ReactDOM.preload(): Expected the `as` property in the `options` argument (second) to contain a string value describing the type of resource to be preloaded but encountered %s instead. Values that are valid in for the `as` attribute of a `` tag are valid here.', - getValueDescriptorExpectingEnumForWarning(options.as) + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `` tag.%s', + encountered ); } } @@ -7020,10 +7031,35 @@ function preload(href, options) { href && typeof options === "object" && options !== null && - typeof options.as === "string" + typeof options.as === "string" && + options.as ) { var as = options.as; - var key = getResourceKey(as, href); + var key; + + if (as === "image") { + // For image preloads the key contains either the imageSrcSet + imageSizes or the href but not + // both. This is to prevent identical calls with the same srcSet and sizes to be duplicated + // 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); + } else { + key = getResourceKey(as, href); + } + var resource = resources.preloadsMap.get(key); { @@ -7517,12 +7553,18 @@ function preloadPropsFromPreloadOptions(href, as, options) { return { rel: "preload", as: as, - href: href, + // 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: as === "image" && options.imageSrcSet ? undefined : href, crossOrigin: as === "font" ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }; } diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index 9989c19a6a..a8af4d688d 100644 --- 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-18f0b486"; +var ReactVersion = "18.3.0-www-modern-0e527f26"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -6997,20 +6997,31 @@ function preload(href, options) { var resources = getResources(request); { + var encountered = ""; + if (typeof href !== "string" || !href) { + encountered += + " The `href` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(href) + + "."; + } + + if (options == null || typeof options !== "object") { + encountered += + " The `options` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(options) + + "."; + } else if (typeof options.as !== "string" || !options.as) { + encountered += + " The `as` option encountered was " + + getValueDescriptorExpectingObjectForWarning(options.as) + + "."; + } + + if (encountered) { error( - "ReactDOM.preload(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.", - getValueDescriptorExpectingObjectForWarning(href) - ); - } else if (options == null || typeof options !== "object") { - error( - "ReactDOM.preload(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preloaded but encountered %s instead.", - getValueDescriptorExpectingEnumForWarning(options) - ); - } else if (typeof options.as !== "string") { - error( - 'ReactDOM.preload(): Expected the `as` property in the `options` argument (second) to contain a string value describing the type of resource to be preloaded but encountered %s instead. Values that are valid in for the `as` attribute of a `` tag are valid here.', - getValueDescriptorExpectingEnumForWarning(options.as) + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `` tag.%s', + encountered ); } } @@ -7020,10 +7031,35 @@ function preload(href, options) { href && typeof options === "object" && options !== null && - typeof options.as === "string" + typeof options.as === "string" && + options.as ) { var as = options.as; - var key = getResourceKey(as, href); + var key; + + if (as === "image") { + // For image preloads the key contains either the imageSrcSet + imageSizes or the href but not + // both. This is to prevent identical calls with the same srcSet and sizes to be duplicated + // 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); + } else { + key = getResourceKey(as, href); + } + var resource = resources.preloadsMap.get(key); { @@ -7517,12 +7553,18 @@ function preloadPropsFromPreloadOptions(href, as, options) { return { rel: "preload", as: as, - href: href, + // 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: as === "image" && options.imageSrcSet ? undefined : href, crossOrigin: as === "font" ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }; } diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js index ee6de96f64..83ae33a476 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.classic.js +++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js @@ -1838,41 +1838,54 @@ function preload(href, options) { href && "object" === typeof options && null !== options && - "string" === typeof options.as + "string" === typeof options.as && + options.as ) { - var as = options.as, - key = "[" + as + "]" + href, - resource = resources.preloadsMap.get(key); - resource || - ((resource = { + var as = options.as; + if ("image" === as) { + var key = options.imageSrcSet; + var imageSizes = options.imageSizes, + uniquePart = ""; + "string" === typeof key && "" !== key + ? ((uniquePart += "[" + key + "]"), + "string" === typeof imageSizes && + (uniquePart += "[" + imageSizes + "]")) + : (uniquePart += "[][]" + href); + key = "[" + as + "]" + uniquePart; + } else key = "[" + as + "]" + href; + imageSizes = resources.preloadsMap.get(key); + imageSizes || + ((imageSizes = { type: "preload", chunks: [], state: 0, props: { rel: "preload", as: as, - href: href, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes } }), - resources.preloadsMap.set(key, resource), - pushLinkImpl(resource.chunks, resource.props)); + resources.preloadsMap.set(key, imageSizes), + pushLinkImpl(imageSizes.chunks, imageSizes.props)); switch (as) { case "font": - resources.fontPreloads.add(resource); + resources.fontPreloads.add(imageSizes); break; case "style": - resources.explicitStylesheetPreloads.add(resource); + resources.explicitStylesheetPreloads.add(imageSizes); break; case "script": - resources.explicitScriptPreloads.add(resource); + resources.explicitScriptPreloads.add(imageSizes); break; default: - resources.explicitOtherPreloads.add(resource); + resources.explicitOtherPreloads.add(imageSizes); } enqueueFlush(request); } @@ -4002,4 +4015,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-99c1dfc7"; +exports.version = "18.3.0-www-classic-be76fb2e"; diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js index 998f96e9f5..199d3907eb 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js @@ -1837,41 +1837,54 @@ function preload(href, options) { href && "object" === typeof options && null !== options && - "string" === typeof options.as + "string" === typeof options.as && + options.as ) { - var as = options.as, - key = "[" + as + "]" + href, - resource = resources.preloadsMap.get(key); - resource || - ((resource = { + var as = options.as; + if ("image" === as) { + var key = options.imageSrcSet; + var imageSizes = options.imageSizes, + uniquePart = ""; + "string" === typeof key && "" !== key + ? ((uniquePart += "[" + key + "]"), + "string" === typeof imageSizes && + (uniquePart += "[" + imageSizes + "]")) + : (uniquePart += "[][]" + href); + key = "[" + as + "]" + uniquePart; + } else key = "[" + as + "]" + href; + imageSizes = resources.preloadsMap.get(key); + imageSizes || + ((imageSizes = { type: "preload", chunks: [], state: 0, props: { rel: "preload", as: as, - href: href, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes } }), - resources.preloadsMap.set(key, resource), - pushLinkImpl(resource.chunks, resource.props)); + resources.preloadsMap.set(key, imageSizes), + pushLinkImpl(imageSizes.chunks, imageSizes.props)); switch (as) { case "font": - resources.fontPreloads.add(resource); + resources.fontPreloads.add(imageSizes); break; case "style": - resources.explicitStylesheetPreloads.add(resource); + resources.explicitStylesheetPreloads.add(imageSizes); break; case "script": - resources.explicitScriptPreloads.add(resource); + resources.explicitScriptPreloads.add(imageSizes); break; default: - resources.explicitOtherPreloads.add(resource); + resources.explicitOtherPreloads.add(imageSizes); } enqueueFlush(request); } @@ -3900,4 +3913,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-7d85fe51"; +exports.version = "18.3.0-www-modern-8fc58e59"; diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js index 49dadb5b4a..c04e66e966 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js @@ -7004,20 +7004,31 @@ function preload(href, options) { var resources = getResources(request); { + var encountered = ""; + if (typeof href !== "string" || !href) { + encountered += + " The `href` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(href) + + "."; + } + + if (options == null || typeof options !== "object") { + encountered += + " The `options` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(options) + + "."; + } else if (typeof options.as !== "string" || !options.as) { + encountered += + " The `as` option encountered was " + + getValueDescriptorExpectingObjectForWarning(options.as) + + "."; + } + + if (encountered) { error( - "ReactDOM.preload(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.", - getValueDescriptorExpectingObjectForWarning(href) - ); - } else if (options == null || typeof options !== "object") { - error( - "ReactDOM.preload(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preloaded but encountered %s instead.", - getValueDescriptorExpectingEnumForWarning(options) - ); - } else if (typeof options.as !== "string") { - error( - 'ReactDOM.preload(): Expected the `as` property in the `options` argument (second) to contain a string value describing the type of resource to be preloaded but encountered %s instead. Values that are valid in for the `as` attribute of a `` tag are valid here.', - getValueDescriptorExpectingEnumForWarning(options.as) + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `` tag.%s', + encountered ); } } @@ -7027,10 +7038,35 @@ function preload(href, options) { href && typeof options === "object" && options !== null && - typeof options.as === "string" + typeof options.as === "string" && + options.as ) { var as = options.as; - var key = getResourceKey(as, href); + var key; + + if (as === "image") { + // For image preloads the key contains either the imageSrcSet + imageSizes or the href but not + // both. This is to prevent identical calls with the same srcSet and sizes to be duplicated + // 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); + } else { + key = getResourceKey(as, href); + } + var resource = resources.preloadsMap.get(key); { @@ -7524,12 +7560,18 @@ function preloadPropsFromPreloadOptions(href, as, options) { return { rel: "preload", as: as, - href: href, + // 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: as === "image" && options.imageSrcSet ? undefined : href, crossOrigin: as === "font" ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }; } diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js index de02a50564..06b95cde62 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js @@ -1887,41 +1887,54 @@ function preload(href, options) { href && "object" === typeof options && null !== options && - "string" === typeof options.as + "string" === typeof options.as && + options.as ) { - var as = options.as, - key = "[" + as + "]" + href, - resource = resources.preloadsMap.get(key); - resource || - ((resource = { + var as = options.as; + if ("image" === as) { + var key = options.imageSrcSet; + var imageSizes = options.imageSizes, + uniquePart = ""; + "string" === typeof key && "" !== key + ? ((uniquePart += "[" + key + "]"), + "string" === typeof imageSizes && + (uniquePart += "[" + imageSizes + "]")) + : (uniquePart += "[][]" + href); + key = "[" + as + "]" + uniquePart; + } else key = "[" + as + "]" + href; + imageSizes = resources.preloadsMap.get(key); + imageSizes || + ((imageSizes = { type: "preload", chunks: [], state: 0, props: { rel: "preload", as: as, - href: href, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes } }), - resources.preloadsMap.set(key, resource), - pushLinkImpl(resource.chunks, resource.props)); + resources.preloadsMap.set(key, imageSizes), + pushLinkImpl(imageSizes.chunks, imageSizes.props)); switch (as) { case "font": - resources.fontPreloads.add(resource); + resources.fontPreloads.add(imageSizes); break; case "style": - resources.explicitStylesheetPreloads.add(resource); + resources.explicitStylesheetPreloads.add(imageSizes); break; case "script": - resources.explicitScriptPreloads.add(resource); + resources.explicitScriptPreloads.add(imageSizes); break; default: - resources.explicitOtherPreloads.add(resource); + resources.explicitOtherPreloads.add(imageSizes); } enqueueFlush(request); } diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index baccbf3c3d..f84724fa4d 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -34795,7 +34795,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-4a9fda08"; +var ReactVersion = "18.3.0-www-classic-c52678e3"; function createPortal$1( children, @@ -42685,65 +42685,6 @@ function propNamesListJoin(list, combinator) { } } -function validatePreloadArguments(href, options) { - { - if (!href || typeof href !== "string") { - var typeOfArg = getValueDescriptorExpectingObjectForWarning(href); - - error( - "ReactDOM.preload() expected the first argument to be a string representing an href but found %s instead.", - typeOfArg - ); - } else if (typeof options !== "object" || options === null) { - var _typeOfArg = getValueDescriptorExpectingObjectForWarning(options); - - error( - 'ReactDOM.preload() expected the second argument to be an options argument containing at least an "as" property' + - ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".', - _typeOfArg, - href - ); - } else { - var as = options.as; - - switch (as) { - // Font specific validation of options - case "font": { - if (options.crossOrigin === "use-credentials") { - error( - 'ReactDOM.preload() was called with an "as" type of "font" and with a "crossOrigin" option of "use-credentials".' + - ' Fonts preloading must use crossOrigin "anonymous" to be functional. Please update your font preload to omit' + - ' the crossOrigin option or change it to any other value than "use-credentials" (Browsers default all other values' + - ' to anonymous mode). The href for the preload call where this warning originated is "%s"', - href - ); - } - - break; - } - - case "script": - case "style": { - break; - } - // We have an invalid as type and need to warn - - default: { - var typeOfAs = getValueDescriptorExpectingEnumForWarning(as); - - error( - 'ReactDOM.preload() expected a valid "as" type in the options (second) argument but found %s instead.' + - " Please use one of the following valid values instead: %s. The href for the preload call where this" + - ' warning originated is "%s".', - typeOfAs, - '"style", "font", or "script"', - href - ); - } - } - } - } -} function validatePreinitArguments(href, options) { { if (!href || typeof href !== "string") { @@ -42754,12 +42695,12 @@ function validatePreinitArguments(href, options) { typeOfArg ); } else if (typeof options !== "object" || options === null) { - var _typeOfArg2 = getValueDescriptorExpectingObjectForWarning(options); + var _typeOfArg = getValueDescriptorExpectingObjectForWarning(options); error( 'ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' + ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".', - _typeOfArg2, + _typeOfArg, href ); } else { @@ -44504,7 +44445,35 @@ function preconnect$1(href, options) { function preload$1(href, options) { { - validatePreloadArguments(href, options); + // TODO move this to ReactDOMFloat and expose a stricter function interface or possibly + // typed functions (preloadImage, preloadStyle, ...) + var encountered = ""; + + if (typeof href !== "string" || !href) { + encountered += + "The `href` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(href) + + "."; + } + + if (options == null || typeof options !== "object") { + encountered += + "The `options` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(options) + + "."; + } else if (typeof options.as !== "string" || !options.as) { + encountered += + "The `as` option encountered was " + + getValueDescriptorExpectingObjectForWarning(options.as) + + "."; + } + + if (encountered) { + error( + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `` tag. %s', + encountered + ); + } } var ownerDocument = getDocumentForImperativeFloatMethods(); @@ -44514,13 +44483,42 @@ function preload$1(href, options) { href && typeof options === "object" && options !== null && + typeof options.as === "string" && + options.as && ownerDocument ) { var as = options.as; - var limitedEscapedHref = - escapeSelectorAttributeValueInsideDoubleQuotes(href); var preloadSelector = - 'link[rel="preload"][as="' + as + '"][href="' + limitedEscapedHref + '"]'; // Some preloads are keyed under their selector. This happens when the preload is for + 'link[rel="preload"][as="' + + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + + if (as === "image") { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + + if (typeof imageSrcSet === "string" && imageSrcSet !== "") { + preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'; + + if (typeof imageSizes === "string") { + preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]'; + } + } else { + preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'; + } + } else { + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + } // Some preloads are keyed under their selector. This happens when the preload is for // an arbitrary type. Other preloads are keyed under the resource key they represent a preload for. // Here we figure out which key to use to determine if we have a preload already. @@ -44566,14 +44564,20 @@ function preload$1(href, options) { function preloadPropsFromPreloadOptions(href, as, options) { return { - href: href, rel: "preload", as: as, + // 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: as === "image" && options.imageSrcSet ? undefined : href, crossOrigin: as === "font" ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }; } diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index 581a73c817..de84be16b6 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -34640,7 +34640,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-6dec7344"; +var ReactVersion = "18.3.0-www-modern-bd0def32"; function createPortal$1( children, @@ -43195,65 +43195,6 @@ function propNamesListJoin(list, combinator) { } } -function validatePreloadArguments(href, options) { - { - if (!href || typeof href !== "string") { - var typeOfArg = getValueDescriptorExpectingObjectForWarning(href); - - error( - "ReactDOM.preload() expected the first argument to be a string representing an href but found %s instead.", - typeOfArg - ); - } else if (typeof options !== "object" || options === null) { - var _typeOfArg = getValueDescriptorExpectingObjectForWarning(options); - - error( - 'ReactDOM.preload() expected the second argument to be an options argument containing at least an "as" property' + - ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".', - _typeOfArg, - href - ); - } else { - var as = options.as; - - switch (as) { - // Font specific validation of options - case "font": { - if (options.crossOrigin === "use-credentials") { - error( - 'ReactDOM.preload() was called with an "as" type of "font" and with a "crossOrigin" option of "use-credentials".' + - ' Fonts preloading must use crossOrigin "anonymous" to be functional. Please update your font preload to omit' + - ' the crossOrigin option or change it to any other value than "use-credentials" (Browsers default all other values' + - ' to anonymous mode). The href for the preload call where this warning originated is "%s"', - href - ); - } - - break; - } - - case "script": - case "style": { - break; - } - // We have an invalid as type and need to warn - - default: { - var typeOfAs = getValueDescriptorExpectingEnumForWarning(as); - - error( - 'ReactDOM.preload() expected a valid "as" type in the options (second) argument but found %s instead.' + - " Please use one of the following valid values instead: %s. The href for the preload call where this" + - ' warning originated is "%s".', - typeOfAs, - '"style", "font", or "script"', - href - ); - } - } - } - } -} function validatePreinitArguments(href, options) { { if (!href || typeof href !== "string") { @@ -43264,12 +43205,12 @@ function validatePreinitArguments(href, options) { typeOfArg ); } else if (typeof options !== "object" || options === null) { - var _typeOfArg2 = getValueDescriptorExpectingObjectForWarning(options); + var _typeOfArg = getValueDescriptorExpectingObjectForWarning(options); error( 'ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' + ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".', - _typeOfArg2, + _typeOfArg, href ); } else { @@ -45014,7 +44955,35 @@ function preconnect$1(href, options) { function preload$1(href, options) { { - validatePreloadArguments(href, options); + // TODO move this to ReactDOMFloat and expose a stricter function interface or possibly + // typed functions (preloadImage, preloadStyle, ...) + var encountered = ""; + + if (typeof href !== "string" || !href) { + encountered += + "The `href` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(href) + + "."; + } + + if (options == null || typeof options !== "object") { + encountered += + "The `options` argument encountered was " + + getValueDescriptorExpectingObjectForWarning(options) + + "."; + } else if (typeof options.as !== "string" || !options.as) { + encountered += + "The `as` option encountered was " + + getValueDescriptorExpectingObjectForWarning(options.as) + + "."; + } + + if (encountered) { + error( + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `` tag. %s', + encountered + ); + } } var ownerDocument = getDocumentForImperativeFloatMethods(); @@ -45024,13 +44993,42 @@ function preload$1(href, options) { href && typeof options === "object" && options !== null && + typeof options.as === "string" && + options.as && ownerDocument ) { var as = options.as; - var limitedEscapedHref = - escapeSelectorAttributeValueInsideDoubleQuotes(href); var preloadSelector = - 'link[rel="preload"][as="' + as + '"][href="' + limitedEscapedHref + '"]'; // Some preloads are keyed under their selector. This happens when the preload is for + 'link[rel="preload"][as="' + + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + + if (as === "image") { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + + if (typeof imageSrcSet === "string" && imageSrcSet !== "") { + preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'; + + if (typeof imageSizes === "string") { + preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]'; + } + } else { + preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'; + } + } else { + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + } // Some preloads are keyed under their selector. This happens when the preload is for // an arbitrary type. Other preloads are keyed under the resource key they represent a preload for. // Here we figure out which key to use to determine if we have a preload already. @@ -45076,14 +45074,20 @@ function preload$1(href, options) { function preloadPropsFromPreloadOptions(href, as, options) { return { - href: href, rel: "preload", as: as, + // 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: as === "image" && options.imageSrcSet ? undefined : href, crossOrigin: as === "font" ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }; } diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index 9cbb7e2f6c..fac7f59d79 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -15607,40 +15607,64 @@ function preload$1(href, options) { href && "object" === typeof options && null !== options && + "string" === typeof options.as && + options.as && ownerDocument ) { var as = options.as, - limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href), - key = (limitedEscapedHref = + preloadSelector = 'link[rel="preload"][as="' + - as + - '"][href="' + - limitedEscapedHref + - '"]'); + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + if ("image" === as) { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + "string" === typeof imageSrcSet && "" !== imageSrcSet + ? ((preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'), + "string" === typeof imageSizes && + (preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]')) + : (preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'); + } else + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + imageSrcSet = preloadSelector; switch (as) { case "style": - key = getStyleKey(href); + imageSrcSet = getStyleKey(href); break; case "script": - key = getScriptKey(href); + imageSrcSet = getScriptKey(href); } - preloadPropsMap.has(key) || + preloadPropsMap.has(imageSrcSet) || ((href = { - href: href, rel: "preload", as: as, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }), - preloadPropsMap.set(key, href), - null !== ownerDocument.querySelector(limitedEscapedHref) || + preloadPropsMap.set(imageSrcSet, href), + null !== ownerDocument.querySelector(preloadSelector) || ("style" === as && - ownerDocument.querySelector(getStylesheetSelectorFromKey(key))) || + ownerDocument.querySelector( + getStylesheetSelectorFromKey(imageSrcSet) + )) || ("script" === as && - ownerDocument.querySelector("script[async]" + key)) || + ownerDocument.querySelector("script[async]" + imageSrcSet)) || ((as = ownerDocument.createElement("link")), setInitialProperties(as, "link", href), markNodeAsHoistable(as), @@ -16973,7 +16997,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1844 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-1f937379", + version: "18.3.0-www-classic-358a4f52", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2218 = { @@ -17003,7 +17027,7 @@ var internals$jscomp$inline_2218 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-1f937379" + reconcilerVersion: "18.3.0-www-classic-358a4f52" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2219 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17397,4 +17421,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-1f937379"; +exports.version = "18.3.0-www-classic-358a4f52"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index 9c803ef612..d873ca479a 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -15892,40 +15892,64 @@ function preload$1(href, options) { href && "object" === typeof options && null !== options && + "string" === typeof options.as && + options.as && ownerDocument ) { var as = options.as, - limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href), - key = (limitedEscapedHref = + preloadSelector = 'link[rel="preload"][as="' + - as + - '"][href="' + - limitedEscapedHref + - '"]'); + escapeSelectorAttributeValueInsideDoubleQuotes(as) + + '"]'; + if ("image" === as) { + var imageSrcSet = options.imageSrcSet, + imageSizes = options.imageSizes; + "string" === typeof imageSrcSet && "" !== imageSrcSet + ? ((preloadSelector += + '[imagesrcset="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSrcSet) + + '"]'), + "string" === typeof imageSizes && + (preloadSelector += + '[imagesizes="' + + escapeSelectorAttributeValueInsideDoubleQuotes(imageSizes) + + '"]')) + : (preloadSelector += + '[href="' + + escapeSelectorAttributeValueInsideDoubleQuotes(href) + + '"]'); + } else + preloadSelector += + '[href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"]'; + imageSrcSet = preloadSelector; switch (as) { case "style": - key = getStyleKey(href); + imageSrcSet = getStyleKey(href); break; case "script": - key = getScriptKey(href); + imageSrcSet = getScriptKey(href); } - preloadPropsMap.has(key) || + preloadPropsMap.has(imageSrcSet) || ((href = { - href: href, rel: "preload", as: as, + href: "image" === as && options.imageSrcSet ? void 0 : href, crossOrigin: "font" === as ? "" : options.crossOrigin, integrity: options.integrity, type: options.type, nonce: options.nonce, - fetchPriority: options.fetchPriority + fetchPriority: options.fetchPriority, + imageSrcSet: options.imageSrcSet, + imageSizes: options.imageSizes }), - preloadPropsMap.set(key, href), - null !== ownerDocument.querySelector(limitedEscapedHref) || + preloadPropsMap.set(imageSrcSet, href), + null !== ownerDocument.querySelector(preloadSelector) || ("style" === as && - ownerDocument.querySelector(getStylesheetSelectorFromKey(key))) || + ownerDocument.querySelector( + getStylesheetSelectorFromKey(imageSrcSet) + )) || ("script" === as && - ownerDocument.querySelector("script[async]" + key)) || + ownerDocument.querySelector("script[async]" + imageSrcSet)) || ((as = ownerDocument.createElement("link")), setInitialProperties(as, "link", href), markNodeAsHoistable(as), @@ -16557,7 +16581,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1803 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-5fb44b73", + version: "18.3.0-www-modern-58022814", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2182 = { @@ -16588,7 +16612,7 @@ var internals$jscomp$inline_2182 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-5fb44b73" + reconcilerVersion: "18.3.0-www-modern-58022814" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2183 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16910,4 +16934,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-5fb44b73"; +exports.version = "18.3.0-www-modern-58022814"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index 84972ef47f..380f6e5141 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -24553,7 +24553,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-4a9fda08"; +var ReactVersion = "18.3.0-www-classic-c52678e3"; // Might add PROFILE later. diff --git a/compiled/facebook-www/WARNINGS b/compiled/facebook-www/WARNINGS index 0b17ed25a9..b871e92af1 100644 --- a/compiled/facebook-www/WARNINGS +++ b/compiled/facebook-www/WARNINGS @@ -253,13 +253,8 @@ "ReactDOM.preinit(): For `href` \"%s\", the options provided conflict with another call to `ReactDOM.preinit(\"%s\", { as: \"style\", ... })`. React will always use the options it first encounters when preinitializing a hoistable stylesheet for a given `href` and any later options will be ignored if different. Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.%s" "ReactDOM.preinit(): For `href` \"%s\", the options provided conflict with props found on a that was already rendered. React will always use the props or options it first encounters for a hoistable stylesheet for a given `href` and any later props or options will be ignored if different. Generally, ReactDOM.preinit() is useful when you are not yet rendering a stylesheet but you anticipate it will be used soon. In this case the stylesheet was already rendered so preinitializing it does not provide any additional benefit. To resolve, try making the props and options agree between the and the `ReactDOM.preinit()` call or remove the `ReactDOM.preinit()` call.%s" "ReactDOM.preinit(): For `href` \"%s\", the options provided conflict with props found on a