fix(storybook-builder): fix paths on Windows

modernweb-dev · May 28, 2024 · 51d9704 · 51d9704
1 parent 7398620
commit 51d9704
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/packages/storybook-builder/src/esbuild-plugin-commonjs-named-exports.ts b/packages/storybook-builder/src/esbuild-plugin-commonjs-named-exports.ts
@@ -1,11 +1,13 @@
 import type { Plugin } from 'esbuild';
 import { readFile } from 'fs-extra';
-import { dirname } from 'path';
+import { dirname, relative } from 'path';
 
 export function esbuildPluginCommonjsNamedExports(modules: string[]): Plugin {
   return {
     name: 'commonjs-named-exports',
     async setup(build) {
+      const slash = (await import('slash')).default;
+
       const { init, parse } = await import('cjs-module-lexer');
       await init();
 
@@ -56,7 +58,9 @@ export function esbuildPluginCommonjsNamedExports(modules: string[]): Plugin {
 
         return {
           resolveDir,
-          contents: `export { ${finalExports.join(',')} } from '${resolvedPath}';`,
+          contents: `export { ${finalExports.join(',')} } from '${slash(
+            relative(resolveDir, resolvedPath),
+          )}';`,
         };
       });
 

diff --git a/packages/storybook-builder/src/generate-stories-script.ts b/packages/storybook-builder/src/generate-stories-script.ts
@@ -4,6 +4,7 @@ import { normalizePath } from '@rollup/pluginutils';
 import { logger } from '@storybook/node-logger';
 import type { Options } from '@storybook/types';
 import * as path from 'path';
+import { pathToFileURL } from 'url';
 import { listStories } from './list-stories.js';
 
 /**
@@ -15,7 +16,11 @@ export async function generateStoriesScript(options: Options) {
   const stories = await listStories(options);
 
   // We can then call toImportFn to create a function that can be used to load each story dynamically.
-  return (await toImportFn(stories)).trim();
+  const code = (await toImportFn(stories)).trim();
+
+  console.log('generateStoriesScript', code);
+
+  return code;
 }
 
 /**
@@ -34,7 +39,7 @@ async function toImportFn(stories: string[]) {
     }
 
     const importPath = toImportPath(relativePath);
-    let actualPath = `${process.cwd()}/${relativePath}`;
+    let actualPath = path.join(process.cwd(), relativePath);
     if (actualPath.endsWith('.mdx')) {
       actualPath = `${actualPath}.js`;
     }

diff --git a/packages/storybook-builder/src/rollup-plugin-mdx.ts b/packages/storybook-builder/src/rollup-plugin-mdx.ts
@@ -1,7 +1,7 @@
 import { compile } from '@storybook/mdx2-csf';
 import type { Options } from '@storybook/types';
 import { exists, readFile } from 'fs-extra';
-import { isAbsolute } from 'path';
+import { isAbsolute, sep } from 'path';
 import remarkExternalLinks from 'remark-external-links';
 import remarkSlug from 'remark-slug';
 import type { Plugin } from 'rollup';
@@ -23,14 +23,19 @@ export function rollupPluginMdx(storybookOptions: Options): Plugin {
     async resolveId(id) {
       if (id.endsWith('.mdx.js')) {
         return id;
+        console.log('resolveId > id', id);
       }
     },
 
     async load(id) {
       if (!id.endsWith('.mdx.js')) return;
 
       const mdxPath = id.replace(/\.js$/, '');
-      const mdxCode = await readFile(mdxPath, 'utf8');
+
+      console.log('load > mdxPath', mdxPath);
+      console.log('load > mdxPath.split(/).join(sep)', mdxPath.split('/').join(sep));
+
+      const mdxCode = await readFile(mdxPath.split('/').join(sep), 'utf8');
 
       const mdxLoaderOptions = await storybookOptions.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,

diff --git a/packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts b/packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts
@@ -1,12 +1,13 @@
 import { stringifyProcessEnvs } from '@storybook/core-common';
 import { build } from 'esbuild';
 import { remove } from 'fs-extra';
-import { join } from 'path';
+import { join, normalize } from 'path';
 import type { Plugin } from 'rollup';
 import { esbuildPluginCommonjsNamedExports } from './esbuild-plugin-commonjs-named-exports.js';
 import { getNodeModuleDir } from './get-node-module-dir.js';
 
-export const PREBUNDLED_MODULES_DIR = 'node_modules/.prebundled_modules';
+export const PREBUNDLED_MODULES_DIR = normalize('node_modules/.prebundled_modules');
+console.log('PREBUNDLED_MODULES_DIR', PREBUNDLED_MODULES_DIR);
 
 export function rollupPluginPrebundleModules(env: Record<string, string>): Plugin {
   const modulePaths: Record<string, string> = {};