[Float][Fizz][Fiber] support imagesrcset and imagesizes for ReactDOM.preload() (#26940)

For float methods the href argument is usually all we need to uniquely
key the request. However when preloading responsive images it is
possible that you may need more than one preload for differing
imagesizes attributes. When using imagesrcset for preloads the href
attribute acts more like a fallback href. For keying purposes the
imagesrcset becomes the primary key conceptually.

This change updates the keying logic for `ReactDOM.preload()` when you
pass `{as: "image"}`

1. If `options.imageSrcSet` is a non-emtpy string the key is defined as
`options.imageSrcSet + options.imageSizes`. The `href` argument is still
required but does not participate in keying.
2. If `options.imageSrcSet` is empty, missing, or an invalid format the
key is defined as the `href`. Changing the `options.imageSizes` does not
affect the key as this option is inert when not using
`options.imageSrcSet`

Additionally, currently there is a bug in webkit (Safari) that causes
preload links to fail to use imageSrcSet and fallback to href even when
the browser will correctly resolve srcset on an `<img>` tag. Because the
drawbacks of preloading the wrong image (href over imagesrcset) in a
modern browser outweight the drawbacks of not preloading anything for
responsive images in browsers that do not support srcset at all we will
omit the `href` attribute whenever `options.imageSrcSet` is provided. We
still require you provide an href since we want to be able to revert
this behavior once all major browsers support it

bug link: https://bugs.webkit.org/show_bug.cgi?id=231150

DiffTrain build for [fc929cf4ea](https://github.com/facebook/react/commit/fc929cf4ead35f99c4e9612a95e8a0bb8f5df25d)
This commit is contained in:
gnoff
2023-06-15 21:56:16 +00:00
parent b437e4d88b
commit fc485c376b
22 changed files with 807 additions and 487 deletions
+1 -1
View File
@@ -1 +1 @@
86acc10f2596e1a6fe2fd57a5b325de85175800b
fc929cf4ead35f99c4e9612a95e8a0bb8f5df25d
+1 -1
View File
@@ -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,
+1 -1
View File
@@ -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;
@@ -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__;
+72 -68
View File
@@ -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 `<link rel="preload" as="..." />` 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
};
}
+72 -68
View File
@@ -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 `<link rel="preload" as="..." />` 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
};
}
+42 -18
View File
@@ -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";
+42 -18
View File
@@ -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";
@@ -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 (
@@ -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 (
@@ -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 `<link rel="preload" as="..." />` 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 `<link rel="preload" as="..." />` 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
};
}
@@ -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 `<link rel="preload" as="..." />` 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 `<link rel="preload" as="..." />` 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
};
}
@@ -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";
@@ -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";
@@ -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 `<link rel="preload" as="..." />` 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 `<link rel="preload" as="..." />` 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
};
}
@@ -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);
}
@@ -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 `<link rel="preload" as="..." />` 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
};
}
@@ -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 `<link rel="preload" as="..." />` 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
};
}
@@ -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";
@@ -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";
@@ -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.
+2 -7
View File
@@ -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 <link rel=\"stylesheet\" precedence=\"%s\" href=\"%s\" .../> 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 <link rel=\"stylesheet\" .../> 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 <script async={true} src=\"%s\" .../> that was already rendered. React will always use the props or options it first encounters for a hoistable script 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 script but you anticipate it will be used soon and want to go beyond preloading it and have it execute early. In this case the script was already rendered so preinitializing it does not provide any additional benefit. To resolve, try making the props and options agree between the <script .../> and the `ReactDOM.preinit()` call or remove the `ReactDOM.preinit()` call.%s"
"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\"."
"ReactDOM.preload() expected the first argument to be a string representing an href but found %s instead."
"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\"."
"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\""
"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 `<link rel=\"preload\" as=\"...\" />` tag are valid here."
"ReactDOM.preload(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead."
"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."
"ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel=\"preload\" as=\"...\" />` tag. %s"
"ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel=\"preload\" as=\"...\" />` tag.%s"
"ReactDOM.preload(): For `href` \"%s\", The options provided conflict with props on a matching %s element. When the preload options disagree with the underlying resource it usually means the browser will not be able to use the preload when the resource is fetched, negating any benefit the preload would provide. React will preload the resource using props derived from the resource instead and ignore the options provided to the `ReactDOM.preload()` call. In general, preloading is useful when you expect to render a resource soon but have not yet done so. In this case since the underlying resource was already rendered the preload call may be extraneous. Try removing the call, otherwise try adjusting both the props on the %s and the options passed to `ReactDOM.preload()` to agree.%s"
"ReactDOM.preload(): The options provided conflict with another call to `ReactDOM.preload(\"%s\", { as: \"%s\", ...})`. React will always use the options it first encounters when preloading a resource for a given `href` and `as` type, and any later options will be ignored if different. Try updating all calls to `ReactDOM.preload()` with the same `href` and `as` type to use the same options, or eliminate one of the calls.%s"
"ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot"