Skip to content

Conversation

@TrevorBurnham
Copy link
Contributor

@TrevorBurnham TrevorBurnham commented Aug 24, 2025

All target browsers now support the native ResizeObserver API, making the polyfill unnecessary: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility

This change reduces bundle size and simplifies the codebase.

Changes:

  • Remove @juggle/resize-observer dependency from package.json
  • Replace polyfill imports with native ResizeObserver API
  • Update useResizeObserver to use getBoundingClientRect() for initial sync measurement
  • Add convertElementToEntry() helper since native ResizeObserverEntry cannot be constructed
  • Remove mocks/@juggle/resize-observer.ts mock file
  • Add comprehensive Jest mocks for ResizeObserver and getBoundingClientRect in test environment
  • Extract ResizeObserver test mocks to separate reusable module

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@TrevorBurnham TrevorBurnham requested a review from a team as a code owner August 24, 2025 17:55
@TrevorBurnham TrevorBurnham requested review from patrixd and removed request for a team August 24, 2025 17:55
TrevorBurnham added a commit to TrevorBurnham/cloudscape-components that referenced this pull request Aug 24, 2025
All target browsers now support the native ResizeObserver API, making
the polyfill unnecessary.

This change reduces bundle size and simplifies the codebase.

Changes:
- Remove @juggle/resize-observer from package.json dependencies
- Update sticky scrollbar hook to use native ResizeObserver
- Add global ResizeObserver mock in Jest setup for JSDOM compatibility
- Update mock file to use native ResizeObserver types with JSDOM-compatible implementations

Note that the mock file can be removed once the polyfill is also removed
from @cloudscape-design/component-toolkit:
cloudscape-design/component-toolkit#154
@just-boris just-boris requested review from avinashbot and removed request for patrixd August 25, 2025 09:48
TrevorBurnham added a commit to TrevorBurnham/cloudscape-components that referenced this pull request Sep 2, 2025
All target browsers now support the native ResizeObserver API, making
the polyfill unnecessary.

This change reduces bundle size and simplifies the codebase.

Changes:
- Remove @juggle/resize-observer from package.json dependencies
- Update sticky scrollbar hook to use native ResizeObserver
- Add global ResizeObserver mock in Jest setup for JSDOM compatibility
- Update mock file to use native ResizeObserver types with JSDOM-compatible implementations

Note that the mock file can be removed once the polyfill is also removed
from @cloudscape-design/component-toolkit:
cloudscape-design/component-toolkit#154
just-boris pushed a commit to cloudscape-design/components that referenced this pull request Sep 10, 2025
All target browsers now support the native ResizeObserver API, making
the polyfill unnecessary.

This change reduces bundle size and simplifies the codebase.

Changes:
- Remove @juggle/resize-observer from package.json dependencies
- Update sticky scrollbar hook to use native ResizeObserver
- Add global ResizeObserver mock in Jest setup for JSDOM compatibility
- Update mock file to use native ResizeObserver types with JSDOM-compatible implementations

Note that the mock file can be removed once the polyfill is also removed
from @cloudscape-design/component-toolkit:
cloudscape-design/component-toolkit#154
just-boris pushed a commit to TrevorBurnham/cloudscape-components that referenced this pull request Sep 10, 2025
All target browsers now support the native ResizeObserver API, making
the polyfill unnecessary.

This change reduces bundle size and simplifies the codebase.

Changes:
- Remove @juggle/resize-observer from package.json dependencies
- Update sticky scrollbar hook to use native ResizeObserver
- Add global ResizeObserver mock in Jest setup for JSDOM compatibility
- Update mock file to use native ResizeObserver types with JSDOM-compatible implementations

Note that the mock file can be removed once the polyfill is also removed
from @cloudscape-design/component-toolkit:
cloudscape-design/component-toolkit#154
@just-boris just-boris force-pushed the remove-resize-observer-polyfill branch from fb10a87 to ccc1652 Compare September 10, 2025 14:55
@codecov
Copy link

codecov bot commented Sep 10, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.77%. Comparing base (9b10439) to head (8239fba).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #154      +/-   ##
==========================================
- Coverage   99.32%   98.77%   -0.56%     
==========================================
  Files          36       36              
  Lines         893      900       +7     
  Branches      247      239       -8     
==========================================
+ Hits          887      889       +2     
- Misses          6       11       +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@TrevorBurnham TrevorBurnham changed the title perf: Remove ResizeObserver polyfill refactor: Remove ResizeObserver polyfill Sep 10, 2025
@just-boris just-boris force-pushed the remove-resize-observer-polyfill branch from ccc1652 to 873c8a8 Compare September 10, 2025 15:51
@just-boris just-boris changed the title refactor: Remove ResizeObserver polyfill chore: Remove ResizeObserver polyfill Sep 10, 2025
just-boris pushed a commit to TrevorBurnham/cloudscape-components that referenced this pull request Sep 11, 2025
All target browsers now support the native ResizeObserver API, making
the polyfill unnecessary.

This change reduces bundle size and simplifies the codebase.

Changes:
- Remove @juggle/resize-observer from package.json dependencies
- Update sticky scrollbar hook to use native ResizeObserver
- Add global ResizeObserver mock in Jest setup for JSDOM compatibility
- Update mock file to use native ResizeObserver types with JSDOM-compatible implementations

Note that the mock file can be removed once the polyfill is also removed
from @cloudscape-design/component-toolkit:
cloudscape-design/component-toolkit#154
@just-boris just-boris force-pushed the remove-resize-observer-polyfill branch from 873c8a8 to 451b348 Compare September 11, 2025 14:12
TrevorBurnham and others added 2 commits September 16, 2025 13:32
All target browsers now support native ResizeObserver API, making the
polyfill unnecessary. This change reduces bundle size and simplifies the
codebase.

Changes:
- Remove @juggle/resize-observer dependency from package.json
- Replace polyfill imports with native ResizeObserver API
- Update useResizeObserver to use getBoundingClientRect() for initial sync measurement
- Add convertElementToEntry() helper since native ResizeObserverEntry cannot be constructed
- Remove __mocks__/@juggle/resize-observer.ts mock file
- Add comprehensive Jest mocks for ResizeObserver and getBoundingClientRect in test environment
- Extract ResizeObserver test mocks to separate reusable module
@just-boris just-boris force-pushed the remove-resize-observer-polyfill branch from 451b348 to 8239fba Compare September 16, 2025 11:33
@just-boris just-boris added this pull request to the merge queue Sep 16, 2025
Merged via the queue into cloudscape-design:main with commit e30bc99 Sep 16, 2025
37 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants