Add referrerPolicy option to ReactDOM.preload() (#27096)

styfle · web-flow · commit 9377e10105b4 · 2023-07-12T14:32:56.000-07:00
diff --git 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
@@ -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
@@ -3686,6 +3686,91 @@ body {
     );
   });
 
+  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 (
+        <html>
+          <body>hello</body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            referrerpolicy="no-referrer"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            referrerpolicy="no-referrer"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    root.render(<App isClient={true} />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            referrerpolicy="no-referrer"
+          />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/client"
+            imagesizes="100vw"
+            referrerpolicy="no-referrer"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+  });
+
   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
@@ -18,6 +18,7 @@ export type PreloadOptions = {
   fetchPriority?: 'high' | 'low' | 'auto',
   imageSrcSet?: string,
   imageSizes?: string,
+  referrerPolicy?: string,
 };
 export type PreinitOptions = {
   as: string,

Original file line number	Diff line number	Diff line change
`@@ -2284,6 +2284,7 @@ function preloadPropsFromPreloadOptions(`
`2284`	`2284`	`fetchPriority: options.fetchPriority,`
`2285`	`2285`	`imageSrcSet: options.imageSrcSet,`
`2286`	`2286`	`imageSizes: options.imageSizes,`
	`2287`	`+ referrerPolicy: options.referrerPolicy,`
`2287`	`2288`	`};`
`2288`	`2289`	`}`
`2289`	`2290`
Original file line number	Diff line number	Diff line change
`@@ -5564,6 +5564,7 @@ function preloadPropsFromPreloadOptions(`
`5564`	`5564`	`fetchPriority: options.fetchPriority,`
`5565`	`5565`	`imageSrcSet: options.imageSrcSet,`
`5566`	`5566`	`imageSizes: options.imageSizes,`
	`5567`	`+ referrerPolicy: options.referrerPolicy,`
`5567`	`5568`	`};`
`5568`	`5569`	`}`
`5569`	`5570`