Stories with Snippets no longer working in Storybook 8.6 for Svelte 5 CSF

[jventers]

Summary

Before upgrading, this method was working just fine, but after moving to 8.6, Storybook is now trying to render these snippets inside the default story (i.e., wrapping a story in a story) rather than simply allowing for custom stories.

Note: These are all inside Component.stories.svelte files with the following boilerplate:

<script context="module">
	import { defineMeta } from '@storybook/addon-svelte-csf';
	import Component from './Component.svelte';

	const { Story } = defineMeta({
		title: 'Components/Component',
		component: Component,
		tags: ['autodocs'],
		argTypes: {
			// All my props and their available options and descriptions
		},
		args: {
			// All my default values
		}
	});
</script>

Examples:

// Button toggle needs bound on/off state, so used Snippet to access prop binding
<Story name="Same Icon & Text for Both States">
	{#snippet children(args)}
		<KButtonToggle bind:selected={toggleState1} onClick={() => (toggleState1 = !toggleState1)} {...args} />
	{/snippet}
</Story>

// Wanted to demonstrate the ability to having parent/child relationship with checkboxes, so needed to render multiple of the same component within a single story
<Story name="Parent-Child Checkbox Group">
	{#snippet children(args)}
		<!-- Parent Checkbox -->
		<KCheckbox label="Select All" name="parent-group" parent />
		<!-- Child Checkboxes -->
		<KCheckbox label="Option 1" name="parent-group" value="option1" />
		<KCheckbox label="Option 2" name="parent-group" value="option2" />
		<KCheckbox label="Option 3" name="parent-group" value="option3" />
	{/snippet}
</Story>

// To demonstrate my menu component, I needed another component to trigger it
<Story name="Default Story">
	{#snippet children(args)}
		<KMenu placement={args.placement} options={myOptions}>
			<KButton label="Action Menu" background_color="neutral" is_solid={false} />
		</KMenu>
	{/snippet}
</Story>

// Modal component is broken into 4 pieces, three of which are optional. In order to use all of them and add a button to trigger the modal to show, I needed the snippet functionality 
<Story name="Simple Modal">
	{#snippet children(args)}
		<KButton label="Open Modal" variant="secondary" color="primary" onClick={openSimpleModal} />
		<KModal bind:is_open={simpleModalOpen} size={args.size} backdrop={args.backdrop} click_outside={args.click_outside}>
			<KModalTitle bind:is_open={simpleModalOpen} title="Example Modal" icon_color="default" has_close={false} />
			<KModalBody scrollable={false}>
				<p>This is a notification.</p>
			</KModalBody>
			<KModalActions bind:is_open={simpleModalOpen} buttons={simpleModalButtons} button_width="100%" />
		</KModal>
	{/snippet}
</Story>

Additional information

I'm not really doing anything special in my main.ts or preview.ts, just using light/dark themes instead of backgrounds (setting the background with the imported _storybook.scss file which is working fine). We are using SvelteKit and Vite in this project, but nothing fancy there either. Again though, this was all working previously.

// main.ts
import type { StorybookConfig } from '@storybook/sveltekit';

const config: StorybookConfig = {
	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
	addons: [
		'@storybook/addon-svelte-csf',
		'@storybook/addon-essentials',
		'@chromatic-com/storybook',
		'@storybook/addon-interactions',
		'@storybook/addon-themes'
	],
	framework: {
		name: '@storybook/sveltekit',
		options: {}
	},
	docs: {
		defaultName: 'Documentation'
	}
};
export default config;

// preview.ts
import type { Preview, SvelteRenderer } from '@storybook/svelte';
import { withThemeByDataAttribute } from '@storybook/addon-themes';
import '../src/lib/styles/styles.scss';
import '../src/lib/styles/_storybook.scss';

const preview: Preview = {
	decorators: [
		// Allows you to toggle your data-theme
		withThemeByDataAttribute<SvelteRenderer>({
			themes: {
				light: 'light',
				dark: 'dark'
			},
			defaultTheme: 'light',
			attributeName: 'data-theme'
		})
	],
	parameters: {
		backgrounds: { disable: true }
	}
};

export default preview;


// svelte.config.js
import adapter from '@sveltejs/adapter-static';
import { sveltePreprocess } from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: sveltePreprocess({scss: true}),
	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: undefined,
			precompress: false,
			strict: true
		})
	}
};

export default config;


// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit(), tailwindcss()]
});

Create a reproduction

No response

[jventers]

After about 6 hours of troubleshooting, I finally figured out a workaround. If you add 'asChild' to your tag as a prop, it will stop trying to render the default story as a parent of your snippet. This should be added to the Storybook docs if this is the recommended way to handle these kinds of stories moving forward (unsure).

Example:

<Story name="Same Icon & Text for Both States" asChild>
	{#snippet children(args)}
		<KButtonToggle bind:selected={toggleState1} onClick={() => (toggleState1 = !toggleState1)} {...args} />
	{/snippet}
</Story>

[jventers]

There does appear to still be an issue with trying to use the default args inside snippets. It doesn't seem to have the context it used to as now if you try to do something like color={args.color} to use whatever the currently selected color is in your snippet story it will stop rendering the story all together