Skip to content

Commit 67db3e4

Browse files
jonniebigodesjonniebigodes
authored
Merge pull request #32985 from storybookjs/docs_adjust_svelte_references
Docs: Fix Svelte references
2 parents a1df575 + 2a6e675 commit 67db3e4

File tree

7 files changed

+382
-106
lines changed

7 files changed

+382
-106
lines changed

‎docs/_snippets/component-story-with-custom-render-function.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,3 +325,31 @@ export const Example = meta.story({
325325
),
326326
});
327327
```
328+
329+
```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js"
330+
<script module>
331+
import { defineMeta } from '@storybook/addon-svelte-csf';
332+
333+
import Layout from './Layout.svelte';
334+
import MyComponent from './MyComponent.svelte';
335+
336+
const { Story } = defineMeta({
337+
component: MyComponent,
338+
});
339+
</script>
340+
341+
<Story
342+
name="Example"
343+
>
344+
{#snippet template(args)}
345+
<Layout>
346+
<header>
347+
<h1>Example</h1>
348+
</header>
349+
<article>
350+
<MyComponent />
351+
</article>
352+
</Layout>
353+
{/snippet}
354+
</Story>
355+
```

‎docs/_snippets/svelte-framework-options-docgen.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
```js filename=".storybook/main.js" renderer="svelte" language="js"
2+
// Replace your-framework with svelte-vite or sveltekit
3+
export default {
4+
framework: {
5+
name: '@storybook/your-framework',
6+
options: {
7+
docgen: false, // Disable docgen for better performance
8+
},
9+
},
10+
};
11+
```
12+
13+
```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
14+
// Replace your-framework with svelte-vite or sveltekit
15+
import type { StorybookConfig } from '@storybook/your-framework';
16+
17+
const config: StorybookConfig = {
18+
framework: {
19+
name: '@storybook/your-framework',
20+
options: {
21+
docgen: false, // Disable docgen for better performance
22+
},
23+
},
24+
};
25+
26+
export default config;
27+
```

‎docs/_snippets/sveltekit-mock-features.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
2+
<script module>
3+
import { defineMeta } from '@storybook/addon-svelte-csf';
4+
5+
import MyComponent from './MyComponent.svelte';
6+
7+
const { Story } = defineMeta({
8+
component: MyComponent,
9+
});
10+
</script>
11+
12+
<Story
13+
name="MyStory"
14+
parameters={{
15+
sveltekit_experimental: {
16+
state: {
17+
page: {
18+
data: {
19+
test: 'passed',
20+
},
21+
},
22+
navigating: {
23+
to: {
24+
route: { id: '/storybook' },
25+
params: {},
26+
url: new URL('http://localhost/storybook'),
27+
},
28+
},
29+
updated: {
30+
current: true,
31+
},
32+
},
33+
},
34+
}}
35+
/>
36+
```
37+
38+
```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
39+
import MyComponent from './MyComponent.svelte';
40+
41+
export default {
42+
component: MyComponent,
43+
};
44+
45+
export const MyStory = {
46+
parameters: {
47+
sveltekit_experimental: {
48+
state: {
49+
page: {
50+
data: {
51+
test: 'passed',
52+
},
53+
},
54+
navigating: {
55+
to: {
56+
route: { id: '/storybook' },
57+
params: {},
58+
url: new URL('http://localhost/storybook'),
59+
},
60+
},
61+
updated: {
62+
current: true,
63+
},
64+
},
65+
},
66+
},
67+
};
68+
```
69+
70+
```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
71+
<script module>
72+
import { defineMeta } from '@storybook/addon-svelte-csf';
73+
74+
import MyComponent from './MyComponent.svelte';
75+
76+
const { Story } = defineMeta({
77+
component: MyComponent,
78+
});
79+
</script>
80+
81+
<Story
82+
name="MyStory"
83+
parameters={{
84+
sveltekit_experimental: {
85+
state: {
86+
page: {
87+
data: {
88+
test: 'passed',
89+
},
90+
},
91+
navigating: {
92+
to: {
93+
route: { id: '/storybook' },
94+
params: {},
95+
url: new URL('http://localhost/storybook'),
96+
},
97+
},
98+
updated: {
99+
current: true,
100+
},
101+
},
102+
},
103+
}}
104+
/>
105+
```
106+
107+
```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
108+
import type { Meta, StoryObj } from '@storybook/sveltekit';
109+
110+
import MyComponent from './MyComponent.svelte';
111+
112+
const meta = {
113+
component: MyComponent,
114+
} satisfies Meta<typeof MyComponent>;
115+
116+
export default meta;
117+
type Story = StoryObj<typeof meta>;
118+
119+
export const MyStory: Story = {
120+
parameters: {
121+
sveltekit_experimental: {
122+
state: {
123+
page: {
124+
data: {
125+
test: 'passed',
126+
},
127+
},
128+
navigating: {
129+
to: {
130+
route: { id: '/storybook' },
131+
params: {},
132+
url: new URL('http://localhost/storybook'),
133+
},
134+
},
135+
updated: {
136+
current: true,
137+
},
138+
},
139+
},
140+
},
141+
};
142+
```

‎docs/_snippets/sveltekit-mock-links.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
2+
<script module>
3+
import { defineMeta } from '@storybook/addon-svelte-csf';
4+
5+
import MyComponent from './MyComponent.svelte';
6+
7+
const { Story } = defineMeta({
8+
component: MyComponent,
9+
});
10+
</script>
11+
12+
<Story
13+
name="MyStory"
14+
parameters={{
15+
sveltekit_experimental: {
16+
hrefs: {
17+
'/basic-href': (to, event) => {
18+
console.log(to, event);
19+
},
20+
'/root.*': {
21+
callback: (to, event) => {
22+
console.log(to, event);
23+
},
24+
asRegex: true,
25+
},
26+
},
27+
},
28+
}}
29+
/>
30+
```
31+
32+
```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
33+
import MyComponent from './MyComponent.svelte';
34+
35+
export default {
36+
component: MyComponent,
37+
};
38+
39+
export const MyStory = {
40+
parameters: {
41+
sveltekit_experimental: {
42+
hrefs: {
43+
'/basic-href': (to, event) => {
44+
console.log(to, event);
45+
},
46+
'/root.*': {
47+
callback: (to, event) => {
48+
console.log(to, event);
49+
},
50+
asRegex: true,
51+
},
52+
},
53+
},
54+
},
55+
};
56+
```
57+
58+
```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
59+
<script module>
60+
import { defineMeta } from '@storybook/addon-svelte-csf';
61+
62+
import MyComponent from './MyComponent.svelte';
63+
64+
const { Story } = defineMeta({
65+
component: MyComponent,
66+
});
67+
</script>
68+
69+
<Story
70+
name="MyStory"
71+
parameters={{
72+
sveltekit_experimental: {
73+
hrefs: {
74+
'/basic-href': (to, event) => {
75+
console.log(to, event);
76+
},
77+
'/root.*': {
78+
callback: (to, event) => {
79+
console.log(to, event);
80+
},
81+
asRegex: true,
82+
},
83+
},
84+
},
85+
}}
86+
/>
87+
```
88+
89+
```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
90+
import type { Meta, StoryObj } from '@storybook/sveltekit';
91+
92+
import MyComponent from './MyComponent.svelte';
93+
94+
const meta = {
95+
component: MyComponent,
96+
} satisfies Meta<typeof MyComponent>;
97+
98+
export default meta;
99+
type Story = StoryObj<typeof meta>;
100+
101+
export const MyStory: Story = {
102+
parameters: {
103+
sveltekit_experimental: {
104+
hrefs: {
105+
'/basic-href': (to, event) => {
106+
console.log(to, event);
107+
},
108+
'/root.*': {
109+
callback: (to, event) => {
110+
console.log(to, event);
111+
},
112+
asRegex: true,
113+
},
114+
},
115+
},
116+
},
117+
};
118+
```

‎docs/api/csf/index.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,19 @@ When the story renders in the UI, Storybook executes each step defined in the `p
139139
When Storybook loads this story, it will detect the existence of a `render` function and adjust the component rendering accordingly based on what's defined.
140140
</IfRenderer>
141141

142+
<IfRenderer renderer="svelte">
143+
## Custom render functions
144+
145+
If you're using Svelte CSF to write your stories, you can add a custom snippet to allow you additional control over how your story renders. For example, if you were writing a story and you wanted to specify how your component should render, you could write the following:
146+
147+
{/* prettier-ignore-start */}
148+
149+
<CodeSnippets path="component-story-with-custom-render-function.md" />
150+
151+
{/* prettier-ignore-end */}
152+
153+
</IfRenderer>
154+
142155
## Storybook export vs. name handling
143156

144157
Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?

‎docs/get-started/frameworks/svelte-vite.mdx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -203,21 +203,12 @@ Default: `true`
203203

204204
Enables or disables automatic documentation generation for component properties. When disabled, Storybook will skip the docgen processing step during build, which can improve build performance.
205205

206-
```ts title=".storybook/main.ts"
207-
import type { StorybookConfig } from '@storybook/svelte-vite';
208-
209-
const config: StorybookConfig = {
210-
framework: {
211-
name: '@storybook/svelte-vite',
212-
options: {
213-
docgen: false, // Disable docgen for better performance
214-
},
215-
},
216-
};
217-
218-
export default config;
219-
```
206+
{/* prettier-ignore-start */}
207+
208+
<CodeSnippets path="svelte-framework-options-docgen.md" />
209+
210+
{/* prettier-ignore-end */}
220211

221-
##### When to disable docgen
212+
#### When to disable docgen
222213

223214
Disabling docgen can improve build performance for large projects, but [argTypes won't be inferred automatically](../../api/arg-types.mdx#automatic-argtype-inference), which will prevent features like [Controls](../../essentials/controls.mdx) and [docs](../../writing-docs/autodocs.mdx) from working as expected. To use those features, you will need to [define `argTypes` manually](../../api/arg-types.mdx#manually-specifying-argtypes).

0 commit comments

Comments
 (0)