Release: Prerelease 8.4.0-alpha.8

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!

CHANGELOG.prerelease.md

@@ -1,3 +1,14 @@
+## 8.4.0-alpha.8
+
+- Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw!
+- ConfigFile: Fix `export { X }` parsing - [#29344](https://github.com/storybookjs/storybook/pull/29344), thanks @vctqs1!
+- Core: Fix building Storybook deleting project root files - [#29371](https://github.com/storybookjs/storybook/pull/29371), thanks @JReinhold!
+- Interactions: Escape xml of interactions errors - [#29414](https://github.com/storybookjs/storybook/pull/29414), thanks @kasperpeulen!
+- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
+- Test: Remove unused `util` dependency - [#29310](https://github.com/storybookjs/storybook/pull/29310), thanks @JReinhold!
+- UI: Fix RefIndicator to use CheckIcon instead of string - [#29209](https://github.com/storybookjs/storybook/pull/29209), thanks @JSMike!
+- UI: Simple tag filtering - [#29333](https://github.com/storybookjs/storybook/pull/29333), thanks @shilman!
+
 ## 8.4.0-alpha.7
 
 - CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!

code/addons/actions/ADVANCED.md

@@ -1,6 +1,6 @@
 ## Advanced/Legacy Actions usage
 
-For basic usage, see the [documentation](https://storybook.js.org/docs/react/essentials/actions).
+For basic usage, see the [documentation](https://storybook.js.org/docs/essentials/actions).
 
 This document describes the pre-6.0 usage of the addon, and as such is no longer recommended (although it will be supported until at least 7.0).
 

code/addons/actions/README.md

@@ -24,4 +24,4 @@ export default {
 
 ## Usage
 
-The basic usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).
+The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).

code/addons/backgrounds/README.md

@@ -26,4 +26,4 @@ export default {
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/backgrounds).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/backgrounds).

code/addons/controls/README.md

@@ -24,7 +24,7 @@ export default {
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/controls).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/controls).
 
 ## FAQs
 
@@ -92,7 +92,7 @@ export const Reflow = () => {
 };
 ```
 
-And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args):
+And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/essentials/controls#fully-custom-args):
 
 ```jsx
 export const Reflow = ({ count, label, ...args }) => (
@@ -147,7 +147,7 @@ Basic.args = {
 };
 ```
 
-The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/react/essentials/controls#annotation) for a full list of control types.
+The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/essentials/controls#annotation) for a full list of control types.
 
 It's also possible that your Storybook is misconfigured. If you think this might be the case, please search through Storybook's [Github issues](https://github.com/storybookjs/storybook/issues), and file a new issue if you don't find one that matches your use case.
 

code/addons/docs/docs/props-tables.md

@@ -82,7 +82,7 @@ export const WithControls = (args) => <MyComponent {...args} />;
 <ArgsTable story="Controls" />
 ```
 
-For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/react/essentials/controls).
+For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/essentials/controls).
 
 ## Customization
 
@@ -187,7 +187,7 @@ This would render a row with a modified description, a type display with a dropd
 > - `type: 'number'` is shorthand for `type: { name: 'number' }`
 > - `control: 'radio'` is shorthand for `control: { type: 'radio' }`
 
-Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/react/essentials/controls#configuration).
+Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/essentials/controls#configuration).
 
 Here are the possible customizations for the rest of the prop table:
 
@@ -200,7 +200,7 @@ Here are the possible customizations for the rest of the prop table:
 | `table.type.detail`          | A longer version of the type (if it's a complex type)                                                |
 | `table.defaultValue.summary` | A short version of the default value                                                                 |
 | `table.defaultValue.detail`  | A longer version of the default value (if it's a complex value)                                      |
-| `control`                    | See [`addon-controls` README](https://storybook.js.org/docs/react/essentials/controls#configuration) |
+| `control`                    | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) |
 
 ## Reporting a bug
 

code/addons/interactions/src/utils.ts

@@ -30,6 +30,7 @@ export function createAnsiToHtmlFilter(theme: StorybookTheme) {
   return new Filter({
     fg: theme.color.defaultText,
     bg: theme.background.content,
+    escapeXML: true,
   });
 }
 

code/addons/test/src/vitest-plugin/viewports.ts

@@ -1,8 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import { UnsupportedViewportDimensionError } from 'storybook/internal/preview-errors';
 
-import { page } from '@vitest/browser/context';
-
 import { MINIMAL_VIEWPORTS } from '../../../viewport/src/defaults';
 import type { ViewportMap, ViewportStyles } from '../../../viewport/src/types';
 
@@ -50,6 +48,10 @@ const parseDimension = (value: string, dimension: 'width' | 'height') => {
 export const setViewport = async (viewportsParam: ViewportsParam = {} as ViewportsParam) => {
   const defaultViewport = viewportsParam.defaultViewport;
 
+  const { page } = await import('@vitest/browser/context').catch(() => ({
+    page: null,
+  }));
+
   if (!page || !globalThis.__vitest_browser__) {
     return;
   }

code/addons/toolbars/README.md

@@ -28,7 +28,7 @@ export default {
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/toolbars-and-globals).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/toolbars-and-globals).
 
 ## FAQs
 
@@ -40,6 +40,6 @@ The primary difference between the two packages is that `addon-toolbars` makes u
 
 - **Standardization**. Args are built into Storybook in 6.x. Since `addon-toolbars` is based on args, you don't need to learn any addon-specific APIs to use it.
 
-- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons.
+- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons.
 
 * **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue 3, Angular, etc. out of the box with no framework logic needed in the addon.

code/addons/viewport/README.md

@@ -26,4 +26,4 @@ You should now be able to see the viewport addon icon in the toolbar at the top
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/viewport).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/viewport).

code/core/package.json

@@ -340,7 +340,6 @@
     "boxen": "^7.1.1",
     "browser-dtector": "^3.4.0",
     "camelcase": "^8.0.0",
-    "chai": "^4.4.1",
     "cli-table3": "^0.6.1",
     "commander": "^12.1.0",
     "comment-parser": "^1.4.1",

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/core/src/core-server/build-static.ts

@@ -47,22 +47,8 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
   if (options.outputDir === '/') {
     throw new Error("Won't remove directory '/'. Check your outputDir!");
   }
-
-  try {
-    const outputDirFiles = await readdir(options.outputDir);
-    for (const file of outputDirFiles) {
-      await rm(file, { recursive: true, force: true });
-    }
-  } catch {
-    await mkdir(options.outputDir, { recursive: true });
-  }
-
-  if (!existsSync(options.outputDir)) {
-    await mkdir(options.outputDir, { recursive: true });
-  } else if ((await readdir(options.outputDir)).length > 0) {
-    await rm(options.outputDir, { recursive: true, force: true });
-    await mkdir(options.outputDir, { recursive: true });
-  }
+  await rm(options.outputDir, { recursive: true, force: true }).catch(() => {});
+  await mkdir(options.outputDir, { recursive: true });
 
   const config = await loadMainConfig(options);
   const { framework } = config;