search

mariusmuntean / ChartJs.Blazor

Brings Chart.js charts to Blazor
https://www.iheartblazor.com/
MIT License
695 stars 157 forks source link

IE11 Compatibility? #59

Open fudgeboy2000 opened 4 years ago

fudgeboy2000 commented 4 years ago

Describe your question

Bit of a long shot - any idea on IE11 compatibility for ChartJS.Blazor for server-side? I'm using daddoon's Blazor/Polyfill which covers most basic scenarios, but I get a SCRIPT1002 Syntax Error on ChartJsBlazorInterop.js (3,1) in IE11's console. Are there any extra polyfills I might need?

Which Blazor project type is your question related to?

Which charts is this question related to?

All charts

Joelius300 commented 4 years ago

As far as I understand, IE11 doesn't support js-classes (source). Since we're using classes, you might need to add support for those or rewrite the js. However, I don't know how you would achieve the first option and I understand that the second option isn't much more desirable.

Sadly, I don't think I can help you directly (I'm simply not experienced enough with this stuff) but I think these links might help you:

SeppPenner commented 4 years ago

IE11

Just. Let. It. Die. 🤣 🤣 🤣 🤣

fudgeboy2000 commented 4 years ago

As far as I understand, IE11 doesn't support js-classes (source). Since we're using classes, you might need to add support for those or rewrite the js. However, I don't know how you would achieve the first option and I understand that the second option isn't much more desirable.

Sadly, I don't think I can help you directly (I'm simply not experienced enough with this stuff) but I think these links might help you:

Many thanks! I'll take a good look at these this week and see how far I get. If I achieve anything I'll report back here.

IE11

Just. Let. It. Die. 🤣 🤣 🤣 🤣

Hahha mate, I'll be the first in line with the baseball bat to put IE11 out of its misery. But legacy support for legacy software on legacy hardware used by legacy (near retirement, surely) users means I have to cover all bases. Even if those bases are constructed from termite-infested plywood.

SeppPenner commented 4 years ago

Hahha mate, I'll be the first in line with the baseball bat to put IE11 out of its misery. But legacy support for legacy software on legacy hardware used by legacy (near retirement, surely) users means I have to cover all bases. Even if those bases are constructed from termite-infested plywood.

I know, I already had the same problem with another project ;)

fudgeboy2000 commented 4 years ago

Looking good so far.

Thanks to the pointers above about the use of ES6 class() and the SO threads, I looked into using Babel to transpile ChartJSBlazorInterop.js down to ES5. I gave that a go, and then changed the script tag in _host to be conditional:

`

` So an IE11 user will use the transpiled version (which I've stuffed into wwwroot), everyone else takes the original one from the nuget package. And it seems to work - I can see charts in IE11, blazor, server-side. I'll be back to moan if I hit any snags further down the line. I know it's debatable if this effort is worth it for IE11's sake. And I'll have to use babel to transpile each time the Interop.js file changes in an update to keep them synchronised. But it's an option for those of us who are stuck in the dim and distant past.
Joelius300 commented 4 years ago

I'm glad you got it working! I think for now this is the best you can do.

@mariusmuntean Would you consider not using ES6 features in order to make it compatible with IE11 and below or should we just leave it as is and let people transpile if necessary? I don't know how many ES6 features we use apart from classes and I also don't know how much effort it would be considering we're using typescript, not javascript. I'd be fine with leaving it as is and letting people transpile (sorry @fudgeboy2000) since not many people rely on it and also since the ts-interop shouldn't change too often (if it does, we should definitely consider making it compatible).

fudgeboy2000 commented 4 years ago

I was surprised by how easy it was to get babel setup and doing its thing - it's a small extra build step for devs in my unfortunate position considering how easy the ChartJS.Blazor package makes adding charts. A small price to pay, and hopefully this thread will help others who have to put up with IE11 in their lives.

mariusmuntean commented 4 years ago

@fudgeboy2000 great job! I'm really glad you got it working and then documented it here.

In my opinion it should work even easier than using Babel. Nothing against Babel, but there's no need for an extra step. Instead, just do this:

If anyone has a Windows machine at hand and is willing to test this out, I'd appreciate if they can document the results here.

@Joelius300 you're right, I wouldn't downgrade the traspilation target that much. After consulting a colleague on this issue, I think that the added complexity, increased download size and/or loss of performance aren't worth it. On the other hand, if it turns out that there are many people who need this, I would be willing to add a second CD pipeline that publishes another Nuget package for supporting older browsers.

Joelius300 commented 4 years ago

Should we leave this issue open? Maybe link to it in the readme where we mention what browsers we support (we do that right 🙄) and then close?

The wiki has been long dead so until we have proper documentation, this would have to go into the readme. Or we just leave it and people will search for it and find it.

Opinions?