Merge pull request #32893 from storybookjs/yann/fix-preset-path-joining-windows

Core: Improve file path resolution on Windows
(cherry picked from commit dd000a8)

Author: ndelangen

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