SvelteKit: Create framework #20039

JReinhold · 2022-11-30T23:43:56Z

This PR creates a dedicated framework for SvelteKit, based on the Svelte-Vite framework. 🚀

It currently does the same as Svelte-Vite, however in the future this will allow us to support SvelteKit specific features like the $lib module, etc.

Migration

The Svelte-Vite framework still supports SvelteKit, but I've added a deprecation warning telling users to migrate to this framework if SvelteKit is detected.

When do we want to remove this support completely in Svelte-Vite?
Some historical context for the decision:

Svelte-Vite supports SvelteKit out of the box in 6.5
Sometime in the 7.0 alpha, it stopped supporting SvelteKit
Support was explicitly added back in in v7.0.0-alpha.38 via Vite: Add partial SvelteKit support #19338

So this deprecation really only targets SvelteKit users between v7.0.0-alpha.38 and v7.0.0-alpha.55 (2 months apart). I think we should remove support completely during 7.0 RC, considering the historical timeline, but I'm open to suggestions @shilman.

TODO

Migration notes
Generate repro when PR has been approved, but before merging (to not break CI)

code/frameworks/svelte-vite/src/utils.ts

JReinhold · 2022-11-30T23:53:05Z

code/lib/cli/src/project_types.ts

+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
  {
    preset: ProjectType.SVELTE,
    dependencies: ['svelte'],


A stricter solution would be for this ProjectType.SVELTE's matcher function to not match if it sees the @sveltejs/kit dependency, but I can't figure out how this whole code works, so I can't make it work.

…eltekit-framework

JReinhold · 2022-11-30T23:58:57Z

code/lib/cli/src/versions.ts

@@ -68,6 +68,7 @@ export default {
  '@storybook/source-loader': '7.0.0-alpha.54',
  '@storybook/store': '7.0.0-alpha.54',
  '@storybook/svelte': '7.0.0-alpha.54',
+  '@storybook/svelte-kit': '7.0.0-alpha.54',


@shilman I don't know if this is legal to do. Or even if there's something other we need to do because this package is yet to be released.

shilman

Awesome job!!

Are you open to changing the name from svelte-kit to sveltekit? It's what I called it in the frameworks post based on various googling.

Also, we should add an automigration for people upgrading from 6.x who are using SvelteKit. But we can do that in a later PR.

shilman · 2022-12-01T01:32:39Z

code/frameworks/svelte-vite/src/preset.ts

-  // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
-  // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
-  plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+  // temporarily support SvelteKit until


until ... 😂

code/frameworks/svelte-vite/src/utils.ts

JReinhold · 2022-12-01T10:38:06Z

Are you open to changing the name from svelte-kit to sveltekit? It's what I called it in the frameworks post based on various googling.

I see. The SvelteKit codebase is pretty inconsistent between the two, so I'm fine with either.

https://github.com/search?q=repo%3Asveltejs%2Fkit+sveltekit&type=code
https://github.com/search?q=repo%3Asveltejs%2Fkit+svelte-kit&type=code

…eltekit-framework

.vscode/settings.json

code/lib/cli/src/repro-templates.ts

yannbf · 2022-12-02T09:43:14Z

MIGRATION.md

@@ -574,6 +576,10 @@ If you were using `viteFinal` in 6.5 to simply merge in your project's standard

 Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).

+#### SvelteKit needs the `@storybook/sveltekit` framework
+
+SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.


This doesn't explain much what users have to do. Are you planning to add an automigration? See this as reference

…eltekit-framework

shilman

Looking good!

shilman · 2022-12-02T23:43:51Z

MIGRATION.md

@@ -576,6 +578,10 @@ If you were using `viteFinal` in 6.5 to simply merge in your project's standard

 Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).

+#### SvelteKit needs the `@storybook/sveltekit` framework
+
+SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.


Suggested change

SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.

SvelteKit projects should use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.

