ESM: Presets loading async/ESM

code/.storybook/main.ts

@@ -131,18 +131,21 @@ const config: StorybookConfig = {
   viteFinal: (viteConfig, { configType }) =>
     mergeConfig(viteConfig, {
       resolve: {
-        alias: {
-          ...(configType === 'DEVELOPMENT'
-            ? {
-                '@storybook/components': componentsPath,
-                'storybook/internal/components': componentsPath,
-                '@storybook/manager-api': managerApiPath,
-                'storybook/internal/manager-api': managerApiPath,
-              }
-            : {}),
-        },
+        // alias: {
+        //   ...(configType === 'DEVELOPMENT'
+        //     ? {
+        //         '@storybook/components': componentsPath,
+        //         'storybook/internal/components': componentsPath,
+        //         '@storybook/manager-api': managerApiPath,
+        //         'storybook/internal/manager-api': managerApiPath,
+        //       }
+        //     : {}),
+        // },
+      },
+      optimizeDeps: {
+        force: true,
+        exclude: ['firebase-functions'],
       },
-      optimizeDeps: { force: true },
       build: {
         // disable sourcemaps in CI to not run out of memory
         sourcemap: process.env.CI !== 'true',

code/addons/docs/package.json

@@ -38,7 +38,6 @@
     },
     "./preset": {
       "types": "./dist/preset.d.ts",
-      "import": "./dist/preset.js",
       "require": "./dist/preset.js"
     },
     "./blocks": {
@@ -107,15 +106,15 @@
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "rehype-external-links": "^3.0.0",
-    "rehype-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rehype-external-links": "^3.0.0",
+    "rehype-slug": "^6.0.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },

code/addons/essentials/src/index.ts

@@ -56,14 +56,14 @@ interface PresetOptions {
   viewport?: boolean;
 }
 
-const requireMain = (configDir: string) => {
+const requireMain = async (configDir: string) => {
   const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
   const mainFile = join(absoluteConfigDir, 'main');
 
   return serverRequire(mainFile) ?? {};
 };
 
-export function addons(options: PresetOptions) {
+export async function addons(options: PresetOptions) {
   const checkInstalled = (addonName: string, main: any) => {
     const addon = `@storybook/addon-${addonName}`;
     const existingAddon = main.addons?.find((entry: string | { name: string }) => {
@@ -76,7 +76,7 @@ export function addons(options: PresetOptions) {
     return !!existingAddon;
   };
 
-  const main = requireMain(options.configDir);
+  const main = await requireMain(options.configDir);
 
   // NOTE: The order of these addons is important.
   return [

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -8,7 +8,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
   const { presets, configDir } = options;
   const frameworkName = await getFrameworkName(options);
 
-  const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });
+  const previewOrConfigFile = await loadPreviewOrConfigFile({ configDir });
   const previewAnnotations = await presets.apply<PreviewAnnotation[]>(
     'previewAnnotations',
     [],

code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts

@@ -40,7 +40,7 @@ export async function webpack(config: Configuration, options: Options) {
 
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
-  const customConfig = loadCustomWebpackConfig(configDir);
+  const customConfig = await loadCustomWebpackConfig(configDir);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom Webpack config (full-control mode).');

code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts

@@ -42,7 +42,7 @@ export const getVirtualModules = async (options: Options) => {
         return slash(entry);
       }
     ),
-    loadPreviewOrConfigFile(options),
+    await loadPreviewOrConfigFile(options),
   ].filter(Boolean);
 
   const storiesFilename = 'storybook-stories.js';

code/core/package.json

@@ -273,11 +273,11 @@
     "@types/express": "^4.17.21",
     "browser-assert": "^1.2.1",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
-    "esbuild-register": "^3.5.0",
     "express": "^4.19.2",
     "process": "^0.11.10",
     "recast": "^0.23.5",
     "semver": "^7.6.2",
+    "ts-import": "^5.0.0-beta.0",
     "ws": "^8.2.3"
   },
   "devDependencies": {

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

@@ -138,7 +138,7 @@
 
     const result = await presets.apply('foo', []);
 
     expect(result).toEqual(['foo', 'dracarys', 'valar morghulis', 'bar']);
   });
 
   it('loads and applies presets when they are declared as a string', async () => {
@@ -162,7 +162,7 @@
 
     await expect(testPresets()).resolves.toBeUndefined();
 
     expect(mockPresetFooExtendWebpack).toHaveBeenCalled();
     expect(mockPresetBarExtendBabel).toHaveBeenCalled();
   });
 
@@ -189,7 +189,7 @@
 
     await expect(testPresets()).resolves.toBeUndefined();
 
     expect(mockPresetFooExtendWebpack).toHaveBeenCalled();
     expect(mockPresetBarExtendBabel).toHaveBeenCalled();
   });
 
@@ -222,7 +222,7 @@
 
     await expect(testPresets()).resolves.toBeUndefined();
 
     expect(mockPresetFooExtendWebpack).toHaveBeenCalledWith(expect.anything(), {
       foo: 1,
       presetsList: expect.anything(),
       presets: expect.anything(),
@@ -268,7 +268,7 @@
 
     await expect(testPresets()).resolves.toBeUndefined();
 
     expect(mockPresetFooExtendWebpack).toHaveBeenCalled();
     expect(mockPresetBarExtendBabel).toHaveBeenCalledWith(expect.anything(), {
       bar: 'a',
       presetsList: expect.arrayContaining([
@@ -318,7 +318,7 @@
 
     await expect(testPresets()).resolves.toBeUndefined();
 
     expect(mockPresetFooExtendWebpack).toHaveBeenCalled();
     expect(mockPresetBarExtendWebpack).toHaveBeenCalledWith(expect.anything(), {
       bar: 'a',
       presetsList: expect.arrayContaining([
@@ -345,7 +345,7 @@
 
     const output = await presets.apply('bar');
 
     expect(mockPresetBar).toHaveBeenCalledWith(undefined, expect.any(Object));
 
     expect(input).toBe(output);
   });
@@ -372,7 +372,7 @@
 
     const output = await presets.apply('bar');
 
     expect(mockPresetFoo).toHaveBeenCalledWith({ ...storybookOptions, ...presetOptions });
     expect(mockPresetBar).toHaveBeenCalledWith(undefined, expect.any(Object));
 
     expect(input).toBe(output);
@@ -384,66 +384,66 @@
   });
 });
 describe('resolveAddonName', () => {
-  it('should resolve packages with metadata (relative path)', () => {
+  it('should resolve packages with metadata (relative path)', async () => {
     mockPreset('./local/preset', {
       presets: [],
     });
-    expect(resolveAddonName({} as any, './local/preset', {})).toEqual({
+    expect(await resolveAddonName({} as any, './local/preset', {})).toEqual({
       name: './local/preset',
       type: 'presets',
     });
   });
 
-  it('should resolve packages with metadata (absolute path)', () => {
+  it('should resolve packages with metadata (absolute path)', async () => {
     mockPreset('/absolute/preset', {
       presets: [],
     });
-    expect(resolveAddonName({} as any, '/absolute/preset', {})).toEqual({
+    expect(await resolveAddonName({} as any, '/absolute/preset', {})).toEqual({
       name: '/absolute/preset',
       type: 'presets',
     });
   });
 
-  it('should resolve packages without metadata', () => {
-    expect(resolveAddonName({} as any, '@storybook/preset-create-react-app', {})).toEqual({
+  it('should resolve packages without metadata', async () => {
+    expect(await resolveAddonName({} as any, '@storybook/preset-create-react-app', {})).toEqual({
       name: '@storybook/preset-create-react-app',
       type: 'presets',
     });
   });
 
-  it('should resolve managerEntries', () => {
-    expect(resolveAddonName({} as any, '@storybook/addon-actions/register.js', {})).toEqual({
+  it('should resolve managerEntries', async () => {
+    expect(await resolveAddonName({} as any, '@storybook/addon-actions/register.js', {})).toEqual({
       name: '@storybook/addon-actions/register.js',
       managerEntries: [normalize('@storybook/addon-actions/register')],
       type: 'virtual',
     });
   });
 
-  it('should resolve managerEntries from new /manager path', () => {
-    expect(resolveAddonName({} as any, '@storybook/addon-actions/manager', {})).toEqual({
+  it('should resolve managerEntries from new /manager path', async () => {
+    expect(await resolveAddonName({} as any, '@storybook/addon-actions/manager', {})).toEqual({
       name: '@storybook/addon-actions/manager',
       managerEntries: [normalize('@storybook/addon-actions/manager')],
       type: 'virtual',
     });
   });
 
-  it('should resolve presets', () => {
-    expect(resolveAddonName({} as any, '@storybook/addon-docs/preset', {})).toEqual({
+  it('should resolve presets', async () => {
+    expect(await resolveAddonName({} as any, '@storybook/addon-docs/preset', {})).toEqual({
       name: '@storybook/addon-docs/preset',
       type: 'presets',
     });
   });
 
-  it('should resolve preset packages', () => {
-    expect(resolveAddonName({} as any, '@storybook/addon-essentials', {})).toEqual({
+  it('should resolve preset packages', async () => {
+    expect(await resolveAddonName({} as any, '@storybook/addon-essentials', {})).toEqual({
       name: '@storybook/addon-essentials',
       type: 'presets',
     });
   });
 
-  it('should error on invalid inputs', () => {
+  it('should error on invalid inputs', async () => {
     // @ts-expect-error (invalid use)
-    expect(() => resolveAddonName({} as any, null, {})).toThrow();
+    await expect(async () => resolveAddonName({} as any, null, {})).rejects.toThrow();
   });
 });
 
@@ -482,7 +482,7 @@
       0,
       {}
     );
     expect(loaded).toMatchInlineSnapshot(`
       [
         {
           "name": "@storybook/preset-typescript",
@@ -534,7 +534,7 @@
       0,
       {}
     );
     expect(loaded).toEqual([
       {
         name: '@storybook/preset-typescript',
         options: {},

code/core/src/common/presets.ts

@@ -15,6 +15,7 @@ import type {
 import { logger } from '@storybook/core/node-logger';
 import { CriticalPresetLoadError } from '@storybook/core/server-errors';
 
+import * as resolveHelper from 'resolve.exports';
 import { dedent } from 'ts-dedent';
 
 import { interopRequireDefault } from './utils/interpret-require';
@@ -49,19 +50,26 @@ function resolvePathToMjs(filePath: string): string {
   return filePath;
 }
 
-function resolvePresetFunction<T = any>(
+async function resolvePresetFunction<T = any>(
   input: T[] | Function,
   presetOptions: any,
   storybookOptions: InterPresetOptions
-): T[] {
-  if (isFunction(input)) {
-    return [...input({ ...storybookOptions, ...presetOptions })];
-  }
-  if (Array.isArray(input)) {
-    return [...input];
-  }
+): Promise<T[]> {
+  try {
+    if (isFunction(input)) {
+      const result = await input({ ...storybookOptions, ...presetOptions });
+      console.log({ result });
+      return [...result];
+    }
+    if (Array.isArray(input)) {
+      return [...input];
+    }
 
-  return [];
+    return [];
+  } catch (e) {
+    console.log({ e, input });
+    throw e;
+  }
 }
 
 /**
@@ -81,11 +89,11 @@ function resolvePresetFunction<T = any>(
  *   =>  { type: 'presets', item: { name: '@storybook/addon-docs/preset', options } }
  */
 
-export const resolveAddonName = (
+export const resolveAddonName = async (
   configDir: string,
   name: string,
   options: any
-): CoreCommon_ResolvedAddonPreset | CoreCommon_ResolvedAddonVirtual | undefined => {
+): Promise<CoreCommon_ResolvedAddonPreset | CoreCommon_ResolvedAddonVirtual | undefined> => {
   const resolve = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir);
   const resolved = resolve(name);
 
@@ -122,7 +130,29 @@ export const resolveAddonName = (
   // Vite will be broken in such cases, because it does not process absolute paths,
   // and it will try to import from the bare import, breaking in pnp/pnpm.
   const absolutizeExport = (exportName: string, preferMJS: boolean) => {
-    const found = resolve(`${name}${exportName}`);
+    let combo = `${name}${exportName}`;
+    try {
+      const pkg = require(join(name, 'package.json'));
+      let subpath = resolveHelper.exports(pkg, exportName);
+
+      if (!subpath || subpath.length < 1) {
+        subpath = resolveHelper.exports(pkg, '.' + exportName);
+      }
+      if (!subpath || subpath.length < 1) {
+        subpath = resolveHelper.exports(pkg, '.' + exportName.replace(/^\//, ''));
+      }
+      if (subpath) {
+        combo = join(name, ...subpath);
+      }
+
+      if (!subpath || subpath.length < 1) {
+        combo = require.resolve(combo);
+      }
+    } catch (err) {
+      // failed = true;
+    }
+
+    const found = resolve(combo);
 
     if (found) {
       return preferMJS ? resolvePathToMjs(found) : found;
@@ -190,14 +220,14 @@ export const resolveAddonName = (
 
 const map =
   ({ configDir }: InterPresetOptions) =>
-  (item: any) => {
+  async (item: any) => {
     const options = isObject(item) ? item['options'] || undefined : undefined;
     const name = isObject(item) ? item['name'] : item;
 
     let resolved;
 
     try {
-      resolved = resolveAddonName(configDir, name, options);
+      resolved = await resolveAddonName(configDir, name, options);
     } catch (err) {
       logger.error(
         `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}`
@@ -269,19 +299,37 @@ export async function loadPreset(
         };
       }
 
-      const subPresets = resolvePresetFunction(
-        presetsInput,
-        presetOptions,
-        storybookOptions
-      ).filter(filter);
-      const subAddons = resolvePresetFunction(addonsInput, presetOptions, storybookOptions).filter(
-        filter
-      );
+      if (presetsInput && presetsInput.length > 1) {
+        console.log({ presetsInput });
+      }
+      if (addonsInput && addonsInput.length > 1) {
+        console.log({ addonsInput });
+      }
+
+      let subPresets: PresetConfig[] = [];
+      let subAddons: PresetConfig[] = [];
+
+      try {
+        subPresets = (
+          await resolvePresetFunction(presetsInput, presetOptions, storybookOptions)
+        ).filter(filter);
+      } catch (a) {
+        console.log({ a });
+      }
+      try {
+        subAddons = (
+          await resolvePresetFunction(addonsInput, presetOptions, storybookOptions)
+        ).filter(filter);
+      } catch (e) {
+        console.log({ e });
+      }
 
       return [
         ...(await loadPresets([...subPresets], level + 1, storybookOptions)),
         ...(await loadPresets(
-          [...subAddons.map(map(storybookOptions))].filter(Boolean) as PresetConfig[],
+          (await Promise.all([...subAddons.map(map(storybookOptions))])).filter(
+            Boolean
+          ) as PresetConfig[],
           level + 1,
           storybookOptions
         )),
@@ -415,7 +463,7 @@ export async function loadAllPresets(
 
   const presetsConfig: PresetConfig[] = [
     ...corePresets,
-    ...loadCustomPresets(options),
+    ...(await loadCustomPresets(options)),
     ...overridePresets,
   ];