Chore(cli): Add react-vite-plus sandbox#34503
Conversation
|
View your CI Pipeline Execution ↗ for commit f963747
☁️ Nx Cloud last updated this comment at |
📝 WalkthroughWalkthroughThe changes introduce a new React Vite+ sandbox template ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
code/lib/cli-storybook/src/sandbox-templates.ts (1)
427-447: Match the TypeScript coverage ofreact-vite/default-ts.This new TS template does not opt into
typeCheck: true, unlike the existingreact-vite/default-tstemplate. That means the new daily sandbox can miss type-only regressions in the Vite Plus scaffold, which undercuts the main value of adding it.Suggested change
'react-vite-plus/default-ts': { name: 'React Vite-Plus Latest (Vite | TypeScript)', @@ modifications: { useCsfFactory: true, extraDependencies: ['prop-types', '@types/prop-types'], @@ }, skipTasks: ['e2e-tests', 'bench'], + typeCheck: true, },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/lib/cli-storybook/src/sandbox-templates.ts` around lines 427 - 447, The new 'react-vite-plus/default-ts' template is missing the same TypeScript type-check opt-in as 'react-vite/default-ts'; update the modifications.mainConfig.features for the 'react-vite-plus/default-ts' entry to include typeCheck: true (alongside developmentModeForBuild and experimentalTestSyntax) so the sandbox runs type checking like the existing TS template.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.github/workflows/generate-sandboxes.yml:
- Around line 9-11: The workflow currently hardcodes a temporary branch in the
push trigger and checkout (the push: branches: - chore/react-viteplus-sadbox
override) and disables the generate-main behavior, so revert those temporary
changes: remove the branch-specific override (delete the
chore/react-viteplus-sadbox entry) and restore the original triggers and any
generate-main job/steps that were disabled so scheduled runs and main sandboxes
publish from the intended refs; ensure no hard-coded branch names remain in this
workflow file and re-enable the generate-main job/steps.
In `@code/sandbox/react-vite-plus-default-ts/project.json`:
- Around line 14-31: The targets set is missing the standard "check-sandbox"
target expected by the sandbox template; add a "check-sandbox" entry to the
targets object (matching how the other Vite template projects include it) so the
project JSON includes "check-sandbox": {} (or the appropriate options used by
the other template), ensuring consistency with
scripts/create-nx-sandbox-projects.ts and the react-vite-default-ts project
configuration.
---
Nitpick comments:
In `@code/lib/cli-storybook/src/sandbox-templates.ts`:
- Around line 427-447: The new 'react-vite-plus/default-ts' template is missing
the same TypeScript type-check opt-in as 'react-vite/default-ts'; update the
modifications.mainConfig.features for the 'react-vite-plus/default-ts' entry to
include typeCheck: true (alongside developmentModeForBuild and
experimentalTestSyntax) so the sandbox runs type checking like the existing TS
template.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: df738cf2-a8eb-42aa-bf86-31a82f9dbac8
📒 Files selected for processing (3)
.github/workflows/generate-sandboxes.ymlcode/lib/cli-storybook/src/sandbox-templates.tscode/sandbox/react-vite-plus-default-ts/project.json
| "targets": { | ||
| "sandbox": { | ||
| "options": { | ||
| "dir": "react-vite-plus-default-ts" | ||
| } | ||
| }, | ||
| "dev": {}, | ||
| "vitest-integration": {}, | ||
| "build": { | ||
| "options": { | ||
| "dir": "react-vite-plus-default-ts" | ||
| } | ||
| }, | ||
| "chromatic": {}, | ||
| "serve": {}, | ||
| "e2e-tests-dev": {}, | ||
| "test-runner": {}, | ||
| "test-runner-dev": {} |
There was a problem hiding this comment.
check-sandbox is missing from the generated target set.
This diverges from the standard Nx sandbox shape: scripts/create-nx-sandbox-projects.ts adds check-sandbox unless the template explicitly skips it, and code/sandbox/react-vite-default-ts/project.json includes it. Without that target, this new sandbox misses one of the normal validation steps the comparable Vite template gets.
Suggested fix
"targets": {
"sandbox": {
"options": {
"dir": "react-vite-plus-default-ts"
}
},
"dev": {},
+ "check-sandbox": {},
"vitest-integration": {},
"build": {
"options": {
"dir": "react-vite-plus-default-ts"
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "targets": { | |
| "sandbox": { | |
| "options": { | |
| "dir": "react-vite-plus-default-ts" | |
| } | |
| }, | |
| "dev": {}, | |
| "vitest-integration": {}, | |
| "build": { | |
| "options": { | |
| "dir": "react-vite-plus-default-ts" | |
| } | |
| }, | |
| "chromatic": {}, | |
| "serve": {}, | |
| "e2e-tests-dev": {}, | |
| "test-runner": {}, | |
| "test-runner-dev": {} | |
| "targets": { | |
| "sandbox": { | |
| "options": { | |
| "dir": "react-vite-plus-default-ts" | |
| } | |
| }, | |
| "dev": {}, | |
| "check-sandbox": {}, | |
| "vitest-integration": {}, | |
| "build": { | |
| "options": { | |
| "dir": "react-vite-plus-default-ts" | |
| } | |
| }, | |
| "chromatic": {}, | |
| "serve": {}, | |
| "e2e-tests-dev": {}, | |
| "test-runner": {}, | |
| "test-runner-dev": {} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/sandbox/react-vite-plus-default-ts/project.json` around lines 14 - 31,
The targets set is missing the standard "check-sandbox" target expected by the
sandbox template; add a "check-sandbox" entry to the targets object (matching
how the other Vite template projects include it) so the project JSON includes
"check-sandbox": {} (or the appropriate options used by the other template),
ensuring consistency with scripts/create-nx-sandbox-projects.ts and the
react-vite-default-ts project configuration.
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
…ybookjs/storybook into chore/react-viteplus-sadbox
Closes #
What I did
This PR adds a new sandbox for React + Vite plus to allow us to test against vite-plus and detect potential issues.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Caution
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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
Chores