compose: Add types to withInstanceId and corresponding hook (#31341)

* compose: Add types to withInstanceId and corresponding hook

* Remove unused type

* Fix types for underlying WeakMap

* Rename to PropInjecting from PropRemoving

packages/compose/README.md

@@ -267,9 +267,9 @@ Provides a unique instance ID.
 
 _Parameters_
 
-- _object_ `Object`: Object reference to create an id for.
-- _prefix_ `string`: Prefix for the unique id.
-- _preferredId_ `string`: Default ID to use.
+- _object_ `object`: Object reference to create an id for.
+- _prefix_ `[string]`: Prefix for the unique id.
+- _preferredId_ `[string]`: Default ID to use.
 
 _Returns_
 
@@ -470,13 +470,9 @@ _Returns_
 A Higher Order Component used to be provide a unique instance ID by
 component.
 
-_Parameters_
-
-- _WrappedComponent_ `WPComponent`: The wrapped component.
-
-_Returns_
+_Type_
 
-- `WPComponent`: Component with an instanceId prop.
+- `PropInjectingHigherOrderComponent< { instanceId: string | number; } >`
 
 <a name="withSafeTimeout" href="#withSafeTimeout">#</a> **withSafeTimeout**
 

packages/compose/src/higher-order/with-instance-id/index.tsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { ComponentType } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
+// eslint-disable-next-line no-duplicate-imports
+import type { PropInjectingHigherOrderComponent } from '../../utils/create-higher-order-component';
+import useInstanceId from '../../hooks/use-instance-id';
+
+/**
+ * A Higher Order Component used to be provide a unique instance ID by
+ * component.
+ */
+const withInstanceId: PropInjectingHigherOrderComponent< {
+ instanceId: string | number;
+} > = createHigherOrderComponent(
+ < TProps extends { instanceId: string | number } >(
+ WrappedComponent: ComponentType< TProps >
+ ) => {
+ return ( props: Omit< TProps, 'instanceId' > ) => {
+ const instanceId = useInstanceId( WrappedComponent );
+ return (
+ <WrappedComponent
+ { ...( props as TProps ) }
+ instanceId={ instanceId }
+ />
+ );
+ };
+ },
+ 'withInstanceId'
+);
+
+export default withInstanceId;

packages/compose/src/hooks/use-instance-id/index.js

@@ -1,17 +1,20 @@
+// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case
+// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
+/* eslint-disable jsdoc/check-types */
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
 
 /**
- * @type {WeakMap<any, number>}
+ * @type {WeakMap<object, number>}
  */
 const instanceMap = new WeakMap();
 
 /**
  * Creates a new id for a given object.
  *
- * @param {unknown} object Object reference to create an id for.
+ * @param {object} object Object reference to create an id for.
  * @return {number} The instance id (index).
  */
 function createId( object ) {
@@ -23,9 +26,9 @@ function createId( object ) {
 /**
  * Provides a unique instance ID.
  *
- * @param {Object} object Object reference to create an id for.
- * @param {string} prefix Prefix for the unique id.
- * @param {string} preferredId Default ID to use.
+ * @param {object} object Object reference to create an id for.
+ * @param {string} [prefix] Prefix for the unique id.
+ * @param {string} [preferredId=''] Default ID to use.
  * @return {string | number} The unique instance id.
  */
 export default function useInstanceId( object, prefix, preferredId = '' ) {
@@ -36,3 +39,4 @@ export default function useInstanceId( object, prefix, preferredId = '' ) {
  return prefix ? `${ prefix }-${ id }` : id;
  }, [ object ] );
 }
+/* eslint-enable jsdoc/check-types */

packages/compose/src/utils/create-higher-order-component/index.ts

@@ -22,6 +22,12 @@ export type SimpleHigherOrderComponent = < TProps >(
  Inner: ComponentType< TProps >
 ) => ComponentType< TProps >;
 
+export type PropInjectingHigherOrderComponent< TRemovedProps > = <
+ TProps extends TRemovedProps
+>(
+ Inner: ComponentType< TProps >
+) => ComponentType< Omit< TProps, keyof TRemovedProps > >;
+
 /**
  * Given a function mapping a component to an enhanced component and modifier
  * name, returns the enhanced component augmented with a generated displayName.

packages/compose/tsconfig.json

@@ -7,6 +7,8 @@
  "include": [
  "src/higher-order/if-condition/**/*",
  "src/higher-order/pure/**/*",
+ "src/higher-order/with-instance-id/**/*",
+ "src/hooks/use-instance-id/**/*",
  "src/utils/**/*"
  ]
 }