From 494b14955e279ea8e90222af22172e4b02b1d5e0 Mon Sep 17 00:00:00 2001 From: James Tien Date: Fri, 25 Oct 2024 10:45:04 +0800 Subject: [PATCH] =?UTF-8?q?Revert=20"Update=20ReactDom.render=20and=20Reac?= =?UTF-8?q?tDom.hydrate=20to=20React=2018=20under=20/client=E2=80=A6"=20(#?= =?UTF-8?q?95704)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit d3a850d0b0e27c96453a9e46d31bbc9dfdf29573. --- client/boot/common.js | 10 +++++++--- client/controller/index.node.js | 1 - client/controller/index.web.js | 2 +- client/controller/web-util.js | 15 +++------------ client/lib/account-settings-helper/index.jsx | 7 ++++--- client/lib/auth-helper/index.jsx | 4 ++-- client/lib/features-helper/index.js | 4 ++-- client/lib/preferences-helper/index.js | 7 ++++--- client/lib/react-query-devtools-helper/index.jsx | 4 ++-- client/lib/store-sandbox-helper/index.tsx | 7 ++++--- 10 files changed, 29 insertions(+), 32 deletions(-) diff --git a/client/boot/common.js b/client/boot/common.js index 81ba1a0ba6bf2..a9583f41a8013 100644 --- a/client/boot/common.js +++ b/client/boot/common.js @@ -8,10 +8,11 @@ import { getLanguageSlugs } from '@automattic/i18n-utils'; import { getToken } from '@automattic/oauth-token'; import { JETPACK_PRICING_PAGE } from '@automattic/urls'; import debugFactory from 'debug'; +import ReactDom from 'react-dom'; import Modal from 'react-modal'; import store from 'store'; import emailVerification from 'calypso/components/email-verification'; -import { ProviderWrappedLayout, render, getRootDomElement } from 'calypso/controller'; +import { ProviderWrappedLayout } from 'calypso/controller'; import isA8CForAgencies from 'calypso/lib/a8c-for-agencies/is-a8c-for-agencies'; import { initializeAnalytics } from 'calypso/lib/analytics/init'; import getSuperProps from 'calypso/lib/analytics/super-props'; @@ -216,7 +217,7 @@ const utils = () => { accessibleFocus(); // Configure app element that React Modal will aria-hide when modal is open - Modal.setAppElement( getRootDomElement() ); + Modal.setAppElement( document.getElementById( 'wpcom' ) ); }; const configureReduxStore = ( currentUser, reduxStore ) => { @@ -402,7 +403,10 @@ const setupMiddlewares = ( currentUser, reduxStore, reactQueryClient ) => { }; function renderLayout( reduxStore, reactQueryClient ) { - render( ); + ReactDom.render( + , + document.getElementById( 'wpcom' ) + ); } const boot = async ( currentUser, registerRoutes ) => { diff --git a/client/controller/index.node.js b/client/controller/index.node.js index 0d46a9c8fc216..f2fe030dd016b 100644 --- a/client/controller/index.node.js +++ b/client/controller/index.node.js @@ -90,7 +90,6 @@ export const redirectIfJetpackNonAtomic = () => {}; export const redirectToHostingPromoIfNotAtomic = () => {}; // eslint-disable-next-line no-unused-vars export const render = ( context ) => {}; -export const getRootDomElement = () => {}; export const ProviderWrappedLayout = () => null; export const notFound = () => null; export const setSelectedSiteIdByOrigin = () => {}; diff --git a/client/controller/index.web.js b/client/controller/index.web.js index 4584aeebf6d38..2933338444516 100644 --- a/client/controller/index.web.js +++ b/client/controller/index.web.js @@ -40,7 +40,7 @@ import { hydrate, render } from './web-util.js'; * Re-export */ export { setLocaleMiddleware, setSectionMiddleware } from './shared.js'; -export { hydrate, render, getRootDomElement } from './web-util.js'; +export { hydrate, render } from './web-util.js'; export const ProviderWrappedLayout = ( { store, diff --git a/client/controller/web-util.js b/client/controller/web-util.js index 5014badca6869..8147e006d1b14 100644 --- a/client/controller/web-util.js +++ b/client/controller/web-util.js @@ -1,18 +1,9 @@ -import { createRoot, hydrateRoot } from 'react-dom/client'; - -export function getRootDomElement() { - return document.getElementById( 'wpcom' ); -} - -let wpcomRootNode; +import ReactDom from 'react-dom'; export function render( context ) { - if ( wpcomRootNode == null ) { - wpcomRootNode = createRoot( getRootDomElement() ); - } - wpcomRootNode.render( context.layout ); + ReactDom.render( context.layout, document.getElementById( 'wpcom' ) ); } export function hydrate( context ) { - wpcomRootNode = hydrateRoot( getRootDomElement(), context.layout ); + ReactDom.hydrate( context.layout, document.getElementById( 'wpcom' ) ); } diff --git a/client/lib/account-settings-helper/index.jsx b/client/lib/account-settings-helper/index.jsx index c239166d586a2..7fbe9610494f3 100644 --- a/client/lib/account-settings-helper/index.jsx +++ b/client/lib/account-settings-helper/index.jsx @@ -1,5 +1,5 @@ import languages from '@automattic/languages'; -import { createRoot } from 'react-dom/client'; +import ReactDom from 'react-dom'; import { useInView } from 'react-intersection-observer'; import { Provider, useDispatch, useSelector } from 'react-redux'; import ColorSchemePicker from 'calypso/blocks/color-scheme-picker'; @@ -66,8 +66,9 @@ export function AccountSettingsHelper() { ); } export default ( element, store ) => - createRoot( element ).render( + ReactDom.render( - + , + element ); diff --git a/client/lib/auth-helper/index.jsx b/client/lib/auth-helper/index.jsx index 15fc70486c84d..5912c913262dd 100644 --- a/client/lib/auth-helper/index.jsx +++ b/client/lib/auth-helper/index.jsx @@ -1,5 +1,5 @@ import config from '@automattic/calypso-config'; -import { createRoot } from 'react-dom/client'; +import ReactDom from 'react-dom'; import './style.scss'; @@ -40,4 +40,4 @@ function AuthHelper() { ); } -export default ( element ) => createRoot( element ).render( ); +export default ( element ) => ReactDom.render( , element ); diff --git a/client/lib/features-helper/index.js b/client/lib/features-helper/index.js index 3e967df73cafe..9c61a2f805a9c 100644 --- a/client/lib/features-helper/index.js +++ b/client/lib/features-helper/index.js @@ -1,4 +1,4 @@ -import { createRoot } from 'react-dom/client'; +import ReactDom from 'react-dom'; import FeatureList from './feature-list'; import './style.scss'; @@ -7,5 +7,5 @@ import './style.scss'; * @param element HTML Element */ export default function injectFeatureHelper( element ) { - createRoot( element ).render( ); + ReactDom.render( , element ); } diff --git a/client/lib/preferences-helper/index.js b/client/lib/preferences-helper/index.js index e76162b4c4a2a..56fa4eb82330a 100644 --- a/client/lib/preferences-helper/index.js +++ b/client/lib/preferences-helper/index.js @@ -1,13 +1,14 @@ -import { createRoot } from 'react-dom/client'; +import ReactDom from 'react-dom'; import { Provider } from 'react-redux'; import PreferenceList from './preference-list'; import './style.scss'; export default function injectPreferenceHelper( element, store ) { - createRoot( element ).render( + ReactDom.render( - + , + element ); } diff --git a/client/lib/react-query-devtools-helper/index.jsx b/client/lib/react-query-devtools-helper/index.jsx index 6b39507f89fe6..798e6b3bed06e 100644 --- a/client/lib/react-query-devtools-helper/index.jsx +++ b/client/lib/react-query-devtools-helper/index.jsx @@ -1,7 +1,7 @@ import config from '@automattic/calypso-config'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { useEffect, useState } from 'react'; -import { createRoot } from 'react-dom/client'; +import ReactDom from 'react-dom'; import { setStoredItem, getStoredItem } from 'calypso/lib/browser-storage'; import './style.scss'; @@ -59,4 +59,4 @@ function ReactQueryDevtoolsHelper() { ); } -export default ( element ) => createRoot( element ).render( ); +export default ( element ) => ReactDom.render( , element ); diff --git a/client/lib/store-sandbox-helper/index.tsx b/client/lib/store-sandbox-helper/index.tsx index b66bd504c67b7..4480f0d7d8bc2 100644 --- a/client/lib/store-sandbox-helper/index.tsx +++ b/client/lib/store-sandbox-helper/index.tsx @@ -1,7 +1,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ToggleControl } from '@wordpress/components'; import { useState, useEffect } from 'react'; -import { createRoot } from 'react-dom/client'; +import ReactDom from 'react-dom'; import useStoreSandboxStatusQuery from 'calypso/data/store-sandbox/use-store-sandbox-status'; import wp from 'calypso/lib/wp'; @@ -74,8 +74,9 @@ export function StoreSandboxHelper() { ); } export default ( element: HTMLElement ) => - createRoot( element ).render( + ReactDom.render( - + , + element );