Release: Patch 8.4.6

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 8.4.6
+
+- Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf!
+- Angular: Default to standalone components in Angular v19 - [#29677](https://github.com/storybookjs/storybook/pull/29677), thanks @ingowagner!
+- Frameworks: Add Vite 6 support - [#29710](https://github.com/storybookjs/storybook/pull/29710), thanks @yannbf!
+- Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf!
+- React: Upgrade react-docgen-typescript to support Vite 6 - [#29724](https://github.com/storybookjs/storybook/pull/29724), thanks @yannbf!
+- Svelte: Support `@sveltejs/vite-plugin-svelte` v5 - [#29731](https://github.com/storybookjs/storybook/pull/29731), thanks @JReinhold!
+
 ## 8.4.5
 
 - Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez!

code/addons/test/package.json

@@ -98,6 +98,7 @@
     "execa": "^8.0.1",
     "find-up": "^7.0.0",
     "formik": "^2.2.9",
+    "pathe": "^1.1.2",
     "picocolors": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

code/addons/test/src/node/boot-test-runner.ts

@@ -1,5 +1,4 @@
 import { type ChildProcess } from 'node:child_process';
-import { join } from 'node:path';
 
 import type { Channel } from 'storybook/internal/channels';
 import {
@@ -13,6 +12,7 @@ import {
 
 // eslint-disable-next-line depend/ban-dependencies
 import { execaNode } from 'execa';
+import { join } from 'pathe';
 
 import { TEST_PROVIDER_ID } from '../constants';
 import { log } from '../logger';

code/addons/test/src/node/test-manager.test.ts

@@ -3,7 +3,7 @@ import { createVitest } from 'vitest/node';
 
 import { Channel, type ChannelTransport } from '@storybook/core/channels';
 
-import path from 'path';
+import path from 'pathe';
 
 import { TEST_PROVIDER_ID } from '../constants';
 import { TestManager } from './test-manager';

code/addons/test/src/node/vitest-manager.ts

@@ -1,11 +1,11 @@
 import { existsSync } from 'node:fs';
-import path, { normalize } from 'node:path';
 
 import type { TestProject, TestSpecification, Vitest, WorkspaceProject } from 'vitest/node';
 
 import type { Channel } from 'storybook/internal/channels';
 import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-events';
 
+import path, { normalize } from 'pathe';
 import slash from 'slash';
 
 import { log } from '../logger';

code/addons/test/src/postinstall.ts

@@ -1,8 +1,6 @@
 import { existsSync } from 'node:fs';
 import * as fs from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
-import { dirname, join, relative } from 'node:path';
-import * as path from 'node:path';
 
 import {
   JsPackageManagerFactory,
@@ -16,6 +14,7 @@ import { colors, logger } from 'storybook/internal/node-logger';
 // eslint-disable-next-line depend/ban-dependencies
 import { execa } from 'execa';
 import { findUp } from 'find-up';
+import { dirname, extname, join, relative, resolve } from 'pathe';
 import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { coerce, satisfies } from 'semver';
@@ -27,7 +26,8 @@ import { printError, printInfo, printSuccess, step } from './postinstall-logger'
 const ADDON_NAME = '@storybook/experimental-addon-test' as const;
 const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx', '.cts', '.mts', '.cjs', '.mjs'] as const;
 
-const findFile = async (basename: string) => findUp(EXTENSIONS.map((ext) => basename + ext));
+const findFile = async (basename: string, extraExtensions: string[] = []) =>
+  findUp([...EXTENSIONS, ...extraExtensions].map((ext) => basename + ext));
 
 export default async function postInstall(options: PostinstallOptions) {
   printSuccess(
@@ -244,7 +244,10 @@ export default async function postInstall(options: PostinstallOptions) {
     args: ['playwright', 'install', 'chromium', '--with-deps'],
   });
 
-  const vitestSetupFile = path.resolve(options.configDir, 'vitest.setup.ts');
+  const fileExtension =
+    allDeps['typescript'] || (await findFile('tsconfig', ['.json'])) ? 'ts' : 'js';
+
+  const vitestSetupFile = resolve(options.configDir, `vitest.setup.${fileExtension}`);
   if (existsSync(vitestSetupFile)) {
     printError(
       '🚨 Oh no!',
@@ -264,9 +267,9 @@ export default async function postInstall(options: PostinstallOptions) {
   logger.plain(`${step} Creating a Vitest setup file for Storybook:`);
   logger.plain(colors.gray(`  ${vitestSetupFile}`));
 
-  const previewExists = EXTENSIONS.map((ext) =>
-    path.resolve(options.configDir, `preview${ext}`)
-  ).some((config) => existsSync(config));
+  const previewExists = EXTENSIONS.map((ext) => resolve(options.configDir, `preview${ext}`)).some(
+    (config) => existsSync(config)
+  );
 
   await writeFile(
     vitestSetupFile,
@@ -331,10 +334,10 @@ export default async function postInstall(options: PostinstallOptions) {
 
   if (rootConfig) {
     // If there's an existing config, we create a workspace file so we can run Storybook tests alongside.
-    const extname = path.extname(rootConfig);
-    const browserWorkspaceFile = path.resolve(dirname(rootConfig), `vitest.workspace${extname}`);
+    const extension = extname(rootConfig);
+    const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extension}`);
     // to be set in vitest config
-    const vitestSetupFilePath = path.relative(path.dirname(browserWorkspaceFile), vitestSetupFile);
+    const vitestSetupFilePath = relative(dirname(browserWorkspaceFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project workspace file:`);
@@ -373,9 +376,9 @@ export default async function postInstall(options: PostinstallOptions) {
     );
   } else {
     // If there's no existing Vitest/Vite config, we create a new Vitest config file.
-    const newVitestConfigFile = path.resolve('vitest.config.ts');
+    const newVitestConfigFile = resolve(`vitest.config.${fileExtension}`);
     // to be set in vitest config
-    const vitestSetupFilePath = path.relative(path.dirname(newVitestConfigFile), vitestSetupFile);
+    const vitestSetupFilePath = relative(dirname(newVitestConfigFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project config file:`);
@@ -491,14 +494,17 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta
   }
 
   const builderPackageJson = await fs.readFile(
-    `${typeof builder === 'string' ? builder : builder.name}/package.json`,
+    require.resolve(join(typeof builder === 'string' ? builder : builder.name, 'package.json')),
     'utf8'
   );
   const builderPackageName = JSON.parse(builderPackageJson).name;
 
   let rendererPackageName: string | undefined;
   if (renderer) {
-    const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8');
+    const rendererPackageJson = await fs.readFile(
+      require.resolve(join(renderer, 'package.json')),
+      'utf8'
+    );
     rendererPackageName = JSON.parse(rendererPackageJson).name;
   }
 

code/addons/test/src/preset.ts

@@ -1,5 +1,4 @@
 import { readFileSync } from 'node:fs';
-import { isAbsolute, join } from 'node:path';
 
 import type { Channel } from 'storybook/internal/channels';
 import { checkAddonOrder, getFrameworkName, serverRequire } from 'storybook/internal/common';
@@ -11,6 +10,7 @@ import {
 import { oneWayHash, telemetry } from 'storybook/internal/telemetry';
 import type { Options, PresetProperty, StoryId } from 'storybook/internal/types';
 
+import { isAbsolute, join } from 'pathe';
 import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 

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

@@ -1,6 +1,4 @@
 /* eslint-disable no-underscore-dangle */
-import { join, resolve } from 'node:path';
-
 import type { Plugin } from 'vitest/config';
 
 import {
@@ -12,6 +10,8 @@ import { readConfig, vitestTransform } from 'storybook/internal/csf-tools';
 import { MainFileMissingError } from 'storybook/internal/server-errors';
 import type { StoriesEntry } from 'storybook/internal/types';
 
+import { join, resolve } from 'pathe';
+
 import type { InternalOptions, UserOptions } from './types';
 
 const defaultOptions: UserOptions = {
@@ -105,9 +105,18 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         config.test.browser.screenshotFailures ??= false;
       }
 
+      // copying straight from https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts#L60
+      // to avoid having to maintain Vite as a dependency just for this
+      const viteDefaultClientConditions = ['module', 'browser', 'development|production'];
+
       config.resolve ??= {};
       config.resolve.conditions ??= [];
-      config.resolve.conditions.push('storybook', 'stories', 'test');
+      config.resolve.conditions.push(
+        'storybook',
+        'stories',
+        'test',
+        ...viteDefaultClientConditions
+      );
 
       config.test.setupFiles ??= [];
       if (typeof config.test.setupFiles === 'string') {

code/builders/builder-vite/package.json

@@ -61,7 +61,7 @@
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "publishConfig": {
     "access": "public"

code/builders/builder-vite/src/vite-config.test.ts

@@ -10,6 +10,7 @@ import { commonConfig } from './vite-config';
 vi.mock('vite', async (importOriginal) => ({
   ...(await importOriginal<typeof import('vite')>()),
   loadConfigFromFile: vi.fn(async () => ({})),
+  defaultClientConditions: undefined,
 }));
 const loadConfigFromFileMock = vi.mocked(loadConfigFromFile);
 

code/builders/builder-vite/src/vite-config.ts

@@ -47,7 +47,9 @@ export async function commonConfig(
   _type: PluginConfigType
 ): Promise<ViteInlineConfig> {
   const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
-  const { loadConfigFromFile, mergeConfig } = await import('vite');
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore this property only exists in Vite 6
+  const { loadConfigFromFile, mergeConfig, defaultClientConditions = [] } = await import('vite');
 
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
 
@@ -67,7 +69,7 @@ export async function commonConfig(
     base: './',
     plugins: await pluginConfig(options),
     resolve: {
-      conditions: ['storybook', 'stories', 'test'],
+      conditions: ['storybook', 'stories', 'test', ...defaultClientConditions],
       preserveSymlinks: isPreservingSymlinks(),
       alias: {
         assert: require.resolve('browser-assert'),

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

@@ -77,6 +77,25 @@ describe('composeStory', () => {
     expect(composedStory.parameters.fromAnnotations.asDefaultImport).toEqual(true);
   });
 
+  it('should compose project annotations when used in named and default exports from the same module', () => {
+    setProjectAnnotations([
+      {
+        initialGlobals: { namedExportAnnotation: true },
+        default: {
+          parameters: { defaultExportAnnotation: true },
+        },
+      },
+    ]);
+
+    const Story: Story = {
+      render: () => {},
+    };
+
+    const composedStory = composeStory(Story, meta);
+    expect(composedStory.parameters.defaultExportAnnotation).toEqual(true);
+    expect(composedStory.globals.namedExportAnnotation).toEqual(true);
+  });
+
   it('should return story with composed annotations from story, meta and project', () => {
     const decoratorFromProjectAnnotations = vi.fn((StoryFn) => StoryFn());
     const decoratorFromStoryAnnotations = vi.fn((StoryFn) => StoryFn());

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

@@ -61,11 +61,8 @@ function extractAnnotation<TRenderer extends Renderer = Renderer>(
   // import * as annotations from '.storybook/preview'
   // import annotations from '.storybook/preview'
   // in both cases: 1 - the file has a default export; 2 - named exports only
-  // support imports such as
-  // import * as annotations from '.storybook/preview'
-  // import annotations from '.storybook/preview'
-  // in both cases: 1 - the file has a default export; 2 - named exports only
-  return 'default' in annotation ? annotation.default : annotation;
+  // also support when the file has both annotations coming from default and named exports
+  return composeConfigs([annotation]);
 }
 
 export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(

code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts

@@ -11,6 +11,7 @@ import {
   Provider,
   ɵReflectionCapabilities as ReflectionCapabilities,
   importProvidersFrom,
+  VERSION,
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import {
@@ -176,15 +177,20 @@ export class PropertyExtractor implements NgModuleMetadata {
     const isDeclarable = isComponent || isDirective || isPipe;
 
     // Check if the hierarchically lowest Component or Directive decorator (the only relevant for importing dependencies) is standalone.
-    const isStandalone = !!(
+
+    let isStandalone =
       (isComponent || isDirective) &&
       [...decorators]
         .reverse() // reflectionCapabilities returns decorators in a hierarchically top-down order
         .find(
           (d) =>
             this.isDecoratorInstanceOf(d, 'Component') || this.isDecoratorInstanceOf(d, 'Directive')
-        )?.standalone
-    );
+        )?.standalone;
+
+    //Starting in Angular 19 the default (in case it's undefined) value for standalone is true
+    if (isStandalone === undefined) {
+      isStandalone = !!(VERSION.major && Number(VERSION.major) >= 19);
+    }
 
     return { isDeclarable, isStandalone };
   };

code/frameworks/experimental-nextjs-vite/package.json

@@ -112,7 +112,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0 || ^6.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

code/frameworks/react-vite/package.json

@@ -47,7 +47,7 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2",
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
@@ -66,7 +66,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/frameworks/svelte-vite/package.json

@@ -64,10 +64,10 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
     "storybook": "workspace:^",
     "svelte": "^4.0.0 || ^5.0.0",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/frameworks/sveltekit/package.json

@@ -71,7 +71,7 @@
   "peerDependencies": {
     "storybook": "workspace:^",
     "svelte": "^4.0.0 || ^5.0.0",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/frameworks/vue3-vite/package.json

@@ -68,7 +68,7 @@
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

code/package.json

@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.4.6"
 }