diff --git a/CHANGELOG.md b/CHANGELOG.md index 3913ddd364e7..c4284d55bc65 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 9.1.4 + +- Angular: Properly merge builder options and browserTarget options - [#32272](https://github.com/storybookjs/storybook/pull/32272), thanks @kroeder! +- Core: Optimize bundlesize, by reusing internal/babel in mocking-utils - [#32350](https://github.com/storybookjs/storybook/pull/32350), thanks @ndelangen! +- Svelte & Vue: Add framework-specific `docgen` option to disable docgen processing - [#32319](https://github.com/storybookjs/storybook/pull/32319), thanks @copilot-swe-agent! +- Svelte: Support `@sveltejs/vite-plugin-svelte` v6 - [#32320](https://github.com/storybookjs/storybook/pull/32320), thanks @JReinhold! + ## 9.1.3 - Docs: Move button in ArgsTable heading to fix screenreader announcements - [#32238](https://github.com/storybookjs/storybook/pull/32238), thanks @Sidnioulz! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 92da9a26ed1e..88c2c68b88a5 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,11 @@ +## 10.0.0-beta.2 + +- Build: Fix dts bundling external detection - [#32366](https://github.com/storybookjs/storybook/pull/32366), thanks @mrginglymus! +- Codemod: Replace `globby` with `tinyglobby` - [#31407](https://github.com/storybookjs/storybook/pull/31407), thanks @benmccann! +- Next.js-vite: Use `fileURLToPath` for module resolution in preset - [#32386](https://github.com/storybookjs/storybook/pull/32386), thanks @ndelangen! +- Tags: Remove undocumented x-only tags - [#32360](https://github.com/storybookjs/storybook/pull/32360), thanks @shilman! +- Vitest addon: Handle Playwright installation errors gracefully - [#32329](https://github.com/storybookjs/storybook/pull/32329), thanks @ndelangen! + ## 10.0.0-beta.1 - AddonA11Y: Fix postinstall - [#32309](https://github.com/storybookjs/storybook/pull/32309), thanks @ndelangen! diff --git a/MIGRATION.md b/MIGRATION.md index fbf6dec9fd35..7ea7f20f2c94 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -7,6 +7,7 @@ - [Node.js 20.19+ or 22.12+ required](#nodejs-2019-or-2212-required) - [Require `tsconfig.json` `moduleResolution` set to value that supports `types` condition](#require-tsconfigjson-moduleresolution-set-to-value-that-supports-types-condition) - [`core.builder` configuration must be a fully resolved path](#corebuilder-configuration-must-be-a-fully-resolved-path) + - [Removed x-only builtin tags](#removed-x-only-builtin-tags) - [From version 8.x to 9.0.0](#from-version-8x-to-900) - [Core Changes and Removals](#core-changes-and-removals) - [Dropped support for legacy packages](#dropped-support-for-legacy-packages) @@ -580,6 +581,10 @@ export const core = { }; ``` +#### Removed x-only builtin tags +During development of Storybook [Tags](https://storybook.js.org/docs/writing-stories/tags), we created `dev-only`, `docs-only`, and `test-only` built-in tags. These tags were never documented and superseded by the currently-documented `dev`, `autodocs`, and `test` tags which provide more precise control. The outdated `x-only` tags are removed in 10.0. +During development of Storybook [Tags](https://storybook.js.org/docs/writing-stories/tags), we created `dev-only`, `docs-only`, and `test-only` built-in tags. These tags were never documented and superceded by the currently-documented `dev`, `autodocs`, and `test` tags which provide more precise control. The outdated `x-only` tags are removed in 10.0. + ## From version 8.x to 9.0.0 ### Core Changes and Removals @@ -1806,7 +1811,7 @@ These sections explain the rationale, and the required changes you might have to ### Deprecated `@storybook/testing-library` package - The `@storybook/testing-library` package has been deprecated with the release of Storybook 8.0, and we recommend using the `@storybook/test` package instead. If you're migrating manually, you'll need to install the new package and update your imports as follows: +The `@storybook/testing-library` package has been deprecated with the release of Storybook 8.0, and we recommend using the `@storybook/test` package instead. If you're migrating manually, you'll need to install the new package and update your imports as follows: ```diff - import { userEvent } from '@storybook/testing-library'; diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 5d0ece62af65..d70b18e543e4 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -1,4 +1,3 @@ -/* eslint-disable depend/ban-dependencies */ import React, { type FC, Fragment, useEffect } from 'react'; import type { Channel } from 'storybook/internal/channels'; @@ -38,10 +37,12 @@ import { isChromatic } from './isChromatic'; sb.mock('../core/template/stories/test/ModuleMocking.utils.ts'); sb.mock('../core/template/stories/test/ModuleSpyMocking.utils.ts', { spy: true }); sb.mock('../core/template/stories/test/ModuleAutoMocking.utils.ts'); +/* eslint-disable depend/ban-dependencies */ sb.mock(import('lodash-es')); sb.mock(import('lodash-es/add')); sb.mock(import('lodash-es/sum')); sb.mock(import('uuid')); +/* eslint-enable depend/ban-dependencies */ const { document } = global; globalThis.CONFIG_TYPE = 'DEVELOPMENT'; diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 0d67734e5e2a..1d131a11eec6 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -309,10 +309,14 @@ export default async function postInstall(options: PostinstallOptions) { } else { logger.plain(`${step} Configuring Playwright with Chromium (this might take some time):`); logger.plain(' npx playwright install chromium --with-deps'); - await packageManager.executeCommand({ - command: 'npx', - args: ['playwright', 'install', 'chromium', '--with-deps'], - }); + try { + await packageManager.executeCommand({ + command: 'npx', + args: ['playwright', 'install', 'chromium', '--with-deps'], + }); + } catch (e) { + console.error('Failed to install Playwright. Please install it manually'); + } } const fileExtension = diff --git a/code/core/package.json b/code/core/package.json index fb6e008830f5..3b48b81d250c 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -273,7 +273,6 @@ "@types/ejs": "^3.1.1", "@types/find-cache-dir": "^5.0.0", "@types/js-yaml": "^4.0.5", - "@types/lodash": "^4.17.13", "@types/node": "^22.0.0", "@types/npmlog": "^7.0.0", "@types/picomatch": "^2.3.0", @@ -323,7 +322,6 @@ "jsdoc-type-pratt-parser": "^4.0.0", "lazy-universal-dotenv": "^4.0.0", "leven": "^4.0.0", - "lodash": "^4.17.21", "memfs": "^4.11.1", "memoizerific": "^1.11.3", "mlly": "^1.7.4", diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts index 7539f77c4378..d95626ee7e4a 100644 --- a/code/core/src/core-server/presets/common-preset.ts +++ b/code/core/src/core-server/presets/common-preset.ts @@ -278,16 +278,6 @@ export const resolvedReact = async (existing: any) => { } }; -/** Set up `dev-only`, `docs-only`, `test-only` tags out of the box */ -export const tags = async (existing: any) => { - return { - ...existing, - 'dev-only': { excludeFromDocsStories: true }, - 'docs-only': { excludeFromSidebar: true }, - 'test-only': { excludeFromSidebar: true, excludeFromDocsStories: true }, - }; -}; - export const managerEntries = async (existing: any) => { return [ pathe.join(resolvePackageDir('storybook'), 'dist/core-server/presets/common-manager.js'), diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx index 53bd6ed2182e..2e5bf66e44ea 100644 --- a/code/core/src/manager/components/sidebar/TagsFilter.tsx +++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx @@ -12,15 +12,7 @@ import { TagsFilterPanel } from './TagsFilterPanel'; const TAGS_FILTER = 'tags-filter'; -const BUILT_IN_TAGS_HIDE = new Set([ - 'dev', - 'docs-only', - 'test-only', - 'autodocs', - 'test', - 'attached-mdx', - 'unattached-mdx', -]); +const BUILT_IN_TAGS_HIDE = new Set(['dev', 'autodocs', 'test', 'attached-mdx', 'unattached-mdx']); const Wrapper = styled.div({ position: 'relative', diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx index cd7dc975346c..baffdada1a95 100644 --- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx +++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx @@ -20,9 +20,6 @@ import type { Link } from '../../../components/components/tooltip/TooltipLinkLis const BUILT_IN_TAGS = new Set([ 'dev', 'test', - 'dev-only', - 'test-only', - 'docs-only', 'autodocs', 'attached-mdx', 'unattached-mdx', diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts index 6e1eca678db6..eb69384387af 100644 --- a/code/e2e-tests/tags.spec.ts +++ b/code/e2e-tests/tags.spec.ts @@ -10,24 +10,6 @@ test.describe('tags', () => { await new SbPage(page, expect).waitUntilLoaded(); }); - test('should correctly filter dev-only, docs-only, test-only stories', async ({ page }) => { - const sbPage = new SbPage(page, expect); - - await sbPage.navigateToStory('core/tags-config', 'docs'); - - // Sidebar should include dev-only and exclude docs-only and test-only - await expect(page.locator('#core-tags-config--dev-only')).toHaveCount(1); - await expect(page.locator('#core-tags-config--docs-only')).toHaveCount(0); - await expect(page.locator('#core-tags-config--test-only')).toHaveCount(0); - - // Autodocs should include docs-only and exclude dev-only and test-only - const preview = sbPage.previewRoot(); - - await expect(preview.locator('#anchor--core-tags-config--dev-only')).toHaveCount(0); - await expect(preview.locator('#anchor--core-tags-config--docs-only')).toHaveCount(1); - await expect(preview.locator('#anchor--core-tags-config--test-only')).toHaveCount(0); - }); - test('should correctly add dev, autodocs, test stories', async ({ page }) => { const sbPage = new SbPage(page, expect); diff --git a/code/frameworks/nextjs-vite/src/preset.ts b/code/frameworks/nextjs-vite/src/preset.ts index c3ba7db59ced..eb02256953ee 100644 --- a/code/frameworks/nextjs-vite/src/preset.ts +++ b/code/frameworks/nextjs-vite/src/preset.ts @@ -25,17 +25,17 @@ export const core: PresetProperty<'core'> = async (config, options) => { return { ...config, builder: { - name: import.meta.resolve('@storybook/builder-vite'), + name: fileURLToPath(import.meta.resolve('@storybook/builder-vite')), options: { ...(typeof framework === 'string' ? {} : framework.options.builder || {}), }, }, - renderer: import.meta.resolve('@storybook/react/preset'), + renderer: fileURLToPath(import.meta.resolve('@storybook/react/preset')), }; }; export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { - const result = [...entry, import.meta.resolve('@storybook/nextjs-vite/preview')]; + const result = [...entry, fileURLToPath(import.meta.resolve('@storybook/nextjs-vite/preview'))]; return result; }; diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 06882c0f00c1..d5847d0b839e 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -47,11 +47,11 @@ "@types/cross-spawn": "^6.0.6", "cross-spawn": "^7.0.6", "es-toolkit": "^1.36.0", - "globby": "^14.0.1", "jscodeshift": "^0.15.1", "prettier": "^3.5.3", "storybook": "workspace:*", - "tiny-invariant": "^1.3.1" + "tiny-invariant": "^1.3.1", + "tinyglobby": "^0.2.13" }, "devDependencies": { "@types/jscodeshift": "^0.11.10", diff --git a/code/lib/codemod/src/index.ts b/code/lib/codemod/src/index.ts index 4b9160b9931b..418b6a91ae71 100644 --- a/code/lib/codemod/src/index.ts +++ b/code/lib/codemod/src/index.ts @@ -6,6 +6,7 @@ import { extname, join } from 'node:path'; import { resolvePackageDir } from 'storybook/internal/common'; import { sync as spawnSync } from 'cross-spawn'; +import { glob as tinyglobby } from 'tinyglobby'; import { jscodeshiftToPrettierParser } from './lib/utils'; @@ -59,11 +60,7 @@ export async function runCodemod( } } - // Dynamically import globby because it is a pure ESM module - // eslint-disable-next-line depend/ban-dependencies - const { globby } = await import('globby'); - - const files = await globby([glob, '!**/node_modules', '!**/dist']); + const files = await tinyglobby([glob, '!**/node_modules', '!**/dist']); const extensions = new Set(files.map((file) => extname(file).slice(1))); const commaSeparatedExtensions = Array.from(extensions).join(','); diff --git a/code/package.json b/code/package.json index d77716385dd6..eb76ee219e92 100644 --- a/code/package.json +++ b/code/package.json @@ -281,5 +281,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "10.0.0-beta.2" } diff --git a/code/yarn.lock b/code/yarn.lock index 843aa86b95f6..272bdca6c193 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6297,11 +6297,11 @@ __metadata: ansi-regex: "npm:^6.0.1" cross-spawn: "npm:^7.0.6" es-toolkit: "npm:^1.36.0" - globby: "npm:^14.0.1" jscodeshift: "npm:^0.15.1" prettier: "npm:^3.5.3" storybook: "workspace:*" tiny-invariant: "npm:^1.3.1" + tinyglobby: "npm:^0.2.13" ts-dedent: "npm:^2.2.0" typescript: "npm:^5.8.3" languageName: unknown @@ -7790,7 +7790,7 @@ __metadata: languageName: node linkType: hard -"@types/lodash@npm:*, @types/lodash@npm:^4.17.13": +"@types/lodash@npm:*": version: 4.17.20 resolution: "@types/lodash@npm:4.17.20" checksum: 10c0/98cdd0faae22cbb8079a01a3bb65aa8f8c41143367486c1cbf5adc83f16c9272a2a5d2c1f541f61d0d73da543c16ee1d21cf2ef86cb93cd0cc0ac3bced6dd88f @@ -24447,7 +24447,6 @@ __metadata: "@types/ejs": "npm:^3.1.1" "@types/find-cache-dir": "npm:^5.0.0" "@types/js-yaml": "npm:^4.0.5" - "@types/lodash": "npm:^4.17.13" "@types/node": "npm:^22.0.0" "@types/npmlog": "npm:^7.0.0" "@types/picomatch": "npm:^2.3.0" @@ -24501,7 +24500,6 @@ __metadata: jsdoc-type-pratt-parser: "npm:^4.0.0" lazy-universal-dotenv: "npm:^4.0.0" leven: "npm:^4.0.0" - lodash: "npm:^4.17.21" memfs: "npm:^4.11.1" memoizerific: "npm:^1.11.3" mlly: "npm:^1.7.4" diff --git a/docs/versions/next.json b/docs/versions/next.json index cf6f5447a5fd..aca7c902f6a8 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"10.0.0-beta.1","info":{"plain":"- AddonA11Y: Fix postinstall - [#32309](https://github.com/storybookjs/storybook/pull/32309), thanks @ndelangen!\n- Angular: Properly merge builder options and browserTarget options - [#32272](https://github.com/storybookjs/storybook/pull/32272), thanks @kroeder!\n- Core: Optimize bundlesize, by reusing internal/babel in mocking-utils - [#32350](https://github.com/storybookjs/storybook/pull/32350), thanks @ndelangen!\n- Core: Update tags filter UI - [#32343](https://github.com/storybookjs/storybook/pull/32343), thanks @ghengeveld!\n- Next.js: Avoid multiple webpack versions at runtime - [#32313](https://github.com/storybookjs/storybook/pull/32313), thanks @valentinpalkovic!\n- Next.js: Fix version mismatch error in Webpack - [#32306](https://github.com/storybookjs/storybook/pull/32306), thanks @valentinpalkovic!\n- Svelte & Vue: Add framework-specific `docgen` option to disable docgen processing - [#32319](https://github.com/storybookjs/storybook/pull/32319), thanks @copilot-swe-agent!\n- Svelte: Support `@sveltejs/vite-plugin-svelte` v6 - [#32320](https://github.com/storybookjs/storybook/pull/32320), thanks @JReinhold!\n- Update: Satellite repos after major version bump - [#32303](https://github.com/storybookjs/storybook/pull/32303), thanks @ndelangen!"}} +{"version":"10.0.0-beta.2","info":{"plain":"- Build: Fix dts bundling external detection - [#32366](https://github.com/storybookjs/storybook/pull/32366), thanks @mrginglymus!\n- Codemod: Replace `globby` with `tinyglobby` - [#31407](https://github.com/storybookjs/storybook/pull/31407), thanks @benmccann!\n- Next.js-vite: Use `fileURLToPath` for module resolution in preset - [#32386](https://github.com/storybookjs/storybook/pull/32386), thanks @ndelangen!\n- Tags: Remove undocumented x-only tags - [#32360](https://github.com/storybookjs/storybook/pull/32360), thanks @shilman!\n- Vitest addon: Handle Playwright installation errors gracefully - [#32329](https://github.com/storybookjs/storybook/pull/32329), thanks @ndelangen!"}} diff --git a/scripts/.eslintrc.cjs b/scripts/.eslintrc.cjs index 7a24cfb1425c..2f89276518c1 100644 --- a/scripts/.eslintrc.cjs +++ b/scripts/.eslintrc.cjs @@ -8,7 +8,7 @@ module.exports = { 'plugin:prettier/recommended', 'plugin:react-hooks/recommended', 'plugin:react/recommended', - 'plugin:jsx-a11y/recommended' + 'plugin:jsx-a11y/recommended', ], env: { es6: true, @@ -67,7 +67,7 @@ module.exports = { 'depend/ban-dependencies': [ 'error', { - modules: ['lodash', 'chalk', 'qs', 'handlebars', 'fs-extra'], + modules: ['lodash', 'lodash-es', 'chalk', 'qs', 'handlebars', 'fs-extra'], }, ], }, diff --git a/scripts/build/utils/dts-process.ts b/scripts/build/utils/dts-process.ts index 946b5d172b7f..8cd7b4f3eabd 100644 --- a/scripts/build/utils/dts-process.ts +++ b/scripts/build/utils/dts-process.ts @@ -23,7 +23,7 @@ async function run() { input: entryPoint, external: (id) => { return external.some( - (dep) => id.startsWith(dep) || id.includes(`${sep}node_modules${sep}${dep}${sep}`) + (dep) => id === dep || id.startsWith(`${dep}/`) || id.includes(`${sep}node_modules${sep}${dep}${sep}`) ); }, output: { file: outputFile, format: 'es' },