Skip to content

Commit e5c2ed4

Browse files
gnoffgnoff
committed
support fetchPriority as an option for ReactDOM.preload() and ReactDOM.preinit()
1 parent bcb9e96 commit e5c2ed4

File tree

4 files changed

+210
-2
lines changed

4 files changed

+210
-2
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2161,6 +2161,7 @@ type PreloadOptions = {
21612161
crossOrigin?: string,
21622162
integrity?: string,
21632163
type?: string,
2164+
fetchPriority?: 'high' | 'low' | 'auto',
21642165
};
21652166
function preload(href: string, options: PreloadOptions) {
21662167
if (!enableFloat) {
@@ -2233,6 +2234,7 @@ function preloadPropsFromPreloadOptions(
22332234
crossOrigin: as === 'font' ? '' : options.crossOrigin,
22342235
integrity: options.integrity,
22352236
type: options.type,
2237+
fetchPriority: options.fetchPriority,
22362238
};
22372239
}
22382240
@@ -2242,6 +2244,7 @@ type PreinitOptions = {
22422244
crossOrigin?: string,
22432245
integrity?: string,
22442246
nonce?: string,
2247+
fetchPriority?: 'high' | 'low' | 'auto',
22452248
};
22462249
function preinit(href: string, options: PreinitOptions) {
22472250
if (!enableFloat) {
@@ -2383,6 +2386,7 @@ function stylesheetPropsFromPreinitOptions(
23832386
'data-precedence': precedence,
23842387
crossOrigin: options.crossOrigin,
23852388
integrity: options.integrity,
2389+
fetchPriority: options.fetchPriority,
23862390
};
23872391
}
23882392
@@ -2396,6 +2400,7 @@ function scriptPropsFromPreinitOptions(
23962400
crossOrigin: options.crossOrigin,
23972401
integrity: options.integrity,
23982402
nonce: options.nonce,
2403+
fetchPriority: options.fetchPriority,
23992404
};
24002405
}
24012406

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5010,6 +5010,7 @@ type PreloadOptions = {
50105010
crossOrigin?: string,
50115011
integrity?: string,
50125012
type?: string,
5013+
fetchPriority?: 'high' | 'low' | 'auto',
50135014
};
50145015
export function preload(href: string, options: PreloadOptions) {
50155016
if (!enableFloat) {
@@ -5155,6 +5156,7 @@ type PreinitOptions = {
51555156
crossOrigin?: string,
51565157
integrity?: string,
51575158
nonce?: string,
5159+
fetchPriority?: 'high' | 'low' | 'auto',
51585160
};
51595161
function preinit(href: string, options: PreinitOptions): void {
51605162
if (!enableFloat) {
@@ -5418,6 +5420,7 @@ function preloadPropsFromPreloadOptions(
54185420
crossOrigin: as === 'font' ? '' : options.crossOrigin,
54195421
integrity: options.integrity,
54205422
type: options.type,
5423+
fetchPriority: options.fetchPriority,
54215424
};
54225425
}
54235426

@@ -5446,6 +5449,7 @@ function stylesheetPropsFromPreinitOptions(
54465449
'data-precedence': precedence,
54475450
crossOrigin: options.crossOrigin,
54485451
integrity: options.integrity,
5452+
fetchPriority: options.fetchPriority,
54495453
};
54505454
}
54515455

@@ -5477,6 +5481,7 @@ function scriptPropsFromPreinitOptions(
54775481
crossOrigin: options.crossOrigin,
54785482
integrity: options.integrity,
54795483
nonce: options.nonce,
5484+
fetchPriority: options.fetchPriority,
54805485
};
54815486
}
54825487

‎packages/react-dom/src/ReactDOMDispatcher.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,15 @@ export type PreloadOptions = {
1414
crossOrigin?: string,
1515
integrity?: string,
1616
type?: string,
17+
fetchPriority?: 'high' | 'low' | 'auto',
1718
};
1819
export type PreinitOptions = {
1920
as: string,
2021
precedence?: string,
2122
crossOrigin?: string,
2223
integrity?: string,
2324
nonce?: string,
25+
fetchPriority?: 'high' | 'low' | 'auto',
2426
};
2527

2628
export type HostDispatcher = {

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

Lines changed: 198 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3873,6 +3873,113 @@ body {
38733873
'Warning: ReactDOM.preload(): The options provided conflict with another call to `ReactDOM.preload("foo", { as: "font", ...})`. 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.\n "crossOrigin" missing from options, original option value: "use-credentials"',
38743874
]);
38753875
});
3876+
3877+
it('supports fetchPriority', async () => {
3878+
function Component({isServer}) {
3879+
ReactDOM.preload(isServer ? 'highserver' : 'highclient', {
3880+
as: 'script',
3881+
fetchPriority: 'high',
3882+
});
3883+
ReactDOM.preload(isServer ? 'lowserver' : 'lowclient', {
3884+
as: 'style',
3885+
fetchPriority: 'low',
3886+
});
3887+
ReactDOM.preload(isServer ? 'autoserver' : 'autoclient', {
3888+
as: 'style',
3889+
fetchPriority: 'auto',
3890+
});
3891+
return 'hello';
3892+
}
3893+
3894+
await act(() => {
3895+
renderToPipeableStream(
3896+
<html>
3897+
<body>
3898+
<Component isServer={true} />
3899+
</body>
3900+
</html>,
3901+
).pipe(writable);
3902+
});
3903+
3904+
expect(getMeaningfulChildren(document)).toEqual(
3905+
<html>
3906+
<head>
3907+
<link
3908+
rel="preload"
3909+
as="style"
3910+
href="lowserver"
3911+
fetchpriority="low"
3912+
/>
3913+
<link
3914+
rel="preload"
3915+
as="style"
3916+
href="autoserver"
3917+
fetchpriority="auto"
3918+
/>
3919+
<link
3920+
rel="preload"
3921+
as="script"
3922+
href="highserver"
3923+
fetchpriority="high"
3924+
/>
3925+
</head>
3926+
<body>hello</body>
3927+
</html>,
3928+
);
3929+
3930+
ReactDOMClient.hydrateRoot(
3931+
document,
3932+
<html>
3933+
<body>
3934+
<Component />
3935+
</body>
3936+
</html>,
3937+
);
3938+
await waitForAll([]);
3939+
expect(getMeaningfulChildren(document)).toEqual(
3940+
<html>
3941+
<head>
3942+
<link
3943+
rel="preload"
3944+
as="style"
3945+
href="lowserver"
3946+
fetchpriority="low"
3947+
/>
3948+
<link
3949+
rel="preload"
3950+
as="style"
3951+
href="autoserver"
3952+
fetchpriority="auto"
3953+
/>
3954+
<link
3955+
rel="preload"
3956+
as="script"
3957+
href="highserver"
3958+
fetchpriority="high"
3959+
/>
3960+
<link
3961+
rel="preload"
3962+
as="script"
3963+
href="highclient"
3964+
fetchpriority="high"
3965+
/>
3966+
<link
3967+
rel="preload"
3968+
as="style"
3969+
href="lowclient"
3970+
fetchpriority="low"
3971+
/>
3972+
<link
3973+
rel="preload"
3974+
as="style"
3975+
href="autoclient"
3976+
fetchpriority="auto"
3977+
/>
3978+
</head>
3979+
<body>hello</body>
3980+
</html>,
3981+
);
3982+
});
38763983
});
38773984

