Update preload links to support nonce and fetchpriority

liuyenwei · liuyenwei · commit 957b673fd3a2 · 2023-05-17T17:20:55.000Z
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(() => {
