Add type declarations

[mindplay-dk]

@andrewiggins I figured I'd create a separate issue for this one, since your work is already enough to get projects up and going without it.

It would be great if we could also get some type-checking for elements and attributes - standard DOM as well as pico's oncreate etc., and possibly SVG elements. (does pico support SVG?)

I tried something like [elemName in keyof ElementTagNameMap]?: any; in the IntrinsicElements declaration - I think I've seen others doing something similar, but I couldn't make it work.

Snabbdom redeclares the whole kit'n'kaboodle, I guess maybe that's a necessary evil if we want type-checking for elements/attributes?

Either way, we can leave this for a future version, once the overall type-declarations are fully in place.

[jorgebucaran]

@mindplay-dk does pico support SVG?

Yes, it totally does! 👍

[mindplay-dk]

For further reference, here's the type-definitions for React and Inferno, both of which are very similar (on the important points, the element/attributes-types and CSS properties) to the ones in Snabbdom ... It makes me wish there was a single shared package with just the DOM declarations, the stuff we all have in common, but I couldn't find one.

Duplicating this massive bulk of declarations seems kind of wrong - I wonder if we should approach these other teams about that.

[jorgebucaran]

I wonder if we should approach these other teams about that.

Maybe after we are done making sure the current types are properly tested and we are done adding better docs.

[jorgebucaran]

@mindplay-dk Ping.

[mindplay-dk]

Ping what? There are two open pull requests 😉

I suppose all those PRs are scrap now, though - if you're going to rewrite the whole thing.

[jorgebucaran]

No, I mean, what's this issue about again?

[mindplay-dk]

It's about type-hinting.

Try e.g. Preact with Typescript in VS Code for the full IDE experience - though this is not only for IDE support, but also for stricter and more correct validation during compilation with TS.

[ehsabd]

Hi, I'm new to TypeScript, but I'm willing to contribute to type declaration for superfine.

[jorgebucaran]

That's not TypeScript. What is this about?

[ehsabd]

I see. I try to provide an updated code soon. I'll try to make a very simplified code that allows only for the elements in the beginner example (H1, Button, Text,...)

[ehsabd]

Okay. Here's what I came up with so far: https://github.com/ehsabd/superfine-type-declaration-playground/blob/main/node_modules/superfine/superfine.d.ts

But we need to define type checking for props as well. To do that I can perhaps make use of GlobalEventHanlders. Perhaps I had to add props other than events to this with additional code. But at least we spare some code by using this interface.

[ehsabd]

Okay I have added type declaration for Button as well. Indeed I think the best approach is to make use of already defined GlobalEventHandlers in combination with a GlobalAttributes type that we define ( I defined that based on this:https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

Many elements only have these global events & attributes. For other elements that can also have other props like Button we will add specific props. This is a concise approach I guess.

Note that in this approach we assume that attributes are limited to the defined set of attributes. But I guess that's putting a limit on the broad definition of attributes in HTML specification. I don't know but for example use of data-* attributes is a common practice. But if we don't really limit attributes, we should only type check for events. That kind of type checking should be based on the beginning of the prop (props that begin with on). I don't know how to do that in TypeScript yet.

Please take a look and let me know your thoughts.

[gustavopch]

These are the type declarations used by SolidJS, maybe they're useful for this issue: https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/jsx.d.ts