https://github.com/mattjennings/vite-plugin-sveld
A vite plugin to parse your Svelte components through sveld
https://github.com/mattjennings/vite-plugin-sveld
Last synced: 2 months ago
JSON representation
A vite plugin to parse your Svelte components through sveld
- Host: GitHub
- URL: https://github.com/mattjennings/vite-plugin-sveld
- Owner: mattjennings
- Created: 2021-07-25T01:02:29.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-11T03:48:31.000Z (8 months ago)
- Last Synced: 2025-04-08T19:31:37.712Z (2 months ago)
- Language: JavaScript
- Size: 42 KB
- Stars: 20
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-plugin-sveld
A vite plugin to parse your Svelte components through [sveld](https://github.com/IBM/sveld)
## Setup
```
npm install -D vite-plugin-sveld sveld
```
```js
// 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.
```svelte
import docs from './Button.svelte?raw&sveld'
Name
Type
Default
Description
{#each docs.props as prop}
{prop.name}
{prop.type?.replace(/'/g, '"')}
{prop.value?.replace(/'/g, '"') ?? ''}
{@html prop.description ? prop.description : ''}
{/each}
```
## ?raw&sveld types
If you'd like to have the sveld imports typed, add
```
///
```
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.