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

Build: Write and store esbuild metafiles #29117

Open
wants to merge 13 commits into
base: next
Choose a base branch
from
Open

Build: Write and store esbuild metafiles #29117

wants to merge 13 commits into from
+334 −104

Conversation

JReinhold
Copy link
Contributor

@JReinhold JReinhold commented Sep 13, 2024 •
edited by storybook-pr-benchmarking bot
Loading

Closes #29105

What I did

  1. Save all esbuild metafiles from all packages under bench/esbuild-metafiles
  2. Made them available as artifacts in CircleCI. See eg. https://app.circleci.com/pipelines/github/storybookjs/storybook/83887/workflows/dde373c2-a6c9-4698-8e38-623e0fb1958a/jobs/706709/artifacts
  3. Created a Bench story in the UI Storybook that inputs those metafiles to the esbuild analyzer directly in the story, by just selecting the metafile in the Control. See eg. https://635781f3500dd2c49e189caf-rjflqvpgls.chromatic.com/?path=/story/bench--es-build-analyzer&args=metafile:docs_SLASH_metafile_DOT_esm_DOT_json

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

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 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 77.4 MB 77.4 MB 0 B 1.69 0%
initSize 162 MB 162 MB 0 B -0.37 0%
diffSize 84.9 MB 84.9 MB 0 B -0.41 0%
buildSize 7.57 MB 7.57 MB 0 B 0.64 0%
buildSbAddonsSize 1.66 MB 1.66 MB 0 B 0.72 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 2.34 MB 2.34 MB 0 B 0.65 0%
buildSbPreviewSize 352 kB 352 kB 0 B 0.5 0%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 4.55 MB 4.55 MB 0 B 0.72 0%
buildPreviewSize 3.02 MB 3.02 MB 0 B -0.06 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 25.6s 13.3s -12s -366ms 0.16 -93%
generateTime 20.2s 23.1s 2.8s 1.38 🔺12.2%
initTime 16.4s 19.1s 2.7s 1.46 🔺14.2%
buildTime 11.6s 11.4s -137ms -0.14 -1.2%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 6.4s 7.2s 764ms 0.34 10.5%
devManagerResponsive 4.1s 4.6s 506ms 0.34 10.8%
devManagerHeaderVisible 751ms 836ms 85ms 0.12 10.2%
devManagerIndexVisible 796ms 873ms 77ms 0.09 8.8%
devStoryVisibleUncached 1.3s 1.7s 401ms 1.08 22.9%
devStoryVisible 797ms 872ms 75ms 0.08 8.6%
devAutodocsVisible 700ms 732ms 32ms 0.06 4.4%
devMDXVisible 663ms 742ms 79ms 0.11 10.6%
buildManagerHeaderVisible 797ms 681ms -116ms -0.96 -17%
buildManagerIndexVisible 798ms 688ms -110ms -1.01 -16%
buildStoryVisible 891ms 718ms -173ms -1.17 -24.1%
buildAutodocsVisible 672ms 693ms 21ms -0.25 3%
buildMDXVisible 721ms 631ms -90ms -0.67 -14.3%

Greptile Summary

This PR implements the saving and storing of esbuild metafiles, enhancing build analysis capabilities for Storybook.

  • Added functionality to save esbuild metafiles in bench/esbuild-metafiles directory
  • Created a new Storybook story (bench.stories.tsx) for visualizing and analyzing metafiles using the esbuild analyzer
  • Modified CircleCI configuration to store metafiles as artifacts for easier access
  • Updated build scripts in prep.ts, addon-bundle.ts, and bundle.ts to generate and save metafiles
  • Added metafile output configuration in nx.json for improved build process analysis

@JReinhold JReinhold linked an issue Sep 13, 2024 that may be closed by this pull request
Save ESBuild metafiles and make them available from CI #29105
Open
@JReinhold JReinhold self-assigned this Sep 13, 2024
@JReinhold JReinhold added ci:normal build Internal-facing build tooling & test updates labels Sep 13, 2024
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Sep 13, 2024 •
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a130700. 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

Sent with 💌 from NxCloud.

@JReinhold JReinhold marked this pull request as ready for review September 17, 2024 14:14
greptile-apps[bot]
greptile-apps bot reviewed Sep 17, 2024
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.

9 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings

code/.storybook/bench.stories.tsx

import type { Meta } from '@storybook/react';

// @ts-expect-error - TS doesn't know about import.meta.glob from Vite
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 using a more type-safe approach instead of @ts-expect-error

scripts/prepare/bundle.ts Show resolved Hide resolved
@JReinhold
Merge branch 'next' of github.com:storybookjs/storybook into 29105-sa…
a130700 
…ve-esbuild-metafiles-and-make-them-available-from-ci
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@greptile-apps Greptile Apps greptile-apps left review comments

@ndelangen ndelangen Awaiting requested review from ndelangen

At least 1 approving review is required to merge this pull request.

Assignees

@JReinhold JReinhold

Labels
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.

Save ESBuild metafiles and make them available from CI
1 participant
@JReinhold