From 11a175f2bb610f5e7e1fec9df6267b3b2ae2e01b Mon Sep 17 00:00:00 2001 From: Sam Barnett Date: Thu, 20 Jul 2023 00:30:19 +0800 Subject: [PATCH] Add `media` option to ReactDOM.preload() --- .../src/client/ReactFiberConfigDOM.js | 1 + .../src/server/ReactFizzConfigDOM.js | 1 + .../src/__tests__/ReactDOMFloat-test.js | 85 +++++++++++++++++++ .../react-dom/src/shared/ReactDOMTypes.js | 1 + 4 files changed, 88 insertions(+) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 1149e442f98ea..6131123d90aa4 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -2285,6 +2285,7 @@ function preloadPropsFromPreloadOptions( imageSrcSet: options.imageSrcSet, imageSizes: options.imageSizes, referrerPolicy: options.referrerPolicy, + media: options.media, }; } diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index ec7d829428731..ec10e438aec11 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js @@ -5565,6 +5565,7 @@ function preloadPropsFromPreloadOptions( imageSrcSet: options.imageSrcSet, imageSizes: options.imageSizes, referrerPolicy: options.referrerPolicy, + media: options.media, }; } diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 2ee581f850689..853d487547f08 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -3771,6 +3771,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 + , + ); + }); + describe('ReactDOM.prefetchDNS(href)', () => { it('creates a dns-prefetch resource when called', async () => { function App({url}) { diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js index 1ff0360617b87..984182c2e6a4c 100644 --- a/packages/react-dom/src/shared/ReactDOMTypes.js +++ b/packages/react-dom/src/shared/ReactDOMTypes.js @@ -19,6 +19,7 @@ export type PreloadOptions = { imageSrcSet?: string, imageSizes?: string, referrerPolicy?: string, + media?: string, }; export type PreinitOptions = { as: string,