Merge pull request #32876 from storybookjs/version-non-patch-from-10.1.0-alpha.0

Release: Prerelease 10.1.0-alpha.1

Author: JReinhold

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 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!
+- Upgrade: Satellite compatible with 10.1 prerelease - [#32877](https://github.com/storybookjs/storybook/pull/32877), thanks @ndelangen!
+
 ## 10.0.0
 
 Storybook 10 contains one breaking change: it’s ESM-only. This simplifies our distribution and reduces install size by 29% while simultaneously unminifying dist code for easier debugging.

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 10.1.0-alpha.1
+
+- 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!
+- Presets: Fix incorrect imports - [#32875](https://github.com/storybookjs/storybook/pull/32875), thanks @ndelangen!
+- Vite: Update `optimizeViteDeps` for addon-docs and addon-vitest - [#32881](https://github.com/storybookjs/storybook/pull/32881), thanks @ndelangen!
+
 ## 10.1.0-alpha.0
 
 

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