Plugins: Refactor the 'PluginArea' component to use the sync store

WordPress · Mar 21, 2023 · e34777f · e34777f
1 parent e56e53a
commit e34777f
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 90 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/plugins/README.md b/packages/plugins/README.md
@@ -68,6 +68,12 @@ const Layout = () => (
 );
 ```
 
+_Parameters_
+
+-   _props_ `Object`:
+-   _props.scope_ `string|undefined`:
+-   _props.onError_ `Function|undefined`:
+
 _Returns_
 
 -   `WPComponent`: The component to be rendered.

diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -30,6 +30,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"memize": "^1.1.0"
 	},
 	"peerDependencies": {

diff --git a/packages/plugins/src/components/plugin-area/index.js b/packages/plugins/src/components/plugin-area/index.js
@@ -6,8 +6,9 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useMemo, useSyncExternalStore } from '@wordpress/element';
 import { addAction, removeAction } from '@wordpress/hooks';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -16,9 +17,14 @@ import { PluginContextProvider } from '../plugin-context';
 import { PluginErrorBoundary } from '../plugin-error-boundary';
 import { getPlugins } from '../../api';
 
+const getPluginContext = memoize( ( icon, name ) => ( { icon, name } ) );
+
 /**
  * A component that renders all plugin fills in a hidden div.
  *
+ * @param {Object}             props
+ * @param {string|undefined}   props.scope
+ * @param {Function|undefined} props.onError
  * @example
  * ```js
  * // Using ES5 syntax
@@ -50,80 +56,61 @@ import { getPlugins } from '../../api';
  *
  * @return {WPComponent} The component to be rendered.
  */
-class PluginArea extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.setPlugins = this.setPlugins.bind( this );
-		this.memoizedContext = memoize( ( name, icon ) => {
-			return {
-				name,
-				icon,
-			};
-		} );
-		this.state = this.getCurrentPluginsState();
-	}
+function PluginArea( { scope, onError } ) {
+	const store = useMemo( () => {
+		let lastValue;
 
-	getCurrentPluginsState() {
 		return {
-			plugins: getPlugins( this.props.scope ).map(
-				( { icon, name, render } ) => {
-					return {
-						Plugin: render,
-						context: this.memoizedContext( name, icon ),
-					};
-				}
-			),
-		};
-	}
+			subscribe( listener ) {
+				addAction(
+					'plugins.pluginRegistered',
+					'core/plugins/plugin-area/plugins-registered',
+					listener
+				);
+				addAction(
+					'plugins.pluginUnregistered',
+					'core/plugins/plugin-area/plugins-unregistered',
+					listener
+				);
+				return () => {
+					removeAction(
+						'plugins.pluginRegistered',
+						'core/plugins/plugin-area/plugins-registered'
+					);
+					removeAction(
+						'plugins.pluginUnregistered',
+						'core/plugins/plugin-area/plugins-unregistered'
+					);
+				};
+			},
+			getValue() {
+				const nextValue = getPlugins( scope );
 
-	componentDidMount() {
-		addAction(
-			'plugins.pluginRegistered',
-			'core/plugins/plugin-area/plugins-registered',
-			this.setPlugins
-		);
-		addAction(
-			'plugins.pluginUnregistered',
-			'core/plugins/plugin-area/plugins-unregistered',
-			this.setPlugins
-		);
-	}
+				if ( ! isShallowEqual( lastValue, nextValue ) ) {
+					lastValue = nextValue;
+				}
 
-	componentWillUnmount() {
-		removeAction(
-			'plugins.pluginRegistered',
-			'core/plugins/plugin-area/plugins-registered'
-		);
-		removeAction(
-			'plugins.pluginUnregistered',
-			'core/plugins/plugin-area/plugins-unregistered'
-		);
-	}
+				return lastValue;
+			},
+		};
+	}, [ scope ] );
 
-	setPlugins() {
-		this.setState( this.getCurrentPluginsState );
-	}
+	const plugins = useSyncExternalStore( store.subscribe, store.getValue );
 
-	render() {
-		return (
-			<div style={ { display: 'none' } }>
-				{ this.state.plugins.map( ( { context, Plugin } ) => (
-					<PluginContextProvider
-						key={ context.name }
-						value={ context }
-					>
-						<PluginErrorBoundary
-							name={ context.name }
-							onError={ this.props.onError }
-						>
-							<Plugin />
-						</PluginErrorBoundary>
-					</PluginContextProvider>
-				) ) }
-			</div>
-		);
-	}
+	return (
+		<div style={ { display: 'none' } }>
+			{ plugins.map( ( { icon, name, render: Plugin } ) => (
+				<PluginContextProvider
+					key={ name }
+					value={ getPluginContext( icon, name ) }
+				>
+					<PluginErrorBoundary name={ name } onError={ onError }>
+						<Plugin />
+					</PluginErrorBoundary>
+				</PluginContextProvider>
+			) ) }
+		</div>
+	);
 }
 
 export default PluginArea;
diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js
@@ -92,30 +92,26 @@ describe( 'PluginArea', () => {
 		expect( container ).toHaveTextContent( 'plugin: two.' );
 	} );
 
-	test.failing(
-		'does not rerender when a plugin is added to a different scope',
-		() => {
-			const ComponentSpy = jest.fn( ( { content } ) => {
-				return `plugin: ${ content }.`;
-			} );
+	test( 'does not rerender when a plugin is added to a different scope', () => {
+		const ComponentSpy = jest.fn( ( { content } ) => {
+			return `plugin: ${ content }.`;
+		} );
 
-			registerPlugin( 'scoped', {
-				render: () => <ComponentSpy content="scoped" />,
-				icon: 'smiley',
-				scope: 'my-app',
-			} );
+		registerPlugin( 'scoped', {
+			render: () => <ComponentSpy content="scoped" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
 
-			render( <PluginArea scope="my-app" /> );
+		render( <PluginArea scope="my-app" /> );
 
-			act( () => {
-				registerPlugin( 'unscoped', {
-					render: () => <TestComponent content="unscoped" />,
-					icon: 'smiley',
-				} );
+		act( () => {
+			registerPlugin( 'unscoped', {
+				render: () => <TestComponent content="unscoped" />,
+				icon: 'smiley',
 			} );
+		} );
 
-			// Any store update triggers setState and causes PluginArea to rerender.
-			expect( ComponentSpy ).toHaveBeenCalledTimes( 1 );
-		}
-	);
+		expect( ComponentSpy ).toHaveBeenCalledTimes( 1 );
+	} );
 } );