Replace deprecated useResizeObserver for useScaleCanvas #67508
Conversation
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
ajlende
added
[Type] Code Quality
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +84 B (0%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
jeryj
approved these changes
Dec 3, 2024
Contributor
jeryj
left a comment
jeryj
left a comment
There was a problem hiding this comment.
Thanks for the code quality cleanup! Working well.
ajlende
force-pushed
the
fix/deprecated-use-resize-observer-scale-canvas
branch
from
b48f02a to
714ad14
Compare
jsnajdr
approved these changes
Dec 3, 2024
Member
jsnajdr
left a comment
jsnajdr
left a comment
There was a problem hiding this comment.
I'm very happy to see us migrating to the new useResizeObserver 🚀
| contentResizeListener, | ||
| containerResizeListener, | ||
| contentRefCallback, | ||
| containerRefCallback, |
Member
There was a problem hiding this comment.
Let's call it just contentRef/containerRef. The fact that it's a callback is an implementation detail that nobody really needs to know.
Also I think React Compiler treats variables differently when their name has the *Ref suffix.
Contributor
Author
There was a problem hiding this comment.
Let's call it just
contentRef/containerRef. The fact that it's a callback is an implementation detail that nobody really needs to know.
When I'm writing my own React code, I typically differentiate between RefObject<T> and RefCallback<T> with different suffixes so I know if I can access a .current property or not.
Also I think React Compiler treats variables differently when their name has the
*Refsuffix.
Thanks for bringing that to my attention. It looks like React Compiler bases it on the useRef() call, not the name of the variable.
I know ESLint's react/compiler rules are still a little wonky. Maybe ESLint was using the *Ref suffix for checking before, but I don't see any errors now. 🤷
That all being said, I don't see anyone else differentiating them in Gutenberg though, so I suppose I can change it here.
Member
There was a problem hiding this comment.
It looks like React Compiler bases it on the
useRef()call
@tyxla had to change a lot of ref variable names in #64718 to prevent a "mutating a value" error from the compiler. So the names matter.
In this case contentRefCallback would probably still be fine, because there is never any .current = ... assignment related to contentRefCallback.
Member
There was a problem hiding this comment.
The ESLint plugin has been enabled since #61788, so it should automatically detect if we have a problem with the ref and if it needs to be named with *Ref. If it didn't detect it, then you're most likely not mutating the ref's .current, which is totally fine.
Contributor
Author
There was a problem hiding this comment.
I did some more testing in the React Compiler Playground. I didn't have the enableTreatRefLikeIdentifiersAsRefs option set which corresponds to the ESLint rule that you're talking about. The new example has it enabled.
I'm wondering if we should actually have a different name for RefCallback<T> variables because they don't have a .current property like the RefObject<T> variables? A Ref suffix makes the ESLint (and React Compiler) think that they do with the enableTreatRefLikeIdentifiersAsRefs option enabled.
This PR probably isn't the best place to discuss, so I'll open a discussion and link it here.
EDIT: Discussion in #67756
packages/block-editor/src/components/iframe/use-scale-canvas.js
Outdated
Show resolved
Hide resolved
ajlende
force-pushed
the
fix/deprecated-use-resize-observer-scale-canvas
branch
from
714ad14 to
8e25519
Compare
ajlende
force-pushed
the
fix/deprecated-use-resize-observer-scale-canvas
branch
from
b28ef42 to
4f8c5be
Compare
jsnajdr
approved these changes
Dec 4, 2024
Member
jsnajdr
left a comment
jsnajdr
left a comment
There was a problem hiding this comment.
Looks good, thanks for applying the feedback 🚀
ajlende
force-pushed
the
fix/deprecated-use-resize-observer-scale-canvas
branch
from
4f8c5be to
ef60a79
Compare
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.
What?
Replaces
useResizeObserverwith the new callback-based implementation inuseScaleCanvas.Why?
The old usage was deprecated.
How?
contentBlockSizeis available in all our supported browsers, so I only implemented that branch of the legacyuseResizeObserverand I didn't bother with rounding as the algorithm does rounding elsewhere.gutenberg/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
Lines 45 to 67 in 1693537
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast