Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SvelteKit: Automatically support Kit-specific features #20239

Merged
merged 10 commits into from
Jan 12, 2023
Merged

SvelteKit: Automatically support Kit-specific features #20239

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d66993e
keep vite-plugin-sveltekit-compile
JReinhold Dec 13, 2022
378310c
updated support table in sveltekit readme
JReinhold Dec 14, 2022
af711eb
Merge branch 'next' of github.com:storybookjs/storybook into svelteki…
JReinhold Dec 14, 2022
bfd4545
document error from navigation and forms import
JReinhold Dec 14, 2022
d3a5085
Merge branch 'next' into sveltekit-keep-compile-plugin
ndelangen Dec 15, 2022
dea9962
make the version range of vite also allow for vite 4
ndelangen Dec 15, 2022
b0384ed
Merge branch 'next' into sveltekit-keep-compile-plugin
ndelangen Jan 12, 2023
9459443
Update code/frameworks/sveltekit/README.md
benmccann Jan 12, 2023
374451b
Update code/frameworks/sveltekit/src/preset.ts
benmccann Jan 12, 2023
a7f2f78
Merge branch 'next' into sveltekit-keep-compile-plugin
JReinhold Jan 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 25 additions & 14 deletions code/frameworks/sveltekit/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,28 @@ Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) ann
- [Manual migration](#manual-migration)
- [Troubleshooting](#troubleshooting)
- [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook)
- [Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview)
- [Acknowledgements](#acknowledgements)

## Supported features

All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath.
However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon:

| **Module** | **Status** |
| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | 🔜 Coming in 7.0 |
| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⏳ Planned for 7.1 |
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called. |
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ⏳ Planned for 7.1 |
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | 🔜 Coming in 7.0. Mocks are planned for 7.1 so you can set different store values per story. |
| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported. They are meant to only be available server-side, and Storybook renders all components on the client. |
| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🔜 Coming in 7.0 |
| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported. They are meant to only be available server-side, and Storybook renders all components on the client. |
| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | 🔜 Coming in 7.0 |
| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | 🔜 Coming in 7.0 |
| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported. They are only meant to be used in service workers |
| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported |
| **Module** | **Status** | **Note** |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. |
| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⏳ Planned for 7.1 | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview) |
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called. | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview) |
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ⏳ Planned for 7.1. | |
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | Mocks planned for 7.1, so you can set different store values per story. |
| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. |
| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | |
| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | |
| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | They are only meant to be used in service workers |
| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | |

This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/7.0/react/writing-stories/introduction), [test](https://storybook.js.org/docs/7.0/react/writing-tests/introduction) and [document](https://storybook.js.org/docs/7.0/react/writing-docs/introduction) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.

Expand Down Expand Up @@ -111,6 +112,16 @@ yarn remove @storybook/builder-vite

You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.cjs`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.

### Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview

> Some stories don't load, instead they show the following error in the preview:
>
> ```
> Cannot read properties of undefined (reading 'disable_scroll_handling')
> ```

You'll experience this if anything in your story is importing from `$app/forms` or `$app/navigation`, which is currently not supported. To get around this, separate your component into a shallow parent component that imports what's needed and passes it to a child component via props. This way you can write stories for your child component and mock any of the necessary modules by passing props in.

## Acknowledgements

Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially [Ben McCann](https://twitter.com/benjaminmccann) - to make integrations with the wider ecosystem possible.
5 changes: 1 addition & 4 deletions code/frameworks/sveltekit/src/preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
// Remove vite-plugin-svelte-kit from plugins if using SvelteKit
// see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
plugins = await withoutVitePlugins(plugins, [
// pre @sveltejs/kit@1.0.0-next.574
'vite-plugin-svelte-kit',
// @sveltejs/kit@1.0.0-next.582 and later
'vite-plugin-sveltekit-setup',
// @sveltejs/kit@1.0.0-next.587 and later
'vite-plugin-sveltekit-compile',
]);

Expand Down