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.

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

RNWVite: Support for requires in rnw for images/fonts #30305

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

Conversation

dannyhw
Copy link
Member

@dannyhw dannyhw commented Jan 18, 2025

Closes #

What I did

react native uses requires for images and fonts so we need to support requires, I added the commonjs plugin to support this

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-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 pull request has been released as version 0.0.0-pr-30305-sha-c7104654. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information
Published version 0.0.0-pr-30305-sha-c7104654
Triggered by @shilman
Repository storybookjs/storybook
Branch dannyhw/fix-rnw-requires-support
Commit c7104654
Datetime Sat Jan 18 16:29:29 UTC 2025 (1737217769)
Workflow run 12845641313

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=30305

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 77.9 MB 77.9 MB 0 B 0.34 0%
initSize 131 MB 131 MB 0 B 0.97 0%
diffSize 52.9 MB 52.9 MB 0 B 2.1 0%
buildSize 7.19 MB 7.19 MB 0 B 3 0%
buildSbAddonsSize 1.85 MB 1.85 MB 0 B -3 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.87 MB 1.87 MB 0 B 3 0%
buildSbPreviewSize 0 B 0 B 0 B - -
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 3.91 MB 3.91 MB 0 B 3 0%
buildPreviewSize 3.28 MB 3.28 MB 0 B 3 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 12.9s 19.2s 6.3s 0.96 32.8%
generateTime 23.8s 19.5s -4s -312ms -0.8 -22.1%
initTime 16.3s 13.2s -3s -59ms -0.73 -23.1%
buildTime 8.9s 9.8s 917ms 0.2 9.3%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 4.3s 5s 696ms 0.31 13.8%
devManagerResponsive 3.1s 3.6s 503ms 0.37 13.7%
devManagerHeaderVisible 546ms 604ms 58ms -0.15 9.6%
devManagerIndexVisible 552ms 614ms 62ms -0.34 10.1%
devStoryVisibleUncached 1.7s 1.9s 123ms 0.34 6.4%
devStoryVisible 603ms 638ms 35ms -0.17 5.5%
devAutodocsVisible 453ms 491ms 38ms -0.42 7.7%
devMDXVisible 461ms 505ms 44ms -0.55 8.7%
buildManagerHeaderVisible 535ms 585ms 50ms 0.23 8.5%
buildManagerIndexVisible 622ms 678ms 56ms 0.44 8.3%
buildStoryVisible 515ms 575ms 60ms 0.32 10.4%
buildAutodocsVisible 432ms 459ms 27ms -0.1 5.9%
buildMDXVisible 395ms 451ms 56ms -0.12 12.4%

Greptile Summary

Added support for CommonJS requires in React Native Web Vite framework to handle images and fonts through the vite-plugin-commonjs plugin.

  • Added vite-plugin-commonjs dependency in /code/frameworks/react-native-web-vite/package.json
  • Integrated CommonJS plugin in /code/frameworks/react-native-web-vite/src/preset.ts viteFinal configuration
  • Added plugin to support require statements for asset handling in React Native Web packages

💡 (5/5) You can turn off certain types of comments like style here!

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.

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

@@ -129,6 +130,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
}),
...plugins,
reactNativeWeb(),
commonjs(),
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: commonjs plugin should be placed before reactNativeWeb to ensure proper module transformation order

Copy link

nx-cloud bot commented Jan 18, 2025

View your CI Pipeline Execution ↗ for commit c710465.

Command Status Duration Result
nx affected -t check -c production --parallel=7 ✅ Succeeded 45s View ↗
nx run-many -t build -c production --parallel=3 ✅ Succeeded 2m 52s View ↗

☁️ Nx Cloud last updated this comment at 2025-01-18 15:22:37 UTC

@dannyhw dannyhw added maintenance User-facing maintenance tasks ci:normal labels Jan 18, 2025
@storybook-pr-benchmarking
Copy link

Package Benchmarks

Commit: c710465, ran on 18 January 2025 at 15:29:24 UTC

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

@storybook/react-native-web-vite

Before After Difference
Dependency count 114 137 🚨 +23 🚨
Self size 43 KB 43 KB 🚨 +250 B 🚨
Dependency size 18.25 MB 19.89 MB 🚨 +1.64 MB 🚨
Bundle Size Analyzer Link Link

@dannyhw dannyhw requested a review from shilman January 18, 2025 16:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ci:normal maintenance User-facing maintenance tasks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant