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

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.
EdisonVan · Apr 15, 2024 · 265be6e · 265be6e
1 parent 81b6e4a
commit 265be6e
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
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(() => {