Specializing dom props to the underlying element type

[zth]

Continuing the discussion from here #5711

Currently, we ship one large dom props type that we say all lowercase JSX elements have. We try to fit as much as possible into that one, to cover the props of all existing element types. However, in reality, different dom elements may have different props.

Typically, there's a set of base dom props that all elements have. Then various elements have various additional props. Sometimes the specialized props overlap, sometimes they don't.

@cristianoc asked how the types would generally look for this. I think we can piggy back on TS here. This is how TS defines the same thing: https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts#L6916

That's an example for HTMLInputElement, and there are types for all the different elements in there. So, there's a base HTMLElement that holds all common props for all elements. That's then extended with the specialized props for each element.

cc @mattdamon108 @cknitt

[zth]

My observation is that the proposed type spread syntax would greatly help. We could essentially do the same thing as TS:

type htmlElement = {<bunch of props here>}
type htmlInputElement = {...htmlElement, alt: string, <more props> }

[zth]

There's also lots of prior art here, although not for the JSX case per se, but rather when dealing the elements imperatively: https://github.com/tinymce/rescript-webapi

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.