Open cge-taal opened 1 month ago
I'm unable to reproduce the reported behavior. Copying the example from the readme works fine with the versions you've listed (all the latest at the time of writing). I had to fix the syntax error with onClick
, but other than that it worked fine.
Could you provide a minimal reproduction in a repository? See https://storybook.js.org/docs/contribute/how-to-reproduce
Hi @JReinhold , thank you very much for taking a look. I would normally have offered a small reproducible example from the outset, but thought maybe referring to the official example (which I thought I followed verbatim) would be enough. That said, I'm glad to learn it is working for others and would love to get to the bottom of the issue.
So this morning, I just started on creating a small example - keeping detailed notes of my steps
pnpm dlx create-turbo@latest -e with-svelte test-sveltekit-storybook # choose pnpm
cd test-sveltekit-storybook/packages/ui
pnpm dlx storybook init # choose Vite
Already on the 3rd line I'm getting a new error (it seems version 8.2.2 of Storybook was released since yesterday). Please see the attached output. Shall I make a new ticket for that? storybook-init-error.txt
I'm on these tool versions
pnpm -v
: 9.4.0
node -v
: v20.14.0
I've created a repo for the above here: https://github.com/cge-taal/test-sveltekit-storybook
It contains literally only the files generated with
pnpm dlx create-turbo@latest -e with-svelte test-sveltekit-storybook # choose pnpm
..with the addition of a .gitignore
file.
After a fresh clone, if I now try
cd test-sveltekit-storybook/packages/ui
pnpm dlx storybook init # choose Vite
I get a different error: storybook-init-error.txt
Summarised in the readme
Works for me with the following recipe.
Create a SvelteKit 2 app using Typescript and Svelte 4 with all available integrations (ie. prettier, eslint, playwright, vitest, )
npm create svelte@latest my-svelte-kit-app
Need to install the following packages:
create-svelte@6.3.8
Ok to proceed? (y) y
create-svelte version 6.3.8
┌ Welcome to SvelteKit!
│
◇ Which Svelte app template?
│ Skeleton project
│
◇ Add type checking with TypeScript?
│ Yes, using TypeScript syntax
│
◇ Select additional options (use arrow keys/space bar)
│ Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└ Your project is ready!
Install more integrations with:
npx svelte-add
Next steps:
1: cd my-svelte-kit-app
2: npm install
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
Enter the newly created app
cd my-svelte-kit-app
Install dependencies
npm i
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
added 260 packages, and audited 261 packages in 23s
68 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Install storybook
npx storybook@latest init
╭──────────────────────────────────────────────────────╮
│ │
│ Adding Storybook version 8.2.9 to your project.. │
│ │
╰──────────────────────────────────────────────────────╯
• Detecting project type. ✓
Installing dependencies...
up to date, audited 261 packages in 643ms
68 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
• Adding Storybook support to your "SvelteKit" app
✔ Getting the correct version of 10 packages
Configuring eslint-plugin-storybook in your package.json
✔ Installing Storybook dependencies
. ✓
Installing dependencies...
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/utils@5.62.0
npm WARN Found: eslint@9.9.0
npm WARN node_modules/eslint
npm WARN dev eslint@"^9.0.0" from the root project
npm WARN 9 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/utils@5.62.0
npm WARN node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^5.62.0" from eslint-plugin-storybook@0.8.0
npm WARN node_modules/eslint-plugin-storybook
npm WARN
npm WARN Conflicting peer dependency: eslint@8.57.0
npm WARN node_modules/eslint
npm WARN peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/utils@5.62.0
npm WARN node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils
npm WARN @typescript-eslint/utils@"^5.62.0" from eslint-plugin-storybook@0.8.0
npm WARN node_modules/eslint-plugin-storybook
up to date, audited 804 packages in 961ms
185 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ Storybook was successfully installed in your project! 🎉 │
│ To run Storybook manually, run npm run storybook. CTRL+C to stop. │
│ │
│ Wanna know more about Storybook? Check out https://storybook.js.org/ │
│ Having trouble or want to chat? Join us at https://discord.gg/storybook/ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Running Storybook
> my-svelte-kit-app@0.0.1 storybook
> storybook dev -p 6006 --quiet
storybook v8.2.9
info => Starting manager..
info => Starting preview..
The following Vite config options will be overridden by SvelteKit:
- base
Forced re-optimization of dependencies
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
21.24.10 [vite] ✨ new dependencies optimized: @storybook/blocks
21.24.10 [vite] ✨ optimized dependencies changed. reloading
Storybook loads and everything looks fine.
I then added the https://storybook.js.org/addons/@storybook/addon-svelte-csf
npm install --save-dev @storybook/addon-svelte-csf
I added the Button example (adding the missing onClick handler function)
<script>
export let rounded = true;
function onClick() {
console.log('hello')
}
</script>
<style>
.rounded {
border-radius: 35px;
}
button {
border: 3px solid;
padding: 10px 20px;
background-color: white;
outline: none;
}
</style>
<button class="button" class:rounded on:click={onClick}>
<slot />
</button>
And then the stories
<script context="module">
import Button from './Button.svelte';
export const meta = {
title: "Button",
component: Button
}
</script>
<script>
import { Story, Template } from '@storybook/addon-svelte-csf';
let count = 0;
function handleClick() {
count += 1;
}
</script>
<Template let:args>
<!--👇 'on:click' allows to forward event to addon-actions -->
<Button {...args}
on:click
on:click={handleClick}>
You clicked: {count}
</Button>
</Template>
<Story name="Rounded" args={{rounded: true}}/>
<Story name="Square" source args={{rounded: false}}/>
<!-- Dynamic snippet should be disabled for this story -->
<Story name="Button No Args">
<Button>Label</Button>
</Story>
The Storybook page hot reloads the changes and it works :)
Thanks a lot @kristianmandrup for the detailed example. I forgot to update the ticket here, but in my comment on another ticket ( https://github.com/storybookjs/storybook/issues/28563#issuecomment-2260025323 ) I describe how I got it to work in the turborepo context.
Btw, in your base button example, I think the idea is not to define the onClick
handler there, but instead have
<button class="button" class:rounded on:click>
<slot />
</button>
That way, when you click on the button the on:click is forwarded in a way where Storybook picks it up and displays it in the Actions
tab.
Great to have it working for Svelte!
Describe the bug
Following the basic button story example, gives the following error:
Steps to reproduce the behavior
Try the example above with the following stack
svelte
:4.2.18
storybook
:8.2.1
@storybook/addon-svelte-csf
:4.1.4
Using framework
'@storybook/sveltekit'
(in main.ts)I'm basically trying to find the best Storybook experience for Svelte 4, with
<slot/>
support.Does this plugin support Storybook 8 already?
Is this plugin still necessary for Storybook 8 and Svelte 4, with
<slot/>
support ?Any links to the best working examples would be much appreciated.