[@wordpress/plugins] add new definitions (#36038)

types/wordpress__plugins/index.d.ts

@@ -0,0 +1,76 @@
+// Type definitions for @wordpress/plugins 2.3
+// Project: https://github.com/WordPress/gutenberg/tree/master/packages/plugins/README.md
+// Definitions by: Derek Sifford <https://github.com/dsifford>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.5
+
+import { ComponentType } from "@wordpress/element";
+
+export interface PluginSettings {
+    // TODO: if we ever create a package for @wordpress/dashicons, add it here instead of `string`.
+    /**
+     * An icon to be shown in the UI. It can be a slug of the Dashicon, or an
+     * element (or function returning an element) if you choose to render your
+     * own SVG.
+     */
+    icon: string | ComponentType;
+    /**
+     * A component containing the UI elements to be rendered.
+     */
+    render: ComponentType;
+}
+
+export interface Plugin extends PluginSettings {
+    /**
+     * A string identifying the plugin. Must be unique across all registered
+     * plugins.
+     */
+    name: string;
+}
+
+export type PluginContext = Omit<Plugin, "render">;
+
+/**
+ * A component that renders all plugin fills in a hidden div.
+ */
+export const PluginArea: ComponentType;
+
+/**
+ * Returns a registered plugin settings.
+ *
+ * @param name - Plugin name.
+ */
+export function getPlugin(name: string): Plugin | undefined;
+
+/**
+ * Returns all registered plugins.
+ */
+export function getPlugins(): Plugin[];
+
+/**
+ * Registers a plugin to the editor.
+ *
+ * @param name - A string identifying the plugin. Must be unique across all registered plugins.
+ * @param settings - The settings for this plugin.
+ * @returns The final plugin settings object.
+ */
+export function registerPlugin(
+    name: string,
+    settings: PluginSettings
+): PluginSettings;
+
+/**
+ * Unregisters a plugin by name.
+ *
+ * @param name - Plugin name.
+ * @returns The previous plugin settings object, if it has been successfully
+ *     unregistered; otherwise `undefined`.
+ */
+export function unregisterPlugin(name: string): Plugin | undefined;
+
+/**
+ * A Higher Order Component used to inject Plugin context to the wrapped component.
+ */
+export function withPluginContext<CP = {}, OP = {}>(
+    mapContextToProps: (context: PluginContext, props: OP) => CP
+): (Component: ComponentType<CP & OP>) => ComponentType<OP>;

types/wordpress__plugins/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6"],
+        "jsx": "react",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "paths": {
+            "@wordpress/element": ["wordpress__element"],
+            "@wordpress/plugins": ["wordpress__plugins"]
+        }
+    },
+    "files": ["index.d.ts", "wordpress__plugins-tests.tsx"]
+}

types/wordpress__plugins/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

types/wordpress__plugins/wordpress__plugins-tests.tsx

@@ -0,0 +1,35 @@
+import * as WPElement from "@wordpress/element";
+import * as plugins from "@wordpress/plugins";
+
+plugins.registerPlugin("my-plugin", {
+    icon: "welcome-learn-more",
+    render: () => <h1>Hello World</h1>
+});
+
+plugins.getPlugins();
+
+plugins.getPlugin("my-plugin");
+
+plugins.unregisterPlugin("my-plugin");
+
+interface OwnProps {
+    foobar: number;
+}
+
+interface ContextProps {
+    iconName: string;
+}
+
+type Props = OwnProps & ContextProps;
+
+const Foo = ({ iconName, foobar }: Props) => (
+    <ul>
+        <li>{iconName}</li>
+        <li>{foobar}</li>
+        <plugins.PluginArea />
+    </ul>
+);
+
+const Foobar = plugins.withPluginContext<ContextProps, OwnProps>(
+    ({ icon }) => ({ iconName: icon.toString() })
+)(Foo);