Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer and TypeScript [closed]

Tags:

typescript

I have been trying without success implement a web component integrating Polymer and TypeScript. Does anyone knows where can I see a sample? Is there an alternative to Polymer? Thanks

like image 780
Rui Lima Avatar asked May 19 '14 08:05

Rui Lima


1 Answers

I came up with a solution... maybe not the best solution but at least kind of working solution. Still need to investigate deeper on this.

the custom element HTML:

<link rel="import" href="../polymer/bower_components/polymer/polymer.html"/>

<polymer-element name="my-element" constructor="MyElement5">
    <template>
        <span id="el"></span>
    </template>
    <script src="my-element.js"/>

</polymer-element>

my typescript file (my-element.ts):

class Owner{
    ownerinfo:string;
    constructor(public firstName:string, public age:number){
        this.ownerinfo = firstName + " " + age + " yo";
    }

}

var polymer = window['Polymer'];
polymer('my-element',{
    owner:new Owner('TheOwner', 100),
    ready:function(){
        this.$.el.textContent = this.owner.ownerinfo;
    }
})

and finally, the javascript generated by TypeScript:

var Owner = (function () {
    function Owner(firstName, age) {
        this.firstName = firstName;
        this.age = age;
        this.ownerinfo = firstName + " " + age + " yo";
    }
    return Owner;
})();

var polymer = window['Polymer'];
polymer('my-element', {
    owner: new Owner('TheOwner', 100),
    ready: function () {
        this.$.el.textContent = this.owner.ownerinfo;
    }
});
//# sourceMappingURL=my-element.js.map

And with this it works and I can even debug in Firefox or Chrome. Let's see if I come with some step back on this... Hope this helps other guys.

At the end I was thinking too much... and forgot the most important: TypeScript is JavaScript LoL

== almost forgot my Pyramid template:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="${request.static_url('my_project:static/polymer/bower_components/platform/platform.js')}"/>
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

    <!-- Custom webcomponents -->
    <link rel="import" href="${request.static_url('my_project:static/webcomponents/my-element.html')}"/>
    <!-- Bootstrap core CSS -->
    <link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.static_url('my_project:static/theme.css')}" rel="stylesheet">
</head>
<body>
<!-- My Super Custom WebComponent -->
<my-element></my-element>
<script src="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>

Awesome... Polymer + TypeScript + Python

like image 132
Rui Lima Avatar answered Nov 14 '22 17:11

Rui Lima