mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 06:31:27 +08:00
117 lines
3.2 KiB
Plaintext
117 lines
3.2 KiB
Plaintext
---
|
||
title: Storybook for Svelte & Vite
|
||
---
|
||
|
||
export const SUPPORTED_RENDERER = 'svelte';
|
||
|
||
Storybook for Svelte & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/).
|
||
|
||
<If notRenderer={SUPPORTED_RENDERER}>
|
||
<Callout variant="info">
|
||
Storybook for Svelte & Vite is only supported in [Svelte](?renderer=svelte) projects.
|
||
</Callout>
|
||
|
||
{/* End non-supported renderers */}
|
||
</If>
|
||
|
||
<If renderer={SUPPORTED_RENDERER}>
|
||
## Requirements
|
||
|
||
* Svelte ≥ 4.0
|
||
* Vite ≥ 4.0
|
||
* Storybook ≥ 8.0
|
||
|
||
## Getting started
|
||
|
||
### In a project without Storybook
|
||
|
||
Follow the prompts after running this command in your Sveltekit project's root directory:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="init-command.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
[More on getting started with Storybook.](./install.md)
|
||
|
||
### In a project with Storybook
|
||
|
||
This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-upgrade.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
#### Automatic migration
|
||
|
||
When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
|
||
|
||
#### Manual migration
|
||
|
||
First, install the framework:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="svelte-vite-install.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
Then, update your `.storybook/main.js|ts` to change the framework property:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="svelte-vite-add-framework.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
## Writing native Svelte stories
|
||
|
||
Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
|
||
|
||
Run the following command to install the addon.
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="svelte-csf-addon-install.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
<Callout variant="info">
|
||
The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
|
||
</Callout>
|
||
|
||
## API
|
||
|
||
### Options
|
||
|
||
You can pass an options object for additional configuration if needed:
|
||
|
||
```js
|
||
// .storybook/main.js
|
||
import * as path from 'path';
|
||
|
||
export default {
|
||
// ...
|
||
framework: {
|
||
name: '@storybook/svelte-vite',
|
||
options: {
|
||
// ...
|
||
},
|
||
},
|
||
};
|
||
```
|
||
|
||
The available options are:
|
||
|
||
#### `builder`
|
||
|
||
Type: `Record<string, any>`
|
||
|
||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md).
|
||
|
||
{/* End supported renderers */}
|
||
</If>
|