compose: Add types to useMergeRefs #31939
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sarayourfriend
added
[Type] Code Quality
|
Size Change: 0 B Total Size: 1.86 MB ℹ️ View Unchanged
|
tyxla
reviewed
May 19, 2021
| * | ||
| * @return {RefCallback} The merged ref callback. | ||
| * @return {import('react').RefCallback<TypeFromRef<T>>} The merged ref callback. |
There was a problem hiding this comment.
We used to do import('@wordpress/element') and now we do import('react') for RefCallback. I'm curious if there's a good reason for that.
There was a problem hiding this comment.
@wordpress/element doesn't actually export all of the types needed, so importing directly from react is better/more consistent. More discussion here: #31603 (comment)
| * | ||
| * @return {RefCallback} The merged ref callback. | ||
| * @return {import('react').RefCallback<TypeFromRef<T>>} The merged ref callback. |
There was a problem hiding this comment.
Also I tried to look up RefCallback but couldn't find anything. Any pointers?
There was a problem hiding this comment.
RefCallback is the style of ref prop that goes like: <div ref={ node => { /* do something with node, probably assign it to this.something */ } } />. The type is literally just a function type but with a specific name used for ref props (as is the intended usage of the return type of this hook).
| /* eslint-disable jsdoc/valid-types */ | ||
| /** | ||
| * @template T | ||
| * @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef |
There was a problem hiding this comment.
What would you suggest in place of never, if the template type doesn't extend Ref? never is essentially the error case for this utility type.
There was a problem hiding this comment.
I understand, then never makes sense 👍
tyxla
approved these changes
May 19, 2021
ellatrix
reviewed
May 19, 2021
packages/compose/README.md
Outdated
| @@ -315,11 +315,11 @@ with the same node. | |||
|
|
|||
| _Parameters_ | |||
|
|
|||
| - _refs_ `Array<RefObject|RefCallback>`: The refs to be merged. | |||
| - _refs_ `Array<T>`: The refs to be merged. | |||
There was a problem hiding this comment.
T is the type of the ref. I could rename it to TRef if that would help? I wish we were able to pull out the type parameters into the generated docs, maybe something to add to the docgen feature request list.
There was a problem hiding this comment.
I agree that having a more explicit name would be better — TRefsounds like a better alternative
There was a problem hiding this comment.
T is very common in the TS world, but yeah, I think having a bit more specific names can improve readability.
There was a problem hiding this comment.
What does T stand for? Type? Could we avoid abbreviations? What about RefType? Isn't that much clearer?
There was a problem hiding this comment.
T stands for Type yes, its the canonical abbreviation for a generic type. Adding T to the front generally indicates its a generic type as well, so TRef is appropriate is more appropriate than RefType which could easily be confused for an actual type rather than a generic type parameter.
sarayourfriend
force-pushed
the
add/types-compose-merge-refs
branch
3 times, most recently
from
5d456ff
to
a4574b7
Compare
sarayourfriend
force-pushed
the
add/types-compose-merge-refs
branch
from
a4574b7
to
402f53d
Compare
fullofcaffeine
added a commit
that referenced
this pull request
May 22, 2021
…-take-2 * trunk: (57 commits) Image block: fix cover transform and excessive re-rendering (#32102) compose: Add types to useMergeRefs (#31939) Navigation: Fix collapsing regression. (#32081) components: Promote Elevation (#31614) compose: Add types to useReducedMotion and useMediaQuery (#31941) Update the graphic that appears in the Template Editor welcome guide (#32055) Block Navigation: use CSS for indentation with known max indent instead of spacer divs (#32063) Fix broken template part converter modal styles. (#32097) compose: Add types to `usePrevious` (#31944) components: Add ZStack (#31613) components: Fix Shortcut polymorphism (#31555) compose: Add types to `useFocusReturn` (#31949) compose: Add types to `useDebounce` (#32015) List View: Simplify the BlockNavigation component (#31290) Remove query context leftovers (#32093) Remove filter_var from blocks (#32046) Templates: Remove now-obsolete gutenberg_get_template_paths() (#32066) [RNMobile] Enable reusable block only in WP.com sites (#31744) Rename ViewOwnProps to PolymorphicComponentProps (#32053) Rich text: remove inline display warning (#32013) ...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds types to
useMergeRefs. No runtime changes required, just some type casts.Part of #18838
How has this been tested?
I wrote a quick test to ensure that the types work as expected:
The pictures show it working perfectly.
Additionally, if the type of ref is mixed (i.e., one for HTMLInputElement and another for HTMLDivElement), the return type is correctly inferred as the union of those types passed to
RefCallback. This should practically never happen but it's a nice bonus that it works.Otherwise as long as the type checks pass this should be good.
Types of changes
New feature.
Checklist:
*.native.jsfiles for terms that need renaming or removal).