Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to make this library work in Internet Explorer? #24

Closed
pkrumins opened this issue Jun 20, 2019 · 13 comments
Closed

How to make this library work in Internet Explorer? #24

pkrumins opened this issue Jun 20, 2019 · 13 comments

Comments

@pkrumins
Copy link

Thanks for making this great library!

I created a website about fractals and used your library to generate L-System rules for various fractal types. Lately the website has gotten very popular and there are thousands of Internet Explorer uses who use it. Unfortunately as your library uses the latest JavaScript tricks, it doesn't work in Internet Explorer.

Is there any way to make use this library in Internet Explorer?

@pkrumins
Copy link
Author

Hey there,

I just made this library work in IE and deployed it to my users.

In case anyone else needs IE version, then here is the library in gist form:
https://gist.github.com/pkrumins/ab58506c225d1c388b85665609026a9e

Just drop it in place of the original version and it will work in IE.

Here's the summary of the changes that I made to the library to make it work in IE again:

  • Replacing let with var.
  • Replacing { x } with { x : x } in object context.
  • Replacing class with function.
  • Replacing { arg1, arg2, } with opts in function definition context.
  • Replacing x of obj with a for (var i = 0; i < obj.length; i++)
  • Replacing default arguments with if (arg === undefined) { arg = defaultVal; }
  • Replacing array.push(...obj) with array.extend(obj).
  • Adding Object.entries polyfill.

@nylki
Copy link
Owner

nylki commented Jun 20, 2019

Hey @pkrumins,
Thanks for reaching out!

It seems like my transpile target to support everything above Edge 15 was probably a bit too optimistic, since the library got a bit more popular than expected.

Looks like you already found a workable solution though! :)
However, I will anyways take a look at updating my babel and rollup configs to transpile the *.browser version to ES5 for IE compatibilty. I'll leave the regular and *.es/module build as they are though.

Btw. I am curious to check out what you have build. If you got any public address, feel free to share :)

@pkrumins
Copy link
Author

I'd love the transpiled ES5 version. When you release it, I'll drop it in place of my quick modifications. The website that I built is https://onlineMATHtools.com. There are over 40 fractals in there.

@nylki nylki pinned this issue Jun 21, 2019
@nylki
Copy link
Owner

nylki commented Jun 23, 2019

@pkrumins nice collection!
Btw. I have compiled a new version (1.5.1) with IE11 support for the browser build. Please try it out and see if its working.

@pkrumins
Copy link
Author

Thanks! Which dist version do I use? Should I try the lindenmayer.browser.min.js file?

@nylki
Copy link
Owner

nylki commented Jun 23, 2019

Thanks! Which dist version do I use? Should I try the lindenmayer.browser.min.js file?

Yep, both lindenmayer.browser.min.js and lindenmayer.browser.js should work in IE11 now.

@pkrumins
Copy link
Author

Thanks! I just tried and unfortunately it doesn't work because of Object.entries function missing in IE11.

TypeError: Object doesn't support property or method 'entries'

Can you add a polyfill and release one more time? I'll then try again.

@nylki
Copy link
Owner

nylki commented Jun 25, 2019

@pkrumins ah, missed that one.
I prepared a new release 1.5.2 with the Object.entries polyfill for both browser builds. Let me know if it works. :)

For the curious: I tried to auto-polyfill missing IE11 stuff via babel and core-js by using its feature detection, but the resulting build turned out to be immensely overblown compared to the libraries size itself. (about 5x vs. the non-auto-polyfilled size). Thats because core-js adds a bunch of helper functions and glue code to integrate and process its polyfills. Thats useful if you polyfill a bit more and its also not that grave for bigger bundles than this lib, where 60KB more wouldnt be that bad. But for this project it wasn't really a viable solution for me.

Long story short, I decided to manually drop in the polyfill for Object.entries and import it only in the browser builds via a small automated preprocessing step, to make the bundle as small as possible.

@pkrumins
Copy link
Author

Thanks for the new release and your background comments. Unfortunately, there's a new error:

ReferenceError: 'Symbol' is undefined

Can you please look into this? I'll be happy to try it again.

@nylki
Copy link
Owner

nylki commented Jun 30, 2019

@pkrumins hey there, I pushed a new release that should fix this issue. Please let me know if there is anything else coming up.

@nylki
Copy link
Owner

nylki commented Jul 20, 2019

@pkrumins Just wanted to check back if the release worked for you in the end, or if there still are language features missing. Unfortunately I currently do not have a good testing environment myself to properly test IE11.

@pkrumins
Copy link
Author

pkrumins commented Aug 2, 2019

Thanks for checking back. I just tested the library in dist/lindenmayer.browser.min.js and it worked in IE. Hooray!

I'll put it in math tools website now.

Also, here's how you can test things in IE. Try this link: browserling.com/ie/11 - this opens a live IE 11 session.

@nylki
Copy link
Owner

nylki commented Aug 3, 2019

@pkrumins perfect, thanks! :)

@nylki nylki closed this as completed Aug 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants