Export Component type to user

[liruifengv]

What version of starlight are you using?

0.24.2

What is your idea?

Export Component type to user.

// user-components/Aside.astro
export interface Props {
	type?: (typeof asideVariants)[number];
	title?: string;
}

// components.ts
export { default as Aside, type Props as AsideProps } from './user-components/Aside.astro';

User can import type from @astrojs/starlight/components

---
import { type AsideProps } from "@astrojs/starlight/components"
---

Why is this feature necessary?

When the user wants to encapsulate Starlight component, must use Parameters:

---
import { Badge as StarlightBadge } from '@astrojs/starlight/components';
export type Props = Parameters<typeof StarlightBadge>[0];
---

<StarlightBadge {...Astro.props} />

<style is:global>
	.neutral-badge {
		border-color: var(--sl-color-gray-5);
		background-color: var(--sl-color-gray-6);
		color: var(--sl-color-text);
	}
</style>

Do you have examples of this feature in other projects?

---
import { Badge as StarlightBadge, type BadgeProps } from '@astrojs/starlight/components';
export type Props = BadgeProps;
---

<StarlightBadge {...Astro.props} />

<style is:global>
	.neutral-badge {
		border-color: var(--sl-color-gray-5);
		background-color: var(--sl-color-gray-6);
		color: var(--sl-color-text);
	}
</style>

Participation

• I am willing to submit a pull request for this feature.

[HiDeoo]

When the user wants to encapsulate Starlight component, must use Parameters:

Another alternative is to use the ComponentProps type from Astro:

import type { ComponentProps } from 'astro/types';
import { Badge } from '@astrojs/starlight/components';
type Prop = ComponentProps<typeof Badge>;

[delucis]

Yes, given we have the barrel file, I suspect this might be a nicer way to do this. Otherwise we have all the different named components also exporting props. What do folks think? We could also document this better, maybe as part of #1938

[HiDeoo]

We could also document this better, maybe as part of #1938

That would make sense in the general "Using components" guide that would be part of this 👍

[HiDeoo]

The ComponentProps approach is now documented in the "Using components" guide.