Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Include nested files in ESM compilation #30441

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open

Include nested files in ESM compilation #30441

wants to merge 1 commit into from

Conversation

edbzn
Copy link

@edbzn edbzn commented Feb 2, 2025 •
edited by storybook-pr-benchmarking bot
Loading

What I did

Fixed a compilation issue where nested ESM compiled files are overridden by CJS one due to a misconfiguration in the glob pattern when renaming files to .mjs.

Before, nested ESM files (like angular/dist/client/render.mjs) are not properly produced:

image

After, nested ESM files are correctly produced:

image

It is particularly an issue with @storybook/testing-angular where deep imports are used but proper ESM modules are not produced, leading to errors like:

image

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

  1. Build any project like nx build angular
  2. Check that dist/client/*.mjs files are produced

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>

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 80.5 MB 80.5 MB 0 B 0.45 0%
initSize 80.5 MB 140 MB 59.9 MB 77.85 🔺42.6%
diffSize 97 B 59.9 MB 59.9 MB Infinity 🔺100%
buildSize 7.31 MB 7.2 MB -110 kB -2.05 -1.5%
buildSbAddonsSize 1.9 MB 1.85 MB -50.4 kB -3.28 -2.7%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.88 MB 1.86 MB -11.4 kB -9.17 -0.6%
buildSbPreviewSize 0 B 0 B 0 B - -
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 3.97 MB 3.91 MB -61.8 kB -4.69 -1.6%
buildPreviewSize 3.34 MB 3.3 MB -47.8 kB -0.46 -1.5%
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 7.2s 7.5s 350ms -0.93 4.6%
generateTime 18.6s 19.5s 834ms 0.15 4.3%
initTime 4.3s 12.4s 8s 23.07 🔺64.9%
buildTime 8.7s 8s -650ms -1.37 🔰-8.1%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 5.5s 5.2s -258ms -0.35 -4.9%
devManagerResponsive 3.9s 3.9s 62ms -0.27 1.6%
devManagerHeaderVisible 701ms 756ms 55ms -0.34 7.3%
devManagerIndexVisible 708ms 838ms 130ms 0 15.5%
devStoryVisibleUncached 4.8s 4.1s -771ms 0.68 -18.8%
devStoryVisible 792ms 789ms -3ms -0.52 -0.4%
devAutodocsVisible 719ms 704ms -15ms -0.44 -2.1%
devMDXVisible 783ms 685ms -98ms -0.62 -14.3%
buildManagerHeaderVisible 826ms 807ms -19ms -0.27 -2.4%
buildManagerIndexVisible 931ms 926ms -5ms -0.26 -0.5%
buildStoryVisible 812ms 786ms -26ms -0.2 -3.3%
buildAutodocsVisible 597ms 713ms 116ms -0.21 16.3%
buildMDXVisible 860ms 525ms -335ms -1.02 -63.8%

Greptile Summary

Modified the glob pattern in TypeScript compilation script to properly handle nested ESM files, ensuring correct module format output for deep imports.

  • Changed glob pattern from 'dist/*.js' to 'dist/**/*.js' in scripts/prepare/tsc.ts to include nested directory files
  • Fixed issue where nested ESM files (e.g. angular/client/render.mjs) were being overridden by CommonJS versions
  • Addresses compilation errors in @storybook/testing-angular where deep imports require proper ESM modules
  • Ensures consistent module format output across nested directory structures

💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!

greptile-apps[bot]
greptile-apps bot reviewed Feb 2, 2025
View reviewed changes
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile

scripts/prepare/tsc.ts
Comment on lines +62 to 63
const files = globSync(join(process.cwd(), 'dist', '**/*.js'));
await Promise.all(files.map((file) => move(file, file.replace('.js', '.mjs'), {})));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider adding error handling around the file move operations in case of permission issues or disk space constraints

greptile-apps[bot]
greptile-apps bot reviewed Feb 2, 2025
View reviewed changes
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

@valentinpalkovic valentinpalkovic self-assigned this Feb 3, 2025
@valentinpalkovic valentinpalkovic added angular build Internal-facing build tooling & test updates labels Feb 3, 2025
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Feb 12, 2025

View your CI Pipeline Execution ↗ for commit ed14d04.

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 21s View ↗

☁️ Nx Cloud last updated this comment at 2025-02-12 14:56:50 UTC

@storybook-pr-benchmarking
Copy link

Package Benchmarks

Commit: ed14d04, ran on 12 February 2025 at 15:07:27 UTC

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

@storybook/addon-a11y

Before After Difference
Dependency count 54 59 🚨 +5 🚨
Self size 444 KB 228 KB 🎉 -216 KB 🎉
Dependency size 12.46 MB 13.47 MB 🚨 +1.00 MB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-backgrounds

Before After Difference
Dependency count 4 4 0
Self size 45 KB 27 KB 🎉 -18 KB 🎉
Dependency size 99 KB 99 KB 0 B
Bundle Size Analyzer Link Link

@storybook/addon-docs

