Merge pull request #29391 from storybookjs/version-patch-from-8.3.5

Release: Patch 8.3.6

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.3.6
+
+- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!
+- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
+
 ## 8.3.5
 
 - CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!

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

@@ -76,6 +76,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 chalk from 'chalk';
 import { findUpSync } from 'find-up';
 import { copy, copySync, pathExists, readFile, writeFile } from 'fs-extra';
-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/core/src/common/js-package-manager/JsPackageManager.ts

@@ -60,7 +60,7 @@ export abstract class JsPackageManager {
   /** Get the INSTALLED version of a package from the package.json file */
   async getPackageVersion(packageName: string, basePath = this.cwd): Promise<string | null> {
     const packageJSON = await this.getPackageJSON(packageName, basePath);
-    return packageJSON ? packageJSON.version ?? null : null;
+    return packageJSON ? (packageJSON.version ?? null) : null;
   }
 
   constructor(options?: JsPackageManagerOptions) {

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -126,7 +126,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     composeConfigs([
       defaultConfig && Object.keys(defaultConfig).length > 0
         ? defaultConfig
-        : globalThis.defaultProjectAnnotations ?? {},
+        : (globalThis.defaultProjectAnnotations ?? {}),
       globalThis.globalProjectAnnotations ?? {},
       projectAnnotations ?? {},
     ])

code/e2e-tests/util.ts

@@ -49,7 +49,7 @@ export class SbPage {
 
     await this.page.waitForURL((url) =>
       url.search.includes(
-        `path=/${viewMode ?? name === 'docs' ? 'docs' : 'story'}/${titleId}--${storyId}`
+        `path=/${(viewMode ?? name === 'docs') ? 'docs' : 'story'}/${titleId}--${storyId}`
       )
     );
 

code/frameworks/angular/src/server/angular-cli-webpack.js

@@ -68,7 +68,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
       outputPath:
         typeof builderOptions.outputPath === 'string'
           ? builderOptions.outputPath
-          : builderOptions.outputPath?.base ?? 'noop-out',
+          : (builderOptions.outputPath?.base ?? 'noop-out'),
 
       // Fixed options
       optimization: false,

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/frameworks/vue3-vite/src/preset.ts

@@ -22,7 +22,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
 
   const framework = await options.presets.apply('framework');
   const frameworkOptions: FrameworkOptions =
-    typeof framework === 'string' ? {} : framework.options ?? {};
+    typeof framework === 'string' ? {} : (framework.options ?? {});
 
   const docgen = resolveDocgenOptions(frameworkOptions.docgen);
 

code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts

@@ -94,7 +94,9 @@ export const getBuilderPackageName = (mainConfig?: StorybookConfigRaw) => {
 export const getFrameworkOptions = (
   mainConfig?: StorybookConfigRaw
 ): Record<string, any> | null => {
-  return typeof mainConfig?.framework === 'string' ? null : mainConfig?.framework?.options ?? null;
+  return typeof mainConfig?.framework === 'string'
+    ? null
+    : (mainConfig?.framework?.options ?? null);
 };
 
 /**

code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts

@@ -77,14 +77,14 @@ export const detectBuilderInfo = async ({
   const builderPackageName = getBuilderPackageName(mainConfig);
   const frameworkPackageName = getFrameworkPackageName(mainConfig) as string;
 
-  let builderOptions = typeof builder !== 'string' ? builder?.options ?? {} : {};
+  let builderOptions = typeof builder !== 'string' ? (builder?.options ?? {}) : {};
 
   if (builderPackageName) {
     builderOrFrameworkName = builderPackageName;
   } else if (framework) {
     if (Object.keys(frameworkPackages).includes(frameworkPackageName)) {
       builderOrFrameworkName = frameworkPackageName;
-      builderOptions = typeof framework === 'object' ? framework.options?.builder ?? {} : {};
+      builderOptions = typeof framework === 'object' ? (framework.options?.builder ?? {}) : {};
     }
   }
 

code/lib/cli-storybook/src/automigrate/index.ts

@@ -274,7 +274,7 @@ export async function runFixes({
 
     if (result) {
       const promptType: Prompt =
-        typeof f.promptType === 'function' ? await f.promptType(result) : f.promptType ?? 'auto';
+        typeof f.promptType === 'function' ? await f.promptType(result) : (f.promptType ?? 'auto');
 
       logger.info(`\n🔎 found a '${chalk.cyan(f.id)}' migration:`);
       const message = f.prompt(result);

code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts

@@ -7,7 +7,7 @@ import { dedent } from 'ts-dedent';
 import jscodeshift, { nameToValidExport } from '../mdx-to-csf';
 
 expect.addSnapshotSerializer({
-  print: (val: any) => (typeof val === 'string' ? val : JSON.stringify(val, null, 2) ?? ''),
+  print: (val: any) => (typeof val === 'string' ? val : (JSON.stringify(val, null, 2) ?? '')),
   test: () => true,
 });
 

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);
+  });
+});