Skip to content

Add getClientRects to fragment instances#32660

Merged
jackpope merged 2 commits intofacebook:mainfrom
jackpope:fragment-refs-client-rects
Mar 18, 2025
Merged

Add getClientRects to fragment instances#32660
jackpope merged 2 commits intofacebook:mainfrom
jackpope:fragment-refs-client-rects

Conversation

@jackpope
Copy link
Copy Markdown
Contributor

@jackpope jackpope commented Mar 18, 2025

Adds getClientRects() to fragment instances with a fixture test case. Element.getClientRect returns a collection of DOMRects (see example of multiline span returning two DOMRect boxes). fragmentInstance.getClientRects here flattens those collections into an array of rects.

@react-sizebot
Copy link
Copy Markdown

react-sizebot commented Mar 18, 2025

Comparing: c69a5fc...e9375b4

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 517.29 kB 517.29 kB = 92.26 kB 92.26 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 608.06 kB 608.06 kB = 107.88 kB 107.88 kB
facebook-www/ReactDOM-prod.classic.js +0.05% 653.34 kB 653.67 kB +0.05% 115.12 kB 115.18 kB
facebook-www/ReactDOM-prod.modern.js +0.05% 643.62 kB 643.95 kB +0.05% 113.53 kB 113.59 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against e9375b4

blur(): void,
observeUsing(observer: IntersectionObserver | ResizeObserver): void,
unobserveUsing(observer: IntersectionObserver | ResizeObserver): void,
getClientRects(): ChildRectLists,
Copy link
Copy Markdown
Contributor

@sebmarkbage sebmarkbage Mar 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should really be Array<DOMRect> and we have to flatten it.

Otherwise you can't pass this instance to an API expecting an Element that it reads the rects from. Whatever methods that already exist on Elements need to have the same exact signature (almost).

Technically it should be a DOMRectList which is array-like but it doesn't have the prototype of an actual array. It also has an item() method that arrays don't have. Unfortunately you can't instantiate one of these yourself very easily but in practice we can expect that consumers use the array-like indexing.

So I think it's ok for this to be a flat Array<DOMRect>.

Comment thread packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js Outdated
@jackpope jackpope merged commit 476f538 into facebook:main Mar 18, 2025
@jackpope jackpope deleted the fragment-refs-client-rects branch March 18, 2025 17:54
github-actions Bot pushed a commit that referenced this pull request Mar 18, 2025
Adds  to fragment instances with a fixture test case.
 returns a collection of s (see example
of multiline span returning two  boxes).
 here flattens those collections into
an array of rects.

DiffTrain build for [476f538](476f538)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants