ESM: Start migration: use ESM in node

[ndelangen]

Works on 29072

What I did

This set storybook on the course of using ESM support in node.
In this PR I've migrated the CLI packages to run their ESM code.
In fact the main storybook CLI is now compiled for only ESM!
This should save some space, though now most of the code is present/moved to @storybook/core the impact is not high.

I've adjusted the code loading builders to support loading ESM.

The following packages are now ESM only (and type=module):

• builder-vite
• create-storybook
• storybook
• @storybook/cli

Because our code has a lot of references to require and __dirname and the like (which are only supported in node when it's in CJS-mode, I've had to make some adjustments to our bundling mechanism.

I think this is OK for now, and likely not something we can move away from until we drop CJS completely.

I think this is backwards compatible.
Everything I changed is internal only, AFAIK.
Maybe there might be an impact on community builders?

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

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/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 pull request has been released as version 0.0.0-pr-28797-sha-e221ee7e. Try it out in a new sandbox by running npx storybook@0.0.0-pr-28797-sha-e221ee7e sandbox or in an existing project with npx storybook@0.0.0-pr-28797-sha-e221ee7e upgrade.

More information

Published version	0.0.0-pr-28797-sha-e221ee7e
Triggered by	@ndelangen
Repository	storybookjs/storybook
Branch	norbert/esm-v2
Commit	e221ee7e
Datetime	Thu Aug 29 08:25:06 UTC 2024 (1724919906)
Workflow run	10611431997

To request a new release of this pull request, mention the @storybookjs/core team.

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

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.5 MB	76.5 MB	0 B	2.55	0%
initSize	161 MB	161 MB	-90.1 kB	-0.43	-0.1%
diffSize	84.8 MB	84.8 MB	-90.1 kB	-0.44	-0.1%
buildSize	7.48 MB	7.48 MB	102 B	1.12	0%
buildSbAddonsSize	1.62 MB	1.62 MB	0 B	3	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.31 MB	2.31 MB	54 B	1.12	0%
buildSbPreviewSize	352 kB	352 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.47 MB	4.47 MB	54 B	1.12	0%
buildPreviewSize	3.01 MB	3.01 MB	48 B	1.11	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	16.1s	6.6s	-9s -416ms	-1.12	-140.8%
generateTime	19.3s	19.9s	533ms	-0.52	2.7%
initTime	15.8s	16.3s	524ms	-0.43	3.2%
buildTime	14.7s	15.8s	1.1s	3.26	🔺7.1%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.8s	7.1s	-687ms	-0.4	-9.6%
devManagerResponsive	5s	4.7s	-372ms	-0.19	-7.9%
devManagerHeaderVisible	859ms	904ms	45ms	0.57	5%
devManagerIndexVisible	911ms	942ms	31ms	0.53	3.3%
devStoryVisibleUncached	1.5s	1.4s	-134ms	-0.25	-9.6%
devStoryVisible	912ms	953ms	41ms	0.61	4.3%
devAutodocsVisible	798ms	769ms	-29ms	0.2	-3.8%
devMDXVisible	825ms	730ms	-95ms	-0.2	-13%
buildManagerHeaderVisible	773ms	832ms	59ms	0.68	7.1%
buildManagerIndexVisible	842ms	834ms	-8ms	0.55	-1%
buildStoryVisible	843ms	918ms	75ms	0.77	8.2%
buildAutodocsVisible	683ms	755ms	72ms	0.8	9.5%
buildMDXVisible	688ms	742ms	54ms	0.33	7.3%

Greptile Summary

The PR migrates Storybook CLI packages to ESM, updating various package.json files, TypeScript files, and scripts to support ESM. Key changes include replacing fs-extra with @ndelangen/fs-extra-unified, updating ESLint configurations, and modifying code loading builders to support ESM.

• ESLint Configuration: Updated code/.eslintrc.js to handle TypeScript and ESM imports, adding rules for import/no-extraneous-dependencies and import/no-unresolved.
• Package Updates: Modified package.json files in code/addons/docs, code/addons/links, and code/builders/builder-vite to support ESM, including new dependencies like @ndelangen/fs-extra-unified.
• TypeScript Directives: Added @ts-expect-error in code/addons/essentials/src/actions/manager.ts to suppress type errors due to missing type definitions.
• File Operations: Replaced fs-extra with @ndelangen/fs-extra-unified and node:fs/promises for file operations in multiple files, including code/core/scripts/helpers/dependencies.ts and code/core/src/builder-manager/index.ts.
• Dynamic Imports: Updated code/builders/builder-vite/src/index.ts to use dynamic import statements for ESM compatibility.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 48954f0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[greptile-apps]

_{30 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings}

[ndelangen]

I'm looking into why the size is increasing, and I was able to verify that the builder-vite is decreasing in size.

It did have both ESM and CJS before (on next) and now only ESM.

right side is this branch:

I am seeing similar size improvements in the other packages.

[ndelangen]

After some investigating I found that in the new situation @types/fs-extra, @types/jsonfile & @types/fsevents are added. which counteract the weight loss from the packages.

Due to the CLI split PR, most of the code for the CLI is not actually in the core package, which this PR does not touch, therefore the weight loss of the CLI is very low.
The weight loss of builder-vite is significant, but counteracted a bit by the addition of the above packages.

I've bundled in the above packages in my latest commit, and this does improve a little.

An obvious next step would be to ensure @storybook/core/cli, is only outputted as ESM.
That should save about 750kb.