diff --git a/.changeset/smooth-carrots-rule.md b/.changeset/smooth-carrots-rule.md new file mode 100644 index 000000000..de5c13736 --- /dev/null +++ b/.changeset/smooth-carrots-rule.md @@ -0,0 +1,5 @@ +--- +'@web/storybook-builder': patch +--- + +fix storybook-builder on Windows diff --git a/.changeset/yellow-lies-behave.md b/.changeset/yellow-lies-behave.md new file mode 100644 index 000000000..1308d4768 --- /dev/null +++ b/.changeset/yellow-lies-behave.md @@ -0,0 +1,5 @@ +--- +'@web/storybook-framework-web-components': patch +--- + +fix storybook-framework-web-components on Windows diff --git a/.github/workflows/verify-storybook-builder.yml b/.github/workflows/verify-storybook-builder.yml index b5eab9959..255bf1a3d 100644 --- a/.github/workflows/verify-storybook-builder.yml +++ b/.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 diff --git a/packages/storybook-builder/src/esbuild-plugin-commonjs-named-exports.ts b/packages/storybook-builder/src/esbuild-plugin-commonjs-named-exports.ts index 636294f5b..3f5b87c4d 100644 --- 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-app-script.ts b/packages/storybook-builder/src/generate-app-script.ts index 643e44355..392ab586a 100644 --- a/packages/storybook-builder/src/generate-app-script.ts +++ b/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); } diff --git a/packages/storybook-builder/src/generate-stories-script.ts b/packages/storybook-builder/src/generate-stories-script.ts index 2f2d192a4..d32ba7b15 100644 --- a/packages/storybook-builder/src/generate-stories-script.ts +++ b/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`; } diff --git a/packages/storybook-builder/src/rollup-plugin-mdx.ts b/packages/storybook-builder/src/rollup-plugin-mdx.ts index 8f46a590f..6f5597012 100644 --- 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'; @@ -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, diff --git a/packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts b/packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts index 96a7b8029..864c80c7d 100644 --- a/packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts +++ b/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): Plugin { const modulePaths: Record = {}; diff --git a/packages/storybook-framework-web-components/index.d.ts b/packages/storybook-framework-web-components/index.d.ts deleted file mode 100644 index 06811aaaf..000000000 --- a/packages/storybook-framework-web-components/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -// this file is autogenerated with the generate-mjs-dts-entrypoints script -export * from './dist/index.js'; diff --git a/packages/storybook-framework-web-components/package.json b/packages/storybook-framework-web-components/package.json index 0042ea391..299e1b013 100644 --- a/packages/storybook-framework-web-components/package.json +++ b/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": { diff --git a/packages/storybook-framework-web-components/preset.d.ts b/packages/storybook-framework-web-components/preset.d.ts deleted file mode 100644 index 0c87188b2..000000000 --- a/packages/storybook-framework-web-components/preset.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -// this file is autogenerated with the generate-mjs-dts-entrypoints script -export * from './dist/preset.js'; diff --git a/packages/storybook-framework-web-components/preset.js b/packages/storybook-framework-web-components/preset.js new file mode 100644 index 000000000..ecf1572f9 --- /dev/null +++ b/packages/storybook-framework-web-components/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/preset.js'); diff --git a/packages/storybook-framework-web-components/preset.mjs b/packages/storybook-framework-web-components/preset.mjs deleted file mode 100644 index 27db30440..000000000 --- a/packages/storybook-framework-web-components/preset.mjs +++ /dev/null @@ -1,6 +0,0 @@ -// this file is autogenerated with the generate-mjs-dts-entrypoints script -import cjsEntrypoint from './dist/preset.js'; - -const { core } = cjsEntrypoint; - -export { core }; diff --git a/packages/storybook-framework-web-components/tests/fixtures/all-in-one/.storybook/main.js b/packages/storybook-framework-web-components/tests/fixtures/all-in-one/.storybook/main.js index efa4391bd..cf030a28f 100644 --- a/packages/storybook-framework-web-components/tests/fixtures/all-in-one/.storybook/main.js +++ b/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; }