Upgrade to SB9 and global context

[rogerfar]

I'm not a big SB expert so not sure if I'm doing something wrong or if it's a bug with SB9.

But I have a test that shares a global variable:

<script module lang="ts">
	import Select from '$lib/components/select/Select.svelte';
	import { defineMeta } from '@storybook/addon-svelte-csf';

	const { Story } = defineMeta({
		title: 'Select',
		component: Select
	});
</script>

<script lang="ts">
	type Item = { value: string; label: string; color: string };

	const items: Item[] = [
		{ value: 'apple', label: 'Apple', color: 'Red' },
...
		{ value: 'zucchini', label: 'Zucchini', color: 'Green' }
	];
</script>

<Story name="Standard List">
	<Select {items} onLabel={(i) => i.label} key="value" placeholder="Select a fruit" data-testid="test-select" />
</Story>

<Story name="Binding">
	<Select {items} onLabel={(i) => i.label} key="value" placeholder="Select a fruit" value="strawberry" data-testid="test-select" />
</Story>

This worked fine in SB8, but in SB9 it fails because {items} is undefined in the component itself.

[xeho91]

It looks like either a parser or runtime issue, hence we need more context.

Could you share the logs with error details (including stack trace), so we can figure out where to look?

[rogerfar]

No errors, but I made a repo here:
https://stackblitz.com/edit/vitejs-vite-kyyw5emf?file=src%2Fstories%2FButton.stories.svelte&terminal=dev

If you look at the Button.stories.svelte I create a button IN the story, any props that are being passed in are undefined in the component itself.

[JReinhold]

Your story syntax is a little off, you're actually passing the <Select {items} ... /> component as a child to the Select component. You're essentially using the "With children" pattern: https://github.com/storybookjs/addon-svelte-csf#with-children

But it looks like you want to render the content as is, which the asChild-prop on Story is for: https://github.com/storybookjs/addon-svelte-csf#static-template

So you'd do this instead:

<script module lang="ts">
	import Select from '$lib/components/select/Select.svelte';
	import { defineMeta } from '@storybook/addon-svelte-csf';

	const { Story } = defineMeta({
		title: 'Select',
		component: Select
	});
</script>

<script lang="ts">
	type Item = { value: string; label: string; color: string };

	const items: Item[] = [
		{ value: 'apple', label: 'Apple', color: 'Red' },
...
		{ value: 'zucchini', label: 'Zucchini', color: 'Green' }
	];
</script>

<Story name="Standard List" asChild>
	<Select {items} onLabel={(i) => i.label} key="value" placeholder="Select a fruit" data-testid="test-select" />
</Story>

<Story name="Binding" asChild>
	<Select {items} onLabel={(i) => i.label} key="value" placeholder="Select a fruit" value="strawberry" data-testid="test-select" />
</Story>

That is perfectly fine, depending on your use case. If you want the Controls panel to be useful, you'd define the props via args instead. This is "The Storybook way", but you don't have to do it if you don't want to:

<script module lang="ts">
	import Select from '$lib/components/select/Select.svelte';
	import { defineMeta } from '@storybook/addon-svelte-csf';

	const { Story } = defineMeta({
		title: 'Select',
		component: Select,
        // 👇 these are the default args for all stories.
        // they will be passed as props to the Select component (defined above)
        args: {
          items: [
            { value: 'apple', label: 'Apple', color: 'Red' },
            ...
		    { value: 'zucchini', label: 'Zucchini', color: 'Green' }
	      ],
          onLabel: (i) => i.label,
          key: 'value',
          placeholder: 'Select a fruit',
          'data-testid': 'test-select',
        }
	});
</script>

<Story name="Standard List" />

<Story name="Binding" args={{ value: 'strawberry' }} /> // 👈 set args for this specific story, merging with those defined in the meta