Import hydrateRoot from react-dom/client (#2789)

motiondivision · Sep 4, 2024 · 5619d56 · 5619d56
1 parent beae985
commit 5619d56
Show file tree

Hide file tree

Showing 27 changed files with 28 additions and 26 deletions.
diff --git a/dev/html/public/optimized-appear/defer-handoff-block.html b/dev/html/public/optimized-appear/defer-handoff-block.html
@@ -145,7 +145,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 4)
                 }
             )

diff --git a/dev/html/public/optimized-appear/defer-handoff-external-values.html b/dev/html/public/optimized-appear/defer-handoff-external-values.html
@@ -120,7 +120,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-ancestor-suspend.html b/dev/html/public/optimized-appear/defer-handoff-layout-ancestor-suspend.html
@@ -146,7 +146,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-ancestor.html b/dev/html/public/optimized-appear/defer-handoff-layout-ancestor.html
@@ -173,7 +173,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-child.html b/dev/html/public/optimized-appear/defer-handoff-layout-child.html
@@ -157,7 +157,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-opacity.html b/dev/html/public/optimized-appear/defer-handoff-layout-opacity.html
@@ -105,7 +105,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-sibling-transform.html b/dev/html/public/optimized-appear/defer-handoff-layout-sibling-transform.html
@@ -145,7 +145,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-sibling.html b/dev/html/public/optimized-appear/defer-handoff-layout-sibling.html
@@ -159,7 +159,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-useeffect.html b/dev/html/public/optimized-appear/defer-handoff-layout-useeffect.html
@@ -120,7 +120,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-uselayouteffect.html b/dev/html/public/optimized-appear/defer-handoff-layout-uselayouteffect.html
@@ -119,7 +119,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout.html b/dev/html/public/optimized-appear/defer-handoff-layout.html
@@ -120,7 +120,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(
+                        ReactDOMClient.hydrateRoot(
                             root,
                             React.createElement(Component)
                         )

diff --git a/dev/html/public/optimized-appear/defer-handoff.html b/dev/html/public/optimized-appear/defer-handoff.html
@@ -126,7 +126,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 2)
                 }
             )

diff --git a/dev/html/public/optimized-appear/interrupt-delay-after.html b/dev/html/public/optimized-appear/interrupt-delay-after.html
@@ -85,7 +85,7 @@
                 (animation) => {
                     // Hydrate root mid-way through animation
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
 
                         const { opacity: initialOpacity } =
                             window.getComputedStyle(box)

diff --git a/dev/html/public/optimized-appear/interrupt-delay-before-accelerated.html b/dev/html/public/optimized-appear/interrupt-delay-before-accelerated.html
@@ -71,7 +71,7 @@
                 (animation) => {
                     // Hydrate root mid-way through delay
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
 
                         const { opacity: initialOpacity } =
                             window.getComputedStyle(box)

diff --git a/dev/html/public/optimized-appear/interrupt-delay-before.html b/dev/html/public/optimized-appear/interrupt-delay-before.html
@@ -84,7 +84,7 @@
                 (animation) => {
                     // Hydrate root mid-way through delay
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
 
                         const { opacity: initialOpacity } =
                             window.getComputedStyle(box)

diff --git a/dev/html/public/optimized-appear/interrupt-spring.html b/dev/html/public/optimized-appear/interrupt-spring.html
@@ -118,7 +118,7 @@
                 (animation) => {
                     // Hydrate root mid-way through animation
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, 100)
                 }
             )

diff --git a/dev/html/public/optimized-appear/interrupt-tween-opacity-waapi.html b/dev/html/public/optimized-appear/interrupt-tween-opacity-waapi.html
@@ -80,7 +80,7 @@
                 (animation) => {
                     // Hydrate root mid-way through animation
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 2)
                 }
             )

diff --git a/dev/html/public/optimized-appear/interrupt-tween-opacity.html b/dev/html/public/optimized-appear/interrupt-tween-opacity.html
@@ -84,7 +84,7 @@
                 (animation) => {
                     // Hydrate root mid-way through animation
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 2)
                 }
             )

diff --git a/dev/html/public/optimized-appear/interrupt-tween-transforms.html b/dev/html/public/optimized-appear/interrupt-tween-transforms.html
@@ -92,7 +92,7 @@
                 (animation) => {
                     // Hydrate root mid-way through animation
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 2)
                 }
             )

diff --git a/dev/html/public/optimized-appear/interrupt-tween-x.html b/dev/html/public/optimized-appear/interrupt-tween-x.html
@@ -93,7 +93,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 2)
                 }
             )

diff --git a/dev/html/public/optimized-appear/persist-optimised-animation.html b/dev/html/public/optimized-appear/persist-optimised-animation.html
@@ -97,7 +97,7 @@
                 },
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 2)
                 }
             )

diff --git a/dev/html/public/optimized-appear/persist.html b/dev/html/public/optimized-appear/persist.html
@@ -82,7 +82,7 @@
                      */
                     setTimeout(() => {
                         // Hydrate root mid-way through animation
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, duration * 1000 + 1000)
                 }
             )

diff --git a/dev/html/public/optimized-appear/portal.html b/dev/html/public/optimized-appear/portal.html
@@ -111,7 +111,7 @@
                                 },
                             })
                         )
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 2)
                 }
             )

diff --git a/dev/html/public/optimized-appear/resync-delay.html b/dev/html/public/optimized-appear/resync-delay.html
@@ -91,7 +91,7 @@
                 options,
                 (animation) => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, duration * 1000)
                 }
             )

diff --git a/dev/html/public/optimized-appear/resync.html b/dev/html/public/optimized-appear/resync.html
@@ -107,7 +107,7 @@
                 },
                 () => {
                     setTimeout(() => {
-                        ReactDOM.hydrateRoot(root, Component)
+                        ReactDOMClient.hydrateRoot(root, Component)
                     }, (duration * 1000) / 2)
                 }
             )

diff --git a/dev/html/public/optimized-appear/start-after-hydration.html b/dev/html/public/optimized-appear/start-after-hydration.html
@@ -87,7 +87,7 @@
             // Emulate server rendering of element
             root.innerHTML = ReactDOMServer.renderToString(Component)
 
-            ReactDOM.hydrateRoot(root, Component)
+            ReactDOMClient.hydrateRoot(root, Component)
         </script>
     </body>
 </html>
diff --git a/dev/html/src/imports/optimized-appear.js b/dev/html/src/imports/optimized-appear.js
@@ -1,9 +1,11 @@
 import * as React from "react"
 import * as ReactDOM from "react-dom"
+import * as ReactDOMClient from "react-dom/client"
 import * as ReactDOMServer from "react-dom/server"
 import * as Motion from "framer-motion"
 
 window.React = React
 window.ReactDOM = ReactDOM
+window.ReactDOMClient = ReactDOMClient
 window.ReactDOMServer = ReactDOMServer
 window.Motion = Motion
-Original file line number
+Diff line change
@@ Expand Up / @@ -111,7 +111,7 @@ @@
                                     },
                                 })
                             )
-                            ReactDOM.hydrateRoot(root, Component)
+                            ReactDOMClient.hydrateRoot(root, Component)
                         }, (duration * 1000) / 2)
                     }
                 )
@@ Expand Down @@