Storybook 7.0 and SvelteKit monorepos

[BeeMargarida]

Hi, I have a question regarding storybook 7.0 and using it on SvelteKit monorepos.

I've ported successfully another project (not monorepo) using SK1.0 and Storybook 7.0-beta.16. However, when I tried to make the same migration in a monorepo (several packages sharing the same storybook configuration in a folder at the root of the repo), it starts throwing out errors of unexpected tokens in TS syntax (from vite-plugin-svelte) in a global decorator.

My first though was that it was not fetching the correct svelte.config.js so it was not applying the preprocess. I tried overriding it by providing it on svelteOptions or in the viteFinal function, but no luck. I dug around the code, but there seems to be no way of passing a path to the specific svelte config file. This is the current state of the main.js.

Am I missing something here? The same setup worked before with storybook@6, but I'm not sure if now with the new framework field it requires additional setup.

[JReinhold]

Hi! Thanks for the question, and thanks for SvelteUI, you and the team are doing awesome work on that! As a way to QA 7.0 I actually planned to migrate SvelteUI to Storybook 7.0 to see where the rough edges were, but you beat me to it!

I've played around a little with your branch, there's multiple issues going on.

1. @storybook/builder-vite doesn't support supplying a custom path to the Vite config, which is what you want here, because it's not in the root but rather in the core package.
   • @IanVS I think we should support this, shouldn't we? I'm thinking a property in main.js that's a relative path to the main.js file?
2. SvelteKit doesn't support supplying a custom path to svelte.config.js which could be another workaround, but isn't. It only looks for svelte.config.js in CWD. So even if you we did manage to give a custom path to the Vite config, SvelteKit still wouldn't load the Svelte config (I tried by manually merging the Vite config).

Given the issues above, I think the best way forward right now is to modify your storybook scripts to be:

"build:storybook": "cd packages/svelteui-core && storybook build -c ../../configuration/storybook",
"dev": "cd packages/svelteui-core && storybook dev -p 6006 -c ../../configuration/storybook",

Changing CWD to the core package and running Storybook "from there". It might feel a bit hacky, but I think it mimics SvelteKit as close as possible, which is a good thing. This will also mean that the custom aliases in viteFinal needs to be relative to packages/svelteui-core and not the root.

It doesn't fix everything though, as there's still issues with addon-svelte-csf failing to parse the TypeScript in the Svelte stories. I think this happens because it loads before the Vite config does when running in storyStoreV7 mode with the new indexer. I noticed this because my console.logs in viteFinal where not even being logged before it failed.
I'm still digging into this and figuring out what's wrong, so I don't have a path forward here yet.

I'll keep digging into this when I have more time.

[IanVS]

Yes, supplying a custom path to the vite config is something I figured we'd need to support eventually. But nobody has asked for or needed it until now. I think it can be a builder option.

[BeeMargarida]

Thank you so much, I'll try out the solutions you provided, but it looks like a good workaround.
Please let me know if there is any way I could help!

[BeeMargarida]

Just wanted to give an update that the solution you mentioned worked 👍 Thank you!