[Float][Fizz][Fiber] support type for ReactDOM.preload() options (#26239)
preloads often need to come with a type attribute which allows browsers to decide if they support the preloading resource's type. If the type is unsupported the preload will not be fetched by the Browser. This change adds support for `type` in `ReactDOM.preload()` as a string option.
Josh Story committed
Feb 25, 2023 at 11:06 UTC
6ff1733e63fdb948ae973a713741b4526102c73c
3 files changed
+25
-4
packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
+7
-1
@@ -253,7 +253,12 @@ function preconnect(href: string, options?: {crossOrigin?: string}) {
253
// ReactDOM.preload
254
// --------------------------------------
255
type PreloadAs = ResourceType;
256
-type PreloadOptions = {as: PreloadAs, crossOrigin?: string, integrity?: string};
256
+type PreloadOptions = {
257
+ as: PreloadAs,
258
+ crossOrigin?: string,
259
+ integrity?: string,
260
+ type?: string,
261
+};
262
function preload(href: string, options: PreloadOptions) {
263
if (__DEV__) {
264
validatePreloadArguments(href, options);
@@ -309,6 +314,7 @@ function preloadPropsFromPreloadOptions(
314
as,
315
crossOrigin: as === 'font' ? '' : options.crossOrigin,
316
integrity: options.integrity,
317
+ type: options.type,
318
};
319
}
320
packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+2
-1
@@ -4344,7 +4344,7 @@ type PreloadOptions = {
4344
as: PreloadAs,
4345
crossOrigin?: string,
4346
integrity?: string,
4347
- media?: string,
4347
+ type?: string,
4348
};
4349
export function preload(href: string, options: PreloadOptions) {
4350
if (!currentResources) {
@@ -4709,6 +4709,7 @@ function preloadPropsFromPreloadOptions(
4709
href,
4710
crossOrigin: as === 'font' ? '' : options.crossOrigin,
4711
integrity: options.integrity,
4712
+ type: options.type,
4713
};
4714
}
4715
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+16
-2
@@ -2267,7 +2267,7 @@ body {
2267
// @gate enableFloat
2268
it('always enforces crossOrigin "anonymous" for font preloads', async () => {
2269
function App() {
2270
- ReactDOM.preload('foo', {as: 'font'});
2270
+ ReactDOM.preload('foo', {as: 'font', type: 'font/woff2'});
2271
ReactDOM.preload('bar', {as: 'font', crossOrigin: 'foo'});
2272
ReactDOM.preload('baz', {as: 'font', crossOrigin: 'use-credentials'});
2273
ReactDOM.preload('qux', {as: 'font', crossOrigin: 'anonymous'});
@@ -2285,7 +2285,13 @@ body {
2285
expect(getMeaningfulChildren(document)).toEqual(
2286
<html>
2287
<head>
2288
- <link rel="preload" as="font" href="foo" crossorigin="" />
2288
+ <link
2289
+ rel="preload"
2290
+ as="font"
2291
+ href="foo"
2292
+ crossorigin=""
2293
+ type="font/woff2"
2294
+ />
2295
<link rel="preload" as="font" href="bar" crossorigin="" />
2296
<link rel="preload" as="font" href="baz" crossorigin="" />
2297
<link rel="preload" as="font" href="qux" crossorigin="" />
@@ -2488,6 +2494,7 @@ body {
2494
2495
function ClientApp() {
2496
ReactDOM.preload('foo', {as: 'style'});
2497
+ ReactDOM.preload('font', {as: 'font', type: 'font/woff2'});
2498
React.useInsertionEffect(() => ReactDOM.preload('bar', {as: 'script'}));
2499
React.useLayoutEffect(() => ReactDOM.preload('baz', {as: 'font'}));
2500
React.useEffect(() => ReactDOM.preload('qux', {as: 'style'}));
@@ -2507,6 +2514,13 @@ body {
2514
<html>
2515
<head>
2516
<link rel="preload" as="style" href="foo" />
2517
+ <link
2518
+ rel="preload"
2519
+ as="font"
2520
+ href="font"
2521
+ crossorigin=""
2522
+ type="font/woff2"
2523
+ />
2524
<link rel="preload" as="font" href="baz" crossorigin="" />
2525
<link rel="preload" as="style" href="qux" />
2526
</head>