diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index cfca4a3569c0..a91d0dfb9a79 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,13 @@ +## 8.5.0-beta.8 + +- Automigrations: Skip vite config file migration for react native web - [#30190](https://github.com/storybookjs/storybook/pull/30190), thanks @dannyhw! +- Maintenance: Move `@types/node` to `devDeps` consistently - [#30163](https://github.com/storybookjs/storybook/pull/30163), thanks @ndelangen! +- Manager: Optimize getPanels function with memoization - [#30192](https://github.com/storybookjs/storybook/pull/30192), thanks @valentinpalkovic! +- RNW-Vite: Fix reanimated support with babel plugin for node_modules - [#30188](https://github.com/storybookjs/storybook/pull/30188), thanks @dannyhw! +- React: Force act running always in sequence - [#30191](https://github.com/storybookjs/storybook/pull/30191), thanks @valentinpalkovic! +- UI: Fix overlapping shadow of testing module on scrollbar - [#30132](https://github.com/storybookjs/storybook/pull/30132), thanks @valentinpalkovic! +- Vite: Fix wrong import paths when configDir is not in project root - [#30206](https://github.com/storybookjs/storybook/pull/30206), thanks @JReinhold! + ## 8.5.0-beta.7 - Addon Test: Context menu updates - [#30107](https://github.com/storybookjs/storybook/pull/30107), thanks @ghengeveld! diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 9870741de29e..48109681b6b0 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -160,6 +160,12 @@ const config: StorybookConfig = { // disable sourcemaps in CI to not run out of memory sourcemap: process.env.CI !== 'true', }, + server: { + watch: { + // Something odd happens with tsconfig and nx which causes Storybook to keep reloading, so we ignore them + ignored: ['**/.nx/cache/**', '**/tsconfig.json'], + }, + }, } satisfies typeof viteConfig); }, // logLevel: 'debug', diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index ec3b29d1b990..6fbfce6961a2 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 5f754a88570a..61e9280405d3 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index a28244df0bff..3316c41ab07b 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 8f9a8054c096..2c3ffcc8f059 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 3d7cc601058d..48895f6b125f 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index eb43c219ea1b..a6e4369bbd84 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 49e29e97d6c8..c7955709e7f8 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 5004106ab830..eee34658601e 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index ed4301330a92..5dc506cacefe 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index a4e5740be545..c430cc01f426 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index b7f5f3a2361b..a06b74fb612d 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 80d00c68bb74..0064f269ad2b 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 25029ef82ffe..fc46c773b3f4 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index fb278a8610b9..2283bd6d5587 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 2e99e8125aaa..562b05a869c2 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index ab0ffda5e379..43ef32de42d8 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index 4145acf18a3f..5e23088dfcbb 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/code/addons/test/src/node/vitest-manager.ts @@ -14,6 +14,7 @@ import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-eve import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from '@storybook/types'; +import { findUp } from 'find-up'; import path, { dirname, join, normalize } from 'pathe'; import slash from 'slash'; @@ -23,6 +24,9 @@ import type { StorybookCoverageReporterOptions } from './coverage-reporter'; import { StorybookReporter } from './reporter'; import type { TestManager } from './test-manager'; +const VITEST_CONFIG_FILE_EXTENSIONS = ['mts', 'mjs', 'cts', 'cjs', 'ts', 'tsx', 'js', 'jsx']; +const VITEST_WORKSPACE_FILE_EXTENSION = ['ts', 'js', 'json']; + type TagsFilter = { include: string[]; exclude: string[]; @@ -68,7 +72,13 @@ export class VitestManager { : { enabled: false } ) as CoverageOptions; + const vitestWorkspaceConfig = await findUp([ + ...VITEST_WORKSPACE_FILE_EXTENSION.map((ext) => `vitest.workspace.${ext}`), + ...VITEST_CONFIG_FILE_EXTENSIONS.map((ext) => `vitest.config.${ext}`), + ]); + this.vitest = await createVitest('test', { + root: vitestWorkspaceConfig ? dirname(vitestWorkspaceConfig) : process.cwd(), watch: true, passWithNoTests: false, // TODO: diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index 95d0a25979d1..0e07f1e984ce 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -145,6 +145,16 @@ export default async function postInstall(options: PostinstallOptions) { `); } + const mswVersionSpecifier = await packageManager.getInstalledVersion('msw'); + const coercedMswVersion = mswVersionSpecifier ? coerce(mswVersionSpecifier) : null; + + if (coercedMswVersion && !satisfies(coercedMswVersion, '>=2.0.0')) { + reasons.push(dedent` + • The addon uses Vitest behind the scenes, which supports only version 2 and above of MSW. However, we have detected version ${picocolors.bold(coercedMswVersion.version)} in this project. + Please update the 'msw' package and try again. + `); + } + if (info.frameworkPackageName === '@storybook/nextjs') { const nextVersion = await packageManager.getInstalledVersion('next'); if (!nextVersion) { @@ -159,6 +169,7 @@ export default async function postInstall(options: PostinstallOptions) { reasons.unshift( `Storybook Test's automated setup failed due to the following package incompatibilities:` ); + reasons.push('--------------------------------'); reasons.push( dedent` You can fix these issues and rerun the command to reinstall. If you wish to roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array @@ -422,6 +433,12 @@ export default async function postInstall(options: PostinstallOptions) { dedent` import { defineWorkspace } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport} + import path from 'node:path'; + import { fileURLToPath } from 'node:url'; + + const dirname = typeof __dirname !== 'undefined' + ? __dirname + : path.dirname(fileURLToPath(import.meta.url)); // More info at: https://storybook.js.org/docs/writing-tests/test-addon export default defineWorkspace([ @@ -431,7 +448,7 @@ export default async function postInstall(options: PostinstallOptions) { plugins: [ // The plugin will run tests for the stories defined in your Storybook config // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest - storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} + storybookTest({ configDir: path.join(dirname, '${options.configDir}') }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} ], test: { name: 'storybook', @@ -462,13 +479,19 @@ export default async function postInstall(options: PostinstallOptions) { dedent` import { defineConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport} + import path from 'node:path'; + import { fileURLToPath } from 'node:url'; + + const dirname = typeof __dirname !== 'undefined' + ? __dirname + : path.dirname(fileURLToPath(import.meta.url)); // More info at: https://storybook.js.org/docs/writing-tests/test-addon export default defineConfig({ plugins: [ // The plugin will run tests for the stories defined in your Storybook config // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest - storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} + storybookTest({ configDir: path.join(dirname, '${options.configDir}') }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} ], test: { name: 'storybook', diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 1e5268bd2e4c..8c96f0efb52d 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 9929d0089191..77c54f3641ee 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 63e60206b061..fc3a982e402c 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 90380018411d..3a40ea5fda50 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-vite/src/codegen-importfn-script.test.ts b/code/builders/builder-vite/src/codegen-importfn-script.test.ts index 4d3ce5bcb79a..da0e15c2154d 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.test.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.test.ts @@ -1,13 +1,14 @@ -import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { describe, expect, it, vi } from 'vitest'; import { toImportFn } from './codegen-importfn-script'; describe('toImportFn', () => { it('should correctly map story paths to import functions for absolute paths on Linux', async () => { - const root = '/absolute/path'; + vi.spyOn(process, 'cwd').mockReturnValue('/absolute/path'); + const stories = ['/absolute/path/to/story1.js', '/absolute/path/to/story2.js']; - const result = await toImportFn(root, stories); + const result = await toImportFn(stories); expect(result).toMatchInlineSnapshot(` "const importers = { @@ -22,10 +23,10 @@ describe('toImportFn', () => { }); it('should correctly map story paths to import functions for absolute paths on Windows', async () => { - const root = 'C:\\absolute\\path'; + vi.spyOn(process, 'cwd').mockReturnValue('C:\\absolute\\path'); const stories = ['C:\\absolute\\path\\to\\story1.js', 'C:\\absolute\\path\\to\\story2.js']; - const result = await toImportFn(root, stories); + const result = await toImportFn(stories); expect(result).toMatchInlineSnapshot(` "const importers = { @@ -43,7 +44,7 @@ describe('toImportFn', () => { const root = '/absolute/path'; const stories: string[] = []; - const result = await toImportFn(root, stories); + const result = await toImportFn(stories); expect(result).toMatchInlineSnapshot(` "const importers = {}; diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index 4b118ad9cc51..dc485c88f74d 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.ts @@ -29,9 +29,9 @@ function toImportPath(relativePath: string) { * * @param stories An array of absolute story paths. */ -export async function toImportFn(root: string, stories: string[]) { +export async function toImportFn(stories: string[]) { const objectEntries = stories.map((file) => { - const relativePath = relative(root, file); + const relativePath = relative(process.cwd(), file); return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string]; }); @@ -51,5 +51,5 @@ export async function generateImportFnScriptCode(options: Options): Promise(options); - options.projectRoot = options.projectRoot || resolve(options.configDir, '..'); + const projectRoot = resolve(options.configDir, '..'); // I destructure away the `build` property from the user's config object // I do this because I can contain config that breaks storybook, such as we had in a lit project. // If the user needs to configure the `build` they need to do so in the viteFinal function in main.js. const { config: { build: buildProperty = undefined, ...userConfig } = {} } = - (await loadConfigFromFile(configEnv, viteConfigPath, options.projectRoot)) ?? {}; + (await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {}; const sbConfig: InlineConfig = { configFile: false, cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey), - root: options.projectRoot, + root: projectRoot, // Allow storybook deployed as subfolder. See https://github.com/storybookjs/builder-vite/issues/238 base: './', plugins: await pluginConfig(options), diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 8bca8e722eb2..d6e5115bd305 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index db2394d2401b..ddfeef74bcb5 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index a422b03fabdd..8ff2861951fe 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,88 +1,88 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.5.0-beta.7', - '@storybook/addon-actions': '8.5.0-beta.7', - '@storybook/addon-backgrounds': '8.5.0-beta.7', - '@storybook/addon-controls': '8.5.0-beta.7', - '@storybook/addon-docs': '8.5.0-beta.7', - '@storybook/addon-essentials': '8.5.0-beta.7', - '@storybook/addon-mdx-gfm': '8.5.0-beta.7', - '@storybook/addon-highlight': '8.5.0-beta.7', - '@storybook/addon-interactions': '8.5.0-beta.7', - '@storybook/addon-jest': '8.5.0-beta.7', - '@storybook/addon-links': '8.5.0-beta.7', - '@storybook/addon-measure': '8.5.0-beta.7', - '@storybook/addon-onboarding': '8.5.0-beta.7', - '@storybook/addon-outline': '8.5.0-beta.7', - '@storybook/addon-storysource': '8.5.0-beta.7', - '@storybook/experimental-addon-test': '8.5.0-beta.7', - '@storybook/addon-themes': '8.5.0-beta.7', - '@storybook/addon-toolbars': '8.5.0-beta.7', - '@storybook/addon-viewport': '8.5.0-beta.7', - '@storybook/builder-vite': '8.5.0-beta.7', - '@storybook/builder-webpack5': '8.5.0-beta.7', - '@storybook/core': '8.5.0-beta.7', - '@storybook/builder-manager': '8.5.0-beta.7', - '@storybook/channels': '8.5.0-beta.7', - '@storybook/client-logger': '8.5.0-beta.7', - '@storybook/components': '8.5.0-beta.7', - '@storybook/core-common': '8.5.0-beta.7', - '@storybook/core-events': '8.5.0-beta.7', - '@storybook/core-server': '8.5.0-beta.7', - '@storybook/csf-tools': '8.5.0-beta.7', - '@storybook/docs-tools': '8.5.0-beta.7', - '@storybook/manager': '8.5.0-beta.7', - '@storybook/manager-api': '8.5.0-beta.7', - '@storybook/node-logger': '8.5.0-beta.7', - '@storybook/preview': '8.5.0-beta.7', - '@storybook/preview-api': '8.5.0-beta.7', - '@storybook/router': '8.5.0-beta.7', - '@storybook/telemetry': '8.5.0-beta.7', - '@storybook/theming': '8.5.0-beta.7', - '@storybook/types': '8.5.0-beta.7', - '@storybook/angular': '8.5.0-beta.7', - '@storybook/ember': '8.5.0-beta.7', - '@storybook/experimental-nextjs-vite': '8.5.0-beta.7', - '@storybook/html-vite': '8.5.0-beta.7', - '@storybook/html-webpack5': '8.5.0-beta.7', - '@storybook/nextjs': '8.5.0-beta.7', - '@storybook/preact-vite': '8.5.0-beta.7', - '@storybook/preact-webpack5': '8.5.0-beta.7', - '@storybook/react-native-web-vite': '8.5.0-beta.7', - '@storybook/react-vite': '8.5.0-beta.7', - '@storybook/react-webpack5': '8.5.0-beta.7', - '@storybook/server-webpack5': '8.5.0-beta.7', - '@storybook/svelte-vite': '8.5.0-beta.7', - '@storybook/svelte-webpack5': '8.5.0-beta.7', - '@storybook/sveltekit': '8.5.0-beta.7', - '@storybook/vue3-vite': '8.5.0-beta.7', - '@storybook/vue3-webpack5': '8.5.0-beta.7', - '@storybook/web-components-vite': '8.5.0-beta.7', - '@storybook/web-components-webpack5': '8.5.0-beta.7', - '@storybook/blocks': '8.5.0-beta.7', - storybook: '8.5.0-beta.7', - sb: '8.5.0-beta.7', - '@storybook/cli': '8.5.0-beta.7', - '@storybook/codemod': '8.5.0-beta.7', - '@storybook/core-webpack': '8.5.0-beta.7', - 'create-storybook': '8.5.0-beta.7', - '@storybook/csf-plugin': '8.5.0-beta.7', - '@storybook/instrumenter': '8.5.0-beta.7', - '@storybook/react-dom-shim': '8.5.0-beta.7', - '@storybook/source-loader': '8.5.0-beta.7', - '@storybook/test': '8.5.0-beta.7', - '@storybook/preset-create-react-app': '8.5.0-beta.7', - '@storybook/preset-html-webpack': '8.5.0-beta.7', - '@storybook/preset-preact-webpack': '8.5.0-beta.7', - '@storybook/preset-react-webpack': '8.5.0-beta.7', - '@storybook/preset-server-webpack': '8.5.0-beta.7', - '@storybook/preset-svelte-webpack': '8.5.0-beta.7', - '@storybook/preset-vue3-webpack': '8.5.0-beta.7', - '@storybook/html': '8.5.0-beta.7', - '@storybook/preact': '8.5.0-beta.7', - '@storybook/react': '8.5.0-beta.7', - '@storybook/server': '8.5.0-beta.7', - '@storybook/svelte': '8.5.0-beta.7', - '@storybook/vue3': '8.5.0-beta.7', - '@storybook/web-components': '8.5.0-beta.7', + '@storybook/addon-a11y': '8.5.0-beta.8', + '@storybook/addon-actions': '8.5.0-beta.8', + '@storybook/addon-backgrounds': '8.5.0-beta.8', + '@storybook/addon-controls': '8.5.0-beta.8', + '@storybook/addon-docs': '8.5.0-beta.8', + '@storybook/addon-essentials': '8.5.0-beta.8', + '@storybook/addon-mdx-gfm': '8.5.0-beta.8', + '@storybook/addon-highlight': '8.5.0-beta.8', + '@storybook/addon-interactions': '8.5.0-beta.8', + '@storybook/addon-jest': '8.5.0-beta.8', + '@storybook/addon-links': '8.5.0-beta.8', + '@storybook/addon-measure': '8.5.0-beta.8', + '@storybook/addon-onboarding': '8.5.0-beta.8', + '@storybook/addon-outline': '8.5.0-beta.8', + '@storybook/addon-storysource': '8.5.0-beta.8', + '@storybook/experimental-addon-test': '8.5.0-beta.8', + '@storybook/addon-themes': '8.5.0-beta.8', + '@storybook/addon-toolbars': '8.5.0-beta.8', + '@storybook/addon-viewport': '8.5.0-beta.8', + '@storybook/builder-vite': '8.5.0-beta.8', + '@storybook/builder-webpack5': '8.5.0-beta.8', + '@storybook/core': '8.5.0-beta.8', + '@storybook/builder-manager': '8.5.0-beta.8', + '@storybook/channels': '8.5.0-beta.8', + '@storybook/client-logger': '8.5.0-beta.8', + '@storybook/components': '8.5.0-beta.8', + '@storybook/core-common': '8.5.0-beta.8', + '@storybook/core-events': '8.5.0-beta.8', + '@storybook/core-server': '8.5.0-beta.8', + '@storybook/csf-tools': '8.5.0-beta.8', + '@storybook/docs-tools': '8.5.0-beta.8', + '@storybook/manager': '8.5.0-beta.8', + '@storybook/manager-api': '8.5.0-beta.8', + '@storybook/node-logger': '8.5.0-beta.8', + '@storybook/preview': '8.5.0-beta.8', + '@storybook/preview-api': '8.5.0-beta.8', + '@storybook/router': '8.5.0-beta.8', + '@storybook/telemetry': '8.5.0-beta.8', + '@storybook/theming': '8.5.0-beta.8', + '@storybook/types': '8.5.0-beta.8', + '@storybook/angular': '8.5.0-beta.8', + '@storybook/ember': '8.5.0-beta.8', + '@storybook/experimental-nextjs-vite': '8.5.0-beta.8', + '@storybook/html-vite': '8.5.0-beta.8', + '@storybook/html-webpack5': '8.5.0-beta.8', + '@storybook/nextjs': '8.5.0-beta.8', + '@storybook/preact-vite': '8.5.0-beta.8', + '@storybook/preact-webpack5': '8.5.0-beta.8', + '@storybook/react-native-web-vite': '8.5.0-beta.8', + '@storybook/react-vite': '8.5.0-beta.8', + '@storybook/react-webpack5': '8.5.0-beta.8', + '@storybook/server-webpack5': '8.5.0-beta.8', + '@storybook/svelte-vite': '8.5.0-beta.8', + '@storybook/svelte-webpack5': '8.5.0-beta.8', + '@storybook/sveltekit': '8.5.0-beta.8', + '@storybook/vue3-vite': '8.5.0-beta.8', + '@storybook/vue3-webpack5': '8.5.0-beta.8', + '@storybook/web-components-vite': '8.5.0-beta.8', + '@storybook/web-components-webpack5': '8.5.0-beta.8', + '@storybook/blocks': '8.5.0-beta.8', + storybook: '8.5.0-beta.8', + sb: '8.5.0-beta.8', + '@storybook/cli': '8.5.0-beta.8', + '@storybook/codemod': '8.5.0-beta.8', + '@storybook/core-webpack': '8.5.0-beta.8', + 'create-storybook': '8.5.0-beta.8', + '@storybook/csf-plugin': '8.5.0-beta.8', + '@storybook/instrumenter': '8.5.0-beta.8', + '@storybook/react-dom-shim': '8.5.0-beta.8', + '@storybook/source-loader': '8.5.0-beta.8', + '@storybook/test': '8.5.0-beta.8', + '@storybook/preset-create-react-app': '8.5.0-beta.8', + '@storybook/preset-html-webpack': '8.5.0-beta.8', + '@storybook/preset-preact-webpack': '8.5.0-beta.8', + '@storybook/preset-react-webpack': '8.5.0-beta.8', + '@storybook/preset-server-webpack': '8.5.0-beta.8', + '@storybook/preset-svelte-webpack': '8.5.0-beta.8', + '@storybook/preset-vue3-webpack': '8.5.0-beta.8', + '@storybook/html': '8.5.0-beta.8', + '@storybook/preact': '8.5.0-beta.8', + '@storybook/react': '8.5.0-beta.8', + '@storybook/server': '8.5.0-beta.8', + '@storybook/svelte': '8.5.0-beta.8', + '@storybook/vue3': '8.5.0-beta.8', + '@storybook/web-components': '8.5.0-beta.8', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 70c53d79d69a..03b2ede34ed8 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.5.0-beta.7'; +export const version = '8.5.0-beta.8'; diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts index 2b4624a0564b..08d9be50e64f 100644 --- a/code/core/src/types/modules/core-common.ts +++ b/code/core/src/types/modules/core-common.ts @@ -195,7 +195,6 @@ export interface BuilderOptions { ignorePreview?: boolean; cache?: FileSystemCache; configDir: string; - projectRoot?: string; docsMode?: boolean; features?: StorybookConfigRaw['features']; versionCheck?: VersionCheck; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 14816d4588ad..202e21a1260e 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index c89f4d389258..089476594d15 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 03e83f1d858c..b6bf391b87c2 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 16c7adf66e29..538d782d4113 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 2376f1c37bff..8f97ed391917 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index f110a9371cde..dab32c435567 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 0704f03435ef..bfa4eb4d0d25 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index d248f0949d8e..b81dc2ba904e 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 79bed48a279d..382b9fa1018b 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index c3430be5921b..a82593445638 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 0e9576a41508..ee6941c38202 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 2f4889b30171..da32b9929f09 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 1d775331188c..27b6659d6def 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 4cf97be32ab4..244c4b094a82 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index 07442651deb1..ff64f031095a 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 5b44a000d776..35c2fae233dd 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index f8207df59dff..7b730df30037 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 13562792fd46..d9fcb254a8ef 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 1062db342d0e..6057a177bddb 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 428b3a225738..6d47505db37d 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index ae9732bc6d66..7b6c3af9002b 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 9bbd937f8757..3c78bcf4c102 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index d91ab9f8e76a..61df0f20e357 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7f0d31d0a0eb..c6f4cc82ab56 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 5a1e2e40b51b..a450956debe1 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index f15a94420578..233cf1eccc99 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 62852daf4eaf..d471569ed250 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" @@ -53,12 +53,15 @@ "prep": "jiti ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@babel/plugin-transform-modules-commonjs": "^7.26.3", + "@babel/preset-react": "^7.26.3", "@bunchtogether/vite-plugin-flow": "^1.0.2", "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", "@storybook/react-vite": "workspace:*", "@vitejs/plugin-react": "^4.3.2", + "vite-plugin-babel": "^1.3.0", "vite-tsconfig-paths": "^5.1.4" }, "devDependencies": { diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts index 44e847171dda..40e275b5bbb1 100644 --- a/code/frameworks/react-native-web-vite/src/preset.ts +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -3,6 +3,7 @@ import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset'; import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow'; import react from '@vitejs/plugin-react'; import type { InlineConfig, PluginOption } from 'vite'; +import babel from 'vite-plugin-babel'; import tsconfigPaths from 'vite-tsconfig-paths'; import type { FrameworkOptions, StorybookConfig } from './types'; @@ -64,25 +65,68 @@ export function reactNativeWeb(): PluginOption { export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { const { mergeConfig } = await import('vite'); - const { pluginReactOptions = {} } = + const { pluginReactOptions = {}, pluginBabelOptions = {} } = await options.presets.apply('frameworkOptions'); + const isDevelopment = options.configType !== 'PRODUCTION'; + const reactConfig = await reactViteFinal(config, options); const { plugins = [] } = reactConfig; plugins.unshift( tsconfigPaths(), + + // fix for react native packages shipping with flow types untranspiled flowPlugin({ exclude: [/node_modules\/(?!react-native|@react-native)/], }), react({ + ...pluginReactOptions, + jsxRuntime: pluginReactOptions.jsxRuntime || 'automatic', babel: { babelrc: false, configFile: false, + ...pluginReactOptions.babel, + }, + }), + + // we need to add this extra babel config because the react plugin doesn't allow + // for transpiling node_modules. We need this because many react native packages are un-transpiled. + // see this pr for more context: https://github.com/vitejs/vite-plugin-react/pull/306 + // However we keep the react plugin to get the fast refresh and the other stuff its doing + babel({ + ...pluginBabelOptions, + include: pluginBabelOptions.include || [/node_modules\/(react-native|@react-native)/], + exclude: pluginBabelOptions.exclude, + babelConfig: { + ...pluginBabelOptions.babelConfig, + babelrc: false, + configFile: false, + presets: [ + [ + '@babel/preset-react', + { + development: isDevelopment, + runtime: 'automatic', + ...(pluginBabelOptions.presetReact || {}), + }, + ], + ...(pluginBabelOptions.babelConfig?.presets || []), + ], + plugins: [ + [ + // this is a fix for reanimated not working in production + '@babel/plugin-transform-modules-commonjs', + { + strict: false, + strictMode: false, // prevent "use strict" injections + allowTopLevelThis: true, // dont rewrite global `this` -> `undefined` + }, + ], + ...(pluginBabelOptions.babelConfig?.plugins || []), + ], }, - jsxRuntime: 'automatic', - ...pluginReactOptions, }) ); @@ -91,6 +135,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = return mergeConfig(reactConfig, { optimizeDeps: { esbuildOptions: { + // fix for react native packages shipping with flow types untranspiled plugins: [esbuildFlowPlugin(new RegExp(/\.(flow|jsx?)$/), (_path: string) => 'jsx')], }, }, diff --git a/code/frameworks/react-native-web-vite/src/types.ts b/code/frameworks/react-native-web-vite/src/types.ts index c82c79771a1b..5558722e03d7 100644 --- a/code/frameworks/react-native-web-vite/src/types.ts +++ b/code/frameworks/react-native-web-vite/src/types.ts @@ -6,9 +6,17 @@ import type { } from '@storybook/react-vite'; import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; +import type { BabelPluginOptions } from 'vite-plugin-babel'; export type FrameworkOptions = FrameworkOptionsBase & { pluginReactOptions?: Omit & { babel?: BabelOptions }; + pluginBabelOptions?: BabelPluginOptions & { + presetReact?: { + [key: string]: any; + runtime?: 'automatic' | 'classic'; + importSource?: string; + }; + }; }; type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>; diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 4a0bdc30f996..20a201631ad8 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index eeb8d54be428..847a74648bc3 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 232ef3b1dd32..c01ff58cb31e 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 43c32f61a45e..a84c99459479 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index fc0dd1cdffc5..20da51d82cdc 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index a22f6e9ed0e8..ae7a40fa802f 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 3f67c456b985..291a41981721 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 80fb627f57be..223742483fa7 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 2cdbe1efecfb..ae2bd6f7b142 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 619aa92693d1..46a6974f7e54 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index cd7e33e93060..e54255595b4e 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 4e31b9076754..2c41b8a58c9b 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 568ab9f4ccd4..cfeb93c24679 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts index d8df0813905d..8ba600883e7e 100644 --- a/code/lib/cli-storybook/src/add.ts +++ b/code/lib/cli-storybook/src/add.ts @@ -111,17 +111,19 @@ export async function add( let shouldAddToMain = true; if (checkInstalled(addonName, requireMain(configDir))) { - const { shouldForceInstall } = await prompts({ - type: 'confirm', - name: 'shouldForceInstall', - message: `The Storybook addon "${addonName}" is already present in ${mainConfig}. Do you wish to install it again?`, - }); - - if (!shouldForceInstall) { - return; - } - shouldAddToMain = false; + if (!yes) { + logger.log(`The Storybook addon "${addonName}" is already present in ${mainConfig}.`); + const { shouldForceInstall } = await prompts({ + type: 'confirm', + name: 'shouldForceInstall', + message: `Do you wish to install it again?`, + }); + + if (!shouldForceInstall) { + return; + } + } } const main = await readConfig(mainConfig); diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 9aa43e3a444a..2cf67eda0677 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 99f6ebf2f4cf..2381a68ce2e6 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 7dfaaf240fa9..196ddbae1ddb 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index a6fee64b315d..cf7af42367b6 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 3253dc28239e..97b965d8f08a 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index cd316cd52134..f1979e323bec 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index c9ad8a1eb7dd..971dab959df3 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 4d4f05f81d2b..e72b99b17367 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 98cfa19ab2db..52fdb5b9bdc6 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 095188241d45..620efb1eeca6 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index e724f600b146..75ed59d206f3 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 364622c88c30..814f38e474f6 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index fd11d3dcfca9..27ad6b2dbfc3 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index b796c751951a..bc2aa69c9b4f 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index fb8088a49370..48fc48630ad1 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 6eba44003f64..cd00d25c9446 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 8e4d59581507..df5ef39bb248 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 351e398be33e..719860934f21 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index b0a1170483bb..b43e222db6a8 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index e863f283dc37..0b4f91da93a8 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx index 85f33c9a714a..fcb278628b7b 100644 --- a/code/renderers/react/src/__test__/portable-stories.test.tsx +++ b/code/renderers/react/src/__test__/portable-stories.test.tsx @@ -67,7 +67,7 @@ describe('renders', () => { }); it('should throw error when rendering a component with a render error', async () => { - await expect(() => ThrowsError.run()).rejects.toThrowError('Error in render'); + await expect(ThrowsError.run()).rejects.toThrowError('Error in render'); }); it('should render component mounted in play function', async () => { @@ -77,8 +77,8 @@ describe('renders', () => { expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data'); }); - it('should throw an error in play function', () => { - expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play'); + it('should throw an error in play function', async () => { + await expect(MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play'); }); it('should call and compose loaders data', async () => { diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx index 4ae1acbb7fe9..57c1086cee1b 100644 --- a/code/renderers/react/src/renderToCanvas.tsx +++ b/code/renderers/react/src/renderToCanvas.tsx @@ -45,6 +45,23 @@ class ErrorBoundary extends ReactComponent<{ const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment; +const actQueue: (() => Promise)[] = []; +let isActing = false; + +const processActQueue = async () => { + if (isActing || actQueue.length === 0) { + return; + } + + isActing = true; + const actTask = actQueue.shift(); + if (actTask) { + await actTask(); + } + isActing = false; + processActQueue(); +}; + export async function renderToCanvas( { storyContext, @@ -81,8 +98,18 @@ export async function renderToCanvas( unmountElement(canvasElement); } - await act(async () => { - await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions); + await new Promise(async (resolve, reject) => { + actQueue.push(async () => { + try { + await act(async () => { + await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions); + }); + resolve(); + } catch (e) { + reject(e); + } + }); + processActQueue(); }); return async () => { diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 27fdcc129183..b69376f406c5 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index dacb64a582fb..41a5d33b3bf0 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 836049329bef..e071df26236c 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index b5936cdfcc06..0e3c09544430 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/yarn.lock b/code/yarn.lock index df043e5f03cf..46effb13a7f7 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -508,6 +508,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-annotate-as-pure@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-annotate-as-pure@npm:7.25.9" + dependencies: + "@babel/types": "npm:^7.25.9" + checksum: 10c0/095b6ba50489d797733abebc4596a81918316a99e3632755c9f02508882912b00c2ae5e468532a25a5c2108d109ddbe9b7da78333ee7cc13817fc50c00cf06fe + languageName: node + linkType: hard + "@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.24.7" @@ -1064,6 +1073,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-jsx@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-syntax-jsx@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/d56597aff4df39d3decda50193b6dfbe596ca53f437ff2934622ce19a743bf7f43492d3fb3308b0289f5cee2b825d99ceb56526a2b9e7b68bf04901546c5618c + languageName: node + linkType: hard + "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4" @@ -1495,6 +1515,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-modules-commonjs@npm:^7.26.3": + version: 7.26.3 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.26.3" + dependencies: + "@babel/helper-module-transforms": "npm:^7.26.0" + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/82e59708f19f36da29531a64a7a94eabbf6ff46a615e0f5d9b49f3f59e8ef10e2bac607d749091508d3fa655146c9e5647c3ffeca781060cdabedb4c7a33c6f2 + languageName: node + linkType: hard + "@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.7" @@ -1689,6 +1721,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-display-name@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-display-name@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/63a0f962d64e71baf87c212755419e25c637d2d95ea6fdc067df26b91e606ae186442ae815b99a577eca9bf5404d9577ecad218a3cf42d0e9e286ca7b003a992 + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-development@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5" @@ -1700,6 +1743,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-development@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-development@npm:7.25.9" + dependencies: + "@babel/plugin-transform-react-jsx": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/c0b92ff9eb029620abf320ff74aae182cea87524723d740fb48a4373d0d16bddf5edbe1116e7ba341332a5337e55c2ceaee8b8cad5549e78af7f4b3cfe77debb + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-self@npm:^7.24.7": version: 7.25.9 resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9" @@ -1737,6 +1791,21 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.25.9" + "@babel/helper-module-imports": "npm:^7.25.9" + "@babel/helper-plugin-utils": "npm:^7.25.9" + "@babel/plugin-syntax-jsx": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/5c9947e8ed141f7606f54da3e05eea1074950c5b8354c39df69cb7f43cb5a83c6c9d7973b24bc3d89341c8611f8ad50830a98ab10d117d850e6bdd8febdce221 + languageName: node + linkType: hard + "@babel/plugin-transform-react-pure-annotations@npm:^7.24.1": version: 7.24.1 resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.1" @@ -1749,6 +1818,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-pure-annotations@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.25.9" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.25.9" + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/7c8eac04644ad19dcd71bb8e949b0ae22b9e548fa4a58e545d3d0342f647fb89db7f8789a7c5b8074d478ce6d3d581eaf47dd4b36027e16fd68211c383839abc + languageName: node + linkType: hard + "@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-regenerator@npm:7.24.7" @@ -2154,6 +2235,22 @@ __metadata: languageName: node linkType: hard +"@babel/preset-react@npm:^7.26.3": + version: 7.26.3 + resolution: "@babel/preset-react@npm:7.26.3" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + "@babel/helper-validator-option": "npm:^7.25.9" + "@babel/plugin-transform-react-display-name": "npm:^7.25.9" + "@babel/plugin-transform-react-jsx": "npm:^7.25.9" + "@babel/plugin-transform-react-jsx-development": "npm:^7.25.9" + "@babel/plugin-transform-react-pure-annotations": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/b470dcba11032ef6c832066f4af5c75052eaed49feb0f445227231ef1b5c42aacd6e216988c0bd469fd5728cd27b6b059ca307c9ecaa80c6bb5da4bf1c833e12 + languageName: node + linkType: hard + "@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.24.1": version: 7.24.1 resolution: "@babel/preset-typescript@npm:7.24.1" @@ -6712,6 +6809,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite" dependencies: + "@babel/plugin-transform-modules-commonjs": "npm:^7.26.3" + "@babel/preset-react": "npm:^7.26.3" "@bunchtogether/vite-plugin-flow": "npm:^1.0.2" "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2" "@storybook/builder-vite": "workspace:*" @@ -6720,6 +6819,7 @@ __metadata: "@types/node": "npm:^22.0.0" "@vitejs/plugin-react": "npm:^4.3.2" typescript: "npm:^5.3.2" + vite-plugin-babel: "npm:^1.3.0" vite-tsconfig-paths: "npm:^5.1.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta @@ -28762,6 +28862,16 @@ __metadata: languageName: node linkType: hard +"vite-plugin-babel@npm:^1.3.0": + version: 1.3.0 + resolution: "vite-plugin-babel@npm:1.3.0" + peerDependencies: + "@babel/core": ^7.0.0 + vite: ^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 + checksum: 10c0/1613c45ee220ffbad18aeacbbe395d4d346cbe7c971c7469b0cd96df422bd9d617821a40bacf3b6ea3e7c4ded43e6ccdfd17ec3c0899fee2835f56e8971c6b57 + languageName: node + linkType: hard + "vite-plugin-inspect@npm:^0.8.5": version: 0.8.5 resolution: "vite-plugin-inspect@npm:0.8.5" diff --git a/docs/_snippets/vitest-plugin-vitest-config.md b/docs/_snippets/vitest-plugin-vitest-config.md index 6ce11fcef545..683bb0884315 100644 --- a/docs/_snippets/vitest-plugin-vitest-config.md +++ b/docs/_snippets/vitest-plugin-vitest-config.md @@ -1,9 +1,14 @@ ```ts filename="vitest.config.ts" renderer="react" import { defineConfig, mergeConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; // 👇 If you're using Next.js, apply this framework plugin as well // import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'; +const dirname = + typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)); + import viteConfig from './vite.config'; export default mergeConfig( @@ -12,7 +17,7 @@ export default mergeConfig( plugins: [ storybookTest({ // The location of your Storybook config, main.js|ts - configDir: './.storybook', + configDir: path.join(dirname, '.storybook'), // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', @@ -38,16 +43,21 @@ export default mergeConfig( import { defineConfig, mergeConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; import viteConfig from './vite.config'; +const dirname = + typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)); + export default mergeConfig( viteConfig, defineConfig({ plugins: [ storybookTest({ // The location of your Storybook config, main.js|ts - configDir: './.storybook', + configDir: path.join(dirname, '.storybook'), // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', @@ -72,9 +82,14 @@ export default mergeConfig( ```ts filename="vitest.config.ts" renderer="svelte" import { defineConfig, mergeConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; // 👇 If you're using Sveltekit, apply this framework plugin as well // import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin'; +const dirname = + typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)); + import viteConfig from './vite.config'; export default mergeConfig( @@ -83,7 +98,7 @@ export default mergeConfig( plugins: [ storybookTest({ // The location of your Storybook config, main.js|ts - configDir: './.storybook', + configDir: path.join(dirname, '.storybook'), // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', diff --git a/docs/_snippets/vitest-plugin-vitest-workspace.md b/docs/_snippets/vitest-plugin-vitest-workspace.md index bce2c89ce97a..a1d33075fab7 100644 --- a/docs/_snippets/vitest-plugin-vitest-workspace.md +++ b/docs/_snippets/vitest-plugin-vitest-workspace.md @@ -1,9 +1,15 @@ ```ts filename="vitest.workspace.ts" renderer="react" import { defineWorkspace } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + // 👇 If you're using Next.js, apply this framework plugin as well // import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'; +const dirname = + typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)); + export default defineWorkspace([ // This is the path to your existing Vitest config file './vitest.config.ts', @@ -13,7 +19,7 @@ export default defineWorkspace([ plugins: [ storybookTest({ // The location of your Storybook config, main.js|ts - configDir: './.storybook', + configDir: path.join(dirname, '.storybook'), // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', @@ -40,9 +46,14 @@ export default defineWorkspace([ import { defineConfig, mergeConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; import viteConfig from './vite.config'; +const dirname = + typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)); + export default defineWorkspace([ // This is the path to your existing Vitest config file './vitest.config.ts', @@ -52,7 +63,7 @@ export default defineWorkspace([ plugins: [ storybookTest({ // The location of your Storybook config, main.js|ts - configDir: './.storybook', + configDir: path.join(dirname, '.storybook'), // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', @@ -78,11 +89,17 @@ export default defineWorkspace([ ```ts filename="vitest.config.ts" renderer="svelte" import { defineConfig, mergeConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + // 👇 If you're using Sveltekit, apply this framework plugin as well // import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin'; import viteConfig from './vite.config'; +const dirname = + typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)); + export default defineWorkspace([ // This is the path to your existing Vitest config file './vitest.config.ts', @@ -92,7 +109,7 @@ export default defineWorkspace([ plugins: [ storybookTest({ // The location of your Storybook config, main.js|ts - configDir: './.storybook', + configDir: path.join(dirname, '.storybook'), // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', diff --git a/docs/versions/next.json b/docs/versions/next.json index 7f572d8e4010..a280f33b712b 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.5.0-beta.7","info":{"plain":"- Addon Test: Context menu updates - [#30107](https://github.com/storybookjs/storybook/pull/30107), thanks @ghengeveld!\n- Storysource Addon: Fix source-loader prettier imports - [#29669](https://github.com/storybookjs/storybook/pull/29669), thanks @slax57!\n- Vue: Extend sourceDecorator to support v-bind and nested keys in slots - [#28787](https://github.com/storybookjs/storybook/pull/28787), thanks @JoCa96!"}} +{"version":"8.5.0-beta.8","info":{"plain":"- Automigrations: Skip vite config file migration for react native web - [#30190](https://github.com/storybookjs/storybook/pull/30190), thanks @dannyhw!\n- Maintenance: Move `@types/node` to `devDeps` consistently - [#30163](https://github.com/storybookjs/storybook/pull/30163), thanks @ndelangen!\n- Manager: Optimize getPanels function with memoization - [#30192](https://github.com/storybookjs/storybook/pull/30192), thanks @valentinpalkovic!\n- RNW-Vite: Fix reanimated support with babel plugin for node_modules - [#30188](https://github.com/storybookjs/storybook/pull/30188), thanks @dannyhw!\n- React: Force act running always in sequence - [#30191](https://github.com/storybookjs/storybook/pull/30191), thanks @valentinpalkovic!\n- UI: Fix overlapping shadow of testing module on scrollbar - [#30132](https://github.com/storybookjs/storybook/pull/30132), thanks @valentinpalkovic!\n- Vite: Fix wrong import paths when configDir is not in project root - [#30206](https://github.com/storybookjs/storybook/pull/30206), thanks @JReinhold!"}} diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index fef29d8eb663..e9f664c9da0d 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -480,13 +480,22 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio dedent` import { defineWorkspace, defaultExclude } from "vitest/config"; import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin"; + import path from 'node:path'; + import { fileURLToPath } from 'node:url'; + + import viteConfig from './vite.config'; + ${frameworkPluginImport} + const dirname = + typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)); + export default defineWorkspace([ { ${!isNextjs ? `extends: "${viteConfigPath}",` : ''} plugins: [ storybookTest({ + configDir: path.join(dirname, '.storybook'), storybookScript: "yarn storybook --ci", tags: { include: ["vitest"],