[@wordpress/compose] add new definitions (#36220)

types/wordpress__compose/higher-order/if-condition/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType, FC } from '@wordpress/element';
+
+declare function ifCondition<P = {}>(predicate: (props: P) => boolean): (component: ComponentType<P>) => FC<P>;
+
+export default ifCondition;

types/wordpress__compose/higher-order/pure/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from "@wordpress/element";
+
+// prettier-ignore
+declare function pure<T extends ComponentType<any>>(component: T):
+    T extends ComponentType<infer U> ? ComponentType<U> :
+    never;
+
+export default pure;

types/wordpress__compose/higher-order/with-global-events/index.d.ts

@@ -0,0 +1,9 @@
+import { ComponentClass, ComponentType } from '@wordpress/element';
+
+// prettier-ignore
+declare function withGlobalEvents(eventMapper: { [k in keyof WindowEventMap]?: string }):
+    <T extends ComponentClass<any>>(component: T) =>
+        T extends ComponentClass<infer U> ? ComponentType<U> :
+        never;
+
+export default withGlobalEvents;

types/wordpress__compose/higher-order/with-instance-id/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from '@wordpress/element';
+
+// prettier-ignore
+declare function withInstanceId<T extends ComponentType<any>>(wrapped: T):
+    T extends ComponentType<infer U> ? ComponentType<Omit<U, 'instanceId'>> :
+    never;
+
+export default withInstanceId;

types/wordpress__compose/higher-order/with-safe-timeout/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from '@wordpress/element';
+
+// prettier-ignore
+declare function withSafeTimeout<T extends ComponentType<any>>(component: T):
+    T extends ComponentType<infer U> ? ComponentType<Omit<U, 'setTimeout'>> :
+    never;
+
+export default withSafeTimeout;

types/wordpress__compose/higher-order/with-state/index.d.ts

@@ -0,0 +1,9 @@
+import { ComponentClass, ComponentType } from '@wordpress/element';
+
+// prettier-ignore
+declare function withState<SP extends object>(initialState: { [k in keyof SP]: SP[k] }):
+    <T extends ComponentType<any>>(component: T) =>
+        T extends ComponentType<infer U> ? ComponentClass<Omit<U, keyof SP | 'setState'>, SP> :
+        never;
+
+export default withState;

types/wordpress__compose/hooks/use-media-query/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Runs a media query and returns its value when it changes.
+ *
+ * @param query - Media Query.
+ * @returns return value of the media query.
+ */
+declare function useMediaQuery(query: string): boolean;
+
+export default useMediaQuery;

types/wordpress__compose/hooks/use-reduced-motion/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hook returning whether the user has a preference for reduced motion.
+ *
+ * @returns Reduced motion preference value.
+ */
+declare function useReducedMotion(): boolean;
+
+export default useReducedMotion;

types/wordpress__compose/index.d.ts

@@ -0,0 +1,35 @@
+// Type definitions for @wordpress/compose 3.4
+// Project: https://github.com/WordPress/gutenberg/tree/master/packages/compose/README.md
+// Definitions by: Derek Sifford <https://github.com/dsifford>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.5
+
+/**
+ * External dependencies
+ */
+import { flowRight } from 'lodash';
+
+// Utils
+export { default as createHigherOrderComponent } from './utils/create-higher-order-component';
+
+/**
+ * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function
+ * composition, where each successive invocation is supplied the return value of the previous.
+ *
+ * @param {...Function} hocs The HOC functions to invoke.
+ *
+ * @return {Function} Returns the new composite function.
+ */
+export { flowRight as compose };
+
+// Higher-order components
+export { default as ifCondition } from './higher-order/if-condition';
+export { default as pure } from './higher-order/pure';
+export { default as withGlobalEvents } from './higher-order/with-global-events';
+export { default as withInstanceId } from './higher-order/with-instance-id';
+export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
+export { default as withState } from './higher-order/with-state';
+
+// Hooks
+export { default as useMediaQuery } from './hooks/use-media-query';
+export { default as useReducedMotion } from './hooks/use-reduced-motion';

types/wordpress__compose/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["dom", "es6"],
+        "jsx": "preserve",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "paths": {
+            "@wordpress/compose": ["wordpress__compose"],
+            "@wordpress/element": ["wordpress__element"]
+        }
+    },
+    "files": [
+        "index.d.ts",
+        "higher-order/if-condition/index.d.ts",
+        "higher-order/pure/index.d.ts",
+        "higher-order/with-global-events/index.d.ts",
+        "higher-order/with-instance-id/index.d.ts",
+        "higher-order/with-safe-timeout/index.d.ts",
+        "higher-order/with-state/index.d.ts",
+        "hooks/use-media-query/index.d.ts",
+        "hooks/use-reduced-motion/index.d.ts",
+        "utils/create-higher-order-component/index.d.ts",
+        "wordpress__compose-tests.tsx"
+    ]
+}

