Skip to content

React: Simplify version detection#32802

Merged
ndelangen merged 4 commits into
storybookjs:nextfrom
mrginglymus:no-semver-react
Oct 26, 2025
Merged

React: Simplify version detection#32802
ndelangen merged 4 commits into
storybookjs:nextfrom
mrginglymus:no-semver-react

Conversation

@mrginglymus
Copy link
Copy Markdown
Contributor

@mrginglymus mrginglymus commented Oct 23, 2025

What I did

Don't pull in the fairly chunky semver library to do a trivial major/minor parse + check.

Before:
image

After:
image

60kb saved

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 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 publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

  • Chores

    • Removed two development dependencies to slim developer tooling.
  • Refactor

    • Reworked internal React version parsing; preserved existing compatibility checks and user-facing behavior.

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Oct 23, 2025

View your CI Pipeline Execution ↗ for commit ca35a93

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

☁️ Nx Cloud last updated this comment at 2025-10-26 10:41:38 UTC

@yannbf yannbf changed the title Don't use semver lib for trivial version parsing React: Simplify version detection Oct 24, 2025
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Oct 24, 2025

📝 Walkthrough

Walkthrough

Removed the semver package and its type definitions from the React renderer's devDependencies and replaced semver-based React.version parsing in entry-preview.tsx with manual string-splitting and integer parsing, keeping the same React >= 18.3 compatibility check.

Changes

Cohort / File(s) Change Summary
Dependency removal
code/renderers/react/package.json
Removed devDependencies: @types/semver and semver.
Version parsing refactor
code/renderers/react/src/entry-preview.tsx
Replaced semver-based parsing with manual React.version.split('.') and parseInt parsing; added guard that throws "Unable to parse React version" if major/minor are not integers; retained existing React >= 18.3 check and behavior.

Sequence Diagram(s)

sequenceDiagram
    participant Entry as entry-preview.tsx
    participant React as React (runtime)

    rect rgb(220, 240, 255)
    Note over Entry,React: Version extraction & check (new manual parse)
    Entry->>React: read React.version (string)
    Entry->>Entry: split('.') -> parts
    Entry->>Entry: parseInt(parts[0]) -> major
    Entry->>Entry: parseInt(parts[1]) -> minor
    alt parse failed
        Entry-->>Entry: throw "Unable to parse React version"
    else parsed
        alt version < 18.3
            Entry-->>Entry: throw unsupported RSC error
        else version >= 18.3
            Entry->>Entry: continue initialization
        end
    end
    end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • Pay attention to the parsing guard and error message in entry-preview.tsx.
  • Confirm no other files depend on the removed semver devDependency.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 92e7ff4 and 575ad04.

⛔ Files ignored due to path filters (1)
  • code/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (1)
  • code/renderers/react/package.json (0 hunks)
💤 Files with no reviewable changes (1)
  • code/renderers/react/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: normal
  • GitHub Check: Core Unit Tests, windows-latest

Comment @coderabbitai help to get the list of available commands and usage tips.

@yannbf yannbf added react performance issue ci:normal Run our default set of CI jobs (choose this for most PRs). labels Oct 24, 2025
@storybook-app-bot
Copy link
Copy Markdown

storybook-app-bot Bot commented Oct 24, 2025

Package Benchmarks

Commit: ca35a93, ran on 26 October 2025 at 10:40:35 UTC

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

@storybook/nextjs

Before After Difference
Dependency count 532 532 0
Self size 950 KB 951 KB 🚨 +89 B 🚨
Dependency size 58.77 MB 58.70 MB 🎉 -65 KB 🎉
Bundle Size Analyzer Link Link

@storybook/nextjs-vite

Before After Difference
Dependency count 124 124 0
Self size 4.10 MB 4.03 MB 🎉 -66 KB 🎉
Dependency size 21.81 MB 21.74 MB 🎉 -65 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-native-web-vite

Before After Difference
Dependency count 157 157 0
Self size 31 KB 31 KB 0 B
Dependency size 23.19 MB 23.13 MB 🎉 -65 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-vite

Before After Difference
Dependency count 114 114 0
Self size 37 KB 37 KB 0 B
Dependency size 19.75 MB 19.68 MB 🎉 -65 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-webpack5

Before After Difference
Dependency count 272 272 0
Self size 25 KB 25 KB 0 B
Dependency size 43.72 MB 43.66 MB 🎉 -65 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react

Before After Difference
Dependency count 2 2 0
Self size 894 KB 829 KB 🎉 -65 KB 🎉
Dependency size 28 KB 28 KB 0 B
Bundle Size Analyzer Link Link

@ndelangen ndelangen self-assigned this Oct 26, 2025
@ndelangen ndelangen added the maintenance User-facing maintenance tasks label Oct 26, 2025
@ndelangen ndelangen merged commit 2fe97e5 into storybookjs:next Oct 26, 2025
54 of 57 checks passed
@github-actions github-actions Bot mentioned this pull request Oct 26, 2025
11 tasks
@mrginglymus mrginglymus deleted the no-semver-react branch October 26, 2025 22:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:normal Run our default set of CI jobs (choose this for most PRs). maintenance User-facing maintenance tasks performance issue react

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants