Convert more things to TS and clarify types

packages/components/src/index.ts

@@ -90,6 +90,7 @@ export { default as GuidePage } from './guide/page';
 export { Heading as __experimentalHeading } from './heading';
 export { HStack as __experimentalHStack } from './h-stack';
 export { default as Icon } from './icon';
+export type { IconType } from './icon';
 export { default as IconButton } from './button/deprecated';
 export {
 	ItemGroup as __experimentalItemGroup,

packages/plugins/README.md

@@ -70,9 +70,9 @@ const Layout = () => (
 
 _Parameters_
 
--   _props_ `Object`:
--   _props.scope_ `string|undefined`:
--   _props.onError_ `Function|undefined`:
+-   _props_ `PluginAreaProps`:
+-   _props.scope_ `string`:
+-   _props.onError_ `( name: Plugin[ 'name' ], error: Error ) => void`:
 
 _Returns_
 
@@ -147,8 +147,8 @@ registerPlugin( 'plugin-name', {
 
 _Parameters_
 
--   _name_ `string`: A string identifying the plugin.Must be unique across all registered plugins.
--   _settings_ `Omit< WPPlugin, 'name' >`: The settings for this plugin.
+-   _name_ `string`: A string identifying the plugin. Must be unique across all registered plugins.
+-   _settings_ `PluginSettings`: The settings for this plugin.
 
 _Returns_
 
@@ -189,7 +189,7 @@ wrapped component.
 
 _Parameters_
 
--   _mapContextToProps_ `Function`: Function called on every context change, expected to return object of props to merge with the component's own props.
+-   _mapContextToProps_ `( context: PluginContext, props: T ) => T & PluginContext`: Function called on every context change, expected to return object of props to merge with the component's own props.
 
 _Returns_
 

packages/plugins/package.json

@@ -27,6 +27,7 @@
 	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",

packages/plugins/src/api/index.ts

@@ -5,12 +5,13 @@
  */
 import { applyFilters, doAction } from '@wordpress/hooks';
 import { plugins as pluginsIcon } from '@wordpress/icons';
-import type { WPElement } from '@wordpress/element';
+import type { IconType } from '@wordpress/components';
+import type { WPComponent } from '@wordpress/element';
 
 /**
  * Defined behavior of a plugin type.
  */
-export interface WPPlugin {
+export interface Plugin {
 	/**
 	 * A string identifying the plugin. Must be unique across all registered plugins.
 	 */
@@ -21,12 +22,12 @@ export interface WPPlugin {
 	 * element (or function returning an element) if you choose to render your
 	 * own SVG.
 	 */
-	icon?: string | WPElement | Function;
+	icon?: IconType;
 
 	/**
 	 * A component containing the UI elements to be rendered.
 	 */
-	render: Function;
+	render: WPComponent;
 
 	/**
 	 * The optional scope to be used when rendering inside a plugin area.
@@ -35,15 +36,17 @@ export interface WPPlugin {
 	scope?: string;
 }
 
+type PluginSettings = Omit< Plugin, 'name' >;
+
 /**
  * Plugin definitions keyed by plugin name.
  */
-const plugins = {} as Record< string, WPPlugin >;
+const plugins = {} as Record< string, Plugin >;
 
 /**
  * Registers a plugin to the editor.
  *
- * @param name     A string identifying the plugin.Must be
+ * @param name     A string identifying the plugin. Must be
  *                 unique across all registered plugins.
  * @param settings The settings for this plugin.
  *
@@ -117,10 +120,7 @@ const plugins = {} as Record< string, WPPlugin >;
  *
  * @return The final plugin settings object.
  */
-export function registerPlugin(
-	name: string,
-	settings: Omit< WPPlugin, 'name' >
-) {
+export function registerPlugin( name: string, settings: PluginSettings ) {
 	if ( typeof settings !== 'object' ) {
 		console.error( 'No settings object provided!' );
 		return null;
@@ -139,10 +139,11 @@ export function registerPlugin(
 		console.error( `Plugin "${ name }" is already registered.` );
 	}
 
-	settings = applyFilters( 'plugins.registerPlugin', settings, name ) as Omit<
-		WPPlugin,
-		'name'
-	>;
+	settings = applyFilters(
+		'plugins.registerPlugin',
+		settings,
+		name
+	) as PluginSettings;
 
 	const { render, scope } = settings;
 
@@ -234,7 +235,7 @@ export function getPlugin( name: string ) {
  *
  * @return The list of plugins without a scope or for a given scope.
  */
-export function getPlugins( scope: string ) {
+export function getPlugins( scope?: string ) {
 	return Object.values( plugins ).filter(
 		( plugin ) => plugin.scope === scope
 	);

packages/plugins/src/components/plugin-area/index.js → packages/plugins/src/components/plugin-area/index.tsx

@@ -16,15 +16,27 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 import { PluginContextProvider } from '../plugin-context';
 import { PluginErrorBoundary } from '../plugin-error-boundary';
 import { getPlugins } from '../../api';
+import type { PluginContext } from '../plugin-context';
+import type { Plugin } from '../../api';
 
-const getPluginContext = memoize( ( icon, name ) => ( { icon, name } ) );
+const getPluginContext = memoize(
+	( icon: PluginContext[ 'icon' ], name: PluginContext[ 'name' ] ) => ( {
+		icon,
+		name,
+	} )
+);
+
+type PluginAreaProps = {
+	scope?: string;
+	onError?: ( name: Plugin[ 'name' ], error: Error ) => void;
+};
 
 /**
  * A component that renders all plugin fills in a hidden div.
  *
- * @param {Object}             props
- * @param {string|undefined}   props.scope
- * @param {Function|undefined} props.onError
+ * @param                                                    props
+ * @param {string}                                           props.scope
+ * @param {( name: Plugin[ 'name' ], error: Error ) => void} props.onError
  * @example
  * ```js
  * // Using ES5 syntax
@@ -56,12 +68,17 @@ const getPluginContext = memoize( ( icon, name ) => ( { icon, name } ) );
  *
  * @return {WPComponent} The component to be rendered.
  */
-function PluginArea( { scope, onError } ) {
+function PluginArea( { scope, onError }: PluginAreaProps ) {
 	const store = useMemo( () => {
-		let lastValue;
+		let lastValue: Plugin[] = [];
 
 		return {
-			subscribe( listener ) {
+			subscribe(
+				listener: (
+					plugin: Omit< Plugin, 'name' >,
+					name: Plugin[ 'name' ]
+				) => void
+			) {
 				addAction(
 					'plugins.pluginRegistered',
 					'core/plugins/plugin-area/plugins-registered',

packages/plugins/src/components/plugin-context/index.tsx

@@ -7,11 +7,11 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import type { WPPlugin } from '../../api';
+import type { Plugin } from '../../api';
 
-interface PluginContext {
-	name: null | WPPlugin[ 'name' ];
-	icon: null | WPPlugin[ 'icon' ];
+export interface PluginContext {
+	name: null | Plugin[ 'name' ];
+	icon: null | Plugin[ 'icon' ];
 }
 
 const { Consumer, Provider } = createContext< PluginContext >( {
@@ -31,7 +31,12 @@ export { Provider as PluginContextProvider };
  *
  * @return Enhanced component with injected context as props.
  */
-export const withPluginContext = ( mapContextToProps: Function ) =>
+export const withPluginContext = (
+	mapContextToProps: < T >(
+		context: PluginContext,
+		props: T
+	) => T & PluginContext
+) =>
 	createHigherOrderComponent( ( OriginalComponent ) => {
 		return ( props ) => (
 			<Consumer>

packages/plugins/tsconfig.json

@@ -3,10 +3,10 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"types": [ "gutenberg-env" ],
-		"checkJs": false
+		"types": [ "gutenberg-env" ]
 	},
 	"references": [
+		{ "path": "../components" },
 		{ "path": "../compose" },
 		{ "path": "../element" },
 		{ "path": "../hooks" },