Skip to content

Commit 5f2f2bd

Browse files
authored
Merge pull request #2657 from modernweb-dev/fix/storybook-builder-addon-docs
Multiple fixes for @storybook/addon-docs
2 parents 07213e5 + 916da5f commit 5f2f2bd

5 files changed

+86
-15
lines changed

.changeset/chilled-chairs-arrive.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@web/storybook-builder': patch
3+
---
4+
5+
fix tocbot exports for addon-docs

.changeset/quiet-snails-roll.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@web/storybook-builder': patch
3+
---
4+
5+
prebundle required CommonJS modules for addon-docs

.changeset/rude-deers-breathe.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@web/storybook-builder': patch
3+
---
4+
5+
resolve @storybook/react-dom-shim for addon-docs
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { Plugin } from 'esbuild';
2+
3+
export function esbuildPluginCommonjsNamedExports(module: string, namedExports: string[]): Plugin {
4+
return {
5+
name: 'commonjs-named-exports',
6+
setup(build) {
7+
build.onResolve({ filter: new RegExp(`^${module}$`) }, args => {
8+
return {
9+
path: args.path,
10+
namespace: `commonjs-named-exports-${module}`,
11+
pluginData: {
12+
resolveDir: args.resolveDir,
13+
},
14+
};
15+
});
16+
build.onLoad({ filter: /.*/, namespace: `commonjs-named-exports-${module}` }, async args => {
17+
return {
18+
resolveDir: args.pluginData.resolveDir,
19+
contents: `
20+
import { default as commonjsExports } from '${module}?force-original';
21+
${namedExports
22+
.map(name => `export const ${name} = commonjsExports.${name};`)
23+
.join('\n')}
24+
`,
25+
};
26+
});
27+
},
28+
};
29+
}

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

+42-15
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { stringifyProcessEnvs } from '@storybook/core-common';
22
import { build } from 'esbuild';
33
import { join } from 'path';
44
import type { Plugin } from 'rollup';
5+
import { esbuildPluginCommonjsNamedExports } from './esbuild-plugin-commonjs-named-exports.js';
56
import { getNodeModuleDir } from './get-node-module-dir.js';
67

78
export const PREBUNDLED_MODULES_DIR = 'node_modules/.prebundled_modules';
@@ -13,9 +14,9 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
1314
name: 'rollup-plugin-prebundle-modules',
1415

1516
async buildStart() {
16-
const esbuildCommonjsPlugin = (await import('@chialab/esbuild-plugin-commonjs')).default; // for CJS compatibility
17+
const esbuildPluginCommonjs = (await import('@chialab/esbuild-plugin-commonjs')).default; // for CJS compatibility
1718

18-
const modules = getModules();
19+
const modules = CANDIDATES.filter(moduleExists);
1920

2021
for (const module of modules) {
2122
modulePaths[module] = join(
@@ -36,11 +37,23 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
3637
assert: require.resolve('browser-assert'),
3738
lodash: getNodeModuleDir('lodash-es'), // more optimal, but also solves esbuild incorrectly compiling lodash/_nodeUtil
3839
path: require.resolve('path-browserify'),
40+
41+
/* for @storybook/addon-docs */
42+
...(moduleExists('@storybook/react-dom-shim') && {
43+
'@storybook/react-dom-shim': getReactDomShimAlias(),
44+
}),
3945
},
4046
define: {
4147
...stringifyProcessEnvs(env),
4248
},
43-
plugins: [esbuildCommonjsPlugin()],
49+
plugins: [
50+
/* for @storybook/addon-docs */
51+
// tocbot can't be automatically transformed by @chialab/esbuild-plugin-commonjs
52+
// so we need a manual wrapper
53+
esbuildPluginCommonjsNamedExports('tocbot', ['init', 'destroy']),
54+
55+
esbuildPluginCommonjs(),
56+
],
4457
});
4558
},
4659

@@ -50,18 +63,6 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
5063
};
5164
}
5265

53-
function getModules() {
54-
const include = CANDIDATES.filter(id => {
55-
try {
56-
require.resolve(id, { paths: [process.cwd()] });
57-
return true;
58-
} catch (e) {
59-
return false;
60-
}
61-
});
62-
return include;
63-
}
64-
6566
// this is different to https://github.com/storybookjs/storybook/blob/v7.0.0/code/lib/builder-vite/src/optimizeDeps.ts#L7
6667
// builder-vite bundles different dependencies for performance reasons
6768
// we aim only at browserifying NodeJS dependencies (CommonJS/process.env/...)
@@ -80,6 +81,32 @@ export const CANDIDATES = [
8081
'@testing-library/user-event',
8182

8283
/* for @storybook/addon-docs */
84+
'@storybook/react-dom-shim', // needs special resolution
85+
'color-convert',
8386
'doctrine',
87+
'lodash/cloneDeep.js',
8488
'lodash/mapValues.js',
89+
'lodash/pickBy.js',
90+
'lodash/throttle.js',
91+
'lodash/uniq.js',
92+
'memoizerific',
93+
'react',
94+
'react-dom',
95+
'tocbot',
8596
];
97+
98+
function getReactDomShimAlias() {
99+
const { version } = require('react-dom');
100+
return version.startsWith('18')
101+
? require.resolve('@storybook/react-dom-shim/dist/react-18').replace(/\.js$/, '.mjs')
102+
: require.resolve('@storybook/react-dom-shim').replace(/\.js$/, '.mjs');
103+
}
104+
105+
function moduleExists(moduleName: string) {
106+
try {
107+
require.resolve(moduleName, { paths: [process.cwd()] });
108+
return true;
109+
} catch (e) {
110+
return false;
111+
}
112+
}

0 commit comments

Comments
 (0)