refactor client float functions

facebook · Sep 21, 2022 · 94ba0cb · 94ba0cb
1 parent 7a67594
commit 94ba0cb
Show file tree

Hide file tree

Showing 5 changed files with 395 additions and 78 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -281,6 +281,52 @@ describe('ReactDOMFizzServer', () => {
         </html>,
       );
     });
+
+    it('inserts a preload resource when called in a layout effect', async () => {
+      function App() {
+        React.useLayoutEffect(() => {
+          ReactDOM.preload('foo', {as: 'style'});
+        }, []);
+        return 'foobar';
+      }
+      const root = ReactDOMClient.createRoot(container);
+      root.render(<App />);
+      expect(Scheduler).toFlushWithoutYielding();
+
+      expect(getVisibleChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="style" href="foo" />
+          </head>
+          <body>
+            <div id="container">foobar</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('inserts a preload resource when called in a passive effect', async () => {
+      function App() {
+        React.useEffect(() => {
+          ReactDOM.preload('foo', {as: 'style'});
+        }, []);
+        return 'foobar';
+      }
+      const root = ReactDOMClient.createRoot(container);
+      root.render(<App />);
+      expect(Scheduler).toFlushWithoutYielding();
+
+      expect(getVisibleChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="style" href="foo" />
+          </head>
+          <body>
+            <div id="container">foobar</div>
+          </body>
+        </html>,
+      );
+    });
   });
 
   describe('style resources', () => {
@@ -454,6 +500,9 @@ describe('ReactDOMFizzServer', () => {
             <link rel="stylesheet" href="default1" data-rprec="default" />
             <link rel="stylesheet" href="default2" data-rprec="default" />
             <link rel="stylesheet" href="bar1" data-rprec="bar" />
+            <link rel="preload" as="style" href="bar1" />
+            <link rel="preload" as="style" href="foo3" />
+            <link rel="preload" as="style" href="default2" />
           </head>
           <body>
             <div>hello world</div>
@@ -1218,6 +1267,7 @@ describe('ReactDOMFizzServer', () => {
           <link rel="stylesheet" href="foo" data-rprec="one" />
           <link rel="stylesheet" href="baz" data-rprec="one" />
           <link rel="stylesheet" href="bar" data-rprec="two" />
+          <link rel="preload" as="style" href="baz" />
         </head>
         <body>
           <div>Hello</div>