Merge pull request #20070 from storybookjs/tech/improve-perf-by-using…

…-mjs

make managerEntries be loaded as ESM, for improved tree-shaking

code/lib/builder-manager/src/index.ts

@@ -41,6 +41,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
     outdir: join(options.outputDir || './', 'sb-addons'),
     format: 'esm',
     write: false,
+    resolveExtensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
     outExtension: { '.js': '.mjs' },
     loader: {
       '.js': 'jsx',
@@ -55,8 +56,9 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
     target: ['chrome100'],
     platform: 'browser',
     bundle: true,
-    minify: false,
+    minify: true,
     sourcemap: true,
+    conditions: ['browser', 'module', 'default'],
 
     jsxFactory: 'React.createElement',
     jsxFragment: 'React.Fragment',

code/lib/core-common/src/presets.test.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 import './presets';
 
 function wrapPreset(basePresets: any): { babel: Function; webpack: Function } {
@@ -409,15 +410,15 @@ describe('resolveAddonName', () => {
   it('should resolve managerEntries', () => {
     expect(resolveAddonName({}, '@storybook/addon-actions/register')).toEqual({
       name: '@storybook/addon-actions/register',
-      managerEntries: ['@storybook/addon-actions/register'],
+      managerEntries: [path.normalize('@storybook/addon-actions/register')],
       type: 'virtual',
     });
   });
 
   it('should resolve managerEntries from new /manager path', () => {
     expect(resolveAddonName({}, '@storybook/addon-actions/manager')).toEqual({
       name: '@storybook/addon-actions/manager',
-      managerEntries: ['@storybook/addon-actions/manager'],
+      managerEntries: [path.normalize('@storybook/addon-actions/manager')],
       type: 'virtual',
     });
   });
@@ -536,14 +537,14 @@ describe('loadPreset', () => {
         name: '@storybook/addon-actions/register',
         options: {},
         preset: {
-          managerEntries: ['@storybook/addon-actions/register'],
+          managerEntries: [path.normalize('@storybook/addon-actions/register')],
         },
       },
       {
         name: 'addon-foo/register.js',
         options: {},
         preset: {
-          managerEntries: ['addon-foo/register.js'],
+          managerEntries: [path.normalize('addon-foo/register')],
         },
       },
       {
@@ -565,14 +566,14 @@ describe('loadPreset', () => {
         name: 'addon-baz/register.js',
         options: {},
         preset: {
-          managerEntries: ['addon-baz/register.js'],
+          managerEntries: [path.normalize('addon-baz/register')],
         },
       },
       {
         name: '@storybook/addon-notes/register-panel',
         options: {},
         preset: {
-          managerEntries: ['@storybook/addon-notes/register-panel'],
+          managerEntries: [path.normalize('@storybook/addon-notes/register-panel')],
         },
       },
       {

code/lib/core-common/src/presets.ts

@@ -10,6 +10,7 @@ import type {
   PresetConfig,
   Presets,
 } from '@storybook/types';
+import { join, parse } from 'path';
 import { loadCustomPresets } from './utils/load-custom-presets';
 import { safeResolve, safeResolveFrom } from './utils/safeResolve';
 import { interopRequireDefault } from './utils/interpret-require';
@@ -66,14 +67,19 @@ export const resolveAddonName = (
   const resolved = resolve(name);
 
   if (resolved) {
-    if (name.match(/\/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) {
+    const { dir: fdir, name: fname } = parse(resolved);
+
+    if (name.match(/\/(manager|register(-panel)?)(\.(js|mjs|ts|tsx|jsx))?$/)) {
       return {
         type: 'virtual',
         name,
-        managerEntries: [resolved],
+        // we remove the extension
+        // this is a bit of a hack to try en be able to find .mjs files
+        // node can only ever resolve .js files; it does not look at the exports field in package.json
+        managerEntries: [join(fdir, fname)],
       };
     }
-    if (name.match(/\/(preset)(\.(js|ts|tsx|jsx))?$/)) {
+    if (name.match(/\/(preset)(\.(js|mjs|ts|tsx|jsx))?$/)) {
       return {
         type: 'presets',
         name: resolved,
@@ -113,11 +119,19 @@ export const resolveAddonName = (
     const managerEntries = [];
 
     if (managerFile) {
-      managerEntries.push(managerFile);
+      // we remove the extension
+      // this is a bit of a hack to try en be able to find .mjs files
+      // node can only ever resolve .js files; it does not look at the exports field in package.json
+      const { dir: fdir, name: fname } = parse(managerFile);
+      managerEntries.push(join(fdir, fname));
     }
     // register file is the old way of registering addons
     if (!managerFile && registerFile && !presetFile) {
-      managerEntries.push(registerFile);
+      // we remove the extension
+      // this is a bit of a hack to try en be able to find .mjs files
+      // node can only ever resolve .js files; it does not look at the exports field in package.json
+      const { dir: fdir, name: fname } = parse(registerFile);
+      managerEntries.push(join(fdir, fname));
     }
 
     return {