"Attempting to change value of a readonly property" on Safari 9

[joeyrogues]

Good morning,

Stack

+- ember: 2.4.6
+- ember-attacher: 0.13.0
    +- ember-popper: ^0.8.2,

Description

I suspect that ember-popper is not working on Safari 9.

The following code raises an exception in Ember:

function() {
    function e(e, t) {
        return !t || "object" != typeof t && "function" != typeof t ? e : t
    }
    function t(e, t) {
        e.prototype = Object.create(t && t.prototype, {
            constructor: {
                value: e,
                enumerable: !1,
                writable: !0,
                configurable: !0
            }
        }),
        t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : e.__proto__ = t)
    }
    var n = Ember.Mixin.create({
        extend: function() {
            if (Object.getPrototypeOf(this) === Function.prototype)
                return this._super.apply(this, arguments);
            var n = function(n) {
                function r() {
                    return e(this, (r.__proto__ || Object.getPrototypeOf(r)).apply(this, arguments))
                }
                return t(r, n),
                r
            }(this);
            Object.defineProperty(n, "name", {
                value: this.name || this.toString()
            });
            for (var r = 0; r < arguments.length; r++)
                Object.assign(n.prototype, arguments[r]);
            return n
        }
    });
    Ember.Object.reopenClass(n),
    n.apply(Ember.Component),
    n.apply(Ember.Service),
    n.apply(Ember.Controller),
    void 0 !== window.DS && void 0 !== DS.Model && n.apply(DS.Model)
}(),

The exception is on the defineProperty méthod. It says n already has the name property and that we are "Attempting to change value of a readonly property"

Digging deeper

When digging deeper into ember-popper I've seen that the components ember-popper and ember-popper-base are written with the ES6 extend word instead of using the typical Ember.Component.extend({ ... })

Interesting

My app includes tones of addons and popper is the only one using this notation for components.
There are other addons using the class Foo extend Bar syntax but never for components.
Maybe we should look into this.

1. Are you aware of any issue running ember-popper in Safari 9?

[pzuraq]

Hey @joeyrogues, thanks for reporting this issue! It looks like this is being caused by the legacy class shim which is included for older version of Ember.js. Older versions of Ember can't use native class syntax, and the shim typically allows them to with some minor caveats.

The assignment you're pointing out is something we do to enable better logging and debugging, it gives the class an actual name instead of a random one. Seems like that may not be something we can rely on though, which is a shame 😞

As for using native class syntax with Ember, this is something that'll be coming to Ember soon (and hopefully will be the default!). ember-popper is one of the first addons that has been experimenting with it, so it's definitely pretty cutting edge, but we've been using it in production for some time now and find it very stable. If you'd like more information, I suggest checking out the documentation for ember-decorators! It goes into a lot of detail about how class syntax works with Ember and how you can use it today 😄

[joeyrogues]

Alright, got it. That makes sense.
Thanks for the quick answer 😃