Open cge-taal opened 2 months ago
Disclaimer This information might be inaccurate, due to it being generated automatically
To address the issue with storybook init
in a turbo + sveltekit + pnpm monorepo, follow these steps:
Install Storybook for SvelteKit:
pnpm add --save-dev @storybook/sveltekit
Initialize Storybook:
pnpm dlx storybook@latest init --type sveltekit
Check preset.js
in /code/frameworks/sveltekit
:
Ensure the configuration aligns with your monorepo setup. Adjust paths if necessary.
Update tsconfig.json
:
Verify TypeScript settings in /code/frameworks/sveltekit/tsconfig.json
to ensure compatibility with your project structure.
Review vitest.config.ts
:
Confirm the Vitest configuration in /code/frameworks/sveltekit/vitest.config.ts
is correctly set up for your monorepo.
These steps should help resolve the initialization issue in your specific setup.
/code/frameworks/sveltekit /docs/_snippets/sveltekit-install.md /docs/_snippets/svelte-vite-install.md /docs/_snippets/svelte-webpack5-install.md /docs/_snippets/storybook-init-v7.md /docs/_snippets/init-command.md /docs/_snippets/init-command-manual-framework.md
@cge-taal Here are some suggestions:
pnpm dlx storybook@8.1 init --type sveltekit
. We made a bunch of aggressive changes in 8.2 and it might still be buggy. I tried this and hit a different error around .svelte
files.ui
package -- there currently is none but I think there has to be in order to handle .svelte
files.Thanks a lot @shilman - admittedly I've deliberately tried to stick only to the basics, as a test for maturity of SvelteKit and its surrounding ecosystem. It is already good to have your feedback that version 8.2 of Storybook is known to be a little rough on the edges still - in as far as SvelteKit support is concerned.
I'll update the ui package to be closer to another version I have somewhere - which resembles a so-called "SvelteKit library skeleton project" (or similar).
Hopefully the end result is clarity on which versions of libraries to stick with to have full integration capabilities.
With this knowledge perhaps even turborepo could be updated to have more realistic basics included for its SvelteKit starter.
By the way, my real use-case is to have Storybook working fully in the monorepo environment mentioned.
As far as I'm aware, Storybook still needs to use the addon-svelte-csf
addon to enable stories for Svelte / SvelteKit ?
Will that still be the case for Storybook >= 8 ? Given support for <slot/>
s is required ?
Actual working examples would be wonderful to see. I've seen mostly open tickets and it is not really clear which versions of which libraries and APIs to go with.
Related ticket: https://github.com/storybookjs/addon-svelte-csf/issues/188
Apologies @shilman , I was busy with other things. So I tried your advice. Here are my steps
npx create-turbo@latest -e with-svelte storyrepo
cd storyrepo
mkdir apps/storybook
cd apps/storybook
At this point I did exactly as you suggested: pnpm dlx storybook@8.1 init --type sveltekit
SvelteKit is nowhere to be found in the project templates - please see the attached.
This leads me to believe there is no SvelteKit support in the tooling and I cannot find a latest example that works. My next steps will include "lots of trial and error doing different things" as someone on Svelte Discord suggested.
@cge-taal the typical use of npx storybook@latest init
is running inside the directory of an existing project that contains components, not in an empty directory. when you run it in an empty directory, it first bootstraps a project of your choosing and then installs storybook into it.
as it says above on the empty folder init that you screenshotted:
Thanks again @shilman for your continued help. Yes I did create a repo to illustrate what you suggest: https://github.com/cge-taal/storyrepo
Repeating the steps here
npx create-turbo@latest -e with-svelte storyrepo # choose pnpm
cd storyrepo/apps
npm create svelte@latest storybook # Choose Library project and TS. Don't add Svelte5
cd storybook
And then pnpm dlx storybook@latest init --type sveltekit
, as version 8.1 also gave me issues. I'm happy to help debug this and make a clear path for this environment setup. Please don't hesitate to suggest more things I could try.
Thanks!
Hi @shilman , it has been a while. Just wanted to give an update on this.
The example repo I made lists steps that work in its readme : https://github.com/cge-taal/storyrepo
As you'll see there, the main.ts
still needs fixing after following proposed steps via the tools, so I recommend updating the default of main.ts
for svelte(kit).
Furthermore, I have a strange error, that I'm sadly not able to reproduce in a small example, but I've narrowed down when it happens.
In my ui
package, I tend to name components via folders and keep the svelte files as index.svelte, so for example components/button/index.svelte
.
When I write stories in my apps/storybook/src/stories
folder, I tend to do something similar, having a apps/storybook/src/stories/components/button/index.stories.svelte
file.
However, this sometimes gives me the following error when running storybook and trying to view the applicable component:
TypeError: Cannot destructure property 'story' of 'o' as it is undefined.
at normalizeStory (http://localhost:6008/sb-preview/runtime.js:7154:62)
at http://localhost:6008/sb-preview/runtime.js:7224:15
at Array.forEach (<anonymous>)
at processCSFFile (http://localhost:6008/sb-preview/runtime.js:7222:25)
at li.memoizerific [as processCSFFileWithCache] (http://localhost:6008/sb-preview/runtime.js:127:95)
at yi.prepare (http://localhost:6008/sb-preview/runtime.js:8790:66)
at async ts.renderSelection (http://localhost:6008/sb-preview/runtime.js:9062:7)
When I rename the stories file to button.stories.svelte
instead of index.stories.svelte
, the problem goes away.
Perhaps you might know why that happens. For now at least it seems I have a workaround via different file naming.
Describe the bug
In trying to solve Storybook support for Svelte 4 and Storybook 8, I've run across some issues.
When attempting a new turbo + sveltekit + pnpm monorepo,
storybook init
fails.Please see the linked repository for more details.
Reproduction link
https://github.com/cge-taal/test-sveltekit-storybook
Reproduction steps
No response
System
Additional context
No response