Migrate React dependencies to @wordpress/element.

10up · felipeelia · May 17, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022
commit 063b049a78d14dc0d4b820c4a9e5604fe29200ae
diff --git a/assets/js/blocks/related-posts/Edit.js b/assets/js/blocks/related-posts/Edit.js
@@ -1,12 +1,11 @@
-const { __ } = wp.i18n;
-
-const { AlignmentToolbar, BlockControls, InspectorControls } = wp.editor;
-
-const { PanelBody, Placeholder, Spinner, QueryControls } = wp.components;
-
-const { Fragment, Component, RawHTML } = wp.element;
-
-const { addQueryArgs } = wp.url;
+/**
+ * WordPress dependencies.
+ */
+import { AlignmentToolbar, BlockControls, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, Placeholder, Spinner, QueryControls } from '@wordpress/components';
+import { Fragment, Component, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Edit component

diff --git a/assets/js/blocks/related-posts/block.js b/assets/js/blocks/related-posts/block.js
@@ -1,8 +1,13 @@
-import Edit from './Edit';
-
-const { __ } = wp.i18n;
+/**
+ * WordPress dependencies.
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
 
-const { registerBlockType } = wp.blocks;
+/**
+ * Internal dependencies.
+ */
+import Edit from './Edit';
 
 registerBlockType('elasticpress/related-posts', {
 	title: __('Related Posts (ElasticPress)', 'elasticpress'),

diff --git a/assets/js/ordering/index.js b/assets/js/ordering/index.js
@@ -1,5 +1,11 @@
-import ReactDOM from 'react-dom';
+/**
+ * WordPress dependencies.
+ */
+import { render } from '@wordpress/element';
 
+/**
+ * Internal dependencies.
+ */
 import { Pointers } from './pointers';
 
-ReactDOM.render(<Pointers />, document.getElementById('ordering-app'));
+render(<Pointers />, document.getElementById('ordering-app'));
diff --git a/assets/js/ordering/pointers.js b/assets/js/ordering/pointers.js
@@ -1,8 +1,18 @@
-// External
-import React, { Component } from 'react';
-import apiFetch from '@wordpress/api-fetch';
+/**
+ * External dependencies.
+ */
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Component, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
 import { pluck, debounce } from '../utils/helpers';
 
 apiFetch.use(apiFetch.createRootURLMiddleware(window.epOrdering.restApiRoot));
@@ -369,7 +379,7 @@ export class Pointers extends Component {
 											  );
 
 									return (
-										<React.Fragment key={item.ID}>
+										<Fragment key={item.ID}>
 											{parseInt(window.epOrdering.postsPerPage, 10) ===
 												index && (
 												<Draggable
@@ -450,7 +460,7 @@ export class Pointers extends Component {
 													</div>
 												)}
 											</Draggable>
-										</React.Fragment>
+										</Fragment>
 									);
 								})}
 								{provided.placeholder}

diff --git a/assets/js/synonyms/components/SynonymsEditor.js b/assets/js/synonyms/components/SynonymsEditor.js
@@ -1,13 +1,20 @@
-import React, { useContext, useEffect } from 'react';
+/**
+ * WordPress dependencies.
+ */
+import { useContext, useEffect, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
 import { State, Dispatch } from '../context';
-import SetsEditor from './editors/SetsEditor';
 import AlterativesEditor from './editors/AlternativesEditor';
+import SetsEditor from './editors/SetsEditor';
 import SolrEditor from './editors/SolrEditor';
 
 /**
  * Synonyms editor component.
  *
- * @returns {React.FC} Synonyms component
+ * @returns {WPElement} Synonyms component
  */
 const SynonymsEditor = () => {
 	const state = useContext(State);

diff --git a/assets/js/synonyms/components/editors/AlternativeEditor.js b/assets/js/synonyms/components/editors/AlternativeEditor.js
@@ -1,12 +1,19 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
-import LinkedMultiInput from '../shared/LinkedMultiInput';
+/**
+ * WordPress dependencies.
+ */
+import { useContext, useEffect, useMemo, useRef, useState, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
 import { Dispatch } from '../../context';
+import LinkedMultiInput from '../shared/LinkedMultiInput';
 
 /**
  * Alternative Editor
  *
  * @param {object} props Props.
- * @returns {React.FC} AlternativeEditor component
+ * @returns {WPElement} AlternativeEditor component
  */
 const AlternativeEditor = (props) => {
 	const { id, synonyms, removeAction, updateAction } = props;
@@ -32,7 +39,7 @@ const AlternativeEditor = (props) => {
 	/**
 	 * Handle key down.
 	 *
-	 * @param {React.SyntheticEvent} event Keydown event.
+	 * @param {Event} event Keydown event.
 	 */
 	const handleKeyDown = (event) => {
 		switch (event.key) {
@@ -54,7 +61,7 @@ const AlternativeEditor = (props) => {
 		primaryRef.current.focus();
 	}, [primaryRef]);
 
-	const memoizedSynonyms = React.useMemo(() => {
+	const memoizedSynonyms = useMemo(() => {
 		return synonyms.filter((item) => !item.primary);
 	}, [synonyms]);
 

diff --git a/assets/js/synonyms/components/editors/AlternativesEditor.js b/assets/js/synonyms/components/editors/AlternativesEditor.js
@@ -1,13 +1,20 @@
-import React, { Fragment, useContext } from 'react';
-import AlternativeEditor from './AlternativeEditor';
+/**
+ * WordPress dependencies.
+ */
+import { Fragment, useContext, WPElement } from 'react';
+
+/**
+ * Internal dependencies.
+ */
 import { Dispatch, State } from '../../context';
+import AlternativeEditor from './AlternativeEditor';
 
 /**
  * Synonyms editor component.
  *
  * @param {object}   props              Props.
  * @param {object[]} props.alternatives Defined alternatives (explicit mappings).
- * @returns {React.FC} AlternativesEditor component
+ * @returns {WPElement} AlternativesEditor component
  */
 const AlternativesEditor = ({ alternatives }) => {
 	const dispatch = useContext(Dispatch);
@@ -22,7 +29,7 @@ const AlternativesEditor = ({ alternatives }) => {
 	/**
 	 * Handle click.
 	 *
-	 * @param {React.SyntheticEvent} e Event.
+	 * @param {Event} e Event.
 	 */
 	const handleClick = (e) => {
 		const [lastItem] = state.alternatives.slice(-1);

diff --git a/assets/js/synonyms/components/editors/SetsEditor.js b/assets/js/synonyms/components/editors/SetsEditor.js
@@ -1,13 +1,20 @@
-import React, { useContext, Fragment } from 'react';
-import LinkedMultiInput from '../shared/LinkedMultiInput';
+/**
+ * WordPress dependencies.
+ */
+import { Fragment, useContext, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
 import { Dispatch, State } from '../../context';
+import LinkedMultiInput from '../shared/LinkedMultiInput';
 
 /**
  * Synonyms editor component.
  *
  * @param {object}   props      Props
  * @param {object[]} props.sets Defined sets (equivalent synonyms).
- * @returns {React.FC} SetsEditor component
+ * @returns {WPElement} SetsEditor component
  */
 const SetsEditor = ({ sets }) => {
 	const dispatch = useContext(Dispatch);
@@ -17,7 +24,7 @@ const SetsEditor = ({ sets }) => {
 	/**
 	 * Handle click.
 	 *
-	 * @param {React.SyntheticEvent} e Event
+	 * @param {Event} e Event
 	 */
 	const handleClick = (e) => {
 		const [lastSet] = state.sets.slice(-1);

diff --git a/assets/js/synonyms/components/editors/SolrEditor.js b/assets/js/synonyms/components/editors/SolrEditor.js
@@ -1,10 +1,17 @@
-import React, { useContext } from 'react';
+/**
+ * WordPress dependencies.
+ */
+import { useContext, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
 import { State, Dispatch } from '../../context';
 
 /**
  * Synonym Inspector
  *
- * @returns {React.FC} SolrEditor Component
+ * @returns {WPElement} SolrEditor Component
  */
 const SolrEditor = () => {
 	const state = useContext(State);

diff --git a/assets/js/synonyms/components/shared/LinkedMultiInput.js b/assets/js/synonyms/components/shared/LinkedMultiInput.js
@@ -1,6 +1,13 @@
-import React, { useContext } from 'react';
-import MultiInput from './MultiInput';
+/**
+ * WordPress dependencies.
+ */
+import { useContext, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
 import { Dispatch } from '../../context';
+import MultiInput from './MultiInput';
 
 /**
  * Linked MultiInput
@@ -10,7 +17,7 @@ import { Dispatch } from '../../context';
  * @param {object[]} props.synonyms     Array of synonyms.
  * @param {string}   props.removeAction Name of action to dispatch on remove.
  * @param {string}   props.updateAction Name of action to dispatch on update.
- * @returns {React.FC} LinkedMultiInput component
+ * @returns {WPElement} LinkedMultiInput component
  */
 const LinkedMultiInput = ({ id, synonyms, removeAction, updateAction }) => {
 	const dispatch = useContext(Dispatch);

diff --git a/assets/js/synonyms/components/shared/MultiInput.js b/assets/js/synonyms/components/shared/MultiInput.js
@@ -1,11 +1,18 @@
-import React, { useState } from 'react';
+/**
+ * External dependencies.
+ */
 import CreatableSelect from 'react-select/creatable';
 
+/**
+ * WordPress dependencies.
+ */
+import { useState, WPElement } from '@wordpress/element';
+
 /**
  * Synonyms editor component.
  *
  * @param {object} props Props.
- * @returns {React.FC} MultiInput component
+ * @returns {WPElement} MultiInput component
  */
 const MultiInput = (props) => {
 	const { tokens, setTokens } = props;
@@ -25,7 +32,7 @@ const MultiInput = (props) => {
 	/**
 	 * Handle key down.
 	 *
-	 * @param {React.SyntheticEvent} event Keydown event.
+	 * @param {Event} event Keydown event.
 	 */
 	const handleKeyDown = (event) => {
 		switch (event.key) {

diff --git a/assets/js/synonyms/context.js b/assets/js/synonyms/context.js
@@ -1,4 +1,11 @@
-import React, { createContext, useReducer } from 'react';
+/**
+ * WordPress dependencies.
+ */
+import { createContext, useReducer, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
 import { editorReducer, initialState } from './reducers/editorReducer';
 
 const State = createContext();
@@ -8,7 +15,7 @@ const Dispatch = createContext();
  * App Context.
  *
  * @param {object} props Props.
- * @returns {React.FC} AppContext component
+ * @returns {WPElement} AppContext component
  */
 const AppContext = (props) => {
 	const { children } = props;

diff --git a/assets/js/synonyms/index.js b/assets/js/synonyms/index.js
@@ -1,4 +1,11 @@
-import ReactDOM from 'react-dom';
+/**
+ * WordPress dependencies.
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
 import { AppContext } from './context';
 import SynonymsEditor from './components/SynonymsEditor';
 
@@ -11,7 +18,7 @@ const SELECTOR = '#synonym-root';
  */
 const getRoot = () => document.querySelector(SELECTOR) || false;
 
-ReactDOM.render(
+render(
 	<AppContext>
 		<SynonymsEditor />
 	</AppContext>,