https://github.com/mattjennings/mdsvex-sveld

Generate documentation for your Svelte components using sveld
https://github.com/mattjennings/mdsvex-sveld

Last synced: about 7 hours ago
JSON representation

Generate documentation for your Svelte components using sveld

• Host: GitHub
• URL: https://github.com/mattjennings/mdsvex-sveld
• Owner: mattjennings
• Created: 2021-07-25T00:25:36.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-25T23:23:53.000Z (over 3 years ago)
• Last Synced: 2024-10-12T23:14:42.115Z (25 days ago)
• Language: JavaScript
• Size: 13.7 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# mdsvex-sveld

Generate documentation for your Svelte components using [sveld](https://github.com/IBM/sveld)

## Setup

```

npm install mdsvex-sveld

```

In your mdsvex config:

```js

import sveld from "mdsvex-sveld";

const config = {

  remarkPlugins: [sveld],

  ...

};

```

## Usage

You can add generated tables that describe the components props, slots, events, etc. with the following syntax:

````md

```docs

./Button.svelte

```

````

Let's say this was Button.svelte:

```svelte

	/**

	 * The button type

	 *

	 * @type {"button" | "submit" | "reset"} */

	export let type = 'button'

	/**

	 * Set to `true` to use the primary variant

	 */

	export let primary = false

	

	Click me

```

This would be the generated markdown:

```md

### Props

| Prop    | Type                                                 | Default               | Description                              |

| :------ | :--------------------------------------------------- | --------------------- | ---------------------------------------- |

| type    | "button" | "submit" | "reset" | 'button' | The button type                          |

| primary | boolean                                 | false    | Set to `true` to use the primary variant |

### Slots

| Name | Default | Props | Fallback              |

| :--- | :------ | :---- | :-------------------- |

|      | Yes     |       | Click me |

| icon | No      |       |                       |

### Events

| Name  | Type      | Detail |

| :---- | :-------- | :----- |

| click | forwarded |        |

```

### Options

If you don't want all tables at once, you can specify a specific table:

````md

```docs:props

./Button.svelte

```

````

```md

| Prop    | Type                                                 | Default               | Description                              |

| :------ | :--------------------------------------------------- | --------------------- | ---------------------------------------- |

| type    | "button" | "submit" | "reset" | 'button' | The button type                          |

| primary | boolean                                 | false    | Set to `true` to use the primary variant |

```