Generic component

[arctic karma]

Hey, is there any way to create a generic component in astro.build?
So, I tried to create a component and when I want to call it in another component it should look like this<Card component="section"></Card>

My Card Component:

---
import type { Props as AstroProps } from 'astro';

interface Props extends AstroProps {
  variant?: 'light' | 'dark' | 'medium';
}
const { variant = 'light', component: Component = 'section'} = Astro.props as Props;
---

<Component class={variant}>
    <slot />
</Component>

And I call it with:

<Card component="div">
  ...
</Card>

I mean, it works, but I get this error:

Component 'Component' is not a valid component.

If this is a Svelte or Vue component, it might have a syntax error that makes it impossible to parse.ts(2604)

The error is displayed in my card component

[mighty current]

https://github.com/willmartian/div.js 😄

Does it have error with lowercase c? Ui frameworks use pascal case to differentiate html elements from custom, but if it builds, you can just ignore it...

[sour shore]

Yep, this is possible (check out the dynamic tags documentation)

Looking at your code, if it's a typescript error, is it because component is not defined in Props?

interface Props extends AstroProps {
  component: string
  variant?: 'light' | 'dark' | 'medium'
}

[arctic karma]

@sour shore I don't think that's the problem. It does not recognize them as components. When I try to log this console.log(Component); This also gives me back the correct element, which it should be.

[sour shore]

what version of Astro are you using?

[arctic karma]

That could be it. xd 2.10.14
I have updated it. I think you are right, if I add it in my interface as component: string. It no longer shows any errors
But now I seem to have problems with the class

Type '{ children: any; class: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'class' does not exist on type 'IntrinsicAttributes'.

[sour shore]

this might help. the polymorphic type should attach the correct attributes
https://docs.astro.build/en/guides/typescript/#polymorphic-type

[arctic karma]

That's funny, I can extend my interface with HTMLAttributes. But that comes from vue? But I don't get any errors

import type { HTMLAttributes } from 'vue';

interface Props extends AstroProps, HTMLAttributes {
  component?: string;
  variant?: 'light' | 'dark' | 'medium';
}

[sour shore]

I think the types should be the same, since it's the html standard

but that looks good to me. pretty sure astro has the same export, but if vue works, why change it 🤣