React Native Web: Add framework, CLI integration, sandboxes #29520
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 38c6859. 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 targetSent with 💌 from NxCloud. |
shilman
force-pushed
the
shilman/react-native-web-vite
branch
from
539cc58 to
ff61894
Compare
shilman
force-pushed
the
shilman/react-native-web-vite
branch
from
ff61894 to
6f9594f
Compare
shilman
changed the title
shilman
changed the title
shilman
force-pushed
the
shilman/react-native-web-vite
branch
from
627893b to
ea86393
Compare
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 0 | 109 | 🚨 +109 🚨 |
| Self size | 0 B | 37 KB | 🚨 +37 KB 🚨 |
| Dependency size | 0 B | 18.69 MB | 🚨 +18.69 MB 🚨 |
| Bundle Size Analyzer | Link | Link |
|
Failed to publish canary version of this pull request, triggered by @shilman. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/11870905006 |
shilman
added
ci:daily
shilman
force-pushed
the
shilman/react-native-web-vite
branch
3 times, most recently
from
d787436 to
751085b
Compare
shilman
force-pushed
the
shilman/react-native-web-vite
branch
from
751085b to
ee7b69f
Compare
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
56 file(s) reviewed, 48 comment(s)
Edit PR Review Bot Settings | Greptile
| @@ -0,0 +1,3 @@ | |||
| # Storybook for React Native Web & Vite | |||
|
|
|||
| See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-native-web-vite?renderer=react-native-web) for installation instructions, usage examples, APIs, and more. | |||
There was a problem hiding this comment.
logic: Documentation URL uses 'react-native-web' as renderer but framework uses 'react' renderer internally. Consider aligning these or documenting the difference.
| { | ||
| "name": "@storybook/react-native-web-vite", | ||
| "version": "8.5.0-alpha.5", | ||
| "description": "Develop react-native components an isolated web environment with hot reloading.", |
There was a problem hiding this comment.
syntax: typo in description: 'an isolated' should be 'in an isolated'
| "targets": { | ||
| "build": {} | ||
| } |
There was a problem hiding this comment.
style: Build target is empty. Consider adding standard NX build configuration like executor, options, and configurations for proper build integration.
| // @ts-expect-error FIXME | ||
| import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset'; |
There was a problem hiding this comment.
style: TODO needs to be addressed - ts-expect-error should be removed by properly typing the import
| include: [], | ||
| esbuildOptions: { |
There was a problem hiding this comment.
style: empty include array may cause optimization issues - consider adding common dependencies
|
|
||
| * ⚛️ React Native components | ||
| * 🧑💻 Shareable on the web | ||
| * 🪄 Zero confg |
There was a problem hiding this comment.
syntax: Typo in 'confg', should be 'config'
|
|
||
| ### In a project with Storybook `addon-react-native-web` | ||
|
|
||
| The [React Native Web addon](https://github.com/storybookjs/addon-react-native-web), `@storybook/addon-react-native-web` was Webpack-based precursor the React Native Web Vite framework `@storybook/react-native-web-vite`. |
There was a problem hiding this comment.
syntax: Missing word 'to' after 'precursor'
|
|
||
| [Storybook for React Native](https://github.com/storybookjs/react-native) is a framework that runs in a simulator or on your mobile device. | ||
|
|
||
| It's possible to run React Native Web alongside React Native, but we are still working on a seamless integration. In the mantime, we recommend running one or the other. If you're not sure what's right for you, read our [comparison](#react-native-vs-react-native-web). |
There was a problem hiding this comment.
syntax: Typo in 'mantime', should be 'meantime'
| **Web.** You should choose Web if you want: | ||
|
|
||
| - [**Sharing](https://storybook.js.org/docs/sharing).** Publish to the web and share with your team or publicly. | ||
| - [**Documentation](https://storybook.js.org/docs/writing-docs). A**uto-generated component docs or rich markdown docs in MDX. |
There was a problem hiding this comment.
syntax: Formatting error: 'A**uto-generated' should be 'Auto-generated'
|
|
||
| {/* prettier-ignore-start */} | ||
|
|
||
| <CodeSnippets path="react-vite-add-framework.md" /> |
There was a problem hiding this comment.
logic: Incorrect snippet reference 'react-vite-add-framework.md', should likely be 'react-native-web-vite-add-framework.md'
| "vite": "^4.0.0 || ^5.0.0" | ||
| }, | ||
| "engines": { | ||
| "node": ">=18.0.0" |
There was a problem hiding this comment.
Same for the allowed engine. Since this is a new framework, let's not support Node 18 anymore.
There was a problem hiding this comment.
I'm more comfortable making the switch along with all the other frameworks.
| * | ||
| * @default false | ||
| */ | ||
| legacyRootApi?: boolean; |
There was a problem hiding this comment.
Should we support legacy api in a new framework?
| "@vitejs/plugin-react": "^3.0.1", | ||
| "@vitejs/plugin-react": "^4.3.2", |
There was a problem hiding this comment.
Does @vitejs/plugin-react have to be in code or can we remove it from here?
Closes #
What I did
Barebones Vite-based React Native Web framework,
@storybook/react-native-web-vite, based on https://github.com/storybookjs/addon-react-native-web/storybook init --type react_native_webButton/Header/Pagecomponents/stories.cssfilesFollow-up work
react-native-webrenderer docsstorybook add @storybook/experimental-addon-test(if needed)Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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-29520-sha-c92aa93a. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-29520-sha-c92aa93ashilman/react-native-web-vitec92aa93a1731768884)To request a new release of this pull request, mention the
@storybookjs/coreteam.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=29520Greptile Summary
Added React Native Web Vite framework to Storybook with CLI integration, sandboxes, and test coverage, focusing on proper Vite configuration and React Native Web component support.
@storybook/react-native-web-viteframework with Vite-specific configuration incode/frameworks/react-native-web-vite/src/preset.tscode/frameworks/react-native-web-vite/template/cli/code/core/src/cli/detect.tsandcode/core/src/cli/project_types.tscode/lib/cli-storybook/src/sandbox-templates.ts