React Compatibility: Replace legacy ReactDOM.render method with creat…

…eRoot. (#38649)
Automattic · Aug 2, 2024 · 9bbd5a7 · 9bbd5a7
1 parent 6e6f862
commit 9bbd5a7
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 27 deletions.
diff --git a/projects/packages/forms/changelog/update-react-19-compat-ReactDOM-render b/projects/packages/forms/changelog/update-react-19-compat-ReactDOM-render
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+React compatibility: Changing ReactDOM.render usage to be via ReactDOM.createRoot.
diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-forms",
-	"version": "0.32.6",
+	"version": "0.32.7-alpha",
 	"description": "Jetpack Forms",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/forms/#readme",
 	"bugs": {

diff --git a/projects/packages/forms/src/class-jetpack-forms.php b/projects/packages/forms/src/class-jetpack-forms.php
@@ -15,7 +15,7 @@
  */
 class Jetpack_Forms {
 
-	const PACKAGE_VERSION = '0.32.6';
+	const PACKAGE_VERSION = '0.32.7-alpha';
 
 	/**
 	 * Load the contact form module.

diff --git a/projects/packages/forms/src/dashboard/index.js b/projects/packages/forms/src/dashboard/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 import { get } from 'lodash';
 import { createHashRouter, Navigate, RouterProvider } from 'react-router-dom';
 /**
@@ -18,7 +18,7 @@ export const config = key => get( settings, key );
 window.addEventListener( 'load', () => {
 	const container = document.getElementById( 'jp-forms-dashboard' );
 
-	settings = JSON.parse( unescape( container.dataset.config ) );
+	settings = JSON.parse( decodeURIComponent( container.dataset.config ) );
 	delete container.dataset.config;
 
 	const router = createHashRouter( [
@@ -36,5 +36,6 @@ window.addEventListener( 'load', () => {
 		},
 	] );
 
-	render( <RouterProvider router={ router } />, container );
+	const root = createRoot( container );
+	root.render( <RouterProvider router={ router } /> );
 } );
diff --git a/projects/packages/search/changelog/update-react-19-compat-ReactDOM-render b/projects/packages/search/changelog/update-react-19-compat-ReactDOM-render
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+React compatibility: Changing ReactDOM.render usage to be via ReactDOM.createRoot.
diff --git a/projects/packages/search/package.json b/projects/packages/search/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "jetpack-search",
-	"version": "0.44.13",
+	"version": "0.44.14-alpha",
 	"description": "Package for Jetpack Search products",
 	"main": "main.js",
 	"directories": {

diff --git a/projects/packages/search/src/class-package.php b/projects/packages/search/src/class-package.php
@@ -11,7 +11,7 @@
  * Search package general information
  */
 class Package {
-	const VERSION = '0.44.13';
+	const VERSION = '0.44.14-alpha';
 	const SLUG    = 'search';
 
 	/**

diff --git a/projects/packages/search/src/customberg/index.jsx b/projects/packages/search/src/customberg/index.jsx
@@ -1,4 +1,4 @@
-import { render } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 import Layout from 'components/layout';
 import 'styles.scss';
 
@@ -16,7 +16,8 @@ function collapseWpAdminSidebar() {
  */
 function initialize( id ) {
 	collapseWpAdminSidebar();
-	render( <Layout />, document.getElementById( id ) );
+	const root = createRoot( document.getElementById( id ) );
+	root.render( <Layout /> );
 }
 
 global.jetpackSearchConfigureInit = initialize;
diff --git a/projects/plugins/jetpack/changelog/update-react-19-compat-ReactDOM-render b/projects/plugins/jetpack/changelog/update-react-19-compat-ReactDOM-render
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+React Compatibility: Changing ReactDOM.render usage to be via ReactDOM.createRoot.
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/view.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/view.js
@@ -1,5 +1,5 @@
 import domReady from '@wordpress/dom-ready';
-import { render } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 import { DEFAULT_ASK_BUTTON_LABEL, DEFAULT_PLACEHOLDER } from './constants';
 import QuestionAnswer from './question-answer';
 import './view.scss';
@@ -34,7 +34,8 @@ domReady( function () {
 	const placeholder = container.getAttribute( 'data-placeholder' );
 	const blogId = container.getAttribute( 'data-blog-id' );
 	const blogType = container.getAttribute( 'data-blog-type' );
-	render(
+	const root = createRoot( container );
+	root.render(
 		<AiChat
 			askButtonLabel={ askButtonLabel }
 			blogId={ blogId }
@@ -43,7 +44,6 @@ domReady( function () {
 			showCopy={ !! parseInt( container.getAttribute( 'data-show-copy' ) ) }
 			showFeedback={ !! parseInt( container.getAttribute( 'data-show-feedback' ) ) }
 			showSources={ !! parseInt( container.getAttribute( 'data-show-sources' ) ) }
-		/>,
-		container
+		/>
 	);
 } );
diff --git a/projects/plugins/jetpack/extensions/blocks/story/view.js b/projects/plugins/jetpack/extensions/blocks/story/view.js
@@ -1,5 +1,5 @@
 import domReady from '@wordpress/dom-ready';
-import { render } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 import StoryPlayer from './player';
 
 function renderPlayer( rootElement, settings ) {
@@ -21,17 +21,20 @@ function renderPlayer( rootElement, settings ) {
 	}
 
 	const id = parseId( rootElement );
-
-	render(
-		<StoryPlayer
-			id={ id }
-			slides={ slides }
-			metadata={ metadata }
-			disabled={ false }
-			{ ...settings }
-		/>,
-		rootElement
-	);
+	const container = document.querySelector( `[data-id='${ id }']` );
+
+	if ( container ) {
+		const root = createRoot( container );
+		root.render(
+			<StoryPlayer
+				id={ id }
+				slides={ slides }
+				metadata={ metadata }
+				disabled={ false }
+				{ ...settings }
+			/>
+		);
+	}
 }
 
 function parseSlides( slidesWrapper ) {

diff --git a/projects/plugins/jetpack/extensions/shared/frontend-management.js b/projects/plugins/jetpack/extensions/shared/frontend-management.js
@@ -1,4 +1,4 @@
-import { createElement, render } from '@wordpress/element';
+import { createElement, createRoot } from '@wordpress/element';
 import { assign, kebabCase } from 'lodash';
 
 export class FrontendManagement {
@@ -23,7 +23,8 @@ export class FrontendManagement {
 			assign( data, options.props );
 			const children = this.extractChildrenFromContainer( node );
 			const el = createElement( component, data, children );
-			render( el, selector ? node.querySelector( selector ) : node );
+			const root = createRoot( el );
+			root.render( selector ? node.querySelector( selector ) : node );
 
 			node.setAttribute( 'data-jetpack-block-initialized', true );
 		}