Release: Patch 10.0.2

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!

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 };

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<boolean>) =>
   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,18 +29,15 @@ 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,
     // We don't need to resolve the glob since vite supports globs for entries.
     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;

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';

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';

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';

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(

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';
 

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'));
 });

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',

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": []

code/yarn.lock

@@ -2089,18 +2089,18 @@ __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"
     filesize: "npm:^10.0.12"
     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,24 +6095,24 @@ __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
     react:
       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:*"

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!"}}
+{
+  "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!"
+  }
+}

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",