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.

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: Support v1.0.0-next.574 and above #20181

Merged
merged 7 commits into from
Dec 10, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions code/frameworks/svelte-vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"magic-string": "^0.26.1",
"svelte": "^3.0.0",
"sveltedoc-parser": "^4.2.1",
"ts-dedent": "^2.2.0",
"vite": "^3.0.0||^4.0.0"
},
"devDependencies": {
Expand Down
5 changes: 2 additions & 3 deletions code/frameworks/svelte-vite/src/preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const core: StorybookConfig['core'] = {
};

export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
let { plugins = [] } = config;
const { plugins = [] } = config;
const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
const svelteOptions: Record<string, any> = await options.presets.apply(
'svelteOptions',
Expand All @@ -25,8 +25,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
// Add docgen plugin
plugins.push(svelteDocgen(svelteConfig));

// temporarily support SvelteKit
plugins = await handleSvelteKit(plugins, options);
await handleSvelteKit(plugins, options);

// TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed
// Wrapping in try-catch in case `@storybook/addon-svelte-csf is not installed
Expand Down
44 changes: 22 additions & 22 deletions code/frameworks/svelte-vite/src/utils.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { PluginOption } from 'vite';
import { deprecate } from '@storybook/node-logger';
import { withoutVitePlugins } from '@storybook/builder-vite';
import type { Options } from '@storybook/types';
import dedent from 'ts-dedent';
import { logger } from '@storybook/node-logger';

function checkName(plugin: PluginOption, name: string) {
return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
Expand All @@ -23,32 +23,32 @@ export function hasPlugin(plugins: PluginOption[], name: string) {
* but warns the user that they should use the sveltekit framework instead.
* Should be removed when we decide to remove support completely for SvelteKit in svelte-vite
*/
export async function handleSvelteKit(
plugins: PluginOption[],
options: Options
): Promise<PluginOption[]> {
if (!hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
// this is not a SvelteKit project ✅
return plugins;
}

export async function handleSvelteKit(plugins: PluginOption[], options: Options) {
/*
the sveltekit framework uses this svelte-vite framework under the hood
so we have to take extra care of only warning when the user is actually using
so we have to take extra care of only throwing when the user is actually using
svelte-vite directly and not just through sveltekit
*/

const frameworkPreset = await options.presets.apply('framework', {}, options);
const framework = typeof frameworkPreset === 'string' ? frameworkPreset : frameworkPreset.name;

if (framework === '@storybook/sveltekit') {
// this uses @storybook/sveltekit, so everything is fine ✅
return plugins;
}
const hasSvelteKitPlugins =
hasPlugin(plugins, 'vite-plugin-svelte-kit') ||
hasPlugin(plugins, 'vite-plugin-sveltekit-build') ||
hasPlugin(plugins, 'vite-plugin-sveltekit-middleware');

// this is a SvelteKit project but doesn't use @storybook/sveltekit, warn user about this and remove vite-plugin-svelte-kit ❌
deprecate(
'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/sveltekit instead.'
);
return withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
if (hasSvelteKitPlugins && framework !== '@storybook/sveltekit') {
logger.error(
dedent`
We've detected a SvelteKit project using the @storybook/svelte-vite framework, which is not supported in Storybook 7.0
Please use the @storybook/sveltekit framework instead.
You can migrate automatically by running

npx sb@next automigrate sveltekitFramework

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework
`
);
throw new Error();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ends up as an unhandled promise rejection, but I'm unsure how to do that better while still stopping the process. I think this is okay for now.

image

}
}
8 changes: 7 additions & 1 deletion code/frameworks/sveltekit/src/preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@ 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 = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
plugins = withoutVitePlugins(plugins, [
// pre @sveltejs/kit@1.0.0-next.574
'vite-plugin-svelte-kit',
// @sveltejs/kit@1.0.0-next.574 and later
'vite-plugin-sveltekit-build',
'vite-plugin-sveltekit-middleware',
]);

return { ...baseConfig, plugins };
};
4 changes: 2 additions & 2 deletions code/lib/cli/src/repro-templates.ts
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export const allTemplates: Record<string, Template> = {
inDevelopment: true,
name: 'Svelte Kit (JS)',
script:
'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest',
expected: {
framework: '@storybook/sveltekit',
renderer: '@storybook/svelte',
Expand All @@ -249,7 +249,7 @@ export const allTemplates: Record<string, Template> = {
inDevelopment: true,
name: 'Svelte Kit (TS)',
script:
'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright',
'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest',
expected: {
framework: '@storybook/sveltekit',
renderer: '@storybook/svelte',
Expand Down
1 change: 1 addition & 0 deletions code/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7439,6 +7439,7 @@ __metadata:
magic-string: ^0.26.1
svelte: ^3.0.0
sveltedoc-parser: ^4.2.1
ts-dedent: ^2.2.0
typescript: ~4.9.3
vite: ^4.0.0-beta.2
peerDependencies:
Expand Down