From e189008afc820fd4419407695386e314f091cb5c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 10 Oct 2024 23:46:57 +0800 Subject: [PATCH 1/2] CLI: Install Svelte CSF v5 in Svelte5 projects --- .../src/generators/SVELTE/index.test.ts | 42 +++++++++++++++++++ .../src/generators/SVELTE/index.ts | 31 +++++++++++++- .../src/generators/SVELTEKIT/index.ts | 5 ++- 3 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 code/lib/create-storybook/src/generators/SVELTE/index.test.ts diff --git a/code/lib/create-storybook/src/generators/SVELTE/index.test.ts b/code/lib/create-storybook/src/generators/SVELTE/index.test.ts new file mode 100644 index 000000000000..09de63358322 --- /dev/null +++ b/code/lib/create-storybook/src/generators/SVELTE/index.test.ts @@ -0,0 +1,42 @@ +import { describe, it, expect } from 'vitest'; + +import { JsPackageManager } from '@storybook/core/common'; +import { getAddonSvelteCsfVersion } from './index'; + +describe('installed', () => { + it.each([ + ['3.0.0', ''], + ['4.0.0', '4'], + ['5.0.0', '^5.0.0-next.0'], + ['6.0.0', ''], + ['3.0.0-next.0', ''], + ['4.0.0-next.0', '4'], + ['5.0.0-next.0', '^5.0.0-next.0'], + ['6.0.0-next.0', ''] + ])('svelte %s => %s', async (svelteVersion, expectedAddonSpecifier) => { + const packageManager = { + getInstalledVersion: async (pkg: string) => pkg === 'svelte' ? svelteVersion : undefined, + getAllDependencies: async () => ({ svelte: `^${svelteVersion}` }) + } as any as JsPackageManager; + await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toEqual(expectedAddonSpecifier); + }); +}); + +describe('uninstalled', () => { + it.each([ + ['^3', ''], + ['^4', '4'], + ['^5', '^5.0.0-next.0'], + ['^6', ''], + ['^3.0.0-next.0', ''], + ['^4.0.0-next.0', '4'], + ['^5.0.0-next.0', '^5.0.0-next.0'], + ['^6.0.0-next.0', ''] + ])('svelte %s => %s', async (svelteSpecifier, expectedAddonSpecifier) => { + const packageManager = { + getInstalledVersion: async (pkg: string) => undefined, + getAllDependencies: async () => ({ svelte: svelteSpecifier }) + } as any as JsPackageManager; + await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toEqual(expectedAddonSpecifier); + }); +}); diff --git a/code/lib/create-storybook/src/generators/SVELTE/index.ts b/code/lib/create-storybook/src/generators/SVELTE/index.ts index d3b4a89a7351..93c462f15b6e 100644 --- a/code/lib/create-storybook/src/generators/SVELTE/index.ts +++ b/code/lib/create-storybook/src/generators/SVELTE/index.ts @@ -1,10 +1,39 @@ +import { coerce, major } from 'semver' + import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; +import { JsPackageManager } from '@storybook/core/common'; + +const versionHelper = (svelteMajor?: number) => { + if(svelteMajor === 4) return '4'; + // TODO: update when addon-svelte-csf v5 is released + if(svelteMajor === 5) return '^5.0.0-next.0'; + return ''; +} + +export const getAddonSvelteCsfVersion = async (packageManager: JsPackageManager) => { + const svelteVersion = await packageManager.getInstalledVersion('svelte'); + if(svelteVersion) { + return versionHelper(major(svelteVersion)); + } else { + const deps = await packageManager.getAllDependencies(); + const svelteSpecifier = deps['svelte']; + try { + const coerced = coerce(svelteSpecifier); + if(coerced?.version) { + return versionHelper(major(coerced.version)); + } + } catch {} + } + return ''; +} const generator: Generator = async (packageManager, npmOptions, options) => { + const addonSvelteCsfVersion = await getAddonSvelteCsfVersion(packageManager); + await baseGenerator(packageManager, npmOptions, options, 'svelte', { extensions: ['js', 'ts', 'svelte'], - extraAddons: ['@storybook/addon-svelte-csf'], + extraAddons: [`@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`], }); }; diff --git a/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts b/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts index 4a891b9a68bf..b190b56db282 100644 --- a/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts +++ b/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts @@ -2,8 +2,11 @@ import { CoreBuilder } from 'storybook/internal/cli'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; +import { getAddonSvelteCsfVersion } from '../SVELTE'; const generator: Generator = async (packageManager, npmOptions, options) => { + const addonSvelteCsfVersion = await getAddonSvelteCsfVersion(packageManager); + await baseGenerator( packageManager, npmOptions, @@ -11,7 +14,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'svelte', { extensions: ['js', 'ts', 'svelte'], - extraAddons: ['@storybook/addon-svelte-csf'], + extraAddons: [`@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`], }, 'sveltekit' ); From c5e384ee5c4664d8f1f011f18eff8d1ec0b17995 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 11 Oct 2024 10:20:18 +0800 Subject: [PATCH 2/2] Fix linting and CI errors --- .../src/generators/SVELTE/index.test.ts | 22 ++++++----- .../src/generators/SVELTE/index.ts | 39 ++++++++++++------- .../src/generators/SVELTEKIT/index.ts | 6 ++- 3 files changed, 40 insertions(+), 27 deletions(-) diff --git a/code/lib/create-storybook/src/generators/SVELTE/index.test.ts b/code/lib/create-storybook/src/generators/SVELTE/index.test.ts index 09de63358322..0fb124025879 100644 --- a/code/lib/create-storybook/src/generators/SVELTE/index.test.ts +++ b/code/lib/create-storybook/src/generators/SVELTE/index.test.ts @@ -1,6 +1,7 @@ -import { describe, it, expect } from 'vitest'; +import { describe, expect, it } from 'vitest'; + +import type { JsPackageManager } from '@storybook/core/common'; -import { JsPackageManager } from '@storybook/core/common'; import { getAddonSvelteCsfVersion } from './index'; describe('installed', () => { @@ -11,14 +12,15 @@ describe('installed', () => { ['6.0.0', ''], ['3.0.0-next.0', ''], ['4.0.0-next.0', '4'], - ['5.0.0-next.0', '^5.0.0-next.0'], - ['6.0.0-next.0', ''] + ['4.2.19::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-4.2.19.tgz', '4'], + ['5.0.0-next.0', '^5.0.0-next.0'], + ['6.0.0-next.0', ''], ])('svelte %s => %s', async (svelteVersion, expectedAddonSpecifier) => { const packageManager = { - getInstalledVersion: async (pkg: string) => pkg === 'svelte' ? svelteVersion : undefined, - getAllDependencies: async () => ({ svelte: `^${svelteVersion}` }) + getInstalledVersion: async (pkg: string) => (pkg === 'svelte' ? svelteVersion : undefined), + getAllDependencies: async () => ({ svelte: `^${svelteVersion}` }), } as any as JsPackageManager; - await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toEqual(expectedAddonSpecifier); + await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toBe(expectedAddonSpecifier); }); }); @@ -31,12 +33,12 @@ describe('uninstalled', () => { ['^3.0.0-next.0', ''], ['^4.0.0-next.0', '4'], ['^5.0.0-next.0', '^5.0.0-next.0'], - ['^6.0.0-next.0', ''] + ['^6.0.0-next.0', ''], ])('svelte %s => %s', async (svelteSpecifier, expectedAddonSpecifier) => { const packageManager = { getInstalledVersion: async (pkg: string) => undefined, - getAllDependencies: async () => ({ svelte: svelteSpecifier }) + getAllDependencies: async () => ({ svelte: svelteSpecifier }), } as any as JsPackageManager; - await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toEqual(expectedAddonSpecifier); + await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toBe(expectedAddonSpecifier); }); }); diff --git a/code/lib/create-storybook/src/generators/SVELTE/index.ts b/code/lib/create-storybook/src/generators/SVELTE/index.ts index 93c462f15b6e..21661f5b02b9 100644 --- a/code/lib/create-storybook/src/generators/SVELTE/index.ts +++ b/code/lib/create-storybook/src/generators/SVELTE/index.ts @@ -1,39 +1,48 @@ -import { coerce, major } from 'semver' +import type { JsPackageManager } from 'storybook/internal/common'; + +import { coerce, major } from 'semver'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; -import { JsPackageManager } from '@storybook/core/common'; const versionHelper = (svelteMajor?: number) => { - if(svelteMajor === 4) return '4'; + if (svelteMajor === 4) { + return '4'; + } // TODO: update when addon-svelte-csf v5 is released - if(svelteMajor === 5) return '^5.0.0-next.0'; + if (svelteMajor === 5) { + return '^5.0.0-next.0'; + } return ''; -} +}; export const getAddonSvelteCsfVersion = async (packageManager: JsPackageManager) => { const svelteVersion = await packageManager.getInstalledVersion('svelte'); - if(svelteVersion) { - return versionHelper(major(svelteVersion)); - } else { - const deps = await packageManager.getAllDependencies(); - const svelteSpecifier = deps['svelte']; - try { + try { + if (svelteVersion) { + return versionHelper(major(coerce(svelteVersion) || '')); + } else { + const deps = await packageManager.getAllDependencies(); + const svelteSpecifier = deps['svelte']; const coerced = coerce(svelteSpecifier); - if(coerced?.version) { + if (coerced?.version) { return versionHelper(major(coerced.version)); } - } catch {} + } + } catch { + // fallback to latest version } return ''; -} +}; const generator: Generator = async (packageManager, npmOptions, options) => { const addonSvelteCsfVersion = await getAddonSvelteCsfVersion(packageManager); await baseGenerator(packageManager, npmOptions, options, 'svelte', { extensions: ['js', 'ts', 'svelte'], - extraAddons: [`@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`], + extraAddons: [ + `@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`, + ], }); }; diff --git a/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts b/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts index b190b56db282..1a17c0ac5b67 100644 --- a/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts +++ b/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts @@ -1,8 +1,8 @@ import { CoreBuilder } from 'storybook/internal/cli'; +import { getAddonSvelteCsfVersion } from '../SVELTE'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; -import { getAddonSvelteCsfVersion } from '../SVELTE'; const generator: Generator = async (packageManager, npmOptions, options) => { const addonSvelteCsfVersion = await getAddonSvelteCsfVersion(packageManager); @@ -14,7 +14,9 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'svelte', { extensions: ['js', 'ts', 'svelte'], - extraAddons: [`@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`], + extraAddons: [ + `@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`, + ], }, 'sveltekit' );