Add `referrerPolicy` option to `ReactDOM.preload()` (#27096)
Steven committed
Jul 12, 2023 at 17:32 UTC
9377e10105b41976c77c7f664f2363cb8c41ac8a
4 files changed
+88
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+1
@@ -2284,6 +2284,7 @@ function preloadPropsFromPreloadOptions(
2284
fetchPriority: options.fetchPriority,
2285
imageSrcSet: options.imageSrcSet,
2286
imageSizes: options.imageSizes,
2287
+ referrerPolicy: options.referrerPolicy,
2288
};
2289
}
2290
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+1
@@ -5564,6 +5564,7 @@ function preloadPropsFromPreloadOptions(
5564
fetchPriority: options.fetchPriority,
5565
imageSrcSet: options.imageSrcSet,
5566
imageSizes: options.imageSizes,
5567
+ referrerPolicy: options.referrerPolicy,
5568
};
5569
}
5570
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+85
@@ -3686,6 +3686,91 @@ body {
3686
);
3687
});
3688
3689
+ it('should handle referrerPolicy on image preload', async () => {
3690
+ function App({isClient}) {
3691
+ ReactDOM.preload('/server', {
3692
+ as: 'image',
3693
+ imageSrcSet: '/server',
3694
+ imageSizes: '100vw',
3695
+ referrerPolicy: 'no-referrer',
3696
+ });
3697
+
3698
+ if (isClient) {
3699
+ ReactDOM.preload('/client', {
3700
+ as: 'image',
3701
+ imageSrcSet: '/client',
3702
+ imageSizes: '100vw',
3703
+ referrerPolicy: 'no-referrer',
3704
+ });
3705
+ }
3706
+
3707
+ return (
3708
+ <html>
3709
+ <body>hello</body>
3710
+ </html>
3711
+ );
3712
+ }
3713
+
3714
+ await act(() => {
3715
+ renderToPipeableStream(<App />).pipe(writable);
3716
+ });
3717
+ expect(getMeaningfulChildren(document)).toEqual(
3718
+ <html>
3719
+ <head>
3720
+ <link
3721
+ rel="preload"
3722
+ as="image"
3723
+ imagesrcset="/server"
3724
+ imagesizes="100vw"
3725
+ referrerpolicy="no-referrer"
3726
+ />
3727
+ </head>
3728
+ <body>hello</body>
3729
+ </html>,
3730
+ );
3731
+
3732
+ const root = ReactDOMClient.hydrateRoot(document, <App />);
3733
+ await waitForAll([]);
3734
+ expect(getMeaningfulChildren(document)).toEqual(
3735
+ <html>
3736
+ <head>
3737
+ <link
3738
+ rel="preload"
3739
+ as="image"
3740
+ imagesrcset="/server"
3741
+ imagesizes="100vw"
3742
+ referrerpolicy="no-referrer"
3743
+ />
3744
+ </head>
3745
+ <body>hello</body>
3746
+ </html>,
3747
+ );
3748
+
3749
+ root.render(<App isClient={true} />);
3750
+ await waitForAll([]);
3751
+ expect(getMeaningfulChildren(document)).toEqual(
3752
+ <html>
3753
+ <head>
3754
+ <link
3755
+ rel="preload"
3756
+ as="image"
3757
+ imagesrcset="/server"
3758
+ imagesizes="100vw"
3759
+ referrerpolicy="no-referrer"
3760
+ />
3761
+ <link
3762
+ rel="preload"
3763
+ as="image"
3764
+ imagesrcset="/client"
3765
+ imagesizes="100vw"
3766
+ referrerpolicy="no-referrer"
3767
+ />
3768
+ </head>
3769
+ <body>hello</body>
3770
+ </html>,
3771
+ );
3772
+ });
3773
+
3774
describe('ReactDOM.prefetchDNS(href)', () => {
3775
it('creates a dns-prefetch resource when called', async () => {
3776
function App({url}) {
packages/react-dom/src/shared/ReactDOMTypes.js
+1
@@ -18,6 +18,7 @@ export type PreloadOptions = {
18
fetchPriority?: 'high' | 'low' | 'auto',
19
imageSrcSet?: string,
20
imageSizes?: string,
21
+ referrerPolicy?: string,
22
};
23
export type PreinitOptions = {
24
as: string,