\`\`\`js

export default {

framework: '@storybook/sveltekit',

};

\`\`\`

I'm okay with this suggestion, but you should know that Storybook is unusable if SvelteKit isn't handled explicitly like the framework does. Do you still think it should be changed to "should"?

Ok, then "need to" or "must" WFM

JReinhold added 3 commits November 30, 2022 23:00

initial SvelteKit framework

024de34

make svelte-kit framework more like svelte-vite

842a153

cleaner SvelteKit warning

43268fa

JReinhold commented Nov 30, 2022

View reviewed changes

code/frameworks/svelte-vite/src/utils.ts Outdated Show resolved Hide resolved

JReinhold commented Nov 30, 2022

View reviewed changes

Merge branch 'next' of github.com:storybookjs/storybook into jeppe/sv…

91470df

…eltekit-framework

JReinhold commented Nov 30, 2022

View reviewed changes

JReinhold self-assigned this Dec 1, 2022

JReinhold added maintenance User-facing maintenance tasks svelte labels Dec 1, 2022

shilman reviewed Dec 1, 2022

View reviewed changes

shilman added feature request cli and removed maintenance User-facing maintenance tasks labels Dec 1, 2022

JReinhold added 2 commits December 1, 2022 10:58

simplify SvelteKit handling in Svelte Vite

d82fc9e

move link check from sandbox task to generate task

51217cd

JReinhold added 4 commits December 1, 2022 14:05

svelte-kit > sveltekit

3bb4c1f

cleanup

412cad2

Merge branch 'next' of github.com:storybookjs/storybook into jeppe/sv…

f51b4af

…eltekit-framework

migration docs

73caea5

JReinhold marked this pull request as ready for review December 1, 2022 13:23

JReinhold requested a review from shilman December 1, 2022 13:23

JReinhold commented Dec 1, 2022

View reviewed changes

.vscode/settings.json Outdated Show resolved Hide resolved

JReinhold commented Dec 1, 2022

View reviewed changes

code/lib/cli/src/repro-templates.ts Show resolved Hide resolved

Cleanup

63334f8

yannbf reviewed Dec 2, 2022

View reviewed changes

yannbf requested a review from benmccann December 2, 2022 09:43

JReinhold added 2 commits December 2, 2022 10:55

set inDevelopment to turn CI green

f827df3

cleanup migration

cc0af2b

JReinhold and others added 3 commits December 2, 2022 15:53

lower parallelism because inDevelopment

45dd16a

Merge branch 'next' of github.com:storybookjs/storybook into jeppe/sv…

35d139d

…eltekit-framework

Merge branch 'next' into jeppe/sveltekit-framework

9a6f592

shilman approved these changes Dec 2, 2022

View reviewed changes

shilman added 3 commits December 3, 2022 22:26

Clarify migration

eefd349

Merge branch 'next' into jeppe/sveltekit-framework

b70c933

fix versions

d6b3ce5

shilman merged commit 5e6445f into next Dec 3, 2022

shilman deleted the jeppe/sveltekit-framework branch December 3, 2022 17:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SvelteKit: Create framework #20039

SvelteKit: Create framework #20039

JReinhold commented Nov 30, 2022 •

edited

Loading

JReinhold Nov 30, 2022

JReinhold Nov 30, 2022

shilman left a comment

shilman Dec 1, 2022

JReinhold commented Dec 1, 2022

yannbf Dec 2, 2022

JReinhold Dec 2, 2022

shilman left a comment

shilman Dec 2, 2022

JReinhold Dec 2, 2022

shilman Dec 3, 2022

-SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.
+SvelteKit projects should use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.
+\`\`\`js
+export default {
+  framework: '@storybook/sveltekit',
+};
+\`\`\`

SvelteKit: Create framework #20039

SvelteKit: Create framework #20039

Conversation

JReinhold commented Nov 30, 2022 • edited Loading

Migration

TODO

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shilman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JReinhold commented Dec 1, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shilman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JReinhold commented Nov 30, 2022 •

edited

Loading