From 0af5a9696ea12e8a2c4cd30a0a26614b35f63219 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 4 Sep 2024 15:10:41 +0200 Subject: [PATCH] Import hydrateRoot from react-dom/client --- dev/html/public/optimized-appear/defer-handoff-block.html | 2 +- .../public/optimized-appear/defer-handoff-external-values.html | 2 +- .../optimized-appear/defer-handoff-layout-ancestor-suspend.html | 2 +- .../public/optimized-appear/defer-handoff-layout-ancestor.html | 2 +- .../public/optimized-appear/defer-handoff-layout-child.html | 2 +- .../public/optimized-appear/defer-handoff-layout-opacity.html | 2 +- .../defer-handoff-layout-sibling-transform.html | 2 +- .../public/optimized-appear/defer-handoff-layout-sibling.html | 2 +- .../public/optimized-appear/defer-handoff-layout-useeffect.html | 2 +- .../optimized-appear/defer-handoff-layout-uselayouteffect.html | 2 +- dev/html/public/optimized-appear/defer-handoff-layout.html | 2 +- dev/html/public/optimized-appear/defer-handoff.html | 2 +- dev/html/public/optimized-appear/interrupt-delay-after.html | 2 +- .../optimized-appear/interrupt-delay-before-accelerated.html | 2 +- dev/html/public/optimized-appear/interrupt-delay-before.html | 2 +- dev/html/public/optimized-appear/interrupt-spring.html | 2 +- .../public/optimized-appear/interrupt-tween-opacity-waapi.html | 2 +- dev/html/public/optimized-appear/interrupt-tween-opacity.html | 2 +- .../public/optimized-appear/interrupt-tween-transforms.html | 2 +- dev/html/public/optimized-appear/interrupt-tween-x.html | 2 +- .../public/optimized-appear/persist-optimised-animation.html | 2 +- dev/html/public/optimized-appear/persist.html | 2 +- dev/html/public/optimized-appear/portal.html | 2 +- dev/html/public/optimized-appear/resync-delay.html | 2 +- dev/html/public/optimized-appear/resync.html | 2 +- dev/html/public/optimized-appear/start-after-hydration.html | 2 +- dev/html/src/imports/optimized-appear.js | 2 ++ 27 files changed, 28 insertions(+), 26 deletions(-) diff --git a/dev/html/public/optimized-appear/defer-handoff-block.html b/dev/html/public/optimized-appear/defer-handoff-block.html index a1bdc23676..8577a763d5 100644 --- 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 index 7dffdb041a..d515d1e495 100644 --- 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 index 953b82492f..87764384e8 100644 --- 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 index 9c8975dca8..1dbfed731a 100644 --- 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 index 81a1dcd23b..5ae4e154af 100644 --- 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 index e339362deb..eb266619f6 100644 --- 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 index 33ab9b67b5..fe07982804 100644 --- 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 index ad792786b3..d639356c59 100644 --- 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 index 253696b455..c5946a836a 100644 --- 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 index 7e840ffcfd..0361b1a00a 100644 --- 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 index 06645403fb..5a49312d9a 100644 --- 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 index 185a060a4d..ee9a8d9b51 100644 --- 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 index 55127b0dca..a525c81acc 100644 --- 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 index 54f5e6385b..387fe73830 100644 --- 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 index 321e31b0c6..569b10091a 100644 --- 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 index 9dd00f5123..2d1e256ed9 100644 --- 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 index a7ccd73dd1..c9ac2eb98a 100644 --- 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 index 7f6e7367a5..57fc289b76 100644 --- 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 index 457f8773eb..e09eb5b719 100644 --- 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 index 5a2e489ab2..0f58c7addf 100644 --- 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 index 2010a3af0c..b9cd07494c 100644 --- 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 index 8a70b3bee3..43c7517ef5 100644 --- 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 index 3a0365d33e..abbfbf04c2 100644 --- 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 index 4c8f2fa245..11f6eef266 100644 --- 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 index d441bf03dd..ea6eff985e 100644 --- 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 index 9ef05364fa..9c999cd087 100644 --- 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) diff --git a/dev/html/src/imports/optimized-appear.js b/dev/html/src/imports/optimized-appear.js index 4f71579731..fbc63be578 100644 --- 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