diff --git a/types/wordpress__plugins/index.d.ts b/types/wordpress__plugins/index.d.ts new file mode 100644 index 0000000000..c5afecbf9c --- /dev/null +++ b/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 +// 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; + +/** + * 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( + mapContextToProps: (context: PluginContext, props: OP) => CP +): (Component: ComponentType) => ComponentType; diff --git a/types/wordpress__plugins/tsconfig.json b/types/wordpress__plugins/tsconfig.json new file mode 100644 index 0000000000..6b7974d7ce --- /dev/null +++ b/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"] +} diff --git a/types/wordpress__plugins/tslint.json b/types/wordpress__plugins/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/wordpress__plugins/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/wordpress__plugins/wordpress__plugins-tests.tsx b/types/wordpress__plugins/wordpress__plugins-tests.tsx new file mode 100644 index 0000000000..9251453f1b --- /dev/null +++ b/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: () =>

Hello World

+}); + +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) => ( +
    +
  • {iconName}
  • +
  • {foobar}
  • + +
+); + +const Foobar = plugins.withPluginContext( + ({ icon }) => ({ iconName: icon.toString() }) +)(Foo);