Merge pull request #29323 from storybookjs/shilman/install-svelte5-csf

CLI: Install Svelte CSF v5 in Svelte5 projects
storybookjs · Oct 11, 2024 · 0eb384b · 0eb384b
2 parents e530835 + c5e384e
commit 0eb384b
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 2 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
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+
+import type { 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'],
+    ['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}` }),
+    } as any as JsPackageManager;
+    await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toBe(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.toBe(expectedAddonSpecifier);
+  });
+});
diff --git a/code/lib/create-storybook/src/generators/SVELTE/index.ts b/code/lib/create-storybook/src/generators/SVELTE/index.ts
@@ -1,10 +1,48 @@
+import type { JsPackageManager } from 'storybook/internal/common';
+
+import { coerce, major } from 'semver';
+
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
+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');
+  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) {
+        return versionHelper(major(coerced.version));
+      }
+    }
+  } 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'],
+    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
@@ -1,17 +1,22 @@
 import { CoreBuilder } from 'storybook/internal/cli';
 
+import { getAddonSvelteCsfVersion } from '../SVELTE';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
+  const addonSvelteCsfVersion = await getAddonSvelteCsfVersion(packageManager);
+
   await baseGenerator(
     packageManager,
     npmOptions,
     { ...options, builder: CoreBuilder.Vite },
     'svelte',
     {
       extensions: ['js', 'ts', 'svelte'],
-      extraAddons: ['@storybook/addon-svelte-csf'],
+      extraAddons: [
+        `@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`,
+      ],
     },
     'sveltekit'
   );