Skip to content
This repository has been archived by the owner on Oct 12, 2022. It is now read-only.

Polymer 2.0 web component example #120

Open
gertcuykens opened this issue Oct 5, 2016 · 7 comments
Open

Polymer 2.0 web component example #120

gertcuykens opened this issue Oct 5, 2016 · 7 comments

Comments

@gertcuykens
Copy link

gertcuykens commented Oct 5, 2016

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
Copy link
Member

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
Copy link
Author

gertcuykens commented Oct 6, 2016

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
Copy link
Author

gertcuykens commented Oct 6, 2016

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
Copy link
Member

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

@gertcuykens
Copy link
Author

gertcuykens commented Oct 6, 2016

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
Copy link
Author

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
Copy link
Author

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

https://github.com/PolymerLabs/IMD

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants