dom-expressions
dom-expressions copied to clipboard
ryansolid
(feat) augmentable JSX.Element-types
I have been having a lot of fun lately with custom JSX-elements (for example with this little side-project) : JSX are functions and functions can return more then dom-elements or any of the allowed JSXElement-types. Solidjs itself allows this approach, but it is impossible right now to properly type these components as types can not be augmented through declaration.
My proposal is to follow a pattern described https://github.com/microsoft/TypeScript/issues/28078
interface XRegistry { A:A B:B C:C }
type X= XRegistry[keyof XRegistry];
... And in the other file
declare module "someModule" { interface XRegistry { D:D } }
which results in the following code:
This way the JSXElement-type could be augmented through a declaration-file as follows
As you can see in the following image the CustomElement-type is added to the accepted JSX.Element-types
It creates identical code if not augmented. If you want an example of it in action: (this repo) contains a patch with it working.
