From 2e3854862dce2b91852d39a7b4629368c0cb5fa1 Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 11 Jul 2023 16:40:43 -0400 Subject: [PATCH 1/2] Add `referrerPolicy` option to `ReactDOM.preload()` --- .../src/client/ReactFiberConfigDOM.js | 1 + .../src/server/ReactFizzConfigDOM.js | 1 + .../src/__tests__/ReactDOMFloat-test.js | 28 +++++++++++++++++++ .../react-dom/src/shared/ReactDOMTypes.js | 1 + 4 files changed, 31 insertions(+) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 94698a8d527a9..1149e442f98ea 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -2284,6 +2284,7 @@ function preloadPropsFromPreloadOptions( fetchPriority: options.fetchPriority, imageSrcSet: options.imageSrcSet, imageSizes: options.imageSizes, + referrerPolicy: options.referrerPolicy, }; } diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index b6e1e90507d5b..ec7d829428731 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js @@ -5564,6 +5564,7 @@ function preloadPropsFromPreloadOptions( fetchPriority: options.fetchPriority, imageSrcSet: options.imageSrcSet, imageSizes: options.imageSizes, + referrerPolicy: options.referrerPolicy, }; } diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 3a893c616e14a..8dc6c58318f9e 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -3585,6 +3585,13 @@ body { imageSizes: 'makes no sense', }); + ReactDOM.preload('rp', { + as: 'image', + imageSrcSet: 'rpsrcset', + imageSizes: 'rpsizes', + referrerPolicy: 'no-referrer', + }); + if (isClient) { // Will key off href in absense of imageSrcSet ReactDOM.preload('client', {as: 'image'}); @@ -3634,6 +3641,13 @@ body { imagesizes="foosizes" /> + hello , @@ -3653,6 +3667,13 @@ body { imagesizes="foosizes" /> + hello , @@ -3672,6 +3693,13 @@ body { imagesizes="foosizes" /> + Date: Wed, 12 Jul 2023 12:19:55 -0400 Subject: [PATCH 2/2] fix: move into separate test --- .../src/__tests__/ReactDOMFloat-test.js | 107 ++++++++++++++---- 1 file changed, 82 insertions(+), 25 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 8dc6c58318f9e..2ee581f850689 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -3585,13 +3585,6 @@ body { imageSizes: 'makes no sense', }); - ReactDOM.preload('rp', { - as: 'image', - imageSrcSet: 'rpsrcset', - imageSizes: 'rpsizes', - referrerPolicy: 'no-referrer', - }); - if (isClient) { // Will key off href in absense of imageSrcSet ReactDOM.preload('client', {as: 'image'}); @@ -3641,19 +3634,31 @@ body { imagesizes="foosizes" /> + + hello + , + ); + + const root = ReactDOMClient.hydrateRoot(document, ); + await waitForAll([]); + expect(getMeaningfulChildren(document)).toEqual( + + + + + hello , ); - const root = ReactDOMClient.hydrateRoot(document, ); + root.render(); await waitForAll([]); expect(getMeaningfulChildren(document)).toEqual( @@ -3667,11 +3672,56 @@ body { imagesizes="foosizes" /> + + + + + hello + , + ); + }); + + it('should handle referrerPolicy on image preload', async () => { + function App({isClient}) { + ReactDOM.preload('/server', { + as: 'image', + imageSrcSet: '/server', + imageSizes: '100vw', + referrerPolicy: 'no-referrer', + }); + + if (isClient) { + ReactDOM.preload('/client', { + as: 'image', + imageSrcSet: '/client', + imageSizes: '100vw', + referrerPolicy: 'no-referrer', + }); + } + + return ( + + hello + + ); + } + + await act(() => { + renderToPipeableStream().pipe(writable); + }); + expect(getMeaningfulChildren(document)).toEqual( + + @@ -3679,34 +3729,41 @@ body { , ); - root.render(); + const root = ReactDOMClient.hydrateRoot(document, ); await waitForAll([]); expect(getMeaningfulChildren(document)).toEqual( - - - + + hello + , + ); + + root.render(); + await waitForAll([]); + expect(getMeaningfulChildren(document)).toEqual( + + - - hello