Inferno: Fails on IE9/10 -- 'Map' is undefined

[tejacques]

Comes from src/core/createTemplate.js:32

.js const dynamicNodeMap = new Map();

This issue is mostly just to document that a Map polyfill is currently necessary. One solution is to specify this in the README/documentation, another is to avoid using Map.

[ghost]

Where did you find that legacy browser?
Can you check for a faster solution then Map that does the same thing and
consider to implement it?
On Dec 31, 2015 12:56 AM, "Tom Jacques" [email protected] wrote:

Comes from src/core/createTemplate.js:32

const dynamicNodeMap = new Map();

This issue is mostly just to document that a Map polyfill is currently
necessary. One solution is to specify this in the README/documentation,
another is to avoid using Map.

—
Reply to this email directly or view it on GitHub
https://github.com/trueadm/inferno/issues/48.

[thisconnect]

At my clients they are about to drop IE8 soon :), but there are still many corporate users using IE8 as their main browser.

I found only a few Map's in the dev/src as far as I see they only make use of Map.get and Map.set

https://github.com/trueadm/inferno/blob/dev/src/DOM/createTree.js
https://github.com/trueadm/inferno/blob/dev/src/core/scanTreeForDynamicNodes.js

Shouldn't a simple object lookup be sufficient and faster?

SomeMap.set('key', 'value');
// vs
SomeMap.key = value;

and more are using plain old objects
https://github.com/trueadm/inferno/blob/dev/src/shared/eventMapping.js
https://github.com/trueadm/inferno/blob/dev/src/DOM/domMutate.js

browser and environment support as well as some polyfill recommendation would be great in the long run.

[trueadm]

This won't work. Object literals can only accept strings as keys. Everything is passed in via toString() if they are not a string. This why I had to use Map.

Furthermore, we won't support IE8. As is every other framework and library come next month. Why?

Microsoft have officially dropped all support for IE8 come January. Meaning anyone using it is actually failing legal compliance by using it and as such will fail ISO standards. Given I work in a banking sector, which has by far the most demanding IE clients around in my experience, they are all transitioning because of this. So I see no problem here, you'll see the same major shift with your clients – I'm 100% certain of it. IE8 is finally about to die!

https://support.microsoft.com/en-gb/lifecycle?p1=13418

[thisconnect]

Now it makes sense thanks! I'd rather there would be a note in the README/documentation about browser or environment support and a recommended polyfill

[tejacques]

Doing this without Map would require some nontrivial changes. The smallest polyfill I can find is https://github.com/WebReflection/es6-collections

[ghost]

There are ways to solve this, but we need to think about performance. I will look into it when I'm doing some core changes soon.

[thisconnect]

My gut feeling is that you should not include a polyfill by defalut, but give some advice or build option how to incorporate a polyfill with inferno. Old browsers are mostly slower anyway, it is a waste to try to optimize them (IMO), since those are used to a slow internet experience.. There might be other ES2015 or ES5 polyfills needed for old browsers, but old browsers will go away at some point. So just stick to ES2015 but document what to include to run on old platforms.

[ghost]

@thisconnect You are right. Polyfill will also bloat the core with bytes we don't want. I will come back to this later on when I'm optimizing the core.
I need to be finished with AT and UT tests for Inferno before I can jump into this so I'm sure nothing breaks :)

[trueadm]

We'll let the user know to include a polyfill for Map if using on browsers that do no support it. Sounds the most sensible route here. Does everyone agree?

[tejacques]

For now -- yes. In any case I don't think we should supply the polyfill for the library users (aside from suggesting one to use). If later we don't need to use Map we can remove the dependency on a Map polyfill.

[ghost]

@tejacques Is this issue a big issue for you?

@trueadm I ran into this issue myself, and a workaround that will work for IE9&IE10 should be up and go in short time. I created my own solution.

[tejacques]

@Kflash Everything I work on still needs IE9 support, so yes, but I'm totally fine using a polyfill for it. That said, I disagree with @thisconnect -- because older browsers are slower, but still represent a large amount of traffic (Not just IE -- older Android/iPhone browsers, too), I think it's extremely important to try and give them a good experience, since this more or less guarantees that anyone on a modern browser/device will have a _great_ experience.

Requiring polyfills doesn't necessarily hurt older browsers, either. Sometimes polyfills are fast and small.

[ghost]

@tejacques I understand. I'm working on a solution for this now. It works for me as an replacement for Map() and small code size, but not sure if it will works for you.

Maybe you can test it later on?

[thisconnect]

I did not want to say that it has to be slow for IE9 users, but try using "the internet" with IE9 (gmail?). At my work we still support IE8, mostly due to one important customer. We know they are preparing to go to edge (hopefully in 2016) but at the moment they still use IE8.

Others try to polyfill Map too see https://github.com/ModuleLoader/es6-module-loader/issues/461 and https://github.com/ModuleLoader/es6-module-loader/pull/462

If later we don't need to use Map we can remove the dependency on a Map polyfill.

As far as I understand, Inferno depends on Map now and later.

Are there other features that need to be polyfilled?

Which polyfill should be advised if one has to support older browsers?

• https://www.npmjs.com/package/es6-map
• https://github.com/WebReflection/es6-collections
• custom https://github.com/zloirock/core-js#custom-build-from-external-scripts

[tejacques]

@thisconnect I understand what you're saying, but if you look at any of the top sites, they all work in IE9 at a level I would call good.

• Google
• Gmail
• Youtube
• Facebook
• Amazon
• Twitter
• Netflix
• Yahoo
• Reddit

None of the Map polyfills seem to be very performant at all (they pretty much all seem to simply use an array under the hood), or they modify the object, which can have some severe performance penalties.

That said, just because Inferno currently uses Map doesn't mean it will always be the case -- there may be a better way of doing it. For example it might be possible to attach an id to the objects that the map currently uses, and simply index into a regular object using that id instead. That might have better performance in most browsers since Map has likely not been optimized as much, and would work in any browser.

[trueadm]

We can probably switch out Map for an array in this case. Similar to how rootFragments are handled in inferno-dom.

[trueadm]

Map is no longer used in Inferno. So closing this issue. Ideas are definitely taken from this discussion though.

[kurdin]

@trueadm
Just tested in IE10 and it throws Map in undefined error. Look like Maps still in use in Inferno code:

https://github.com/infernojs/inferno/blob/1.2.1/src/DOM/events/delegation.ts#L4

[trueadm]

@kurdin Inferno uses Maps again, so you will need to use your own polyfills as per the README.md

[kurdin]

I see. Sorry, I guess your README is too long :) can you please add this to https://infernojs.org/docs/guides/

[rkhunter]

I injected https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js before inferno, and it worked for IE9

[Havunen]

you can also use https://polyfill.io/v2/docs/