Menu
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
780
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
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With