Suggestion: Add typings for Typescript

[Fredx87]

It would be nice to include a Typescript definition file for this library, like the one included in the main library (https://github.com/WebReflection/hyperHTML/issues/187).

If you want I can make a PR with the .d.ts file. I also think that could be useful to add some examples of how to use this library with typescript.

[WebReflection]

I'd love a PR here, but please tell me if README example https://github.com/WebReflection/hyperHTML-Element#the-class or any of these is enough to understand it: https://viperhtml.js.org/hyperhtml/examples/#!fw=Polymer&example=custom-element

[Fredx87]

The examples are quite clear, maybe I would only add an example where there is a property binding with a setter, just to show how to pass complex objects or functions instead of string as attributes.

Anyway I was suggesting to add also examples of usage with Typescript, because it will be a little different than usage with plain Javascript. Obviously I will include an example in my PR. Where is the best place to include it? in the README?

[WebReflection]

I think a TypeScript.md page would be better, because the documentation is elsewhere, but I can easily point at pages in here and/or take the example and put it in the documentation page.

how to pass complex objects

you can use data=${anyValue} to pass complex objects right away to the node, and retrieve it via this.data inside any method you want.

or functions

one uses functions for listeners only, and these are already accepted (but the class implements EventListener and handleEvent mechanism right away so you usually pass this)

instead of string as attributes

the class passes through observedAttributes at definition time and it does the get/set attribute dance to notify it, wen appropriate.

If you use attributes, you are dealing with strings. Only data or other special attributes that you are not watching accepts hyperHTML table.

Please keep in mind here I'm using, and proposing, standards as much as I can.

It's not a goal of this class, or hyperHTML itself, to re-invent standards.

[WebReflection]

P.S. ... about that:

I was suggesting to add also examples of usage with Typescript

I don't personally TypeScript so I wouldn't have any idea. All I know is that TypeScript has problems distinguishing between overrides and overwrites so that if you put an onclick() {. ... } method in the class TypeScript goes bananas because it doesn't understand that's a replacement for the inherited accessor (since hyperHTML uses DOM Level 3 events, not Level 0)

So, unfortunately, I cannot help much there.

[Fredx87]

Yes, I know that the library is using standard features. I'm using a standard way to pass complex objects or functions to elements created with HyperHTMLElement and it is done defining properties as setters on the class. This is an example: https://codepen.io/anon/pen/RQXELV?editors=0011

I'm also aware that you don't use Typescript, so I will try to write some examples in a Typescript.md file.

[WebReflection]

I'm using a standard way to pass complex objects or functions to elements

uhm ... TBH, that's a very nice hack, but it's also ... indeed ... a hack.

A straight forward way to pass some data is to pass just data=${owner}, as example, without any need for the get/set/render circus, example: https://codepen.io/WebReflection/pen/NyQJXp?editors=0011

It's true though if you want to render each time that attribute changes or is set with a different value you need to do that little hack.

I'm curious at this point to see the PR, it seems like it'd be very interesting! Thanks

[Fredx87]

Why do you think that is an hack? I'm simply defining a property and reacting to it's change. The standard way to use properties is from Javascript code, but I noticed that hyperhtml templates can handle them.

Furthermore I think that the ability to pass complex objects to components and react to their changes is extremely important in complex applications, and it is usually supported by view libraries (with props in React and inputs in Angular, for example). The way that I followed to do this maybe is not very comfortable, because the library is not designed to work in this way... but maybe it is a feature that can be added.

Anyway, this discussion in unrelated with this specific issue. I have made the PR to add Typescript support: https://github.com/WebReflection/hyperHTML-Element/pull/22

[WebReflection]

Why do you think that is an hack? I'm simply defining a property and reacting to it's change.

The thing is, if you use observedAttributes, which is useless in your example, you should use attributeChangedCallback instead of a setter.

However, due hyperHTML implementation, you can skip right away observable attributes and define your own setters/getters so that hyperHTML will pass data right away.

[WebReflection]

P.S. I've published latest with your PR. Thanks again.