Internet Explorer 11 support - polyfill?

[avimar]

I'm totally not expecting anyone to want to deal with this, but it seems it's not that hard to transpile svelte for IE11. There's still some usage around the world with people that can't update. Anyway, it's an interesting learning experience.

sapper has a config, https://github.com/sveltejs/sapper-template/blob/master/rollup.config.js but I had to add to the exclude: 'node_modules/core-js/**'
and add to the presets:

,useBuiltIns: 'usage'
,corejs: 3 //npm package: core-js

Which you should be able to see here: sveltejs/svelte#2621 (comment)

Here's the errors I've been able to pry out of IE11:

{
   [functions]: ,
   __proto__: { },
   description: "Object doesn't support this action",
   message: "Object doesn't support this action",
   name: "TypeError",
   number: -2146827843,
   stack: "TypeError: Object doesn't support this action
   at Anonymous function (http://localhost:3030/build/bundle-sim-activate-es2015.js:14337:6)
   at Anonymous function (http://localhost:3030/build/bundle-sim-activate-es2015.js:2447:14)
   at flush (http://localhost:3030/build/bundle-sim-activate-es2015.js:2256:10)",
   Symbol()_6.2t20egsw6sf: undefined,
   Symbol()_k.2t20egsw6vn: undefined,
   Symbol(__feathersActivateHooks)_g.2t20egsw6vn: undefined,
   Symbol(Symbol._hidden)_h.2t20egsw6vn: undefined,
   Symbol(Symbol.hasInstance)_i.2t20egsw6vn: undefined,
   Symbol(Symbol.search)_j.2t20egsw6vn: undefined
}

bundle-sim-activate-es2015.js:14337: window.dispatchEvent(new Event("hashchange")); inside of function replace$2(location) {

Pollyfilling with custom event doesn't seem to change anything.

When I remove window.dispatchEvent(new Event("hashchange")); then we don't get any errors, we just get a redirect to the base page like other time. IE11 should be supporting pushstate... https://caniuse.com/#feat=mdn-api_history_pushstate

I'll make it live for anyone that wants to play with it in IE 11 (seems it's on all windows 10 machines): https://freedomhot.com/sim-activate.html
It redirects you to https://freedomhot.com/sim-activate.html#/1 which is then blank, but if you reload, then it works. Again, one of the things that works in modern browsers.

Any ideas?

[ItalyPaleAle]

This is a very interesting question. I need to start by saying that support for IE is not a stated goal for this project, and as far as I can tell it's not a stated goal for Svelte either. IE is a legacy browser and its use is discouraged by everyone including Microsoft.

The issue seems that the new Event() constructor isn't compatible with IE: https://developer.mozilla.org/en-US/docs/Web/API/Event/Event That is used in the router here: https://github.com/ItalyPaleAle/svelte-spa-router/blob/master/Router.svelte#L161

The good news is that there seems to be a polyfill available: https://stackoverflow.com/a/26596324
Check in particular the comments: in the polyfill, you need to change the line window.CustomEvent = CustomEvent; to window.Event = CustomEvent;, but only after having feature-detected IE (https://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work#comment70390974_26596324)

[avimar]

@ItalyPaleAle Thanks for taking a look!

I indeed tried polyfilling Event for IE11 (actually I'm doing an es module build the 86% of global traffic that support it, and then this larger transpiled polyfilled version for those unlucky visitors, so I don't really need to do feature detection.)

I tried MSDN's polyfill - https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
I tried it with and without their feature detection.
I tried setting Events = and windows.Events= instead of just overwriting window.CustomEvent.

I just added the polyfills for Events and CustomEvents from events-polyfill to the public hosted version.

The error indeed goes away, but the page still doesn't work. Upon random clicks (clicking "choose" shouldn't bring you to a new page), and especially the next button that triggers the router, it just jumps back to the base page (which then redirects with replace to #/1.)

So it seems like polyfilling event isn't the only issue?

[ItalyPaleAle]

Did you try setting window.Event, without the s at the end? The idea of the polyfill is to replace the built-in method, which is called Event.

[avimar]

Yes, the current polyfill is setting window.Event = Event;

https://freedomhot.com/build/bundle-sim-activate-es2015.js
https://freedomhot.com/sim-activate.html

[ItalyPaleAle]

I can't make changes without the source code, but the polyfill you're using seems different than what written here: https://stackoverflow.com/a/26596324/192024 which I haven't tried, but lots of people seem to suggest it works. In particular, in your bundle you included a polyfill twice, but changing the methods.

Can you try with just this code (copied from SO):

(function () {
  if ( typeof window.CustomEvent === "function" ) return false; //If not IE

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
  window.Event = CustomEvent;
})();

Note the second-last line where I'm polyfilling window.Event too.

PS: Because this is not an issue with the router, but rather with a polyfill, I'm going to close this issue for now. There's nothing I can do on the router to fix this issue anyways.