Support svelte stories in Story index

[shilman]

Storybook v7 is based on a story index. Which currently doesn't support svelte native stories. We should fix this!

[joshwooding]

I was curious so had a little look, the two issues I can see are:

storybook/lib/core-server/src/utils/StoryIndexGenerator.ts

Lines 55 to 57 in cc14131

	const relativePath = path.relative(this.options.workingDir, absolutePath);
	if (!['.js', '.jsx', '.ts', '.tsx', '.mdx'].includes(ext)) {
	logger.info(`Skipping ${ext} file ${relativePath}`);

Customisation for this is pretty straightforward via config from the svelte framework but you also get an error here:

storybook/lib/csf-tools/src/CsfFile.ts

Lines 407 to 410 in cc14131

	export const loadCsf = (code: string, options: CsfOptions) => {
	const ast = babelParse(code);
	return new CsfFile(ast, options);
	};

but I'm not show this can be solved without running some kind of pre-processor.

[j3rem1e]

Where can I find documentation for this new stories index ? or maybe pointers in the code

[cerebrl]

Hello all,

First things first: I love Storybook! I've never really used it before starting this recent project. Now that I'm actually using it, I can see how wonderful it is. So, thank you for your contributions to our industry :)

Now, to my issue(s)/misunderstanding(s): I just rebuilt my SvelteKit project's Storybook configuration due to some changes related to adding Vitest to the project. The additions seemed to have caused the following error to my existing, and working, Storybook implementation:

Failed to parse source for import analysis because the content contains invalid JS syntax

The full error is similar to what's seen here: https://stackoverflow.com/questions/68049006/why-is-vite-throwing-import-error-in-sveltekit-javascript.

I believe this is due to the addition of @sveltejs/vite-plugin-svelte, but I could be wrong. I noticed I was a bit behind in the Storybook version, so I started the Storybook implementation from scratch using the generator (Storybook 6.5.3): npx sb init --builder @storybook/builder-vite. The resulting .storybook/main.js config seems to have the below from the generator:

features: {
  storyStoreV7: true
}

After adding a few dependencies and manual config changes (TailwindCSS and fixing ES Module v. CommonJS syntax), I discovered the combination of @storybook/addon-svelte-csf and the above storyStore7 of true seems to cause the following error:

Cannot process .svelte file with storyStoreV7

Flipping storyStoreV7 to false seems to fix the issue. At least, Storybook seems to come back to life as I had it before adding Vitest.

My question (issue): Is flipping storyStoreV7 to false the expected solution for the above? Is there a better solution that allows me to be compatible with the new upcoming v7 APIs and write stories in .svelte files (what addon-svelte-csf is supposed to provide me)?

Here's my project repo, if you are curious: https://github.com/cerebrl/forgerock-web-login-framework. It's fairly simple project at the moment.

Thanks, again. Hope to hear from you soon <3

[shilman]

@cerebrl everything you said is correct. this is a limitation of the svelte CSF format and the reason we've referred to it as experimental. the workaround you mentioned is the recommended workaround. there are other ecosystem limitations as well. for example, we recently announced a test runner and it is not fully compatible with Svelte CSF stories. I'd like to resolve this issue one way or another in the coming months, but for now it's a bit of a mess. Thanks for your patience!

[cerebrl]

Thanks for the super quick response, @shilman! I did notice I could write the stories in regular .ts or .js, but it seems I would lose a good amount of ergonomics if I did. Would you personally recommend ditching the Svelte syntax to open up my options, or just be patient and stick to my *.stories.svelte niceties, even though it may come with limitations?

[shilman]

@cerebrl It's really up in the air. I'm sure we'll come up with something good. I posted this in discord yesterday about CSF3 which has a lot of nice ergonomics but lacks the ability to define compositions of Svelte components the way Svelte CSF does.

For me the best possible outcome would be one in which CSF3's render function returns something much more ergonomic for Svelte, and the rest of the format stays identical between the frameworks, which would be a massive win to make it easier to keep documentation & maintenance up to date.

We can also try to bridge the gap between Svelte CSF and the rest of the storybook ecosystem, but there's a large amount of work there and our efforts are mostly focused elsewhere right now.

There's also a middle ground, which I think is achievable, where we add stories.json support for Svelte CSF, and bring it up to the 7.0 architiecture, but then there are certain features that you'll miss out on in different parts of the ecosystem (e.g. watch mode in the test runner). I suspect we'll do this as a stop-gap while we figure out which of the other two options is most feasible.

I think we'll figure this out in the next few months. In the meantime, CSF3 is the "safe" bet, because it is 100% supported and compatible with the growing Storybook ecosystem (testing, design handoff, perf optimizations, etc). But composing components ergonomically is a pretty big deal and we absolutely need to handle that much better to provide a first class experience.

[cerebrl]

@shilman, I can't thank you enough for your time. I've joined the Discord community, and I'll continue there with any future questions that I might have.

I've gone ahead and switched to CSF3 (rather than using Svelte CSF) and think that's the right decision. If needed, I'll just compose my components in a separate Svelte file, probably .story.svelte, and import that into my .stories.ts file. Now, I can explore Storybook without limitations :D

Again, thank you!

[IanVS]

This has been implemented in storybookjs/addon-svelte-csf#69, and is supported in storybook 7.0 and @storybook/addon-svelte-csf 3.0 (currently in prerelease). Please try it out and let us know if you are having problems.