Update preload links to support nonce and fetchpriority (#26826)

liuyenwei · web-flow · commit 535c038d15d2 · 2023-05-22T22:56:17.000-04:00
Currently when React generates rel=preload link tags for script/stylesheet resources, it will not carryover nonce and fetchpriority values if specified on the original elements.

This change ensures that the preload links use the nonce and fetchPriority values if they were specified.
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -5510,6 +5510,7 @@ function preloadAsStylePropsFromProps(href: string, props: any): PreloadProps {
     as: 'style',
     href: href,
     crossOrigin: props.crossOrigin,
+    fetchPriority: props.fetchPriority,
     integrity: props.integrity,
     media: props.media,
     hrefLang: props.hrefLang,
@@ -5523,7 +5524,9 @@ function preloadAsScriptPropsFromProps(href: string, props: any): PreloadProps {
     as: 'script',
     href,
     crossOrigin: props.crossOrigin,
+    fetchPriority: props.fetchPriority,
     integrity: props.integrity,
+    nonce: props.nonce,
     referrerPolicy: props.referrerPolicy,
   };
 }
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -4531,6 +4531,43 @@ body {
       );
     });
 
+    // @gate enableFloat
+    it('respects attributes defined on the stylesheet element when preloading stylesheets during server rendering', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head>
+              <link rel="stylesheet" fetchPriority="high" href="foo" />
+            </head>
+            <body>
+              <link rel="stylesheet" fetchPriority="low" href="notaresource" />
+              <div>hello world</div>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="style" fetchpriority="high" href="foo" />
+            <link
+              rel="preload"
+              as="style"
+              fetchpriority="low"
+              href="notaresource"
+            />
+            <link rel="stylesheet" fetchpriority="high" href="foo" />
+          </head>
+          <body>
+            <link rel="stylesheet" fetchpriority="low" href="notaresource" />
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+    });
+
     // @gate enableFloat
     it('hoists stylesheet resources to the correct precedence', async () => {
       await act(() => {
@@ -5913,6 +5950,45 @@ background-color: green;
       );
     });
 
+    // @gate enableFloat
+    it('respects attributes defined on the script element when preloading scripts during server rendering', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <script src="foo" fetchPriority="high" nonce="1234" />
+              <script src="bar" fetchPriority="low" nonce="1234" />
+              hello world
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="preload"
+              href="foo"
+              fetchpriority="high"
+              nonce="1234"
+              as="script"
+            />
+            <link
+              rel="preload"
+              href="bar"
+              fetchpriority="low"
+              nonce="1234"
+              as="script"
+            />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+    });
+
     // @gate enableFloat
     it('does not create script resources when inside an <svg> context', async () => {
       await act(() => {
