|
1 | 1 | # Svelte CSF |
2 | 2 |
|
3 | | -The **Svelte CSF** addon lets you write [Storybook](https://storybook.js.org/) stories directly in `.svelte` files instead of `.js` or `.ts` files. |
| 3 | +The **Svelte CSF** addon lets you write [Storybook](https://storybook.js.org/) stories directly in `.svelte` files instead of `.js` or `.ts` files. |
4 | 4 | By leveraging native Svelte syntax and reactivity, it provides a more natural and seamless way to document and showcase your Svelte components directly within Storybook. |
5 | 5 |
|
6 | | -- Official tutorial using `Svelte`. ( [link](https://storybook.js.org/tutorials/intro-to-storybook/svelte/en/get-started/) ) |
7 | | -- Official tutorial using `Sveltekit`. ( [link](https://storybook.js.org/docs/get-started/frameworks/sveltekit) ) |
8 | | -- A published storybook. ( [chromatic](https://next--667492d3e52064f1d418ec95.chromatic.com) / [src](./examples/) ) |
9 | | - |
10 | | - |
11 | 6 | ## 🐣 Getting Started |
12 | 7 |
|
13 | 8 | > [!TIP] |
14 | 9 | > If you've initialized your Storybook project with Storybook version 8.2.0 or above, this addon is already set up for you! |
15 | 10 |
|
16 | | -> [!IMPORTANT] |
| 11 | +> [!IMPORTANT] |
17 | 12 | > Not running the latest and greatest versions of Storybook or Svelte? Be sure to check [the version compatibility section below](#version-compatibility). |
18 | 13 |
|
19 | 14 | ### Sveltekit |
@@ -62,6 +57,10 @@ Restart your Storybook server for the changes to take effect. |
62 | 57 | > [!NOTE] |
63 | 58 | > Svelte CSF stories files must always have the `.stories.svelte` extension. |
64 | 59 |
|
| 60 | +- Official tutorial using `Svelte`. ( [link](https://storybook.js.org/tutorials/intro-to-storybook/svelte/en/get-started/) ) |
| 61 | +- Official tutorial using `Sveltekit`. ( [link](https://storybook.js.org/docs/get-started/frameworks/sveltekit) ) |
| 62 | +- A published storybook. ( [chromatic](https://next--667492d3e52064f1d418ec95.chromatic.com) / [src](./examples/) ) |
| 63 | + |
65 | 64 | ### Defining the meta |
66 | 65 |
|
67 | 66 | All stories files must have a "meta" (aka. "default export") defined, and its structure follows what's described in [the official docs on the subject](https://storybook.js.org/docs/api/csf#default-export). To define the meta in Svelte CSF, call the `defineMeta` function **within the module context**, with the meta properties you want: |
@@ -128,7 +127,7 @@ If you need more customization of the story, like composing components or defini |
128 | 127 | </Story> |
129 | 128 | ``` |
130 | 129 |
|
131 | | -> [!IMPORTANT] |
| 130 | +> [!IMPORTANT] |
132 | 131 | > This format completely ignores args, as they are not passed down to any of the child components defined. Even if your story has args and Controls, they won't have an effect. See the snippet-based formats below. |
133 | 132 |
|
134 | 133 | #### Inline snippet |
|
0 commit comments