38783985
describe('ReactDOM.preinit(href, { as: ... })', () => {
@@ -4406,7 +4513,6 @@ body {
44064513
<body>hello</body>
44074514
</html>,
44084515
);
4409-
44104516
await clientAct(() => {
44114517
ReactDOMClient.hydrateRoot(
44124518
document,
@@ -4417,7 +4523,6 @@ body {
44174523
</html>,
44184524
);
44194525
});
4420-
44214526
expect(getMeaningfulChildren(document)).toEqual(
44224527
<html>
44234528
<head>
@@ -4438,6 +4543,97 @@ body {
44384543
</html>,
44394544
);
44404545
});
4546+
4547+
it('supports fetchPriority', async () => {
4548+
function Component({isServer}) {
4549+
ReactDOM.preinit(isServer ? 'highserver' : 'highclient', {
4550+
as: 'script',
4551+
fetchPriority: 'high',
4552+
});
4553+
ReactDOM.preinit(isServer ? 'lowserver' : 'lowclient', {
4554+
as: 'style',
4555+
fetchPriority: 'low',
4556+
});
4557+
ReactDOM.preinit(isServer ? 'autoserver' : 'autoclient', {
4558+
as: 'style',
4559+
fetchPriority: 'auto',
4560+
});
4561+
return 'hello';
4562+
}
4563+
4564+
await act(() => {
4565+
renderToPipeableStream(
4566+
<html>
4567+
<body>
4568+
<Component isServer={true} />
4569+
</body>
4570+
</html>,
4571+
).pipe(writable);
4572+
});
4573+
4574+
expect(getMeaningfulChildren(document)).toEqual(
4575+
<html>
4576+
<head>
4577+
<link
4578+
rel="stylesheet"
4579+
href="lowserver"
4580+
fetchpriority="low"
4581+
data-precedence="default"
4582+
/>
4583+
<link
4584+
rel="stylesheet"
4585+
href="autoserver"
4586+
fetchpriority="auto"
4587+
data-precedence="default"
4588+
/>
4589+
<script async="" src="highserver" fetchpriority="high" />
4590+
</head>
4591+
<body>hello</body>
4592+
</html>,
4593+
);
4594+
ReactDOMClient.hydrateRoot(
4595+
document,
4596+
<html>
4597+
<body>
4598+
<Component />
4599+
</body>
4600+
</html>,
4601+
);
4602+
await waitForAll([]);
4603+
expect(getMeaningfulChildren(document)).toEqual(
4604+
<html>
4605+
<head>
4606+
<link
4607+
rel="stylesheet"
4608+
href="lowserver"
4609+
fetchpriority="low"
4610+
data-precedence="default"
4611+
/>
4612+
<link
4613+
rel="stylesheet"
4614+
href="autoserver"
4615+
fetchpriority="auto"
4616+
data-precedence="default"
4617+
/>
4618+
<link
4619+
rel="stylesheet"
4620+
href="lowclient"
4621+
fetchpriority="low"
4622+
data-precedence="default"
4623+
/>
4624+
<link
4625+
rel="stylesheet"
4626+
href="autoclient"
4627+
fetchpriority="auto"
4628+
data-precedence="default"
4629+
/>
4630+
<script async="" src="highserver" fetchpriority="high" />
4631+
<script async="" src="highclient" fetchpriority="high" />
4632+
</head>
4633+
<body>hello</body>
4634+
</html>,
4635+
);
4636+
});
44414637
});
44424638

44434639
describe('Stylesheet Resources', () => {

0 commit comments

Comments
 (0)