Merge pull request #2740 from modernweb-dev/fix/storybook-builder-on-…

…windows

Fix storybook-builder and storybook-framework-web-components on Windows

.changeset/smooth-carrots-rule.md

@@ -0,0 +1,5 @@
+---
+'@web/storybook-builder': patch
+---
+
+fix storybook-builder on Windows

.changeset/yellow-lies-behave.md

@@ -0,0 +1,5 @@
+---
+'@web/storybook-framework-web-components': patch
+---
+
+fix storybook-framework-web-components on Windows

.github/workflows/verify-storybook-builder.yml

@@ -3,11 +3,49 @@ name: Verify Storybook Builder
 on: pull_request
 
 jobs:
-  verify-storybook-builder:
+  verify-storybook-builder-linux:
     timeout-minutes: 60
+    name: Linux
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+
+      - name: Setup Node 20
+        uses: actions/setup-node@v4
+        env:
+          FORCE_COLOR: 0
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build packages
+        run: npm run build
+
+      - name: Symlink built packages binaries (e.g. "wds")
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: npm run test:storybook-builder
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: packages/storybook-framework-web-components/playwright-report/
+          retention-days: 30
+
+  verify-storybook-builder-windows:
+    timeout-minutes: 60
+    name: Windows
+    runs-on: windows-2022
+    steps:
+      - uses: actions/checkout@v4
 
       - name: Setup Node 20
         uses: actions/setup-node@v4

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

packages/storybook-builder/src/generate-app-script.ts

@@ -1,5 +1,6 @@
 // based on https://github.com/storybookjs/storybook/blob/v7.0.9/code/lib/builder-vite/src/codegen-modern-iframe-script.ts
 
+import { normalizePath } from '@rollup/pluginutils';
 import { loadPreviewOrConfigFile } from '@storybook/core-common';
 import type { Options, PreviewAnnotation } from '@storybook/types';
 import { virtualSetupAddonsFilename, virtualStoriesFilename } from './virtual-file-names.js';
@@ -23,7 +24,9 @@ export async function generateAppScript(options: Options) {
   const getPreviewAnnotationsFunction = `
 const getProjectAnnotations = async () => {
   const configs = await Promise.all([
-${previewAnnotationURLs.map(previewAnnotation => `    import('${previewAnnotation}')`).join(',\n')}
+${previewAnnotationURLs
+  .map(previewAnnotation => `    import('${normalizePath(previewAnnotation)}')`)
+  .join(',\n')}
   ]);
   return composeConfigs(configs);
 }

packages/storybook-builder/src/generate-stories-script.ts

@@ -34,7 +34,7 @@ async function toImportFn(stories: string[]) {
     }
 
     const importPath = toImportPath(relativePath);
-    let actualPath = `${process.cwd()}/${relativePath}`;
+    let actualPath = file;
     if (actualPath.endsWith('.mdx')) {
       actualPath = `${actualPath}.js`;
     }

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';
@@ -30,7 +30,7 @@ export function rollupPluginMdx(storybookOptions: Options): Plugin {
       if (!id.endsWith('.mdx.js')) return;
 
       const mdxPath = id.replace(/\.js$/, '');
-      const mdxCode = await readFile(mdxPath, 'utf8');
+      const mdxCode = await readFile(mdxPath.split('/').join(sep), 'utf8');
 
       const mdxLoaderOptions = await storybookOptions.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,

packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts

@@ -1,12 +1,12 @@
 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');
 
 export function rollupPluginPrebundleModules(env: Record<string, string>): Plugin {
   const modulePaths: Record<string, string> = {};

packages/storybook-framework-web-components/package.json

@@ -18,13 +18,9 @@
     ".": {
       "require": "./dist/index.js",
       "import": "./index.mjs",
-      "types": "./index.d.ts"
-    },
-    "./preset": {
-      "require": "./dist/preset.js",
-      "import": "./preset.mjs",
-      "types": "./preset.d.ts"
+      "types": "./dist/index.d.ts"
     },
+    "./preset": "./preset.js",
     "./package.json": "./package.json"
   },
   "engines": {

packages/storybook-framework-web-components/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset.js');

packages/storybook-framework-web-components/tests/fixtures/all-in-one/.storybook/main.js

@@ -24,7 +24,7 @@ const config = {
         }
 
         // ignore warning about eval in telejson
-        if (log.code === 'EVAL' && log.id?.includes('node_modules/telejson')) {
+        if (log.code === 'EVAL' && log.id?.replace(/\\/g, '/')?.includes('node_modules/telejson')) {
           defaultHandler('warn', log);
           return;
         }