mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 07:21:16 +08:00
09bd49af77
On a page inside a new directory (e.g. `get-started/frameworks`), almost* every relative link that went up a level (e.g. `../writing-stories/args.mdx`) now needs to go up two levels (e.g. `../../writing-stories/args.mdx`). * The exception is relative links pointing to directories that are siblings of the current directory, e.g. on `configure/integration`, a link to `../user-interface/sidebar.mdx` does _not_ need adjusted.
136 lines
3.7 KiB
Plaintext
136 lines
3.7 KiB
Plaintext
---
|
||
title: Storybook for Svelte & Webpack
|
||
sidebar:
|
||
order: 7
|
||
title: Svelte & Webpack
|
||
---
|
||
|
||
Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/).
|
||
|
||
<If notRenderer={'svelte'}>
|
||
<Callout variant="info">
|
||
Storybook for Svelte & Webpack is only supported in [Svelte](?renderer=svelte) projects.
|
||
</Callout>
|
||
|
||
{/* End non-supported renderers */}
|
||
</If>
|
||
|
||
<If renderer={'svelte'}>
|
||
## Requirements
|
||
|
||
* Svelte ≥ 4.0
|
||
* Webpack ≥ 5.0
|
||
* Storybook ≥ 8.0
|
||
|
||
## Getting started
|
||
|
||
### In a project without Storybook
|
||
|
||
Follow the prompts after running this command in your Svelte project's root directory:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="init-command.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
[More on getting started with Storybook.](../install.mdx)
|
||
|
||
### 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/svelte-webpack5`, 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-webpack5-install.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-addon-compiler-swc-auto-install.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
or
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="storybook-addon-compiler-babel-auto-install.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
More details can be found in the [Webpack builder docs](../../builders/webpack.mdx#compiler-support).
|
||
|
||
Finally, update your `.storybook/main.js|ts` to change the framework property:
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="svelte-webpack5-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 [the 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-webpack5',
|
||
options: {
|
||
// ...
|
||
},
|
||
},
|
||
};
|
||
```
|
||
|
||
The available options are:
|
||
|
||
#### `builder`
|
||
|
||
Type: `Record<string, any>`
|
||
|
||
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
|
||
|
||
{/* End supported renderers */}
|
||
</If>
|