types/wordpress__compose/tslint.json

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

types/wordpress__compose/utils/create-higher-order-component/index.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from '@wordpress/element';
+
+// tslint:disable:no-unnecessary-generics
+// prettier-ignore
+declare function createHigherOrderComponent<EP = {}>(
+    mapComponentToEnhancedComponent: (component: ComponentType<any>) => ComponentType<any>,
+    modifierName: string
+): <T extends ComponentType<any>>(component: T) =>
+    T extends ComponentType<infer OP> ? ComponentType<Omit<OP, keyof EP>> :
+    never;
+
+export default createHigherOrderComponent;

types/wordpress__compose/wordpress__compose-tests.tsx

@@ -0,0 +1,139 @@
+import { Component } from '@wordpress/element';
+import * as C from '@wordpress/compose';
+
+//
+// utils/create-higher-order-component
+//
+(() => {
+    const withFoo = C.createHigherOrderComponent<{ foo: string }>(
+        OriginalComponent => props => <OriginalComponent foo="hello" {...props} />,
+        'withFoo'
+    );
+
+    const Enhanced = withFoo(({ foo, bar }: { foo: string; bar: string }) => (
+        <div>
+            {foo} and {bar}
+        </div>
+    ));
+
+    <Enhanced bar="bar" />;
+})();
+
+//
+// higher-order/if-condition
+//
+(() => {
+    interface Props {
+        isVisible: boolean;
+        foo: string;
+        bar: string;
+    }
+    const Original = ({ isVisible, foo, bar }: Props) => (
+        <div>
+            {foo} and {bar}
+        </div>
+    );
+    const Enhanced = C.ifCondition<Props>(({ isVisible }) => isVisible)(Original);
+    <Enhanced isVisible={false} foo="foo" bar="bar" />;
+})();
+
+//
+// higher-order/pure
+//
+(() => {
+    const Original = ({ foo, bar }: { foo: string; bar: string }) => (
+        <div>
+            {foo} and {bar}
+        </div>
+    );
+
+    const Enhanced = C.pure(Original);
+
+    <Original foo="foo" bar="bar" />;
+    <Enhanced foo="foo" bar="bar" />;
+})();
+
+//
+// higher-order/with-global-events
+//
+(() => {
+    const Enhanced = C.withGlobalEvents({ resize: 'handleResize' })(
+        class extends Component<{ foo: string }> {
+            handleResize() {
+                console.log('resized');
+            }
+            render() {
+                return <h1>{this.props.foo}</h1>;
+            }
+        }
+    );
+    <Enhanced foo="foo" />;
+})();
+
+//
+// higher-order/with-instance-id
+//
+(() => {
+    interface Props {
+        foo: string;
+        instanceId: string;
+    }
+    const Enhanced = C.withInstanceId(({ foo, instanceId }: Props) => <div id={instanceId}>{foo}</div>);
+    <Enhanced foo="foo" />;
+})();
+
+//
+// higher-order/with-safe-timeout
+//
+(() => {
+    interface Props {
+        foo: string;
+        setTimeout: typeof setTimeout;
+    }
+    const Enhanced = C.withSafeTimeout(({ foo, setTimeout }: Props) => (
+        <div onClick={() => setTimeout(() => console.log('Hello World', 100))}>{foo}</div>
+    ));
+    <Enhanced foo="foo" />;
+})();
+
+//
+// higher-order/with-state
+//
+(() => {
+    interface Props {
+        count: number;
+        setState(obj: any): void;
+    }
+    const Enhanced = C.withState<{ count: number }>({ count: 0 })(({ count, setState }: Props) => (
+        <button onClick={() => setState({ count: count + 1 })}>Clicked {count} times</button>
+    ));
+    <Enhanced />;
+})();
+
+//
+// hooks/use-media-query
+//
+(() => {
+    const MyComponent = () => {
+        const shouldRender = C.useMediaQuery('(min-width: 800px)');
+        if (shouldRender) {
+            return <h1>Hello World</h1>;
+        }
+        return null;
+    };
+    <MyComponent />;
+})();
+
+//
+// hooks/use-reduced-motion
+//
+(() => {
+    const MyComponent = () => {
+        const shouldUseReducedMotiion = C.useReducedMotion();
+        if (shouldUseReducedMotiion) {
+            return <h1>Using reduced motion!</h1>;
+        }
+        return <h1>Not using reduced motion!</h1>;
+    };
+    <MyComponent />;
+})();