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 dependeny on resize-observer-polyfill in ParentSize #254

Closed
wants to merge 1 commit into from

Conversation

sto3psl
Copy link
Contributor

@sto3psl sto3psl commented Mar 16, 2018

Motivation

To keep bundles slim and give the user of this library a little bit more control I suggest removing the dependency of resize-observer-polyfill from ParentSize.
There is a lot of discussion if library authors should ship with polyfills included or not, that's why this is just a suggestion that would make my team at work switch even faster to vx 😄. I think it's fine to tell the user of the library to include a polyfill if needed to save bytes. I'm happy to discuss this!

💥 Breaking Changes

  • ParentSize doesn't use resize-observer-polyfill anymore.

📝 Documentation

  • Added a note in the ParentSize readme.

Thank you for this library btw. I'm currently convincing my team to switch to vx for our visualizations and it is great to use, whether or not this change happens.

@sto3psl sto3psl changed the title remove dependeny on ResizeObserver in ParentSize remove dependeny on resize-observer-polyfill in ParentSize Mar 16, 2018
@hshoff
Copy link
Member

hshoff commented Mar 20, 2018

Thanks for the PR @sto3psl! Definitely agree this is the happy path in the future. Will land this in an upcoming release.

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.

Couple of comments. Agree it's a good idea not to include the polyfill. Trades off ease of use for smaller bundles, but vx shouldn't force the dependency.

import ResizeObserver from 'resize-observer-polyfill';

if (!global.ResizeObserver) {
global.ResizeObserver = ResizeObserver;
Copy link
Member

Choose a reason for hiding this comment

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

should this be window && !window.ResizeObserver instead of global?

@@ -54,6 +54,8 @@ let chartToRender = withParentSize(MySuperCoolVxChart);

You might do the same thing using the `ParentSize` component.

*Note: `ParentSize` uses [ResizeObserver](https://developers.google.com/web/updates/2016/10/resizeobserver) which is currently only supported in Chrome 64 and newer ([caniuse](https://caniuse.com/#feat=resizeobserver)). If you need support for other browsers you need a polyfill like `resize-observer-polyfill` which is only a `npm install -S resize-observer-polyfill` away.*

Copy link
Member

Choose a reason for hiding this comment

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

👍

this.setTarget = this.setTarget.bind(this);
}
componentDidMount() {
this.ro = new ResizeObserver((entries, observer) => {
Copy link
Member

Choose a reason for hiding this comment

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

We should probably add an existence check here and thow an error saying to include the polyfill to fail early and so folks know why it's not working.

@sto3psl
Copy link
Contributor Author

sto3psl commented Aug 10, 2018

I added a ReferenceError. It looks something like this in Firefox for example:

screen shot 2018-08-10 at 10 15 26

Update package.json

add error message
@hshoff
Copy link
Member

hshoff commented Aug 22, 2018

Hi @sto3psl sorry for the delay on this! I wanted to chat with some folks about approaches for handling polyfills in libraries.

The nice part of resize-observer-polyfill is that it's not destructive. So if the ResizeObserver is already present it won't mutate anything: https://github.com/que-etc/resize-observer-polyfill/blob/master/src/index.js#L5

So then it comes a question of bundle sizes and library responsibility.

It's true that out of the box you'll be including more js then needed if the polyfill is unnecessary. Though, this can be solved at the bundle tool level. You should be able to alias out the polyfill so it's not included in the bundle.

My current thinking is to continue including the polyfill for ease of use, not having to respond to issues about xyzResizeObserver polyfills, and leaning to letting app developers decided how to slim down the bundle size.

It's a tradeoff i know, but I see value in ease of use and correctness by default over extra js. Would love to hear your thoughts.

@sto3psl
Copy link
Contributor Author

sto3psl commented Aug 23, 2018

I don't have strong opinions about that. It's just that I'm used to libraries shipping without polyfills and I think we ship promise and WeakMap polyfills because of some libraries (webpack if I remember correctly). Since we use at least promises anyways we would have that polyfill anyways.

I think a good tradeoff here that can be made is to decide based on browser support. Let's say 50% of the browsers support the feature, drop the polyfill, otherwise include it in the library.

Since only Chrome currently supports it and people using ResizeObserver in production hopefully support more than that, it's fine to include it. When more browsers start supporting it, we could come back to this.

Anyway, thanks for the great library ✌️

@loopmode
Copy link

I think the best approach is to do include polyfills, but provide info and opt-out instructions.
So, including the polyfill has many benefits - allows quick start, helps new and unexperienced users.
Then provide a section in the readme/docs about how to exclude it from bundling, with examples for the popular bundlers. I guess just webpack is a good start.

Most of the users will be happy about it and not even know or care.
The fewer users who do care, e.g about bundle sizes, they have a more special requirement plus the experience. They do check docs for such details, and they can configure e.g. webpack.
So, it would be somewhat pareto :)

@sto3psl
Copy link
Contributor Author

sto3psl commented Aug 23, 2018

I think the best approach is to do include polyfills, but provide info and opt-out instructions.

I'd rather have instructions on how to include the polyfill in case I really need it. Removing code from a library should not be the concern of the consumer who, in most cases, doesn't have control of the libraries code. The idea of changing my bundlers config to exclude code from a third-party library doesn't speak well to me.

So, including the polyfill has many benefits - allows quick start, helps new and unexperienced users.

I fully agree on the easier quick start for newcomers and maybe we can also teach them about the use of polyfills, by providing nice errors for them, if something goes wrong. Giving easy understandable warnings and information on how to solve the problem is, in my opinion, more helpful than not confronting them with the problem at all.

In this specific case with ResizeObserver I do agree on keeping the polyfill because browser support is so sparse.

@loopmode
Copy link

Thinking about it, I actually agree.
I guess a user who is using react to draw svg with vx on top of d3 is most likely deep enough in the matter to be capable of understanding the need for and the procedure of including a polyfill.

@sto3psl
Copy link
Contributor Author

sto3psl commented Aug 30, 2018

Going to close this now and maybe come back if 1 more browser supports ResizeObserver 😬

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