polymer 2.0 typings

[gertcuykens]

Please update the typings for polymer and webcomponents first. It opens up the door for easy polymer 2.0 typescript experimenting.

npm i -D @types/polymer

PS iron-component-page is completely broken but the /demo code that only needs polymer 2 is working.
https://github.com/gertcuykens/hello-world

web-component-tester is also working except how do you do getContentChildren(); in polymer 2?

      test('distributed children', function() {
        var els = myEl.getContentChildren();
        assert.equal(els.length, 0, 'no distributed nodes');
      });

[arthurevans]

getContentChildren(slctr) would be something like:

var slot = this.shadowRoot.querySelector(slctr || 'slot');
var nodes =  slot ? slot.assignedNodes({flatten: true}) : [];
return nodes.filter(function(n) {
        return (n.nodeType === Node.ELEMENT_NODE);
});

Of course, if you know the slot in advance, you don't need the first half, and you could boil it down to:

this.$.slotID.assignedNodes({flatten: true}).filter(function(n) {
        return (n.nodeType === Node.ELEMENT_NODE);
});

[gertcuykens]

@arthurevans do you mind looking at https://github.com/gertcuykens/hello-world and see how far you get :D I am pulling at as many legs as I can at google and microsoft to get this typescript polymer thing working. Just want to make sure all issues are currently covered and are on its way to be implemented before next typescript release or polymer release. I want to prevent loosing time on things we could have figured out before 2.0 preview.

[gertcuykens]

@arthurevans coming back to your shadowRoot example I think it might be differently then you expect?

[arthurevans]

Hi @gertcuykens. Seeing as I have never used Typescript or vscode in my life, I don't think I'm the best person to try this out for you. Sorry.

I don't know what you mean about shadowRoot. The responses in your console are exactly what I would expect. What did you expect?

The code snippets I gave you above are basically the shadow DOM v1 equivalent of what getContentChildren does in Polymer 1.x. I ran them in the console against a Polymer 2 project and they appeared to work fine.

[gertcuykens]

Ok thanks never mind, It was just me being wrong then expecting the slot innerhtml to be hello world :)

[arthurevans]

@gertcuykens Nope. That's why you need the assignedNodes() call. The nodes don't _move_, they're just rendered there.

[dfreedm]

@justinfagnani did you publish@types/polymer?

Now that we're getting closer to a release of 2.0, we should see how much of the Closure type annotations are handled by typescript and fill in the gaps.

[lukeschaefer]

Now that there's a release candidate out, is there any progress on this?

Currently I use Closure + Polymer 1 - but build times are fairly long and editor support is weak. I'd love to be able to use TS + Polymer 2, but I haven't had any luck setting up an environment with proper typing & compilation, and the Polymer2.0-typescript branch is quite out of date now.

[justinfagnani]

I'm working on the declaration exporter tool and decorators over the next week.

[lukeschaefer]

Awesome! Having a good official typing solution for Polymer 2.0 is very exciting.

[danielvanmil]

any progress on this? thanks

[twitchax]

Eagerly awaiting this...any progress?

[Mika83AC]

I'd also be very happy about some status update on this topic.

[kylecordes]

I would like very much to see comprehensive TypeScript support. The mechanism for generating types discussed here is very interesting: Consume Closure types in the source code, and generate TypeScript from there. Over in the Angular project, they are going the opposite direction, with a tool (which is coming along quite well) tsickle. It consumes TypeScript, and emits Closure types.

As I understand, neither type system is strictly a superset of the other, so there's some rough edges with either direction. But it is interesting to see these two sister projects (perhaps just a few buildings apart on the same campus, or perhaps around the world even though it's the same company) solving essentially the same problem from either direction.

[TimvdLippe]

TypeScript support is currently work in progress at https://github.com/polymer/polymer-decorators

[justinfagnani]

@TimvdLippe to clarify, that's just TypeScript (and possibly Babel, if they end up being compatible) decorators. The typings will be generated by https://github.com/Polymer/gen-typescript-declarations and probably included in the core repo.