Seems to not work with resize-observer-polyfill

[jrjurman]

Seems to not work with resize-observer-polyfill

[JRJurman]

@eniovalo just saw this now, sorry for the delay!
Thanks for detailing everything you are expecting / seeing. It should help me re-create the issue on my end, and I'll see what I can come up with for a fix!

[JRJurman]

@eniovalo I tried re-creating the issue on my end, but I'm not seeing it the $1 after the ResizeObserver. I'm just editing the example in the example folder... I wonder if the babel step is causing the suffix?

Do you think you could create a minimal setup (either based on the example folder in the project or as a brand new gist / github repo), that shows this issue? I want to be sure I can recreate the issue on my machine before I start debugging more.

[eniovalo]

@JRJurman , I create an example with resizeObserver, it seems that rollup-plugin-polyfill conflicts with new ResizeObserver and add $1 to the name of the function ResizeObserver$1 . I don't know why.

If you could check it, it will be grateful. =]

[JRJurman]

Reading the documentation for resize-observer-polyfill, it "recommends" using it as a ponyfill https://github.com/que-etc/resize-observer-polyfill#usage-example but in reality, you have to use it as a ponyfill, see que-etc/resize-observer-polyfill#68

It occurs to me that this would be incompatible with rollup-plugin-polyfill, as we assume that the polyfill should populate the global (as they usually do).

It seems that your usage (at least in the examples you've provided) are not compatible with the usage of the resize-observer-polyfill library.

Conversely, you could write a wrapper around resize-observer-polyfill which populates the global with a ResizeObserver, and then polyfill that wrapper! That should work just fine 👍

[eniovalo]

@JRJurman , rollup-plugin-polyfill worked with a wrapper of resize-observer-polyfill.
Thanks for the advice! =]

import ResizeObserver from 'resize-observer-polyfill';

//Finding the global variable.
const myGlobal = (function () {
    if (typeof global !== 'undefined' && global.Math === Math) {
        return global;
    }

    if (typeof self !== 'undefined' && self.Math === Math) {
        return self;
    }

    if (typeof window !== 'undefined' && window.Math === Math) {
        return window;
    }
})();

//If ResizeObserver doesn't exist, set the Polyfill.
if(!myGlobal.ResizeObserver) {
    myGlobal.ResizeObserver = ResizeObserver;
}

[eniovalo]

@eniovalo just saw this now, sorry for the delay!
Thanks for detailing everything you are expecting / seeing. It should help me re-create the issue on my end, and I'll see what I can come up with for a fix!

@JRJurman, No problems. =]

Yes, I will create a minimal setup and send to you. ;)

[JRJurman]

@eniovalo I see the $1 in the builds, but the way these functions are setup, I believe they will still put a ResizeObserver global on the window object... I tested all three builds on my Linux device, and none of them failed... I can try with IE, but this minimal setup doesn't appear to be causing the issue ResizeObserver is not defined that you were seeing... At least not on my setup - was there a specific build (iife, commonjs, or umd) that was causing this, or all of them?

[JRJurman]

Just verified that none of the builds work with IE, but that is because IE needs the code to be transpiled (probably with babel). If you can get a version that shows the error in IE (or any browser), that would be useful.

[eniovalo]

@JRJurman , I tested the 3 builds (iife, commonjs and umd) with Firefox ESR 68.7 and it failed ResizeObserver is not defined because ResizeObserver is compatible since Firefox 69 and IE is not compatible. =(

So, I put resize-observer-polyfill with rollup-plugin-polyfill to make it compatible, but it generates ResizeObserver$1. If you change ResizeObserver$1 to ResizeObserver at bundle.js (line 893), it will work at IE. =]

resize-observer-polyfill code (before rollup):

resize-observer-polyfill code (after rollup):

[eniovalo]

@JRJurman , thanks.
I will create a wrapper to make resize-observer-polyfill global. =]