Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove resize observer polyfill #925

Merged
merged 10 commits into from
Dec 9, 2020

Conversation

koddsson
Copy link
Contributor

@koddsson koddsson commented Nov 10, 2020

  • Added new "ParentSize" components that don't include a polyfill for ResizeObserver.

My application doesn't require the polyfill for resize observer since my browser support policy only includes browsers that support ResizeObserver.

In keeping with this projects mantra of, "Keep your bundle sizes down and use only the packages you need.", I'm creating new components that don't include the polyfill. Maybe the old components can be removed in future major versions.

@hshoff
Copy link
Member

hshoff commented Nov 11, 2020

Hi @koddsson, I hear you on this. This has been a trade-off discussion for a couple years now. Here's the previous discussion: #254 (comment)

This is going to continue coming up in the future as we get further away from legacy browser support and modern browser support for ResizeObserver widens.

Unfortunately, this is something we would have to land in a v2 because of the breaking change. But we would like to avoid breaking changes as much as possible.

One thing that is mentioned in the previous discussion is the idea of alias-ing out the polyfill dependency so it's not including in bundles. This isn't ideal though as it requires more work to do the paved road approach of not needing a polyfill.

My preference would be to avoid a v2 and breaking change release and to add new components to @visx/responsive that don't include the polyfill (and/or make it opt-in). @williaster and I can prioritize landing these new polyfill-less components in v1.2.0. Would also be happy to review a PR that makes these additions.

edit: this is also an approach we've taken with newer components to avoid including polyfills as seen with @visx/annotation: https://github.com/airbnb/visx/tree/master/packages/visx-annotation#%EF%B8%8F-resizeobserver-dependency

@koddsson
Copy link
Contributor Author

My preference would be to avoid a v2 and breaking change release and to add new components to @visx/responsive that don't include the polyfill (and/or make it opt-in). @williaster and I can prioritize landing these new polyfill-less components in v1.2.0. Would also be happy to review a PR that makes these additions.

Would this just be copies of the original? So in this case I'd just clone the ParentSize.tsx component, remove the polyfill and call it something like ParentSizeWithoutPolyfills.tsx?

@williaster
Copy link
Collaborator

williaster commented Nov 25, 2020

@hshoff do you have thoughts on the name of the component? maybe ParentSizeOptInPolyfill for now and the next major release we'd swap it to ParentSize.

Regarding implementation, I think react-use-measure has a great opt-in design. I think it'd translate to something like:

// user passes in their own polyfill
import { ResizeObserver } from 'my-favorite-polyfill';
() => <ParentSize polyfill={ResizeObserver}>{...}</ParentSize>

// user polutes the `window` object (current implementation)
import ResizeObserver from 'my-favorite-polyfill';
() => <ParentSize >{...}</ParentSize>

// browser policy supports ResizeObserver already
() => <ParentSize >{...}</ParentSize>

// user does nothing, and browser doesn't support
() => <ParentSize >{...}</ParentSize>
// Error: This browser does not support ResizeObserver out of the box
// see example implementation https://github.com/pmndrs/react-use-measure/blob/master/src/web/index.ts#L47

Make sense?

@hshoff
Copy link
Member

hshoff commented Nov 25, 2020

ParentSizeOptInPolyfill or ParentSizeModern sound good to me

This component is a clone of `ParentSize` that doesn't use a
`ResizeObserver` polyfill.
@koddsson koddsson force-pushed the remove-polyfill-from-responsive branch from 0a3ecac to 77beb80 Compare November 26, 2020 08:59
@koddsson
Copy link
Contributor Author

I've pushed some changes and update the PR description. I opted for not accepting a polyfill as a prop since I feel like polyfills should just patch the global object but people might disagree.

Let me know what y'all think and I can make changes accordingly.

@coveralls
Copy link

coveralls commented Nov 26, 2020

Pull Request Test Coverage Report for Build 410450340

  • 1 of 45 (2.22%) changed or added relevant lines in 2 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage decreased (-0.7%) to 61.258%

Changes Missing Coverage Covered Lines Changed/Added Lines %
packages/visx-responsive/src/enhancers/withParentSizeModern.tsx 1 22 4.55%
packages/visx-responsive/src/components/ParentSizeModern.tsx 0 23 0.0%
Totals Coverage Status
Change from base Build 409666346: -0.7%
Covered Lines: 1732
Relevant Lines: 2694

💛 - Coveralls

Copy link
Member

@hshoff hshoff left a comment

Choose a reason for hiding this comment

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

Looks good to me! thanks for this @koddsson

We can merge this and make the linter happy in a follow up PR. Should land in 1.3.0

@hshoff hshoff added this to the 1.3.0 milestone Dec 2, 2020
@williaster
Copy link
Collaborator

@koddsson thanks for the changes 🙏 do you want to fix the lint issues or do you mind if I push them to this branch? (trying not to merge something that fails CI)

@koddsson
Copy link
Contributor Author

koddsson commented Dec 8, 2020

@koddsson thanks for the changes 🙏 do you want to fix the lint issues or do you mind if I push them to this branch? (trying not to merge something that fails CI)

Feel free to push to the branch, I can also fix them tomorrow if you'd like.

@williaster
Copy link
Collaborator

Thanks @koddsson! Will try to get this out today as 1.3.0

@williaster williaster merged commit 095cfde into airbnb:master Dec 9, 2020
@koddsson koddsson deleted the remove-polyfill-from-responsive branch December 9, 2020 20:55
@williaster
Copy link
Collaborator

heads up this is out as a 1.3.0-alpha.0 pre-release if you really need it. trying to merge a couple more open PRs for 1.3.0, tomorrow should be possible for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants