compose: Add types to useMergeRefs#31939
Merged
sarayourfriend merged 3 commits intotrunkfrom May 21, 2021
Merged
Conversation
|
Size Change: 0 B Total Size: 1.86 MB ℹ️ View Unchanged
|
tyxla
reviewed
May 19, 2021
Member
tyxla
left a comment
There was a problem hiding this comment.
Thanks for this one.
Looks like it needs a rebase. Also, left some questions.
| * @param {Array<T>} refs The refs to be merged. | ||
| * | ||
| * @return {RefCallback} The merged ref callback. | ||
| * @return {import('react').RefCallback<TypeFromRef<T>>} The merged ref callback. |
Member
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.
Contributor
Author
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)
| * @param {Array<T>} refs The refs to be merged. | ||
| * | ||
| * @return {RefCallback} The merged ref callback. | ||
| * @return {import('react').RefCallback<TypeFromRef<T>>} The merged ref callback. |
Member
There was a problem hiding this comment.
Also I tried to look up RefCallback but couldn't find anything. Any pointers?
Contributor
Author
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 |
Contributor
Author
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.
Member
There was a problem hiding this comment.
I understand, then never makes sense 👍
tyxla
approved these changes
May 19, 2021
Member
tyxla
left a comment
There was a problem hiding this comment.
Nothing else to add here, looks good from my perspective 👍
ellatrix
reviewed
May 19, 2021
packages/compose/README.md
Outdated
| _Parameters_ | ||
|
|
||
| - _refs_ `Array<RefObject|RefCallback>`: The refs to be merged. | ||
| - _refs_ `Array<T>`: The refs to be merged. |
Contributor
Author
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.
Contributor
There was a problem hiding this comment.
I agree that having a more explicit name would be better — TRefsounds like a better alternative
Member
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.
Member
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?
Contributor
Author
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.
5d456ff to
a4574b7
Compare
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) ...
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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).