Generating Library Documentation from exported .svelte files

[yoh-extradat]

We have been building several component libraries for internal usage lately and are now contemplating the best way to document them. Since i am too lazy to write down stuff that's already in the source files and keep the documentation in sync with code changes afterwards, i would love to generate the documentation from the code.

On my wish list would be something like this:

npx docs init
docs generate

{
  "name":"TestLibrary",
  "version":"0.0.1",
  "components":[{
    "name":"Button",
    "description":"Renders a button",
    "porperties":[{
      "name":"message",
      "type":"string",
      "default":"hello world",
      "description": "Message that will be displayed once the button is clicked"
    }],
    "events":[{
       "name":"mouseenter",
       "description": "Triggered on mouseenter of button"
    }],
    "slots":[
      {
         "name": "anoymous",
         "description": "Override the inner HTML of the Button"
      }
    ]
  }]
}

I've been doing a bit of research and found several smaller libraries. But so far i haven't found a solution, that doesn't require me to declare all component paths manually and/or write a lot of text that could be generated from the source files.

Thus I've started to setup some rudimentary generator scripts reading and parsing the source files. So far it's looking quite good and seems like it can be done in a straight forward way.
I am inspecting ./src/lib/index.ts to retrieve the path of all .svelte Files that are exported by the Library. Afterwards i read and parse all Files and extract Events, Slots and Properties including their types and defaults. The only thing that's a bit more tricky are descriptions. But they could be added via comment's.

<script>
 //@description{Renders a button}
 export let message:string //@description{ Message that will be displayed once the button is clicked }
 function click{
     dispatch("click") /*@description{
         Will be triggered whenever the button is clicked.
     }*/
 }
</script>
<button on:click={click}>
    <slot > <!--@description{ Slot to customize inner HTML of Button }  -->
       Click me
    </sot>
</button>

Before going further down this path, i would appreciate some feedback. Is there a script for this, i've missed? Would any else be interessted in such a documentation generator?