jeremyckahn/shifty

IE11 compatibility (Usage of Symbol)

4ian opened this issue · 8 comments

4ian commented

Hi!

I've seen that Shifty officially supports Evergreen browsers, Safari, and Node. While using it in GDevelop, users have issue running it in IE11: 4ian/GDevelop#1239 - Symbol being unsupported in IE11 and used in the build of Shifty that is bundled with GDevelop.

I'm wondering if it's a matter of rebuilding the library with the proper polyfills, or if there is any other specific issue with IE11?

Thanks! ☺️

Hi @4ian, thanks for opening this issue! Sorry for the IE trouble. Shifty does not make direct use of Symbol, but after looking at the compiled build artifact, it seems that it's implicitly being used as a result of the for...of transpilation. It also seems that Babel would polyfill Symbol, so it's surprising that you're experiencing this issue.

I do think the solution would be some sort of toolchain or workflow change, either in Shifty or GDevelop. Just to get to the bottom if this, could you clarify what version of Shifty (in GDevelop) this issue was found with? Also, are you using the published Shifty build artifact directly, or are you building from the Shifty source for GDevelop?

Just to be up front, if this requires a change to Shifty I'd be happy to do it, but I don't have much free time to spend on it for the next week or so. I'd be happy to work with you on reviewing and shipping a PR though, in case you need a fix sooner than that!

4ian commented

Thanks for quick answer!
We use a version that I think you compiled yourself at the time the Scene API was implemented. According to the version number, that would be the same as the one you linked - so to answer your question: the published Shifty build artifact directly.

I was also thinking that Symbol would get polyfilled so a bit surprised but maybe not :)
I would not say it's super high priority... do you think remove the for...of is enough? If yes that might a simple fix that I can try.

I just took a look at https://jeremyckahn.github.io/shifty/doc/ in IE11 and... none of the demos work. So, this is clearly an issue with Shifty, and not GDevelop! 😅

do you think remove the for...of is enough?

I'd like to think that avoiding use of for...of is a quick fix, but the way it's used in _applyFilter seems like a practical use of it, so I'd prefer to keep it unless it really is a non-starter.

I think the proper fix here is to change the toolchain that produces the Shifty build artifacts (Webpack/Babel). I'd first like to try updating the versions of Babel and/or Webpack that Shifty is using, and then perhaps modifying the Babel config.

I'm happy to own this issue, but again I unfortunately don't have the time right now to promise a timely fix. If you don't mind waiting a week or so, I will prioritize a fix for this!

4ian commented

Yeah I think waiting for one week is not problem at all 👍Nothing particularly urgent on GDevelop side, as IE11 support was always a best effort.

This appears to be an unresolved issue in Babel itself: babel/babel#7597. I saw this comment which suggests using https://babeljs.io/docs/en/babel-polyfill to implement Symbol. It seems that polyfilling should generally be an application concern rather than a library concern so that libraries can stay lean and focused.

@4ian, what do you think about polyfilling Symbol in GDevelop rather than Shifty? This would have the added benefit of polyfilling Symbol globally in GDevelop in a more explicit manner.

I'd be happy to make a note in the README so others don't get tripped up by this!

Update: I have confirmed that Shifty works without modification in IE11 with the correct polyfills loaded ahead of time. I forked one of the documentation demos, converted it to ES5, and loaded this polyfill bundle from https://polyfill.io:

https://polyfill.io/v3/polyfill.min.js?features=es6

Here's the forked Pen: https://codepen.io/jeremyckahn/pen/RwbzvEj (open in debug mode to see it working in IE11).

This seems to be a reflection of the fractured and complex nature of the current JS ecosystem when it comes to supporting older browsers. I don't think it's a flaw with either GDevelop or Shifty. I think the most pragmatic solution is to load the appropriate polyfill in GDevelop and make the documentation in Shifty more helpful.

I'd love to get your thoughts when you get a moment, @4ian!

4ian commented

@4ian, what do you think about polyfilling Symbol in GDevelop rather than Shifty? This would have the added benefit of polyfilling Symbol globally in GDevelop in a more explicit manner.

Yeah I think it's fair to do this. Thanks for the investigation! I guess a note in the README or in a "compatibility" documentation page is a good idea - could be enhanced by others later if other browsers have issues/quirks.

This seems to be a reflection of the fractured and complex nature of the current JS ecosystem when it comes to supporting older browsers.

Yeah, would need to see if we want to support IE11 at all in GDevelop in this regard. I'll take a look at how I can add a lightweight polyfill for Symbol for now to have at least things running in IE11.

Thanks again! :)

Documentation has been updated and this issue has been closed. Thanks again @4ian for reporting and working with me on this!