vite-plugin-sveld

A vite plugin to parse your Svelte components through sveld

Setup

npm install -D vite-plugin-sveld sveld

// vite.config.js
import sveld from 'vite-plugin-sveld'

export default {
  plugins: [sveld()]
  ...
}

Usage

By adding ?raw&sveld to a .svelte import, it will return the JSON output from sveld for that component.

<script>
import docs from './Button.svelte?raw&sveld'
</script>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        {#each docs.props as prop}
            <tr>
                <td>{prop.name}</td>
                <td><code>{prop.type?.replace(/'/g, '"')}</code></td>
                <td><code>{prop.value?.replace(/'/g, '"') ?? ''}</code></td>
                <td>{@html prop.description ? prop.description : ''}</td>
            </tr>
        {/each}
    </tbody>
</table>

?raw&sveld types

If you'd like to have the sveld imports typed, add

/// <reference types="vite-plugin-sveld" />

to a src/global.d.ts file or similar in your project. Imports must have ?raw&sveld specifically to be typed. Adding additional query params, or flipping to ?sveld&raw will cause them to be untyped.