diff --git a/CHANGELOG.md b/CHANGELOG.md index 20d3f59c3f95..64305104bdab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 10.0.2 + +- CLI: Fix glob string formatting in csf-factories codemod - [#32880](https://github.com/storybookjs/storybook/pull/32880), thanks @yannbf! +- Core: Improve file path resolution on Windows - [#32893](https://github.com/storybookjs/storybook/pull/32893), thanks @yannbf! +- Vite: Update `optimizeViteDeps` for addon-docs and addon-vitest - [#32881](https://github.com/storybookjs/storybook/pull/32881), thanks @ndelangen! + ## 10.0.1 - Presets: Fix incorrect imports - [#32875](https://github.com/storybookjs/storybook/pull/32875), thanks @ndelangen! diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 28316ad5580d..ef76a7c1750d 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -205,10 +205,9 @@ export const resolvedReact = async (existing: any) => ({ }); const optimizeViteDeps = [ - '@mdx-js/react', '@storybook/addon-docs', '@storybook/addon-docs/blocks', - 'markdown-to-jsx', + '@storybook/addon-docs > @mdx-js/react', ]; export { webpackX as webpack, docsX as docs, optimizeViteDeps }; diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 9b7729538732..2db302d1548c 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -14,6 +14,8 @@ import { listStories } from './list-stories'; const asyncFilter = async (arr: string[], predicate: (val: string) => Promise) => Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index])); +// TODO: This function should be reworked. The code it uses is outdated and we need to investigate +// More info: https://github.com/storybookjs/storybook/issues/32462#issuecomment-3421326557 export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) { const extraOptimizeDeps = await options.presets.apply('optimizeViteDeps', []); @@ -27,10 +29,7 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Options // This function converts ids which might include ` > ` to a real path, if it exists on disk. // See https://github.com/vitejs/vite/blob/67d164392e8e9081dc3f0338c4b4b8eea6c5f7da/packages/vite/src/node/optimizer/index.ts#L182-L199 const resolve = resolvedConfig.createResolver({ asSrc: false }); - const include = await asyncFilter( - Array.from(new Set([...INCLUDE_CANDIDATES, ...extraOptimizeDeps])), - async (id) => Boolean(await resolve(id)) - ); + const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id))); const optimizeDeps: UserConfig['optimizeDeps'] = { ...config.optimizeDeps, @@ -38,7 +37,7 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Options entries: stories, // We need Vite to precompile these dependencies, because they contain non-ESM code that would break // if we served it directly to the browser. - include: [...include, ...(config.optimizeDeps?.include || [])], + include: [...include, ...extraOptimizeDeps, ...(config.optimizeDeps?.include || [])], }; return optimizeDeps; diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts index 202d69563179..37b9ef963038 100644 --- a/code/builders/builder-webpack5/src/index.ts +++ b/code/builders/builder-webpack5/src/index.ts @@ -1,5 +1,4 @@ import { cp } from 'node:fs/promises'; -import { dirname, join, parse } from 'node:path'; import { fileURLToPath } from 'node:url'; import { PREVIEW_BUILDER_PROGRESS } from 'storybook/internal/core-events'; @@ -13,6 +12,7 @@ import type { Builder, Options } from 'storybook/internal/types'; import { checkWebpackVersion } from '@storybook/core-webpack'; +import { dirname, join, parse } from 'pathe'; import prettyTime from 'pretty-hrtime'; import sirv from 'sirv'; import type { Configuration, Stats, StatsOptions } from 'webpack'; diff --git a/code/core/src/core-server/build-dev.ts b/code/core/src/core-server/build-dev.ts index 750920a0cc6f..3aea0bc12953 100644 --- a/code/core/src/core-server/build-dev.ts +++ b/code/core/src/core-server/build-dev.ts @@ -1,5 +1,4 @@ import { readFile } from 'node:fs/promises'; -import { join, relative, resolve } from 'node:path'; import { JsPackageManagerFactory, @@ -20,6 +19,7 @@ import type { BuilderOptions, CLIOptions, LoadOptions, Options } from 'storybook import { global } from '@storybook/global'; +import { join, relative, resolve } from 'pathe'; import prompts from 'prompts'; import invariant from 'tiny-invariant'; import { dedent } from 'ts-dedent'; diff --git a/code/core/src/core-server/build-static.ts b/code/core/src/core-server/build-static.ts index 96679b114bd4..1481ac3018fc 100644 --- a/code/core/src/core-server/build-static.ts +++ b/code/core/src/core-server/build-static.ts @@ -1,6 +1,5 @@ import { cp, mkdir } from 'node:fs/promises'; import { rm } from 'node:fs/promises'; -import { join, relative, resolve } from 'node:path'; import { loadAllPresets, @@ -15,6 +14,7 @@ import type { BuilderOptions, CLIOptions, LoadOptions, Options } from 'storybook import { global } from '@storybook/global'; +import { join, relative, resolve } from 'pathe'; import picocolors from 'picocolors'; import { resolvePackageDir } from '../shared/utils/module'; diff --git a/code/core/src/core-server/load.ts b/code/core/src/core-server/load.ts index baa453682605..0217913fd4d8 100644 --- a/code/core/src/core-server/load.ts +++ b/code/core/src/core-server/load.ts @@ -1,5 +1,3 @@ -import { join, relative, resolve } from 'node:path'; - import { getProjectRoot, loadAllPresets, @@ -12,6 +10,8 @@ import type { BuilderOptions, CLIOptions, LoadOptions, Options } from 'storybook import { global } from '@storybook/global'; +import { join, relative, resolve } from 'pathe'; + import { resolvePackageDir } from '../shared/utils/module'; export async function loadStorybook( diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts index 1bbdb9cca171..63c11d689faa 100644 --- a/code/core/src/core-server/presets/common-preset.ts +++ b/code/core/src/core-server/presets/common-preset.ts @@ -1,6 +1,5 @@ import { existsSync } from 'node:fs'; import { readFile } from 'node:fs/promises'; -import { isAbsolute, join } from 'node:path'; import { fileURLToPath } from 'node:url'; import type { Channel } from 'storybook/internal/channels'; @@ -26,6 +25,7 @@ import type { PresetPropertyFn, } from 'storybook/internal/types'; +import { isAbsolute, join } from 'pathe'; import * as pathe from 'pathe'; import { dedent } from 'ts-dedent'; diff --git a/code/core/src/core-server/presets/favicon.test.ts b/code/core/src/core-server/presets/favicon.test.ts index dada54a547ca..a9bb42cc4edb 100644 --- a/code/core/src/core-server/presets/favicon.test.ts +++ b/code/core/src/core-server/presets/favicon.test.ts @@ -1,10 +1,11 @@ import * as fs from 'node:fs'; -import { dirname, join } from 'node:path'; import { expect, it, vi } from 'vitest'; import { logger } from 'storybook/internal/node-logger'; +import { dirname, join, normalize } from 'pathe'; + import * as m from './common-preset'; // mock src/core-server/utils/constants.ts:8:27 @@ -75,67 +76,73 @@ it('with no staticDirs favicon should return default', async () => { it('with staticDirs referencing a favicon.ico directly should return the found favicon', async () => { const location = 'favicon.ico'; existsSyncMock.mockImplementation((p) => { - return p === createPath(location); + return normalize(String(p)) === normalize(createPath(location)); }); statSyncMock.mockImplementation((p) => { return { - isFile: () => p === createPath('favicon.ico'), + isFile: () => normalize(String(p)) === normalize(createPath('favicon.ico')), } as any; }); const options = createOptions([location]); - expect(await m.favicon(undefined, options)).toBe(createPath('favicon.ico')); + expect(normalize(await m.favicon(undefined, options))).toBe(normalize(createPath('favicon.ico'))); }); it('with staticDirs containing a single favicon.ico should return the found favicon', async () => { const location = 'static'; existsSyncMock.mockImplementation((p) => { - if (p === createPath(location)) { + if (normalize(String(p)) === normalize(createPath(location))) { return true; } - if (p === createPath(location, 'favicon.ico')) { + if (normalize(String(p)) === normalize(createPath(location, 'favicon.ico'))) { return true; } return false; }); const options = createOptions([location]); - expect(await m.favicon(undefined, options)).toBe(createPath(location, 'favicon.ico')); + expect(normalize(await m.favicon(undefined, options))).toBe( + normalize(createPath(location, 'favicon.ico')) + ); }); it('with staticDirs containing a single favicon.svg should return the found favicon', async () => { const location = 'static'; existsSyncMock.mockImplementation((p) => { - if (p === createPath(location)) { + if (normalize(String(p)) === normalize(createPath(location))) { return true; } - if (p === createPath(location, 'favicon.svg')) { + if (normalize(String(p)) === normalize(createPath(location, 'favicon.svg'))) { return true; } return false; }); const options = createOptions([location]); - expect(await m.favicon(undefined, options)).toBe(createPath(location, 'favicon.svg')); + expect(normalize(await m.favicon(undefined, options))).toBe( + normalize(createPath(location, 'favicon.svg')) + ); }); it('with staticDirs containing a multiple favicons should return the first favicon and warn', async () => { const location = 'static'; existsSyncMock.mockImplementation((p) => { - if (p === createPath(location)) { + if (normalize(String(p)) === normalize(createPath(location))) { return true; } - if (p === createPath(location, 'favicon.ico')) { + if (normalize(String(p)) === normalize(createPath(location, 'favicon.ico'))) { return true; } - if (p === createPath(location, 'favicon.svg')) { + if (normalize(String(p)) === normalize(createPath(location, 'favicon.svg'))) { return true; } return false; }); const options = createOptions([location]); - expect(await m.favicon(undefined, options)).toBe(createPath(location, 'favicon.svg')); + expect(normalize(await m.favicon(undefined, options))).toBe( + normalize(createPath(location, 'favicon.svg')) + ); expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('multiple favicons')); }); @@ -144,23 +151,25 @@ it('with multiple staticDirs containing a multiple favicons should return the fi const locationA = 'static-a'; const locationB = 'static-b'; existsSyncMock.mockImplementation((p) => { - if (p === createPath(locationA)) { + if (normalize(String(p)) === normalize(createPath(locationA))) { return true; } - if (p === createPath(locationB)) { + if (normalize(String(p)) === normalize(createPath(locationB))) { return true; } - if (p === createPath(locationA, 'favicon.ico')) { + if (normalize(String(p)) === normalize(createPath(locationA, 'favicon.ico'))) { return true; } - if (p === createPath(locationB, 'favicon.svg')) { + if (normalize(String(p)) === normalize(createPath(locationB, 'favicon.svg'))) { return true; } return false; }); const options = createOptions([locationA, locationB]); - expect(await m.favicon(undefined, options)).toBe(createPath(locationA, 'favicon.ico')); + expect(normalize(await m.favicon(undefined, options))).toBe( + normalize(createPath(locationA, 'favicon.ico')) + ); expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('multiple favicons')); }); diff --git a/code/lib/cli-storybook/src/codemod/csf-factories.ts b/code/lib/cli-storybook/src/codemod/csf-factories.ts index ab05ddc55b87..5ab36e88e111 100644 --- a/code/lib/cli-storybook/src/codemod/csf-factories.ts +++ b/code/lib/cli-storybook/src/codemod/csf-factories.ts @@ -38,8 +38,7 @@ async function runStoriesCodemod(options: { command: packageManager.getRemoteRunCommand('storybook', [ 'migrate', 'csf-2-to-3', - '--glob', - globString, + `--glob='${globString}'`, ]), args: [], stdio: 'ignore', diff --git a/code/package.json b/code/package.json index dd169ed0e31a..9d2fcdb692e4 100644 --- a/code/package.json +++ b/code/package.json @@ -106,12 +106,12 @@ "typescript": "^5.8.3" }, "dependencies": { - "@chromatic-com/storybook": "^4.1.1", + "@chromatic-com/storybook": "^4.1.2", "@nx/vite": "20.8.2", "@nx/workspace": "20.8.2", "@playwright/test": "1.52.0", "@storybook/addon-a11y": "workspace:*", - "@storybook/addon-designs": "10.0.3--canary.67522d1.0", + "@storybook/addon-designs": "^11.0.1", "@storybook/addon-docs": "workspace:*", "@storybook/addon-links": "workspace:*", "@storybook/addon-onboarding": "workspace:*", @@ -245,6 +245,7 @@ "type": "opencollective", "url": "https://opencollective.com/storybook" }, + "deferredNextVersion": "10.0.2", "nx": { "name": "root", "includedScripts": [] diff --git a/code/yarn.lock b/code/yarn.lock index 15ed8a2e106e..0f140f17d22c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2089,9 +2089,9 @@ __metadata: languageName: node linkType: hard -"@chromatic-com/storybook@npm:^4.1.1": - version: 4.1.1 - resolution: "@chromatic-com/storybook@npm:4.1.1" +"@chromatic-com/storybook@npm:^4.1.2": + version: 4.1.2 + resolution: "@chromatic-com/storybook@npm:4.1.2" dependencies: "@neoconfetti/react": "npm:^1.0.0" chromatic: "npm:^12.0.0" @@ -2099,8 +2099,8 @@ __metadata: jsonfile: "npm:^6.1.0" strip-ansi: "npm:^7.1.0" peerDependencies: - storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0 || ^10.0.0-0 - checksum: 10c0/7c343305a6feedfddf123b302e5b0aea5bd09fa5722e5d81d6f331d6d8282825002b55e9360d438c71edc7344e622d4f573804255fc779d5dd39d6d09b2fa6ea + storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 + checksum: 10c0/1719a79acba4a6e851b0729724f049fae99c904a9619916d877ec05524cd6bc4141908b8d11aef4dfe9724fbeb6d3629ffbc8ea15f1ac5b59d5317b93a70a510 languageName: node linkType: hard @@ -6095,16 +6095,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-designs@npm:10.0.3--canary.67522d1.0": - version: 10.0.3--canary.67522d1.0 - resolution: "@storybook/addon-designs@npm:10.0.3--canary.67522d1.0" +"@storybook/addon-designs@npm:^11.0.1": + version: 11.0.1 + resolution: "@storybook/addon-designs@npm:11.0.1" dependencies: "@figspec/react": "npm:^1.0.0" peerDependencies: - "@storybook/addon-docs": ^10.0.0 || ^10.0.0-0 + "@storybook/addon-docs": ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - storybook: ^10.0.0 || ^10.0.0-0 + storybook: ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 peerDependenciesMeta: "@storybook/addon-docs": optional: true @@ -6112,7 +6112,7 @@ __metadata: optional: true react-dom: optional: true - checksum: 10c0/050fa029304f998904944300c19a9fa85393e7177b0a84a2125fbccce55c21c4edd2be58a94ca27d1164d67bee07a5b4b09ca1e933c794987b2426857875e542 + checksum: 10c0/69aca21c9be81345c91c782a72d7b2d90633581ef28be582836af1d9a7ddcc7515816391020b0ae947058bc59fd56c439a4b957a46ece6439cfbf8bfd1e0e2e7 languageName: node linkType: hard @@ -6847,12 +6847,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." dependencies: - "@chromatic-com/storybook": "npm:^4.1.1" + "@chromatic-com/storybook": "npm:^4.1.2" "@nx/vite": "npm:20.8.2" "@nx/workspace": "npm:20.8.2" "@playwright/test": "npm:1.52.0" "@storybook/addon-a11y": "workspace:*" - "@storybook/addon-designs": "npm:10.0.3--canary.67522d1.0" + "@storybook/addon-designs": "npm:^11.0.1" "@storybook/addon-docs": "workspace:*" "@storybook/addon-links": "workspace:*" "@storybook/addon-onboarding": "workspace:*" diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 2a443378c20a..9c6e2a4a683d 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1,6 @@ -{"version":"10.0.1","info":{"plain":"- Presets: Fix incorrect imports - [#32875](https://github.com/storybookjs/storybook/pull/32875), thanks @ndelangen!\n- Upgrade: Satellite compatible with 10.1 prerelease - [#32877](https://github.com/storybookjs/storybook/pull/32877), thanks @ndelangen!"}} \ No newline at end of file +{ + "version": "10.0.2", + "info": { + "plain": "- CLI: Fix glob string formatting in csf-factories codemod - [#32880](https://github.com/storybookjs/storybook/pull/32880), thanks @yannbf!\n- Core: Improve file path resolution on Windows - [#32893](https://github.com/storybookjs/storybook/pull/32893), thanks @yannbf!\n- Vite: Update `optimizeViteDeps` for addon-docs and addon-vitest - [#32881](https://github.com/storybookjs/storybook/pull/32881), thanks @ndelangen!" + } +} diff --git a/test-storybooks/yarn-pnp/package.json b/test-storybooks/yarn-pnp/package.json index 6c2f314f9013..63e2d3e7eca3 100644 --- a/test-storybooks/yarn-pnp/package.json +++ b/test-storybooks/yarn-pnp/package.json @@ -54,7 +54,7 @@ "react-dom": "^19.1.0" }, "devDependencies": { - "@chromatic-com/storybook": "^4.1.1", + "@chromatic-com/storybook": "^4.1.2", "@eslint/js": "^9.29.0", "@playwright/test": "1.52.0", "@storybook/addon-a11y": "9.1.0-alpha.6",