fix(storybook-builder): fix tocbot exports for addon-docs

Author: bashmish

.changeset/chilled-chairs-arrive.md

@@ -0,0 +1,5 @@
+---
+'@web/storybook-builder': patch
+---
+
+fix tocbot exports 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,7 +14,7 @@ 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();
 
@@ -40,7 +41,14 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
         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(),
+        ],
       });
     },