Merge pull request #16445 from storybookjs/16237-fix-windows-story-index

Core: Fix some slashes for windows

lib/builder-webpack4/src/preview/iframe-webpack.config.ts

@@ -98,14 +98,16 @@ export default async (options: Options & Record<string, any>): Promise<Configura
     const storiesPath = path.resolve(path.join(workingDir, storiesFilename));
 
     virtualModuleMapping[storiesPath] = toImportFn(stories);
+
     const configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
     virtualModuleMapping[configEntryPath] = handlebars(
       await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')),
       {
         storiesFilename,
         configs,
       }
-    );
+      // We need to double escape `\` for webpack. We may have some in windows paths
+    ).replace(/\\/g, '\\\\');
     entries.push(configEntryPath);
   } else {
     const frameworkInitEntry = path.resolve(

lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -99,7 +99,8 @@ export default async (options: Options & Record<string, any>): Promise<Configura
         storiesFilename,
         configs,
       }
-    );
+      // We need to double escape `\` for webpack. We may have some in windows paths
+    ).replace(/\\/g, '\\\\');
     entries.push(configEntryPath);
   } else {
     const frameworkInitEntry = path.resolve(

lib/core-common/src/utils/glob-to-regexp.ts

@@ -22,6 +22,6 @@ export function globToRegex(glob: string) {
   // Globs starting `**` require special treatment due to the regex they
   // produce, specifically a negative look-ahead
   return new RegExp(
-    ['^\\.', glob.startsWith('./**') ? '' : '\\/', regex.source.substring(1)].join('')
+    ['^\\.', glob.startsWith('./**') ? '' : '[\\\\/]', regex.source.substring(1)].join('')
   );
 }

lib/core-server/package.json

@@ -74,6 +74,7 @@
     "prompts": "^2.4.0",
     "regenerator-runtime": "^0.13.7",
     "serve-favicon": "^2.5.0",
+    "slash": "^3.0.0",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2",
     "watchpack": "^2.2.0",

lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -1,6 +1,7 @@
 import path from 'path';
 import fs from 'fs-extra';
 import glob from 'globby';
+import slash from 'slash';
 
 import {
   autoTitleFromSpecifier,
@@ -57,7 +58,9 @@ export class StoryIndexGenerator {
       this.specifiers.map(async (specifier) => {
         const pathToSubIndex = {} as SpecifierStoriesCache;
 
-        const fullGlob = path.join(this.options.workingDir, specifier.directory, specifier.files);
+        const fullGlob = slash(
+          path.join(this.options.workingDir, specifier.directory, specifier.files)
+        );
         const files = await glob(fullGlob);
         files.forEach((absolutePath: Path) => {
           const ext = path.extname(absolutePath);
@@ -100,7 +103,7 @@ export class StoryIndexGenerator {
       const entry = this.storyIndexEntries.get(specifier);
       const fileStories = {} as StoryIndex['stories'];
 
-      const importPath = relativePath[0] === '.' ? relativePath : `./${relativePath}`;
+      const importPath = slash(relativePath[0] === '.' ? relativePath : `./${relativePath}`);
       const defaultTitle = autoTitleFromSpecifier(importPath, specifier);
       const csf = (await readCsfOrMdx(absolutePath, { defaultTitle })).parse();
       csf.stories.forEach(({ id, name }) => {

lib/core-server/src/utils/watch-story-specifiers.ts

@@ -1,4 +1,5 @@
 import Watchpack from 'watchpack';
+import slash from 'slash';
 import fs from 'fs';
 import path from 'path';
 import glob from 'globby';
@@ -38,7 +39,10 @@ export function watchStorySpecifiers(
   });
 
   async function onChangeOrRemove(watchpackPath: Path, removed: boolean) {
-    const importPath = toImportPath(watchpackPath);
+    // Watchpack passes paths either with no leading './' - e.g. `src/Foo.stories.js`,
+    // or with a leading `../` (etc), e.g. `../src/Foo.stories.js`.
+    // We want to deal in importPaths relative to the working dir, or absolute paths.
+    const importPath = slash(watchpackPath.startsWith('.') ? watchpackPath : `./${watchpackPath}`);
 
     const matchingSpecifier = specifiers.find((ns) => ns.importPathMatcher.exec(importPath));
     if (matchingSpecifier) {

yarn.lock

@@ -8171,6 +8171,7 @@ __metadata:
     prompts: ^2.4.0
     regenerator-runtime: ^0.13.7
     serve-favicon: ^2.5.0
+    slash: ^3.0.0
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
     watchpack: ^2.2.0