feat: add reflow-free element measurement utility

[aidenybai]

Summary

Adds createElementMeasurer, a utility for measuring DOM elements without triggering synchronous layout reflow. Also removes unused git blame code.

How it works

The utility uses the requestAnimationFrame + IntersectionObserver pattern:

1. Each animation frame, tracked elements are attached to an IntersectionObserver
2. The observer fires asynchronously, delivering boundingClientRect data without forcing synchronous layout/paint
3. Elements are immediately unobserved after measurement
4. The next frame is scheduled to repeat the cycle

requestAnimationFrame(() => {
  // attach elements to IntersectionObserver
  // observer measures without reflow/paint
  // un-attach and schedule next frame
})

This avoids the performance cost of getBoundingClientRect() and getComputedStyle() which force the browser to flush pending layout work synchronously.

Changes

• packages/react-grab/src/types.ts — Added ElementMeasurement interface with x, y, width, height, isIntersecting, and intersectionRatio fields
• packages/react-grab/src/utils/measure-element.ts — New createElementMeasurer factory function that returns an observe/unobserve/disconnect handle
• packages/react-grab/src/utils/fetch-git-blame.ts — Deleted (unused client-side git blame fetcher)
• packages/e2e-app/vite-plugin-git-blame.ts — Deleted (unused Vite dev server middleware for git blame)

API

const measurer = createElementMeasurer((element, measurement) => {
  // measurement: { x, y, width, height, isIntersecting, intersectionRatio }
});

measurer.observe(someElement);
measurer.unobserve(someElement);
measurer.disconnect();

  

---

Summary by cubic

Adds createElementMeasurer to measure DOM elements without triggering layout reflow, improving react-grab performance. Also removes unused git blame utilities.

• New Features

  • Added createElementMeasurer in packages/react-grab/src/utils/measure-element.ts with observe, unobserve, and disconnect.
  • Uses requestAnimationFrame + IntersectionObserver to read boundingClientRect asynchronously.
  • Added ElementMeasurement in packages/react-grab/src/types.ts with x, y, width, height, isIntersecting, and intersectionRatio.

• Refactors

  • Cleaned up measurer internals: clearer names, extracted frame cancellation, removed custom thresholds, and inlined the observe step in the rAF callback.
  • Removed unused git blame code: deleted packages/react-grab/src/utils/fetch-git-blame.ts and packages/e2e-app/vite-plugin-git-blame.ts.

^{Written for commit 26a0208. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-grab-website	Ready	Preview, Comment	Mar 28, 2026 9:03pm

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cli@271

npm i https://pkg.pr.new/aidenybai/react-grab/grab@271

npm i https://pkg.pr.new/aidenybai/react-grab@271

commit: 26a0208