How to get the props of a component to document them on a page?

[JLAcostaEC]

I have searched for many options, however due to the poor support of svelte 5 this is difficult.

What I am looking for is:

Given the component:

Button.svelte

<script lang=ts>
export let {a, b,c}: 
  {
  /** Example A prop */
  a: string;
  /** Example B prop */
  b: string
  c: string
  } = $props()
</script>

<button>

How can I extract those props as follows:

DocsPage.svelte

<script lang=ts>
import Button from "./button.svelte"

const extractedButtonProps  = getButtonWithSomeLibOrFunction(Button)
</script>

{@render extractedButtonProps()}

To finally get something like this:

I have tried to use https://github.com/carbon-design-system/sveld/ however it is not supported and the project is not very active either

Thanks in advance

[ryanatkn]

I made a quick attempt at this for Svelte 5: https://github.com/ryanatkn/svelte_docinfo_sketch

You may also want to watch this Sveld issue.

[JLAcostaEC]

Yes, I've seen the issue on sveld before, but since there hasn't been much activity there I decided to look for another option. Your implementation looks great. I'll do some tests!! Thank you!