Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ES6: Better support for ES6 class syntax #2329

Closed
ebidel opened this issue Aug 20, 2015 · 16 comments
Closed

ES6: Better support for ES6 class syntax #2329

ebidel opened this issue Aug 20, 2015 · 16 comments
Assignees

Comments

@ebidel
Copy link
Contributor

ebidel commented Aug 20, 2015

@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
    };
@ebidel ebidel changed the title Support ES6 class syntax Better support for ES6 class syntax Aug 20, 2015
@sorvell sorvell added the p1 label Aug 20, 2015
@ebidel ebidel changed the title Better support for ES6 class syntax ES6: Better support for ES6 class syntax Aug 24, 2015
sjmiles pushed a commit that referenced this issue Aug 25, 2015
…stered` can affect properties used by features (ref #2329)
@lacolaco
Copy link

👍

2 similar comments
@redian
Copy link

redian commented Aug 25, 2015

+1

@arturparkhisenko
Copy link
Contributor

👍

@JableSoHo
Copy link

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
Copy link

@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
Copy link

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

@sjmiles
Copy link
Contributor

sjmiles commented Aug 27, 2015

@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
Copy link
Contributor

sjmiles commented Aug 27, 2015

These requests should be fulfilled now via #2365

@sjmiles sjmiles closed this as completed Aug 27, 2015
@ebidel
Copy link
Contributor Author

ebidel commented Aug 27, 2015

Confirmed the changes 💯

@JableSoHo
Copy link

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

@ebidel
Copy link
Contributor Author

ebidel commented Aug 27, 2015

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

@JableSoHo
Copy link

@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
Copy link
Contributor Author

ebidel commented Aug 27, 2015

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

@JableSoHo
Copy link

Ive logged an issue. #2382

MartinMoizard pushed a commit to MartinMoizard/polymer that referenced this issue Sep 8, 2015
…stered` can affect properties used by features (ref Polymer#2329)
@wenerme
Copy link

wenerme commented Sep 21, 2015

Is this the right way to register behaviors in es6 ?

@ebidel
Copy link
Contributor Author

ebidel commented Sep 21, 2015

@kevinpschaaf is MartinMoizard@4e1c81d the right order?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants