Broken IE11 compatibility (Babel?)

[szegheo]

Hi @andreknieriem ! Thank you for this great plugin!

The list of features mentions:

Works in every modern Browser, even in IE 11

currently, for IE11 this is not true. It fails even on the demo site with error:

Object doesn't support property or method "assign"

Running it through my project's Babel config (with Object assign polyfill) this error disappears, but another one comes up:

Object doesn't support this action

at this line of the code:

element.dispatchEvent(new Event('show.' + this.eventNamespace));

Maybe this issue @ core-js could be related (not sure).

// Please do not drop IE11 compatibility 😃
// I have to support it 😭 and I really like your plugin (thanks again!) 

[andreknieriem]

Hey, did you tried the simplelightbox/dist/simple-lightbox.legacy.min.js version? This is for old Browsers without es6 features. Best regards

[szegheo]

Yes, meanwhile I've noticed that file, but I use Webpack with my own Babel config and polyfills are based on useBuiltIns: "usage" , so using that file is not an option for me. I'm afraid it'll be my personal fight with Babel 👿 to make this work with IE11. Sorry for the false report, please close this issue.

[szegheo]

However, looking at your legacy.js file, it begins with

import "core-js/stable";
import "regenerator-runtime/runtime";

and AFAIK this means that Babel will import ALL polyfills, not just those that are really needed for your plugin. This is why the bundled simple-lightbox.legacy.js is so huge... If you set useBuiltIns: "usage" in your .babelrc then those manual imports are not necessary.

[szegheo]

Finally, I've succeeded to make it work on IE11 with my own Babel config and compile this plugin into my vendors.js. However, a little modification is needed in the code of simple-lightbox.js because Explorer dies on new Event('myeventname'). Unfortunately, Babel won't fix this, but the solution is not so complicated and is totally safe.

So my suggested fix in simple-lightbox.js is to add a new method to class SimpleLightbox for creating the events to make it cross-browser:

    createNewEvent(eventName) {
        let event;

        if (typeof(Event) === 'function') {
            // the standard way
            event = new Event(eventName);
        } else {
            // the IE way
            event = document.createEvent('Event');
            event.initEvent(eventName, true, true);
        }

        return event;
    }

then replace all the new Event constructors to createNewEvent like:

element.dispatchEvent(this.createNewEvent('close.simplelightbox'));

I've tested and it works!

Alternative solution:
Another solution would be to replace new Event with new CustomEvent but that would require the end-user to manually include a polyfill like custom-event-polyfill or this script. I've also tested it and it works too, but I think the first one is far better.

[andreknieriem]

Ok, I fix it in another way. If I only use the babelrc every file is more that 100kb bigger. New version comming soon.