Polymer: "use strict"; is not supported in Safari - blocks using ES6 and Babel

[azogheb]

When adding "use strict" to the top of a vulcanized and crisper'ed JS file, there are two errors that come up ONLY when using <template is="dom-repeat"> in Safari.

TypeError: undefined is not a constructor (evaluating 'new this.ctor(model, this)')
not sure where this comes from as the backtrace only shows (anonymous function) in _atEndOfMicrotask

TypeError: Attempted to assign to readonly property.
at https://github.com/Polymer/polymer/blob/master/src/lib/template/templatizer.html#L133

This has come up as I am using babel much like @ebidel was in https://github.com/Polymer/polymer/issues/2363

To reproduce this in a nice sandbox I have prepared a branch using @ebidel material playground project as the base. I am not using babel, just simply adding "use strict" to the top of the JS
https://github.com/azogheb/material-playground/tree/useStrictDemo

The command I am using is as such:
vulcanize --inline-scripts --inline-css elements.html | crisper -h vulcanized.html -j vulcanized.js; echo "'use strict';"|cat - vulcanized.js > /tmp/out && mv /tmp/out vulcanized.js;

In the above demo there is another strict mode error with web-animations-js and I have raised a ticket with them as well. https://github.com/web-animations/web-animations-js/issues/46

[miztroh-zz]

Is it allowable to "use strict" at the top of a script? I thought it was only for use inside a function.

[azogheb]

@miztroh Yes strict mode is most commonly used for entire scripts. As per https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#Strict_mode_for_scripts _Strict mode applies to entire scripts or to individual functions. It doesn't apply to block statements enclosed in {} braces; attempting to apply it to such contexts does nothing._ Also see http://babeljs.io/docs/advanced/transformers/other/strict/ for how Babel and ES6 will use strict mode

[miztroh-zz]

@azogheb Thanks for the clarification.

[ebidel]

@azogheb can put up that modified demo on gh-pages?

[ebidel]

Also curious on what version of Safari you're using?

[azogheb]

Hey @ebidel I have pushed a updated version to gh-pages here http://azogheb.github.io/material-playground/

I am using Version 9.0 (10601.1.56.2) on OSX 10.10.5 (14F27)

[ebidel]

That page looks busted for me in Chrome. Is it working for you?

[azogheb]

Yes it is broken in Chrome due to the issue referenced above open with webanimations-js used by neon-animations. https://github.com/web-animations/web-animations-js/issues/46 not due to polymer.

In Safari the errors are from webanimations-js AND Polymer

[ebidel]

I see. Thanks for that. I missed the web animations bug in your first
comment.

On Tue, Oct 20, 2015, 6:49 PM Alexander Zogheb [email protected]
wrote:

Yes it is broken in Chrome due to the issue referenced above open with
webanimations-js used by neon-animations.
web-animations/web-animations-js#46
https://github.com/web-animations/web-animations-js/issues/46 not due
to polymer.

In Safari the errors are from webanimations-js AND Polymer

—
Reply to this email directly or view it on GitHub
https://github.com/Polymer/polymer/issues/2581#issuecomment-149755165.

[kevinpschaaf]

Proposed solution: use strictify all Polymer source.

[ebidel]

@kevinpschaaf is this something we can add soon? This p1 has been open since last Oct :

[jorgecasar]

@kevinpschaaf I'm use strictifing the Polymer source but I have a doubt. Take a look it in https://github.com/Polymer/polymer/pull/3647#issuecomment-217779982

[TimvdLippe]

All files should now have use strict;.