From 510209de3e95de99ff228e1b6f0e575ba3f3b72b Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Tue, 18 May 2021 07:42:29 -0700 Subject: [PATCH 1/3] compose: Add types to useMergeRefs --- packages/compose/README.md | 4 +-- .../compose/src/hooks/use-merge-refs/index.js | 25 +++++++++++++++---- packages/compose/tsconfig.json | 1 + 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/compose/README.md b/packages/compose/README.md index 1a46e8fb19bf4..e186287521eab 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -350,11 +350,11 @@ return
; _Parameters_ -- _refs_ `Array`: The refs to be merged. +- _refs_ `Array`: The refs to be merged. _Returns_ -- `RefCallback`: The merged ref callback. +- `import('react').Ref>`: The merged ref callback. # **usePrevious** diff --git a/packages/compose/src/hooks/use-merge-refs/index.js b/packages/compose/src/hooks/use-merge-refs/index.js index d9bd7e6ce4e1e..1339f832facd6 100644 --- a/packages/compose/src/hooks/use-merge-refs/index.js +++ b/packages/compose/src/hooks/use-merge-refs/index.js @@ -3,14 +3,25 @@ */ import { useRef, useCallback, useLayoutEffect } from '@wordpress/element'; -/** @typedef {import('@wordpress/element').RefObject} RefObject */ -/** @typedef {import('@wordpress/element').RefCallback} RefCallback */ +/* eslint-disable jsdoc/valid-types */ +/** + * @template T + * @typedef {T extends import('react').Ref ? R : never} TypeFromRef + */ +/* eslint-enable jsdoc/valid-types */ +/** + * @template T + * @param {import('react').Ref} ref + * @param {T} value + */ function assignRef( ref, value ) { if ( typeof ref === 'function' ) { ref( value ); } else if ( ref && ref.hasOwnProperty( 'current' ) ) { - ref.current = value; + /* eslint-disable jsdoc/no-undefined-types */ + /** @type {import('react').MutableRefObject} */ ( ref ).current = value; + /* eslint-enable jsdoc/no-undefined-types */ } } @@ -52,13 +63,17 @@ function assignRef( ref, value ) { * return
; * ``` * - * @param {Array} refs The refs to be merged. + * @template {import('react').Ref} T + * @param {Array} refs The refs to be merged. * - * @return {RefCallback} The merged ref callback. + * @return {import('react').Ref>} The merged ref callback. */ export default function useMergeRefs( refs ) { const element = useRef(); const didElementChange = useRef( false ); + /* eslint-disable jsdoc/no-undefined-types */ + /** @type {import('react').MutableRefObject} */ + /* eslint-enable jsdoc/no-undefined-types */ const previousRefs = useRef( [] ); const currentRefs = useRef( refs ); diff --git a/packages/compose/tsconfig.json b/packages/compose/tsconfig.json index 6adf71ba46430..e2db3de66affc 100644 --- a/packages/compose/tsconfig.json +++ b/packages/compose/tsconfig.json @@ -23,6 +23,7 @@ "src/hooks/use-previous/**/*", "src/hooks/use-media-query/**/*", "src/hooks/use-reduced-motion/**/*", + "src/hooks/use-merge-refs/**/*", "src/utils/**/*" ] } From cbdcf12dbb82ead1f93a45c8efeb810e8c201ebe Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Tue, 18 May 2021 07:43:43 -0700 Subject: [PATCH 2/3] Narrow the return type --- packages/compose/README.md | 2 +- packages/compose/src/hooks/use-merge-refs/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/compose/README.md b/packages/compose/README.md index e186287521eab..82fa0845ce256 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -354,7 +354,7 @@ _Parameters_ _Returns_ -- `import('react').Ref>`: The merged ref callback. +- `import('react').RefCallback>`: The merged ref callback. # **usePrevious** diff --git a/packages/compose/src/hooks/use-merge-refs/index.js b/packages/compose/src/hooks/use-merge-refs/index.js index 1339f832facd6..e640c0cbea37b 100644 --- a/packages/compose/src/hooks/use-merge-refs/index.js +++ b/packages/compose/src/hooks/use-merge-refs/index.js @@ -66,7 +66,7 @@ function assignRef( ref, value ) { * @template {import('react').Ref} T * @param {Array} refs The refs to be merged. * - * @return {import('react').Ref>} The merged ref callback. + * @return {import('react').RefCallback>} The merged ref callback. */ export default function useMergeRefs( refs ) { const element = useRef(); From 402f53d49bb3d3d00762b2685929fc1cb20fcdc6 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Thu, 20 May 2021 07:56:33 -0700 Subject: [PATCH 3/3] Use a more readable generic type parameter name --- packages/compose/README.md | 4 ++-- packages/compose/src/hooks/use-merge-refs/index.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/compose/README.md b/packages/compose/README.md index 82fa0845ce256..6092aa98a0a09 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -350,11 +350,11 @@ return
; _Parameters_ -- _refs_ `Array`: The refs to be merged. +- _refs_ `Array`: The refs to be merged. _Returns_ -- `import('react').RefCallback>`: The merged ref callback. +- `import('react').RefCallback>`: The merged ref callback. # **usePrevious** diff --git a/packages/compose/src/hooks/use-merge-refs/index.js b/packages/compose/src/hooks/use-merge-refs/index.js index e640c0cbea37b..5b8b353a3b680 100644 --- a/packages/compose/src/hooks/use-merge-refs/index.js +++ b/packages/compose/src/hooks/use-merge-refs/index.js @@ -63,16 +63,16 @@ function assignRef( ref, value ) { * return
; * ``` * - * @template {import('react').Ref} T - * @param {Array} refs The refs to be merged. + * @template {import('react').Ref} TRef + * @param {Array} refs The refs to be merged. * - * @return {import('react').RefCallback>} The merged ref callback. + * @return {import('react').RefCallback>} The merged ref callback. */ export default function useMergeRefs( refs ) { const element = useRef(); const didElementChange = useRef( false ); /* eslint-disable jsdoc/no-undefined-types */ - /** @type {import('react').MutableRefObject} */ + /** @type {import('react').MutableRefObject} */ /* eslint-enable jsdoc/no-undefined-types */ const previousRefs = useRef( [] ); const currentRefs = useRef( refs );