externalize candidatesm solve jsx-runtim and minimize bundling

Author: bashmish

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

@@ -15,6 +15,9 @@ export function esbuildPluginCommonjsNamedExports(modules: string[]): Plugin {
         if (args.pluginData?.preventInfiniteRecursion) return;
 
         const { path, ...rest } = args;
+        rest.kind = 'entry-point'; // forces resolution to the file path, because we need names for external modules too
+        rest.importer = '';
+        rest.namespace = '';
         rest.pluginData = { preventInfiniteRecursion: true };
         const resolveResult = await build.resolve(path, rest);
         const resolvedPath = resolveResult.path;

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

@@ -45,7 +45,7 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
             '@storybook/react-dom-shim': await getReactDomShimAlias(),
           }),
         },
-        // TODO(storybook): mark React module as external to prevent bundling and duplicates in runtime
+        external: [...modules],
         define: (() => {
           const define = stringifyProcessEnvs(env);
 
@@ -72,14 +72,13 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
 // we aim only at browserifying NodeJS dependencies (CommonJS/process.env/...)
 export const CANDIDATES = [
   /* for different addons built with React and for MDX */
-  '@storybook/react-dom-shim', // needs special resolution
   'react',
-  process.env.NODE_ENV === 'production' ? 'react/jsx-runtime' : 'react/jsx-dev-runtime',
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
   'react-dom',
+  'react-dom/client',
 
   /* for different packages */
-  '@storybook/components',
-  '@storybook/test',
   'memoizerific',
   'tiny-invariant',
 

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

@@ -23,15 +23,10 @@ const config = {
           return;
         }
 
-        // ignore warning about eval which comes from bundled telejson
+        // ignore warning about eval used by the storybook internals
         if (log.code === 'EVAL') {
           const logId = log.id?.replace(/\\/g, '/');
-          if (
-            // TODO(storybook): looks like '@storybook/test' bundles too much, including the "@storybook/core"
-            // TODO(storybook): exact eval seems to be from get-intrinsic, not from telejson which is weird given telejson is still used
-            logId?.includes('node_modules/.prebundled_modules/@storybook/test.mjs') ||
-            logId?.includes('node_modules/@storybook/core/dist/preview/runtime.js')
-          ) {
+          if (logId?.includes('node_modules/@storybook/core/dist/preview/runtime.js')) {
             defaultHandler('warn', log);
             return;
           }