Migrate all React functionality to use @wordpress/element with dependency extraction

assets/css/synonyms.css

@@ -1,3 +1,13 @@
+:root {
+	--ep-synonyms-input-border-color: hsl(0, 0%, 80%);
+	--ep-synonyms-color-black: #1a1e24;
+	--ep-synonyms-color-error: #b52727;
+}
+
+html.wp-toolbar {
+	background: transparent;
+}
+
 #synonym-root {
 
 	& .page-title-action {
@@ -9,68 +19,97 @@
 	}
 
 	& h2 {
-		color: #23282d;
+		color: var(--ep-synonyms-color-black);
 	}
 }
 
-.synonym-alternatives-editor,
-.synonym-set-editor {
-	display: flex;
+.synonym-editor {
 
-	& > .postbox {
+	& .postbox {
 		width: 100%;
 
 		& > .hndle {
 			display: flex;
 		}
 	}
+}
 
-	& .synonym-alternative-editor {
-		display: flex;
-	}
+.synonym-alternative-editor,
+.synonym-set-editor {
+	align-items: flex-start;
+	display: flex;
 
-	& .ep-synonyms__linked-multi-input {
+	& .components-form-token-field {
 		flex: 1;
 		margin-bottom: 0.5em;
 	}
 
-	& .ep-synonyms__input {
-		border: 1px solid hsl(0, 0%, 80%);
-		margin-bottom: 0.5em;
-		margin-right: 1em;
-		width: 10em;
+	& .components-form-token-field__label {
+		display: none;
 	}
 
-	& .synonym-alternatives__primary-heading {
-		width: 11em;
+	& .components-form-token-field__input-container {
+		border-color: var(--ep-synonyms-input-border-color);
+		box-sizing: border-box;
 	}
 
-	& .synonym-alternatives__input-heading {
-		flex: 1;
+	& .components-form-token-field__token-text {
+		padding-bottom: 1px;
+		padding-top: 1px;
+
+		@media screen and (max-width: 782px) {
+			padding-bottom: 3px;
+			padding-top: 3px;
+		}
 	}
 
-	& .ep-synonyms__linked-multi-input input:focus {
-		box-shadow: none;
+	& input[type="text"].components-form-token-field__input {
+		margin-bottom: 2px;
+		margin-top: 2px;
+
+		@media screen and (max-width: 782px) {
+			min-height: 30px;
+		}
 	}
 
-	&.invalid input {
-		border-color: #a00;
+	& .components-form-token-field__help {
+		margin-top: 0;
 	}
 }
 
-.synonym-alternative-editor,
-.synonym-set-editor {
-	margin-top: 0.625em;
+input[type="text"].ep-synonyms__input {
+	border: 1px solid var(--ep-synonyms-input-border-color);
+	margin-bottom: 0.5em;
+	margin-right: 1em;
+	min-height: 36px;
+	width: 10em;
+
+	@media screen and (max-width: 782px) {
+		min-height: 40px;
+	}
+}
+
+.synonym-alternatives__primary-heading {
+	width: 11em;
+}
+
+.synonym-alternatives__input-heading {
+	flex: 1;
 }
 
 button.synonym__remove {
 	background-color: transparent;
 	border: none;
-	color: #a00;
+	color: var(--ep-synonyms-color-error);
 	cursor: pointer;
-	margin: -8px 0 0 10px;
+	margin: 0 0 0 10px;
+	min-height: 36px;
 	padding: 0;
 
+	@media screen and (max-width: 782px) {
+		min-height: 40px;
+	}
+
 	& .dashicons-dismiss {
 		margin: -2px 2px 0 0;
 	}
@@ -84,7 +123,7 @@ button.synonym__remove {
 
 .synonym__validation,
 .synonym-solr-editor__validation p {
-	color: #a00;
+	color: var(--ep-synonyms-color-error);
 	font-style: italic;
 }
 

assets/js/autosuggest.js

@@ -1,14 +1,15 @@
 /* eslint-disable camelcase, no-underscore-dangle, no-use-before-define */
+
+/**
+ * Internal dependencies.
+ */
 import {
 	findAncestorByClass,
 	escapeDoubleQuotes,
 	replaceGlobally,
 	debounce,
 	domReady,
 } from './utils/helpers';
-import 'element-closest';
-import 'promise-polyfill/src/polyfill';
-import 'whatwg-fetch';
 
 const { epas } = window;
 
@@ -186,7 +187,8 @@ async function esSearch(query, searchTerm) {
 	}
 
 	try {
-		const response = await window.fetch(epas.endpointUrl, fetchConfig);
+		const response = await fetch(epas.endpointUrl, fetchConfig);
+
 		if (!response.ok) {
 			throw Error(response.statusText);
 		}

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

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'),

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'));

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}

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);

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]);
 

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 '@wordpress/element';
+
+/**
+ * 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);