Skip to content

Commit 9a2abb3

Browse files
authored
Merge pull request #2740 from modernweb-dev/fix/storybook-builder-on-windows
Fix storybook-builder and storybook-framework-web-components on Windows
2 parents d5ae228 + c0fefb0 commit 9a2abb3

14 files changed

+69
-27
lines changed

.changeset/smooth-carrots-rule.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@web/storybook-builder': patch
3+
---
4+
5+
fix storybook-builder on Windows

.changeset/yellow-lies-behave.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@web/storybook-framework-web-components': patch
3+
---
4+
5+
fix storybook-framework-web-components on Windows

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

+40-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,49 @@ name: Verify Storybook Builder
33
on: pull_request
44

55
jobs:
6-
verify-storybook-builder:
6+
verify-storybook-builder-linux:
77
timeout-minutes: 60
8+
name: Linux
89
runs-on: ubuntu-latest
910
steps:
10-
- uses: actions/checkout@v3
11+
- uses: actions/checkout@v4
12+
13+
- name: Setup Node 20
14+
uses: actions/setup-node@v4
15+
env:
16+
FORCE_COLOR: 0
17+
with:
18+
node-version: 20
19+
cache: npm
20+
21+
- name: Install Dependencies
22+
run: npm ci
23+
24+
- name: Build packages
25+
run: npm run build
26+
27+
- name: Symlink built packages binaries (e.g. "wds")
28+
run: npm ci
29+
30+
- name: Install Playwright Browsers
31+
run: npx playwright install --with-deps
32+
33+
- name: Run tests
34+
run: npm run test:storybook-builder
35+
36+
- uses: actions/upload-artifact@v3
37+
if: always()
38+
with:
39+
name: playwright-report
40+
path: packages/storybook-framework-web-components/playwright-report/
41+
retention-days: 30
42+
43+
verify-storybook-builder-windows:
44+
timeout-minutes: 60
45+
name: Windows
46+
runs-on: windows-2022
47+
steps:
48+
- uses: actions/checkout@v4
1149

1250
- name: Setup Node 20
1351
uses: actions/setup-node@v4

packages/storybook-builder/src/esbuild-plugin-commonjs-named-exports.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import type { Plugin } from 'esbuild';
22
import { readFile } from 'fs-extra';
3-
import { dirname } from 'path';
3+
import { dirname, relative } from 'path';
44

55
export function esbuildPluginCommonjsNamedExports(modules: string[]): Plugin {
66
return {
77
name: 'commonjs-named-exports',
88
async setup(build) {
9+
const slash = (await import('slash')).default;
10+
911
const { init, parse } = await import('cjs-module-lexer');
1012
await init();
1113

@@ -56,7 +58,9 @@ export function esbuildPluginCommonjsNamedExports(modules: string[]): Plugin {
5658

5759
return {
5860
resolveDir,
59-
contents: `export { ${finalExports.join(',')} } from '${resolvedPath}';`,
61+
contents: `export { ${finalExports.join(',')} } from '${slash(
62+
relative(resolveDir, resolvedPath),
63+
)}';`,
6064
};
6165
});
6266

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// based on https://github.com/storybookjs/storybook/blob/v7.0.9/code/lib/builder-vite/src/codegen-modern-iframe-script.ts
22

3+
import { normalizePath } from '@rollup/pluginutils';
34
import { loadPreviewOrConfigFile } from '@storybook/core-common';
45
import type { Options, PreviewAnnotation } from '@storybook/types';
56
import { virtualSetupAddonsFilename, virtualStoriesFilename } from './virtual-file-names.js';
@@ -23,7 +24,9 @@ export async function generateAppScript(options: Options) {
2324
const getPreviewAnnotationsFunction = `
2425
const getProjectAnnotations = async () => {
2526
const configs = await Promise.all([
26-
${previewAnnotationURLs.map(previewAnnotation => ` import('${previewAnnotation}')`).join(',\n')}
27+
${previewAnnotationURLs
28+
.map(previewAnnotation => ` import('${normalizePath(previewAnnotation)}')`)
29+
.join(',\n')}
2730
]);
2831
return composeConfigs(configs);
2932
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ async function toImportFn(stories: string[]) {
3434
}
3535

3636
const importPath = toImportPath(relativePath);
37-
let actualPath = `${process.cwd()}/${relativePath}`;
37+
let actualPath = file;
3838
if (actualPath.endsWith('.mdx')) {
3939
actualPath = `${actualPath}.js`;
4040
}

packages/storybook-builder/src/rollup-plugin-mdx.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { compile } from '@storybook/mdx2-csf';
22
import type { Options } from '@storybook/types';
33
import { exists, readFile } from 'fs-extra';
4-
import { isAbsolute } from 'path';
4+
import { isAbsolute, sep } from 'path';
55
import remarkExternalLinks from 'remark-external-links';
66
import remarkSlug from 'remark-slug';
77
import type { Plugin } from 'rollup';
@@ -30,7 +30,7 @@ export function rollupPluginMdx(storybookOptions: Options): Plugin {
3030
if (!id.endsWith('.mdx.js')) return;
3131

3232
const mdxPath = id.replace(/\.js$/, '');
33-
const mdxCode = await readFile(mdxPath, 'utf8');
33+
const mdxCode = await readFile(mdxPath.split('/').join(sep), 'utf8');
3434

3535
const mdxLoaderOptions = await storybookOptions.presets.apply('mdxLoaderOptions', {
3636
...mdxPluginOptions,

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { stringifyProcessEnvs } from '@storybook/core-common';
22
import { build } from 'esbuild';
33
import { remove } from 'fs-extra';
4-
import { join } from 'path';
4+
import { join, normalize } from 'path';
55
import type { Plugin } from 'rollup';
66
import { esbuildPluginCommonjsNamedExports } from './esbuild-plugin-commonjs-named-exports.js';
77
import { getNodeModuleDir } from './get-node-module-dir.js';
88

9-
export const PREBUNDLED_MODULES_DIR = 'node_modules/.prebundled_modules';
9+
export const PREBUNDLED_MODULES_DIR = normalize('node_modules/.prebundled_modules');
1010

1111
export function rollupPluginPrebundleModules(env: Record<string, string>): Plugin {
1212
const modulePaths: Record<string, string> = {};

packages/storybook-framework-web-components/index.d.ts

-2
This file was deleted.

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

+2-6
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,9 @@
1818
".": {
1919
"require": "./dist/index.js",
2020
"import": "./index.mjs",
21-
"types": "./index.d.ts"
22-
},
23-
"./preset": {
24-
"require": "./dist/preset.js",
25-
"import": "./preset.mjs",
26-
"types": "./preset.d.ts"
21+
"types": "./dist/index.d.ts"
2722
},
23+
"./preset": "./preset.js",
2824
"./package.json": "./package.json"
2925
},
3026
"engines": {

packages/storybook-framework-web-components/preset.d.ts

-2
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./dist/preset.js');

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

-6
This file was deleted.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const config = {
2424
}
2525

2626
// ignore warning about eval in telejson
27-
if (log.code === 'EVAL' && log.id?.includes('node_modules/telejson')) {
27+
if (log.code === 'EVAL' && log.id?.replace(/\\/g, '/')?.includes('node_modules/telejson')) {
2828
defaultHandler('warn', log);
2929
return;
3030
}

0 commit comments

Comments
 (0)