Merge pull request #2657 from modernweb-dev/fix/storybook-builder-addon-docs

Multiple fixes for @storybook/addon-docs

Author: bashmish

.changeset/chilled-chairs-arrive.md

@@ -0,0 +1,5 @@
+---
+'@web/storybook-builder': patch
+---
+
+fix tocbot exports for addon-docs

.changeset/quiet-snails-roll.md

@@ -0,0 +1,5 @@
+---
+'@web/storybook-builder': patch
+---
+
+prebundle required CommonJS modules for addon-docs

.changeset/rude-deers-breathe.md

@@ -0,0 +1,5 @@
+---
+'@web/storybook-builder': patch
+---
+
+resolve @storybook/react-dom-shim for addon-docs

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

@@ -0,0 +1,29 @@
+import type { Plugin } from 'esbuild';
+
+export function esbuildPluginCommonjsNamedExports(module: string, namedExports: string[]): Plugin {
+  return {
+    name: 'commonjs-named-exports',
+    setup(build) {
+      build.onResolve({ filter: new RegExp(`^${module}$`) }, args => {
+        return {
+          path: args.path,
+          namespace: `commonjs-named-exports-${module}`,
+          pluginData: {
+            resolveDir: args.resolveDir,
+          },
+        };
+      });
+      build.onLoad({ filter: /.*/, namespace: `commonjs-named-exports-${module}` }, async args => {
+        return {
+          resolveDir: args.pluginData.resolveDir,
+          contents: `
+            import { default as commonjsExports } from '${module}?force-original';
+            ${namedExports
+              .map(name => `export const ${name} = commonjsExports.${name};`)
+              .join('\n')}
+          `,
+        };
+      });
+    },
+  };
+}

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

@@ -2,6 +2,7 @@ import { stringifyProcessEnvs } from '@storybook/core-common';
 import { build } from 'esbuild';
 import { join } 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';
@@ -13,9 +14,9 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
     name: 'rollup-plugin-prebundle-modules',
 
     async buildStart() {
-      const esbuildCommonjsPlugin = (await import('@chialab/esbuild-plugin-commonjs')).default; // for CJS compatibility
+      const esbuildPluginCommonjs = (await import('@chialab/esbuild-plugin-commonjs')).default; // for CJS compatibility
 
-      const modules = getModules();
+      const modules = CANDIDATES.filter(moduleExists);
 
       for (const module of modules) {
         modulePaths[module] = join(
@@ -36,11 +37,23 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
           assert: require.resolve('browser-assert'),
           lodash: getNodeModuleDir('lodash-es'), // more optimal, but also solves esbuild incorrectly compiling lodash/_nodeUtil
           path: require.resolve('path-browserify'),
+
+          /* for @storybook/addon-docs */
+          ...(moduleExists('@storybook/react-dom-shim') && {
+            '@storybook/react-dom-shim': getReactDomShimAlias(),
+          }),
         },
         define: {
           ...stringifyProcessEnvs(env),
         },
-        plugins: [esbuildCommonjsPlugin()],
+        plugins: [
+          /* for @storybook/addon-docs */
+          // tocbot can't be automatically transformed by @chialab/esbuild-plugin-commonjs
+          // so we need a manual wrapper
+          esbuildPluginCommonjsNamedExports('tocbot', ['init', 'destroy']),
+
+          esbuildPluginCommonjs(),
+        ],
       });
     },
 
@@ -50,18 +63,6 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
   };
 }
 
-function getModules() {
-  const include = CANDIDATES.filter(id => {
-    try {
-      require.resolve(id, { paths: [process.cwd()] });
-      return true;
-    } catch (e) {
-      return false;
-    }
-  });
-  return include;
-}
-
 // this is different to https://github.com/storybookjs/storybook/blob/v7.0.0/code/lib/builder-vite/src/optimizeDeps.ts#L7
 // builder-vite bundles different dependencies for performance reasons
 // we aim only at browserifying NodeJS dependencies (CommonJS/process.env/...)
@@ -80,6 +81,32 @@ export const CANDIDATES = [
   '@testing-library/user-event',
 
   /* for @storybook/addon-docs */
+  '@storybook/react-dom-shim', // needs special resolution
+  'color-convert',
   'doctrine',
+  'lodash/cloneDeep.js',
   'lodash/mapValues.js',
+  'lodash/pickBy.js',
+  'lodash/throttle.js',
+  'lodash/uniq.js',
+  'memoizerific',
+  'react',
+  'react-dom',
+  'tocbot',
 ];
+
+function getReactDomShimAlias() {
+  const { version } = require('react-dom');
+  return version.startsWith('18')
+    ? require.resolve('@storybook/react-dom-shim/dist/react-18').replace(/\.js$/, '.mjs')
+    : require.resolve('@storybook/react-dom-shim').replace(/\.js$/, '.mjs');
+}
+
+function moduleExists(moduleName: string) {
+  try {
+    require.resolve(moduleName, { paths: [process.cwd()] });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}