microsoft/TypeScriptSamples

Polymer 2.0 web component example

gertcuykens opened this issue · 7 comments

gertcuykens commented

https://github.com/gertcuykens/hello-world
https://github.com/gertcuykens/decorators

I am doing my very best to put the bits and pieces together to present a Polymer 2.0 typescript example. Can you take a look please?

I have many typescript errors I am not sure about.

The polymer team is working on a better typescript experience for custom elements I think the TypeScript team should be involved too in this.

https://github.com/Polymer/polymer/pull/3954/files
microsoft/TypeScript-DOM-lib-generator#150
microsoft/TypeScript-DOM-lib-generator#151

Polymer/old-docs-site#1768

DanielRosenwasser commented

Hey @gertcuykens we're definitely up for taking a Polymer sample. We recently did some work to ensure custom elements could be created (which you can check out in our nightlies).

That said, I am not a Polymer expert, so you'll have to fill in some of the blanks for me. 😄

  • What exactly is hello-world-es.ts?
  • What is the tmp folder for?
  • Is there a reason hello-world.html isn't in the same folder as the TS components?
  • Can you normalize from tabs to spaces here and here?
  • What is the root index.html for? Looks like you're already pointing to demo/index.html.
gertcuykens commented

Thanks,

  • hello-world-es.ts is a example how to make a plain vanilla es6 web component element without polymer or anything just es6
  • hello-world-dc.ts is building a web component element using polymer decorators
  • hello-world.ts is building a polymer web component element without decorators

tmp is the polymer team trying to figure out typings and is the most important part you should take a very good look at and collaborate with the polymer team. My knowledge is way too small to make sure the polymer team is doing it correctly.

Everything else is not so important right now and is just the way polymer represent their elements into a catalog https://elements.polymer-project.org basicly index.html is just a fancy way to document elements but is still work in progress for the new polymer 2.x and doesn't work yet :)

gertcuykens commented

The tmp files are copies from https://github.com/Polymer/polymer/tree/2.0-typescript

Please collaborate with the polymer team directly if you notice errors, i am just a hello world messenger :)

https://github.com/Polymer/polymer/pull/3954/files

DanielRosenwasser commented

I think we'll have to wait for Polymer/polymer#3954 before we pull in samples to understand how they should be consumed.

gertcuykens commented

Yep I agree but please verify if there defenitions are done the right way. For exampe when I look at it in vscode i get

image

I can't judge if does errors are bad or not or if they prevent a better typing experience for the end user. Just hoping that a typescript expert from Microsoft has also reviewed it just to be safe before it is being injected in the offical polymer branch.

gertcuykens commented

I split the examples into two repositories because decorators are killing me to make a simple example work.

So this one is ok https://github.com/gertcuykens/hello-world and only needs a few more extra typings, but that I can probably figure out myself.

Decorators on the other hand are a disaster for me to setup correctly https://github.com/gertcuykens/decorators I am trying for days now to make this work, asked stackoverflow and any developer I could find to help me on this.

http://stackoverflow.com/questions/39926208/polymer-2-x-typescript-decorators-example

gertcuykens commented

Finally i figured decorators out... now the thing left is to understand umd vs polymer imd

https://github.com/PolymerLabs/IMD