Before After Difference
Dependency count 13 17 🚨 +4 🚨
Self size 2.25 MB 2.26 MB 🚨 +7 KB 🚨
Dependency size 9.43 MB 7.92 MB 🎉 -1.51 MB 🎉
Bundle Size Analyzer Link Link

@storybook/addon-essentials

Before After Difference
Dependency count 32 36 🚨 +4 🚨
Self size 18 KB 12 KB 🎉 -6 KB 🎉
Dependency size 15.53 MB 13.93 MB 🎉 -1.59 MB 🎉
Bundle Size Analyzer Link Link

@storybook/addon-highlight

Before After Difference
Dependency count 1 1 0
Self size 12 KB 9 KB 🎉 -3 KB 🎉
Dependency size 5 KB 5 KB 0 B
Bundle Size Analyzer Link Link

@storybook/addon-interactions

Before After Difference
Dependency count 54 56 🚨 +2 🚨
Self size 129 KB 128 KB 🎉 -2 KB 🎉
Dependency size 12.48 MB 12.74 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-links

Before After Difference
Dependency count 2 4 🚨 +2 🚨
Self size 20 KB 19 KB 🎉 -1 KB 🎉
Dependency size 32 KB 284 KB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-measure

Before After Difference
Dependency count 2 2 0
Self size 60 KB 32 KB 🎉 -28 KB 🎉
Dependency size 20 KB 20 KB 0 B
Bundle Size Analyzer Link Link

@storybook/addon-outline

Before After Difference
Dependency count 2 2 0
Self size 42 KB 23 KB 🎉 -19 KB 🎉
Dependency size 32 KB 32 KB 0 B
Bundle Size Analyzer Link Link

@storybook/addon-storysource

Before After Difference
Dependency count 5 7 🚨 +2 🚨
Self size 1.89 MB 1.89 MB 🎉 -1 KB 🎉
Dependency size 10.60 MB 10.85 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/experimental-addon-test

Before After Difference
Dependency count 58 60 🚨 +2 🚨
Self size 843 KB 831 KB 🎉 -11 KB 🎉
Dependency size 13.94 MB 14.19 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-viewport

Before After Difference
Dependency count 2 2 0
Self size 30 KB 27 KB 🎉 -4 KB 🎉
Dependency size 67 KB 67 KB 0 B
Bundle Size Analyzer Link Link

@storybook/core

Before After Difference
Dependency count 52 54 🚨 +2 🚨
Self size 19.26 MB 19.05 MB 🎉 -204 KB 🎉
Dependency size 14.19 MB 14.44 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/experimental-nextjs-vite

Before After Difference
Dependency count 187 154 🎉 -33 🎉
Self size 235 KB 232 KB 🎉 -3 KB 🎉
Dependency size 48.83 MB 44.78 MB 🎉 -4.05 MB 🎉
Bundle Size Analyzer Link Link

@storybook/html-vite

Before After Difference
Dependency count 15 15 0
Self size 6 KB 5 KB 🎉 -1 KB 🎉
Dependency size 1.91 MB 1.91 MB 🎉 -221 B 🎉
Bundle Size Analyzer Link Link

@storybook/html-webpack5

Before After Difference
Dependency count 247 247 0
Self size 8 KB 6 KB 🎉 -1 KB 🎉
Dependency size 31.72 MB 31.72 MB 🎉 -320 B 🎉
Bundle Size Analyzer Link Link

@storybook/nextjs

Before After Difference
Dependency count 593 594 🚨 +1 🚨
Self size 475 KB 472 KB 🎉 -3 KB 🎉
Dependency size 84.47 MB 83.71 MB 🎉 -752 KB 🎉
Bundle Size Analyzer Link Link

@storybook/preact-webpack5

Before After Difference
Dependency count 245 245 0
Self size 8 KB 6 KB 🎉 -1 KB 🎉
Dependency size 31.30 MB 31.30 MB 🎉 -320 B 🎉
Bundle Size Analyzer Link Link

@storybook/react-native-web-vite

Before After Difference
Dependency count 177 138 🎉 -39 🎉
Self size 44 KB 43 KB 🎉 -1 KB 🎉
Dependency size 24.29 MB 19.94 MB 🎉 -4.36 MB 🎉
Bundle Size Analyzer Link Link

@storybook/react-vite

Before After Difference
Dependency count 129 88 🎉 -41 🎉
Self size 15 KB 13 KB 🎉 -2 KB 🎉
Dependency size 20.47 MB 16.11 MB 🎉 -4.37 MB 🎉
Bundle Size Analyzer Link Link

@storybook/react-webpack5

Before After Difference
Dependency count 324 324 0
Self size 8 KB 6 KB 🎉 -2 KB 🎉
Dependency size 43.34 MB 42.54 MB 🎉 -803 KB 🎉
Bundle Size Analyzer Link Link

@storybook/server-webpack5

Before After Difference
Dependency count 253 255 🚨 +2 🚨
Self size 15 KB 14 KB 🎉 -1 KB 🎉
Dependency size 32.45 MB 32.70 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte-vite

