Skip to content

Commit 6ff1733

Browse files
gnoffgnoff
authored
[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.
1 parent 1173a17 commit 6ff1733

3 files changed

Lines changed: 25 additions & 4 deletions

File tree

‎packages/react-dom-bindings/src/client/ReactDOMFloatClient.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,12 @@ function preconnect(href: string, options?: {crossOrigin?: string}) {
253253
// ReactDOM.preload
254254
// --------------------------------------
255255
typePreloadAs=ResourceType;
256-
typePreloadOptions={as: PreloadAs,crossOrigin?: string,integrity?: string};
256+
typePreloadOptions={
257+
as: PreloadAs,
258+
crossOrigin?: string,
259+
integrity?: string,
260+
type?: string,
261+
};
257262
functionpreload(href: string,options: PreloadOptions){
258263
if(__DEV__){
259264
validatePreloadArguments(href,options);
@@ -309,6 +314,7 @@ function preloadPropsFromPreloadOptions(
309314
as,
310315
crossOrigin: as==='font' ? '' : options.crossOrigin,
311316
integrity: options.integrity,
317+
type: options.type,
312318
};
313319
}
314320

‎packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4344,7 +4344,7 @@ type PreloadOptions = {
43444344
as: PreloadAs,
43454345
crossOrigin?: string,
43464346
integrity?: string,
4347-
media?: string,
4347+
type?: string,
43484348
};
43494349
exportfunctionpreload(href: string,options: PreloadOptions){
43504350
if(!currentResources){
@@ -4709,6 +4709,7 @@ function preloadPropsFromPreloadOptions(
47094709
href,
47104710
crossOrigin: as=== 'font' ? '' : options.crossOrigin,
47114711
integrity: options.integrity,
4712+
type: options.type,
47124713
};
47134714
}
47144715

‎packages/react-dom/src/__tests__/ReactDOMFloat-test.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2267,7 +2267,7 @@ body {
22672267
// @gate enableFloat
22682268
it('always enforces crossOrigin "anonymous" for font preloads',async()=>{
22692269
functionApp(){
2270-
ReactDOM.preload('foo',{as: 'font'});
2270+
ReactDOM.preload('foo',{as: 'font',type: 'font/woff2'});
22712271
ReactDOM.preload('bar',{as: 'font',crossOrigin: 'foo'});
22722272
ReactDOM.preload('baz',{as: 'font',crossOrigin: 'use-credentials'});
22732273
ReactDOM.preload('qux',{as: 'font',crossOrigin: 'anonymous'});
@@ -2285,7 +2285,13 @@ body {
22852285
expect(getMeaningfulChildren(document)).toEqual(
22862286
<html>
22872287
<head>
2288-
<linkrel="preload"as="font"href="foo"crossorigin=""/>
2288+
<link
2289+
rel="preload"
2290+
as="font"
2291+
href="foo"
2292+
crossorigin=""
2293+
type="font/woff2"
2294+
/>
22892295
<linkrel="preload"as="font"href="bar"crossorigin=""/>
22902296
<linkrel="preload"as="font"href="baz"crossorigin=""/>
22912297
<linkrel="preload"as="font"href="qux"crossorigin=""/>
@@ -2488,6 +2494,7 @@ body {
24882494

24892495
functionClientApp(){
24902496
ReactDOM.preload('foo',{as: 'style'});
2497+
ReactDOM.preload('font',{as: 'font',type: 'font/woff2'});
24912498
React.useInsertionEffect(()=>ReactDOM.preload('bar',{as: 'script'}));
24922499
React.useLayoutEffect(()=>ReactDOM.preload('baz',{as: 'font'}));
24932500
React.useEffect(()=>ReactDOM.preload('qux',{as: 'style'}));
@@ -2507,6 +2514,13 @@ body {
25072514
<html>
25082515
<head>
25092516
<linkrel="preload"as="style"href="foo"/>
2517+
<link
2518+
rel="preload"
2519+
as="font"
2520+
href="font"
2521+
crossorigin=""
2522+
type="font/woff2"
2523+
/>
25102524
<linkrel="preload"as="font"href="baz"crossorigin=""/>
25112525
<linkrel="preload"as="style"href="qux"/>
25122526
</head>

0 commit comments

Comments
 (0)