Hey there, I've been experimenting with solid-js lately and I'm facing a challenge integrating it with typescript.
My objective is to make my styling more modular by incorporating it within 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've tried multiple approaches but have struggled to make typescript cooperate when it comes to the dynamic component props...
If anyone could lend me a hand, I would truly appreciate it.