ES6: Better support for ES6 class syntax

[ebidel]

@sjmiles and I talked about this syntax. Can we land this asap before the Summit?

class MyElement {
    registered() { // TODO: Polymer core make this work
      this.is = 'my-element';  
      this.properties = {
        foo: {
          type: String,
          value: 'foo prop made it!!'
        }
      }; 
    }

    // everything else is business as usual
    created() {}
    ready() {}
    attached() {}
    detached() {}
    attributeChanged() {}
  }

  Polymer(MyElement); // TODO: Polymer core need to support taking `MyElement` instead of `MyElement.prototype`.

    // @sjmiles: We will put this in Polymer core
    Polymer.Base.registerCallback = function() {
      this._doBehavior('registered'); // abstract
      this._registerFeatures();  // abstract
    };

[lacolaco]

👍

[redian]

+1

[arturparkhisenko]

👍

[JableSoHo]

When I declare properties in my ES6 class as shown above it works fine, but when I add an observer to a property the observer function does not fire. I have a jsbin that illustrates this:

http://jsbin.com/senulobuho/edit?html,js,output

[lacolaco]

@JableSoHo i think this.properties is a mistake. properties should be static like as get is().

http://jsbin.com/yajehiweha/edit?html,js,console,output

[JableSoHo]

@laco0416 Thanks a lot, that fixed the issue!!

[sjmiles]

@laco0416, @JableSoHo: beware of making a properties getter that returns an inline object. Polymer uses this.properties more than once, and the getter as written will return a new object every time.

[sjmiles]

These requests should be fulfilled now via #2365

[ebidel]

Confirmed the changes 💯

[JableSoHo]

@sjmiles Would it be best then to declare this.properties in the registered function and in the getter just return that?

[ebidel]

@JableSoHo. See my syntax in #2329 (comment)

[JableSoHo]

@ebidel I used your syntax which works. Except now neon-animations, and dialog buttons throw an exception. This is the exception :

Uncaught TypeError: Illegal constructorPolymer.NeonAnimationRunnerBehaviorImpl._configureAnimationEffects @ neon-animation-runner-behavior.html:44Polymer.NeonAnimationRunnerBehaviorImpl.playAnimation @ neon-animation-runner-behavior.html:81Polymer._renderOpened @ iron-dropdown.html:288(anonymous function) @ iron-overlay-behavior.html:255Polymer.Async._atEndOfMicrotask @ async.html:50

Also: I am on the master branches for polymer and all the components. Is this fine?

[ebidel]

Can you file a bug over on that repo along with the codes snippet you're using to register the element?

[JableSoHo]

Ive logged an issue. #2382

[wenerme]

Is this the right way to register behaviors in es6 ?

[ebidel]

@kevinpschaaf is MartinMoizard@4e1c81d the right order?