From 734d239519567fb2ad04e8f6094d88b9670a13be Mon Sep 17 00:00:00 2001 From: Sam Barnett Date: Thu, 25 Jan 2024 10:26:35 +0800 Subject: [PATCH 1/2] Add test for image preload media attribute --- .../src/__tests__/ReactDOMFloat-test.js | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 2cc4df5d779c5..14badae96694a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -3935,6 +3935,91 @@ body { ); }); + it('should handle media on image preload', async () => { + function App({isClient}) { + ReactDOM.preload('/server', { + as: 'image', + imageSrcSet: '/server', + imageSizes: '100vw', + media: 'print and (min-width: 768px)', + }); + + if (isClient) { + ReactDOM.preload('/client', { + as: 'image', + imageSrcSet: '/client', + imageSizes: '100vw', + media: 'screen and (max-width: 480px)', + }); + } + + return ( + + hello + + ); + } + + await act(() => { + renderToPipeableStream().pipe(writable); + }); + expect(getMeaningfulChildren(document)).toEqual( + + + + + hello + , + ); + + const root = ReactDOMClient.hydrateRoot(document, ); + await waitForAll([]); + expect(getMeaningfulChildren(document)).toEqual( + + + + + hello + , + ); + + root.render(); + await waitForAll([]); + expect(getMeaningfulChildren(document)).toEqual( + + + + + + hello + , + ); + }); + it('can emit preloads for non-lazy images that are rendered', async () => { function App() { ReactDOM.preload('script', {as: 'script'}); From ef3bac4b26000d049d3df66299ff972e9218c49c Mon Sep 17 00:00:00 2001 From: Sam Barnett Date: Thu, 25 Jan 2024 10:38:23 +0800 Subject: [PATCH 2/2] Update PreloadOptions type --- packages/react-dom/src/shared/ReactDOMTypes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js index 942515be5c81a..9b7ce63f6b111 100644 --- a/packages/react-dom/src/shared/ReactDOMTypes.js +++ b/packages/react-dom/src/shared/ReactDOMTypes.js @@ -21,6 +21,7 @@ export type PreloadOptions = { imageSrcSet?: string, imageSizes?: string, referrerPolicy?: string, + media?: string, }; export type PreloadModuleOptions = { as?: string,