Merge pull request storybookjs#29382 from storybookjs/svelte-5-stories

Svelte: Add v5 stories to CLI templates

code/core/src/cli/helpers.test.ts

@@ -75,6 +75,47 @@ describe('Helpers', () => {
     vi.clearAllMocks();
   });
 
+  describe('getVersionSafe', () => {
+    describe('installed', () => {
+      it.each([
+        ['3.0.0', '3.0.0'],
+        ['5.0.0-next.0', '5.0.0-next.0'],
+        [
+          '4.2.19::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-4.2.19.tgz',
+          '4.2.19',
+        ],
+      ])('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(helpers.getVersionSafe(packageManager, 'svelte')).resolves.toBe(
+          expectedAddonSpecifier
+        );
+      });
+    });
+
+    describe('uninstalled', () => {
+      it.each([
+        ['^3', '3.0.0'],
+        ['^5.0.0-next.0', '5.0.0-next.0'],
+        [
+          '4.2.19::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-4.2.19.tgz',
+          '4.2.19',
+        ],
+      ])('svelte %s => %s', async (svelteSpecifier, expectedAddonSpecifier) => {
+        const packageManager = {
+          getInstalledVersion: async (pkg: string) => undefined,
+          getAllDependencies: async () => ({ svelte: svelteSpecifier }),
+        } as any as JsPackageManager;
+        await expect(helpers.getVersionSafe(packageManager, 'svelte')).resolves.toBe(
+          expectedAddonSpecifier
+        );
+      });
+    });
+  });
+
   describe('copyTemplate', () => {
     it(`should copy template files when directory is present`, () => {
       const csfDirectory = /template-csf\/$/;

code/core/src/cli/helpers.ts

@@ -13,7 +13,7 @@ import type { SupportedFrameworks, SupportedRenderers } from '@storybook/core/ty
 
 import { findUpSync } from 'find-up';
 import picocolors from 'picocolors';
-import { coerce, satisfies } from 'semver';
+import { coerce, major, satisfies } from 'semver';
 import stripJsonComments from 'strip-json-comments';
 import invariant from 'tiny-invariant';
 
@@ -173,20 +173,53 @@ export const frameworkToDefaultBuilder: Record<
   'vue3-rsbuild': CommunityBuilder.Rsbuild,
 };
 
+/**
+ * Return the installed version of a package, or the coerced version specifier from package.json if
+ * it's a dependency but not installed (e.g. in a fresh project)
+ */
+export async function getVersionSafe(packageManager: JsPackageManager, packageName: string) {
+  try {
+    let version = await packageManager.getInstalledVersion(packageName);
+    if (!version) {
+      const deps = await packageManager.getAllDependencies();
+      const versionSpecifier = deps[packageName];
+      version = versionSpecifier ?? '';
+    }
+    const coerced = coerce(version, { includePrerelease: true });
+    return coerced?.toString();
+  } catch (err) {
+    // fall back to no version
+  }
+  return undefined;
+}
+
 export async function copyTemplateFiles({
   packageManager,
   renderer,
   language,
   destination,
   commonAssetsDir,
 }: CopyTemplateFilesOptions) {
-  const languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
+  let languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
     // keeping this for backwards compatibility in case community packages are using it
     typescript: 'ts',
     [SupportedLanguage.JAVASCRIPT]: 'js',
     [SupportedLanguage.TYPESCRIPT_3_8]: 'ts-3-8',
     [SupportedLanguage.TYPESCRIPT_4_9]: 'ts-4-9',
   };
+  // FIXME: remove after 9.0
+  if (renderer === 'svelte') {
+    const svelteVersion = await getVersionSafe(packageManager, 'svelte');
+    if (svelteVersion && major(svelteVersion) >= 5) {
+      languageFolderMapping = {
+        // keeping this for backwards compatibility in case community packages are using it
+        typescript: 'ts',
+        [SupportedLanguage.JAVASCRIPT]: 'svelte-5-js',
+        [SupportedLanguage.TYPESCRIPT_3_8]: 'svelte-5-ts-3-8',
+        [SupportedLanguage.TYPESCRIPT_4_9]: 'svelte-5-ts-4-9',
+      };
+    }
+  }
   const templatePath = async () => {
     const baseDir = await getRendererDir(packageManager, renderer);
     const assetsDir = join(baseDir, 'template', 'cli');

code/frameworks/svelte-vite/package.json

@@ -57,7 +57,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/node": "^22.0.0",
-    "svelte": "^5.0.0-next.65",
+    "svelte": "^5.0.0-next.268",
     "typescript": "^5.3.2",
     "vite": "^4.0.0"
   },

code/lib/blocks/src/blocks/Canvas.stories.tsx

@@ -93,10 +93,7 @@ export const PropAdditionalActions: Story = {
       {
         title: 'Go to documentation',
         onClick: () => {
-          window.open(
-            'https://storybook.js.org/docs/essentials/controls#annotation',
-            '_blank'
-          );
+          window.open('https://storybook.js.org/docs/essentials/controls#annotation', '_blank');
         },
       },
     ],

code/lib/blocks/src/components/ArgsTable/ArgControl.tsx

@@ -71,11 +71,7 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovere
   if (!control || control.disable) {
     const canBeSetup = control?.disable !== true && row?.type?.name !== 'function';
     return isHovered && canBeSetup ? (
-      <Link
-        href="https://storybook.js.org/docs/essentials/controls"
-        target="_blank"
-        withArrow
-      >
+      <Link href="https://storybook.js.org/docs/essentials/controls" target="_blank" withArrow>
         Setup controls
       </Link>
     ) : (

code/lib/blocks/src/examples/CanvasParameters.stories.tsx

@@ -30,10 +30,7 @@ export const AdditionalActions: Story = {
           {
             title: 'Go to documentation',
             onClick: () => {
-              window.open(
-                'https://storybook.js.org/docs/essentials/controls#annotation',
-                '_blank'
-              );
+              window.open('https://storybook.js.org/docs/essentials/controls#annotation', '_blank');
             },
           },
         ],

code/lib/create-storybook/src/generators/SVELTE/index.ts

@@ -1,33 +1,21 @@
+import { getVersionSafe } from 'storybook/internal/cli';
 import type { JsPackageManager } from 'storybook/internal/common';
 
-import { coerce, major } from 'semver';
+import { 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');
+  const svelteVersion = await getVersionSafe(packageManager, '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));
-      }
+    const svelteMajor = major(svelteVersion ?? '');
+    if (svelteMajor === 4) {
+      return '4';
+    }
+    // TODO: update when addon-svelte-csf v5 is released
+    if (svelteMajor === 5) {
+      return '^5.0.0-next.0';
     }
   } catch {
     // fallback to latest version

code/package.json

@@ -215,7 +215,7 @@
     "serve-static": "^1.14.1",
     "slash": "^5.0.0",
     "storybook": "workspace:^",
-    "svelte": "^5.0.0-next.65",
+    "svelte": "^5.0.0-next.268",
     "ts-dedent": "^2.0.0",
     "typescript": "^5.4.3",
     "util": "^0.12.4",

code/renderers/svelte/package.json

@@ -66,10 +66,10 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch",
+    "@testing-library/svelte": "^5.2.3",
     "expect-type": "^0.15.0",
-    "svelte": "^5.0.0-next.65",
-    "svelte-check": "^3.6.4",
+    "svelte": "^5.0.0-next.268",
+    "svelte-check": "^4.0.5",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

code/renderers/svelte/src/__test__/composeStories/Button.stories.ts

@@ -53,7 +53,11 @@ const getCaptionForLocale = (locale: string) => {
   }
 };
 
-export const CSF2StoryWithLocale: CSF2Story<StoryWithLocaleComponent> = (args, { globals }) => ({
+// @ts-expect-error -- incompatibility with Svelte 5 types and CSF
+export const CSF2StoryWithLocale: CSF2Story<typeof StoryWithLocaleComponent> = (
+  args,
+  { globals }
+) => ({
   Component: StoryWithLocaleComponent,
   props: {
     ...args,
@@ -113,10 +117,11 @@ export const CSF3ButtonWithRender: StoryObj<CustomRenderComponent> = {
   }),
 };
 
-export const CSF3InputFieldFilled: StoryObj<InputFilledStoryComponent> = {
-  render: () => ({
-    Component: InputFilledStoryComponent,
-  }),
+export const CSF3InputFieldFilled: StoryObj<typeof InputFilledStoryComponent> = {
+  render: () =>
+    ({
+      Component: InputFilledStoryComponent,
+    }) as any,
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     await step('Step label', async () => {
@@ -128,10 +133,10 @@ export const CSF3InputFieldFilled: StoryObj<InputFilledStoryComponent> = {
 };
 
 const mockFn = fn();
-export const LoaderStory: StoryObj<LoaderStoryComponent> = {
+export const LoaderStory: StoryObj<typeof LoaderStoryComponent> = {
   args: {
     mockFn,
-  },
+  } as any,
   loaders: [
     async () => {
       mockFn.mockReturnValueOnce('mockFn return value');
@@ -140,13 +145,14 @@ export const LoaderStory: StoryObj<LoaderStoryComponent> = {
       };
     },
   ],
-  render: (args, { loaded }) => ({
-    Component: LoaderStoryComponent,
-    props: {
-      ...args,
-      loaded,
-    },
-  }),
+  render: (args, { loaded }) =>
+    ({
+      Component: LoaderStoryComponent,
+      props: {
+        ...args,
+        loaded,
+      },
+    }) as any,
   play: async () => {
     expect(mockFn).toHaveBeenCalledWith('render');
   },