Hi, Nice work.
why don't you post it on the official github for TS definition files ? https://github.com/borisyankov/DefinitelyTyped Regards. On Monday, 2 February 2015 20:31:37 UTC+1, [email protected] wrote: > > HI all > > Love the polymer code. I have been using Polymer and typescript in my > latest project and it has been working very well, nice looking app is > forming up and work in all the main browsers ie 10,11, firefox, Chrome, > etc. Still have tweaking work to get it to work better on window phone 8.1, > android, and iphone, but it looks better than I thought it would with > almost no effort > > So first a few quirks I have seen. First one is that the core-animation > only works in chrome, firefox and ie have issues about a play member not > defined and some warning about a playbackrate is going away. I assume this > is just out of sync with the latest webanimation updates > > one is with re-sizeing in a component. Honestly I wish the web community > would just add the silly resize event to a element and move on, vs all this > hackery. Anyway I use the Polymer.CoreResizable mixing. It seems to work > except for when the element is hidden and shown. Maybe I am doing something > wrong, but I hide and show via style.display style. I am not getting the > core-resize event in this case. other than that it works fine and is a > great help. > > Along with that i was trying to find a way to get this work and i was > trying out different idea's. I found that i could add a function: > > clientWidthChanged(oldval) {} > > and this worked great in IE and firefox. The event when off perfectly at > the correct points in time, and happened only once. It worked with hiding > and showing or having some parent element getting a new size. However this > did nothing in chrome. Just an observation, as this would be a great and > simple way to solve the problem in my view that is a little simpler that > the mixin way. > > Last of all I wanted to post my ugly, incomplete but mostly there > solutions to getting typescript to work in case others wanted to use it and > maybe have someone make it better, extra... > > to do this I have two files one to deal with basic Polymer definitions and > one to deal with creating a typescript class. I should point out that > Polymer does not work on a class based design, but one of behaviors. This > is not a big deal, but leads to what looks like a little extra work from a > purely classed based point of view. Also I should add that typescript is > still working on dealing with the idea of mixins better, so you will see > some hacks i have to deal with the re-sizing mixins I used as there has to > be some definition for them. (This could be solved some other ways.. again > i was hacking a little to get it working) > > First the main polymer.d.ts file as it is at the moment ( again could be > done better, probably has bugs, but the API was sort of a self-discovery at > time as documentation is changing, and i am not a polymer developer ) > /////////// > declare module Polymer { > > export interface PolymerOptions { > > // definition > publish?: Object; > computed?: Object; > // object mapping variable names to functions name > observe?: Object; > > // life time API > created?: () => void; > ready?: () => void; > attached?: () => void; > domReady?: () => void; > detached?: () => void; > attributeChanged?: (attrName: string, oldVal: any, newVal: any) => > void; > > } > > } > > //declare class Polymer { > interface Polymer { > > importElements(node: Node, callback: Function); > import(url: string, callback?: () => void): void; > > mixin(target: any, ...obj1): any; > waitingFor(): Array<string>; > // should be an "integer" for milliseconds > forceReady(timeout: number): void; > > (tag_name: string, prototype: Polymer.PolymerOptions): void; > (tag_name: string, prototype: any): void; > (prototype: Polymer.PolymerOptions): void; > (): void; > // hacks for mixins > CoreResizer: any; > CoreResizable: any; > } > > declare var Polymer: Polymer; > > > // these are for web-animation API... should be moved to own file > > > declare class Animation { > constructor(targetElement: HTMLElement, effect: any, options: any); > } > > declare module document { > export interface timeline { > play(animation); > } > } > ///////////////// > > Then the PolymerTS.ts file which i what I used to get a typescript class > to work. The Adapter function allows mixing and class to be defined > correctly. Might be better ways to do this, but I not java script language > expert > > /////////////////// > /// <reference path="Polymer.d.ts" /> > > export function contains(obj: any, arr: Array<any>) { > for (var i = 0; i < arr.length; i++) > { > if (arr[i] === obj) { > return true; > } > } > return false > } > > module PolymerTS { > > export class PolymerBase implements Polymer.PolymerOptions { > > $: any; //polymer object for elements that have an ID > $el: HTMLElement; // my addition to have easy "typed" point to > this as HTMLElements > > Constructor() {} > > ready() { > //console.log("Base ready"); > this.$el = <any>this; > this.Constructor(); > } > > //////////////////////// > // for built in stuff to Polymer > > // inargs is the [args] for the callback.. need to update function > def > async(inMethod: () => void, inArgs?: Array<any>, inTimeout?: > number) { } > job(jobName: string, inMethod: () => void, inTimeout?: number) { } > fire(eventName: string, details?:any, targetNode?:any, > bubbles?:boolean, cancelable?:boolean) { } > asyncFire(eventName: string, details?: any, targetNode?: any, > bubbles?: boolean, cancelable?: boolean) { } > > cancelUnbindAll() { } > > // these are mix in API's.. hacky way to deal with them at the > moment. > resizableAttachedHandler; > resizableDetachedHandler; > > } > > function applyMixins(obj: any, mixins: any[]) { > mixins.forEach(mixin => { > for (var i in mixin) { > if (mixin.hasOwnProperty(i)) { > obj.prototype[i] = mixin[i]; > } > } > }); > > } > > // this allows polymer to work correctly > export function Adapter(t: any, ...mixins) { > var ret = {}; > var poly_func = ["async", "job", "fire", "asyncFire", > "cancelUnbindAll"]; > if (mixins) { > applyMixins(t, mixins); > } > var o = new t(); > for (var i in o) { > if (!contains(i, poly_func)) > ret[i] = o[i]; > } > > return ret; > } > } > ////////////////// > oh and the component file polymer.html > > ///// > <link rel="import" href="../../components/polymer/polymer.html"> > <script src="PolymerTS.js"></script> > //// > > > Again it is a start an has been enough for me to do some work i needed to > do rather quickly. > > A quick example of how this would look like.. a simple component... > > // component html file > > <link rel="import" href="../polymerTS/polymerTS.html" /> > > <polymer-element name="my-test"> > <template> > <style> > </style> > <p>{{someValue}}</p> > <content select="p"></content> > <content></content> > </template> > > <script src="my-test.js"></script> > </polymer-element> > ///// > > The typescript file... > > ///////////// > > class MyTest extends PolymerTS.PolymerBase { > > someValue: string; > > get publish() { > return { > someValue:"default value" > } > } > > // replaces the normal constructor() call > Constructor() { > > } > > joe() { > return "joe"; > } > } > > Polymer("my-test", PolymerTS.Adapter(MyTest)); > > //////////// > > Very simple example ( more of a starter template). > > A few notes on this. I added a $el to access "this" as an HtmlElement > type. This way you don't have to try to cast "this" manually. This also > prevent the need to try to deal with the issue with not being able to > inherit from HtmlElement in the current typescript drops. Maybe this will > be fixed in a future drop and the object can extend from this type > correctly in the typescript sense. > > I hope this is helpful. Love Polymer, look forward to improvements. It is > really a system i see that can be used by teams of people making complex > webs apps. > > > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/4847bd8a-0846-4141-96c3-1cd3c49c079a%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
