ManagerBuilder: Fix "type": "commonjs" compatibility

[ndelangen]

Closes #22511

What I did

• switch to format: iife for manager-builder so it work in commonjs

I found out that when package.json module-field is set to commonjs (I do not understand why this is even a thing, as this is the default AFAIK), that the output of esbuild changes.

When using commonjs as the type and esm as the esbuild-format, the output looks like:

try {
  var a = (e,t)=>()=>(e && (t = e(e = 0)),
  t);
  var E = (e,t)=>()=>(t || e((t = {
    exports: {}
  }).exports, t),
  t.exports);
  var o = a(()=>{}
  );
  var r = a(()=>{}
  );
  var s = a(()=>{}
  );
  var n, i, l = a(()=>{
    o();
    r();
    s();
    n = "storybook/links",
    i = {
      NAVIGATE: `${n}/navigate`,
      REQUEST: `${n}/request`,
      RECEIVE: `${n}/receive`
    }
  }
  );
  var C, D, f, x, K, m, G, N, V, Y, $, B, Q, U, q, H, L, j, w, z, F, J, W, X, Z, ee, te, oe, re, se, ae, d = a(()=>{
    o();
    r();
    s();
    C = __STORYBOOKAPI__,
    {ActiveTabs: D, Consumer: f, ManagerContext: x, Provider: K, addons: m, combineParameters: G, controlOrMetaKey: N, controlOrMetaSymbol: V, eventMatchesShortcut: Y, eventToShortcut: $, isMacLike: B, isShortcutTaken: Q, keyToSymbol: U, merge: q, mockChannel: H, optionOrAltSymbol: L, shortcutMatchesShortcut: j, shortcutToHumanString: w, types: z, useAddonState: F, useArgTypes: J, useArgs: W, useChannel: X, useGlobalTypes: Z, useGlobals: ee, useParameter: te, useSharedState: oe, useStoryPrepared: re, useStorybookApi: se, useStorybookState: ae} = __STORYBOOKAPI__
  }
  );
  var A = a(()=>{
    o();
    r();
    s();
    l();
    d();
    m.register(n, e=>{
      e.on(i.REQUEST, ({kind: t, name: y})=>{
        let _ = e.storyId(t, y);
        e.emit(i.RECEIVE, _)
      }
      )
    }
    )
  }
  );
  var T = E(()=>{
    o();
    r();
    s();
    A()
  }
  );
  export default T();
} catch (e) {
  console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e);
}

The export default part in a non-top-level code section is invalid.
It's invalid because we wrap the code outputted with a try-catch-block, to ensure manager entries are fault-tolerant.

When I change the esbuild format config to iife then the output looks like this:

try {
  (()=>{
    var a = (e,t)=>()=>(e && (t = e(e = 0)),
    t);
    var E = (e,t)=>()=>(t || e((t = {
      exports: {}
    }).exports, t),
    t.exports);
    var o = a(()=>{}
    );
    var r = a(()=>{}
    );
    var s = a(()=>{}
    );
    var n, i, l = a(()=>{
      o();
      r();
      s();
      n = "storybook/links",
      i = {
        NAVIGATE: `${n}/navigate`,
        REQUEST: `${n}/request`,
        RECEIVE: `${n}/receive`
      }
    }
    );
    var C, D, f, x, K, m, G, N, V, Y, $, B, Q, U, q, H, L, j, w, z, F, J, W, X, Z, ee, te, oe, re, se, ae, d = a(()=>{
      o();
      r();
      s();
      C = __STORYBOOKAPI__,
      {ActiveTabs: D, Consumer: f, ManagerContext: x, Provider: K, addons: m, combineParameters: G, controlOrMetaKey: N, controlOrMetaSymbol: V, eventMatchesShortcut: Y, eventToShortcut: $, isMacLike: B, isShortcutTaken: Q, keyToSymbol: U, merge: q, mockChannel: H, optionOrAltSymbol: L, shortcutMatchesShortcut: j, shortcutToHumanString: w, types: z, useAddonState: F, useArgTypes: J, useArgs: W, useChannel: X, useGlobalTypes: Z, useGlobals: ee, useParameter: te, useSharedState: oe, useStoryPrepared: re, useStorybookApi: se, useStorybookState: ae} = __STORYBOOKAPI__
    }
    );
    var A = a(()=>{
      o();
      r();
      s();
      l();
      d();
      m.register(n, e=>{
        e.on(i.REQUEST, ({kind: t, name: y})=>{
          let _ = e.storyId(t, y);
          e.emit(i.RECEIVE, _)
        }
        )
      }
      )
    }
    );
    var T = E(()=>{
      o();
      r();
      s();
      A()
    }
    );
    T();
  }
  )();
} catch (e) {
  console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e);
}

So that works!

I also checked if this affects the case where package.json uses type = module, and it's not that different:

Before (esbuild's format = esm):

try {
  var e = "storybook/links";
  var a = {
    NAVIGATE: `${e}/navigate`,
    REQUEST: `${e}/request`,
    RECEIVE: `${e}/receive`
  };
  var O = __STORYBOOKAPI__
    , {ActiveTabs: b, Consumer: p, ManagerContext: k, Provider: v, addons: n, combineParameters: I, controlOrMetaKey: g, controlOrMetaSymbol: M, eventMatchesShortcut: P, eventToShortcut: R, isMacLike: C, isShortcutTaken: D, keyToSymbol: f, merge: x, mockChannel: K, optionOrAltSymbol: G, shortcutMatchesShortcut: N, shortcutToHumanString: V, types: Y, useAddonState: $, useArgTypes: B, useArgs: Q, useChannel: U, useGlobalTypes: q, useGlobals: H, useParameter: L, useSharedState: j, useStoryPrepared: w, useStorybookApi: z, useStorybookState: F} = __STORYBOOKAPI__;
  n.register(e, t=>{
    t.on(a.REQUEST, ({kind: u, name: c})=>{
      let S = t.storyId(u, c);
      t.emit(a.RECEIVE, S)
    }
    )
  }
  );
} catch (e) {
  console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e);
}

After (esbuild's format = iife):

try {
  (()=>{
    var e = "storybook/links";
    var a = {
      NAVIGATE: `${e}/navigate`,
      REQUEST: `${e}/request`,
      RECEIVE: `${e}/receive`
    };
    var O = __STORYBOOKAPI__
      , {ActiveTabs: b, Consumer: p, ManagerContext: k, Provider: v, addons: n, combineParameters: I, controlOrMetaKey: g, controlOrMetaSymbol: M, eventMatchesShortcut: P, eventToShortcut: R, isMacLike: C, isShortcutTaken: D, keyToSymbol: f, merge: x, mockChannel: K, optionOrAltSymbol: G, shortcutMatchesShortcut: N, shortcutToHumanString: V, types: Y, useAddonState: $, useArgTypes: B, useArgs: Q, useChannel: U, useGlobalTypes: q, useGlobals: H, useParameter: L, useSharedState: j, useStoryPrepared: w, useStorybookApi: z, useStorybookState: F} = __STORYBOOKAPI__;
    n.register(e, t=>{
      t.on(a.REQUEST, ({kind: u, name: c})=>{
        let S = t.storyId(u, c);
        t.emit(a.RECEIVE, S)
      }
      )
    }
    );
  }
  )();
} catch (e) {
  console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e);
}

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

• Create a sandbox with vite
• Modify the package.json's type field to commonjs
• Start storybook
• expect things to work, the manager should render.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>