The newest alpaca version does not work in IE11 due to use of spread syntax

[ragnarstolsmark]

The newest version of alpaca does not work in IE11.
This can be seen by opening this page in IE11: http://www.alpacajs.org/demos/web/quickstart/index.html
The reason is the use of the spread syntax (...) in the file Alpaca-async.js without transpiling to ES2015 syntax.
This can be fixed by adding a transpiler step to the gulp build pipeline. I have done this in a fork. Please let me know if you are open to a pull request.

[uzquiano]

Hello there,

That's a good catch. Yes, if you have a PR, please submit it. We will get it merged.

Cheers,

Michael

[MukeshKumarSuman]

Not only spread operator but also arrow function is used.

[surfcoders]

@ragnarstolsmark Built using your changes because need to use this with IE11 (unfortunately), Noticed that the build results for alpaca.js is much smaller than the current deployed version. It gives me an error when running in Chrome:

Uncaught TypeError: Cannot read property 'registerView' of undefined at alpaca.js:2706 at alpaca.js:2760 at alpaca.js:22 at alpaca.js:25

at the following line of the generated code:

Alpaca.registerView({ "id": "web-display", "parent": "base", "type": "display", "ui": "web", "title": "Default HTML5 display view", "displayReadonly": true, "templates": {}, "callbacks": callbacks, "styles": styles, "horizontal": false });

Any insight?

[MukeshKumarSuman]

Hi @uzquiano
If this PR is ok then could you please merge this one.

[ragnarstolsmark]

@surfcoders I'll have a look at it tomorrow.

[ragnarstolsmark]

@surfcoders I looked at your issue. I did not see the size reduction in the built file:

version	alpaca.js (kb)	alpaca.min.js (kb)
master	1337	407
with bugfix	1338	415

However I did notice that there is now a dependency on the babel-polyfill.
I think that the babel-polyfill should be treated the same way as handlebars and bootstrap since not every library should bring their own version of babel-polyfill.
So the documentation should be updated with the new script tag that is needed in the header:

<!-- dependencies (jquery, handlebars, bootstrap and babel-polyfill) -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js"></script>

[surfcoders]

@ragnarstolsmark Yes, realized that the size was not an issue.

When will it be merged?

Thanks!

[surfcoders]

@ragnarstolsmark OK, created the build with your changes (I believe changes were done at gulpfile.js and package.json), and added the babel polyfill script tag per above. Added the updated alpaca files to my project. Still fails in IE11:

SCRIPT1010: Expected identifier alpaca.js (7111,24)

Line 7111 has:

function apply(fn, ...args) { return (...callArgs) => fn(...args,...callArgs); }

Fails because of the spread.

Any insight? I may have missed something...

Thanks

[ragnarstolsmark]

@surfcoders Have you tried checking out the bugfix-transpiler pull-request: https://github.com/ToreOlavKristiansen/alpaca/tree/bugfix/transpiler and building using that?
Here is the built alpaca-files I get:
build.zip

[surfcoders]

@ragnarstolsmark Yep, that worked. Building with that pull myself now. Thanks!!!

Too bad that most of my customers/projects are still in IE...

[ndbroadbent]

Sorry to comment on an old issue, but it would be great if this PR could be merged: #715