So I'm trying to do the following thing with solid-js. But can't figure out the right way with typescript.
I want to modulate my styling through my components.
type RelevantTags = Exclude<keyof JSX.IntrinsicElements, 'script' | 'object' | 'style' | 'head'>;
type MustHaveProps = {
class?: string;
}
type DynamicComponentProps<Props extends MustHaveProps> = Props & {
as: Component<Props>
}
type DynamicHTMLTagProps<Tag extends RelevantTags> = JSX.IntrinsicElements[Tag] & {
as: Tag;
}
type PossibleComponentTypes<Props extends MustHaveProps> = RelevantTags | Component<Props>;
type MyCustomDynamicComponentProps<ComponentType extends PossibleComponentTypes<MustHaveProps> = "div"> =
ComponentType extends RelevantTags ? DynamicHTMLTagProps<ComponentType> :
DynamicComponentProps<ComponentProps<ComponentType>>;
function MyCustomComponent<C extends PossibleComponentTypes<MustHaveProps>>(props: MyCustomDynamicComponentProps<C>){
return <Dynamic component={props.as} class={props.class} />
}I tried doing this in a few different ways. I can't get typescript to work with the dynamic component props...
Would greatly appreciate some help.
There are quite a few more tags, mostly SVG, declared in JSX.IntrinsicElements which do not accept class attribute. If you exclude them all, Typescript allows to access props.class on the last line
type RelevantTags = Exclude<keyof JSX.IntrinsicElements,
| 'script' | 'object' | 'style' | 'head'
| 'animate' | 'animateMotion' | 'animateTransform' | 'feDistantLight'
| 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR'
| 'feMergeNode' | 'fePointLight' | 'feSpotLight' | 'metadata' | 'view'
>;