Before After Difference
Dependency count 135 134 🎉 -1 🎉
Self size 23 KB 22 KB 🎉 -1 KB 🎉
Dependency size 36.43 MB 36.38 MB 🎉 -50 KB 🎉
Bundle Size Analyzer Link Link

@storybook/svelte-webpack5

Before After Difference
Dependency count 311 310 🎉 -1 🎉
Self size 7 KB 6 KB 🎉 -1 KB 🎉
Dependency size 39.34 MB 39.29 MB 🎉 -50 KB 🎉
Bundle Size Analyzer Link Link

@storybook/sveltekit

Before After Difference
Dependency count 143 142 🎉 -1 🎉
Self size 48 KB 47 KB 🎉 -1 KB 🎉
Dependency size 39.74 MB 39.68 MB 🎉 -58 KB 🎉
Bundle Size Analyzer Link Link

@storybook/vue3-webpack5

Before After Difference
Dependency count 496 496 0
Self size 7 KB 6 KB 🎉 -1 KB 🎉
Dependency size 55.73 MB 55.73 MB 🎉 -320 B 🎉
Bundle Size Analyzer Link Link

@storybook/web-components-vite

Before After Difference
Dependency count 16 16 0
Self size 6 KB 5 KB 🎉 -1 KB 🎉
Dependency size 1.94 MB 1.94 MB 🎉 -221 B 🎉
Bundle Size Analyzer Link Link

@storybook/web-components-webpack5

Before After Difference
Dependency count 245 245 0
Self size 7 KB 5 KB 🎉 -1 KB 🎉
Dependency size 31.35 MB 31.35 MB 🎉 -320 B 🎉
Bundle Size Analyzer Link Link

@storybook/blocks

Before After Difference
Dependency count 2 4 🚨 +2 🚨
Self size 626 KB 607 KB 🎉 -19 KB 🎉
Dependency size 1.28 MB 1.53 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

storybook

Before After Difference
Dependency count 53 55 🚨 +2 🚨
Self size 23 KB 22 KB 🎉 -855 B 🎉
Dependency size 33.45 MB 33.50 MB 🚨 +48 KB 🚨
Bundle Size Analyzer Link Link

sb

Before After Difference
Dependency count 54 56 🚨 +2 🚨
Self size 1 KB 1 KB 0 B
Dependency size 33.47 MB 33.52 MB 🚨 +47 KB 🚨
Bundle Size Analyzer Link Link

@storybook/cli

Before After Difference
Dependency count 360 389 🚨 +29 🚨
Self size 278 KB 503 KB 🚨 +225 KB 🚨
Dependency size 83.93 MB 75.48 MB 🎉 -8.45 MB 🎉
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 276 278 🚨 +2 🚨
Self size 612 KB 617 KB 🚨 +5 KB 🚨
Dependency size 65.51 MB 65.56 MB 🚨 +48 KB 🚨
Bundle Size Analyzer Link Link

create-storybook

Before After Difference
Dependency count 7 113 🚨 +106 🚨
Self size 10.21 MB 1.11 MB 🎉 -9.10 MB 🎉
Dependency size 2.24 MB 42.68 MB 🚨 +40.43 MB 🚨
Bundle Size Analyzer Link Link

@storybook/source-loader

Before After Difference
Dependency count 3 5 🚨 +2 🚨
Self size 41 KB 41 KB 0 B
Dependency size 10.54 MB 10.79 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/test

Before After Difference
Dependency count 51 53 🚨 +2 🚨
Self size 1.82 MB 1.82 MB 🚨 +27 B 🚨
Dependency size 7.84 MB 8.09 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-react-webpack

Before After Difference
Dependency count 192 192 0
Self size 24 KB 24 KB 0 B
Dependency size 34.40 MB 33.60 MB 🎉 -802 KB 🎉
Bundle Size Analyzer Link Link

@storybook/preset-server-webpack

Before After Difference
Dependency count 16 18 🚨 +2 🚨
Self size 10 KB 10 KB 0 B
Dependency size 1.23 MB 1.48 MB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/react

Before After Difference
Dependency count 6 6 0
Self size 1.73 MB 932 KB 🎉 -802 KB 🎉
Dependency size 24 KB 24 KB 0 B
Bundle Size Analyzer Link Link

@storybook/server

Before After Difference
Dependency count 7 9 🚨 +2 🚨
Self size 13 KB 13 KB 🚨 +32 B 🚨
Dependency size 722 KB 974 KB 🚨 +252 KB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte

Before After Difference
Dependency count 107 106 🎉 -1 🎉
Self size 96 KB 96 KB 🎉 -32 B 🎉
Dependency size 10.64 MB 10.59 MB 🎉 -50 KB 🎉
Bundle Size Analyzer Link Link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

@valentinpalkovic valentinpalkovic valentinpalkovic approved these changes

Assignees

@valentinpalkovic valentinpalkovic

Labels
angular build Internal-facing build tooling & test updates ci:normal
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@edbzn @valentinpalkovic