Core: ESM-only core bundles #31821

JReinhold · 2025-06-19T13:09:44Z

Works on #31817

What I did

Added a separate esbuild config that handles the ESM-only entries. We are gradually migrating each entry to this separate ESM-only configuration, this PR starts with node-logger, client-logger and the two preview and manager runtimes.

I've built up a slightly simpler configuration and entry structure, that should make everything a bit easier to understand and read. It's also more naive, so we'll see if this holds up as we migrate each entry point.

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

Everything should work as expected. Just starting up Storybook and using it slightly would fail if any of this didn't work.

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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-storybook/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>

Greptile Summary

Modernizes Storybook's core bundles to use ESM-only format while maintaining backwards compatibility. This significant architectural change includes:

Transitions core bundles from CommonJS to ESM-only format with dedicated ESM entry points
Updates TypeScript declaration file generation to support ESM-only entries
Replaces node:path with pathe for improved ESM compatibility
Restructures package.json exports to prioritize ESM modules over CommonJS
Modifies build process to handle ESM-only entries with special compilation options

…e node-logger and client-logger to ESM only

… jeppe/esm-core-scripts

greptile-apps

_{7 files reviewed, 6 comments}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-06-19T13:10:11Z

code/core/scripts/helpers/generateTypesMapperFiles.ts

+  const all = entries
+    .filter((e) => e.dts)
+    .map((e) => e.file)
+    .concat(esmOnlyEntries.filter((e) => e.dts !== false).map((e) => e.entryPoint));


logic: The dts check should be consistent between entries and esmOnlyEntries. One uses e.dts and the other e.dts !== false. This could lead to inconsistent behavior

greptile-apps · 2025-06-19T13:10:13Z

code/core/scripts/dts.ts

+    .filter((e) => e.dts)
+    .concat(
+      esmOnlyEntries
+        .filter((e) => e.dts !== false)


logic: The condition e.dts !== false will include entries where dts is undefined. Consider explicit e.dts === true || e.dts === undefined for clarity

Bad bot: e.dts === undefined is unsafe and not quite the same as typeof e.dts === 'undefined' (safer).

greptile-apps · 2025-06-19T13:10:16Z

code/core/scripts/entries.ts

    // empty, right now, TDB what to do with this
    define('src/index.ts', ['node', 'browser'], true),


syntax: TDB appears to be a typo for TBD (To Be Determined). Update comment for clarity

Suggested change

// empty, right now, TDB what to do with this

define('src/index.ts', ['node', 'browser'], true),

// empty, right now, TBD what to do with this

define('src/index.ts', ['node', 'browser'], true),

code/core/scripts/helpers/generatePackageJsonFile.ts

greptile-apps · 2025-06-19T13:10:17Z

code/core/scripts/helpers/generateTypesFiles.ts

    // by trial and error, 3 seems to be the sweet spot between perf and consistency
    const limited = limit(10);


style: Comment mentions limit of 3 processes but code sets limit to 10. Update comment to match actual implementation

Suggested change

// by trial and error, 3 seems to be the sweet spot between perf and consistency

const limited = limit(10);

// by trial and error, 10 seems to be the sweet spot between perf and consistency

const limited = limit(10);

code/core/scripts/helpers/generateTypesFiles.ts

nx-cloud · 2025-06-19T13:27:22Z

View your CI Pipeline Execution ↗ for commit bfc8f30.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 19s	View ↗

☁️ Nx Cloud last updated this comment at 2025-06-19 13:43:51 UTC

storybook-pr-benchmarking · 2025-06-19T13:49:21Z

Package Benchmarks

^{Commit: bfc8f30, ran on 19 June 2025 at 13:49:16 UTC}

The following packages have significant changes to their size or dependencies:

`storybook`

	Before	After	Difference
Dependency count	49	49	0
Self size	31.85 MB	31.32 MB	🎉 -532 KB 🎉
Dependency size	17.41 MB	17.41 MB	0 B
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	50	50	0
Self size	1 KB	1 KB	0 B
Dependency size	49.26 MB	48.73 MB	🎉 -532 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	216	216	0
Self size	582 KB	582 KB	0 B
Dependency size	94.58 MB	94.03 MB	🎉 -549 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	185	185	0
Self size	31 KB	31 KB	0 B
Dependency size	78.71 MB	78.18 MB	🎉 -532 KB 🎉
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	1	1	0
Self size	12.47 MB	12.46 MB	🎉 -17 KB 🎉
Dependency size	98 KB	98 KB	0 B
Bundle Size Analyzer	Link	Link

JReinhold added 3 commits June 19, 2025 08:55

use new ESM only configuration for migrated core entry points. migrat…

d7e572c

…e node-logger and client-logger to ESM only

add support for runtimes in esm only config

fa9cf40

Merge branch 'sb10/esm-only' of github.com:storybookjs/storybook into…

7869b1b

… jeppe/esm-core-scripts

greptile-apps bot reviewed Jun 19, 2025

View reviewed changes

cleanup

18c0175

JReinhold requested a review from ndelangen June 19, 2025 13:25

JReinhold added maintenance User-facing maintenance tasks core ci:normal labels Jun 19, 2025

JReinhold self-assigned this Jun 19, 2025

fix types

bfc8f30

JReinhold mentioned this pull request Jun 19, 2025

Core: ESM-only-fi preview-related entry points #31824

Open

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Core: ESM-only core bundles #31821

Core: ESM-only core bundles #31821

JReinhold commented Jun 19, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Jun 19, 2025

Uh oh!

greptile-apps bot Jun 19, 2025

Uh oh!

mdingena Jun 20, 2025

Uh oh!

greptile-apps bot Jun 19, 2025

Uh oh!

Uh oh!

greptile-apps bot Jun 19, 2025

Uh oh!

Uh oh!

nx-cloud bot commented Jun 19, 2025 •

edited

Loading

Uh oh!

storybook-pr-benchmarking bot commented Jun 19, 2025

Uh oh!

Uh oh!

		// empty, right now, TDB what to do with this
		define('src/index.ts', ['node', 'browser'], true),

		// by trial and error, 3 seems to be the sweet spot between perf and consistency
		const limited = limit(10);

Uh oh!

Core: ESM-only core bundles #31821

Are you sure you want to change the base?

Core: ESM-only core bundles #31821

Conversation

JReinhold commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jun 19, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jun 19, 2025

Choose a reason for hiding this comment

Uh oh!

mdingena Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jun 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps bot Jun 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nx-cloud bot commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

storybook-pr-benchmarking bot commented Jun 19, 2025

Package Benchmarks

storybook

sb

@storybook/cli

@storybook/codemod

create-storybook

Uh oh!

Uh oh!

JReinhold commented Jun 19, 2025 •

edited

Loading

nx-cloud bot commented Jun 19, 2025 •

edited

Loading

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`