Inheritance model for creating polymer elements?

[jari.p...@gmail.com]

Hello!

I've been looking Polymer for a year now, and still this syntax:

    Polymer('seed-element', {

      author: 'Dimitri Glazkov',

      fancy: false,

      ready: function() {

      },

      sayHello: function(greeting) {

        var response = greeting || 'Hello World!';

        return 'seed-element says, ' + response;

      },

      fireLasers: function() {

        this.fire('seed-element-lasers-success', { sound: 'Pew pew pew!' });

      }

    });

Gives me creeps. Not a single IDE will support anything useful for that syntax. Why this syntax is like this? It should follow the biggest Javascript libraries to achive greater interoperability, e.g. Backbone and inheritance

I really like TypeScript, and I suspect above kind of syntax does not allow normal inheritance. If the Polymer were made to follow semi-standard, one could simply inherit from Polymer element. So one could in TypeScript use familiar:

    class SeedElement extends PolymerElement  {

        fancy: boolean = false

        author: string = "Dimitri Glazkov"

        public sayHello (greeting: String) {

            

        }

        

        public fireLasers () {

            

        }

    }

All it takes, I suspect is to have normal "javascript inheritance" in Polymer, just like in Backbone (e.g. I can already inherit from Backbone.View using TypeScript syntax) it's pure JavaScript library.

Thanks.

[mike...@gmail.com]

Did you find a way to solve this?

You can do something like this:

class MyElement {

    age = 25;

    name = "Daniel";

    color = "red";

    owner = "Eric";

    //setFocus() {       

    //    this.$.nameInput.focus();

    //}

}

Polymer(new MyElement());

That works, but the problem is you cant access the $ or any other special polymer properties. Any clues?

Mike

[mike...@gmail.com]

I have tried to do some hacks to get it to work but my JS isnt that great, perhaps someone can improve on this:

class PolymerBase {

    $: any;

    constructor() {

        // Allow polymer to define this

        delete this["$"];

        // Turn all class functions into variables

        for (var i in this) {

            if (!this.hasOwnProperty(i) && typeof (this[i]) === 'function' && i != 'constructor') {

                var func = this[i];

                this[i] = function () { func(); }

            }

        }

    }

}

class MyElement extends PolymerBase {

    age = 25;

    name = "Daniel";

    color = "red";

    owner = "Eric";

    setFocus() {       

        console.log("$: " + this.$);

        console.log("name: " + this.name);

        this.name

        this.$.nameInput.focus();

    }

}

Polymer(new MyElement());

[jari.p...@gmail.com]

Hi!

I did get it working, with a hack. Problem is TypeScript not the polymer.

https://gist.github.com/Ciantic/9db1b6281bd7a743ffb5

See files "MyElement.ts" "index.html" and "index.js".

The long file "customelement.ts" is workaround, since TypeScript doesn't allow inheriting from interface *without* implementing all items, so they are just copy & pasted from HTMLElement interface.

[jari.p...@gmail.com]

oh yeah, and to use my hack with polymer, if I remember correctly one had to do it like this:

Polymer('seed-element', MySeedElementClass)

or something like that, it wasn't difficult after that.