Core: Re-Export renderers from frameworks#30771
Merged
Conversation
Add additional export for Storybook React package to improve module compatibility and provide more direct access to core React-related exports
Migrate story files to use '@storybook/react-vite' instead of '@storybook/react' for type imports. Also remove direct '@storybook/react' dependency from package.json.
Migrate Storybook configuration files to use '@storybook/react-vite' type imports in preview.tsx and bench.stories.tsx
Migrate multiple story files across addons to use '@storybook/react-vite' for type imports, replacing '@storybook/react' type imports
Migrate all story files in the blocks package to use '@storybook/react-vite' for type imports, replacing '@storybook/react' type imports across multiple components and examples
Migrate story files in the manager package to use '@storybook/react-vite' for type imports, replacing '@storybook/react' type imports across multiple components and settings
|
View your CI Pipeline Execution ↗ for commit ffbc5d8.
☁️ Nx Cloud last updated this comment at |
Contributor
There was a problem hiding this comment.
109 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile
Update `copyTemplateFiles` function and related tests to replace `renderer` parameter with `templateLocation`, improving clarity and flexibility of template file copying mechanism
…nextjs-vite' imports Migrate story files in the experimental Next.js Vite template to use '@storybook/experimental-nextjs-vite' for type imports, replacing '@storybook/react' type imports across multiple stories
Migrate story files in the Next.js template to use '@storybook/nextjs' for type imports, replacing '@storybook/react' type imports across multiple stories and template variations
…t-native-web-vite' imports Migrate story files in the React Native Web Vite template to use '@storybook/react-native-web-vite' for type imports, replacing '@storybook/react' type imports across Button, Header, and Page stories
Add Button, Header, and Page components with stories for both JavaScript and TypeScript (4.9) variations in the React Vite CLI template. Include ESLint configuration and CSS files to support the components.
Export types and core functionality from '@storybook/html' in the HTML Vite template index file
Add export for '@storybook/html' in the HTML Webpack 5 template index file to provide core HTML framework support
Export core React functionality and suppress TypeScript error for double exports in the Next.js Storybook template
Export core Preact functionality from '@storybook/preact' in the Preact Vite template index file
Add export for '@storybook/preact' in the Preact Webpack 5 template index file to provide core Preact framework support
Add full export of '@storybook/react' in the React Native Web Vite template index file to provide comprehensive React framework support
…e functionality Add exports for respective Storybook framework packages across multiple framework templates, including HTML, Preact, React, Server, Svelte, Vue3, and Web Components for both Vite and Webpack5 configurations
…work template - Add explicit type imports for Storybook and React types - Enhance type casting for decorators and loaders - Improve type handling for Next.js preview configuration
Add Button, Header, and Page components with stories for multiple Svelte variations: - JavaScript - Svelte 5 JavaScript - Svelte 5 TypeScript (3.8 and 4.9) - TypeScript (4.9) Include stories, components, and CSS files to support the Storybook template components across different Svelte configurations
…ariations Expand the Svelte Storybook template with comprehensive component support: - Add Button, Header, and Page components - Support multiple Svelte configurations: * JavaScript * Svelte 5 JavaScript * Svelte 5 TypeScript (3.8 and 4.9) * TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing
…iations Expand the Vue3 Storybook template with comprehensive component support: - Add Button, Header, and Page components - Support multiple Vue3 configurations: * JavaScript * TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing
…peScript Expand the Vue3 Webpack5 Storybook template with comprehensive component support: - Add Button, Header, and Page components for JavaScript and TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing
Expand the Web Components Storybook template with comprehensive component support: - Add Button, Header, and Page components for JavaScript and TypeScript (4.9) - Support multiple configurations for Vite and Webpack5 - Include stories, components, and CSS files - Add ESLint configuration to disable import/extensions rule - Implement Storybook best practices with autodocs and component testing
…re-export-renderers-from-frameworks
…files Include template directories in the files array for multiple framework packages to ensure template files are packaged and distributed correctly
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 141 | 141 | 0 |
| Self size | 215 KB | 215 KB | 🚨 +667 B 🚨 |
| Dependency size | 39.37 MB | 39.38 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 172 | 172 | 0 |
| Self size | 35 KB | 35 KB | 🚨 +344 B 🚨 |
| Dependency size | 24.30 MB | 24.32 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 122 | 122 | 0 |
| Self size | 15 KB | 31 KB | 🚨 +17 KB 🚨 |
| Dependency size | 20.47 MB | 20.47 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 131 | 131 | 0 |
| Self size | 23 KB | 61 KB | 🚨 +38 KB 🚨 |
| Dependency size | 36.55 MB | 36.55 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 311 | 311 | 0 |
| Self size | 7 KB | 9 KB | 🚨 +2 KB 🚨 |
| Dependency size | 40.61 MB | 40.61 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 139 | 139 | 0 |
| Self size | 48 KB | 100 KB | 🚨 +52 KB 🚨 |
| Dependency size | 39.86 MB | 39.90 MB | 🚨 +38 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 104 | 104 | 0 |
| Self size | 17 KB | 34 KB | 🚨 +17 KB 🚨 |
| Dependency size | 42.74 MB | 42.74 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 495 | 495 | 0 |
| Self size | 7 KB | 24 KB | 🚨 +17 KB 🚨 |
| Dependency size | 57.01 MB | 57.01 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 12 | 12 | 0 |
| Self size | 6 KB | 20 KB | 🚨 +14 KB 🚨 |
| Dependency size | 1.94 MB | 1.94 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 245 | 245 | 0 |
| Self size | 7 KB | 20 KB | 🚨 +14 KB 🚨 |
| Dependency size | 32.62 MB | 32.62 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
…re-export-renderers-from-frameworks
valentinpalkovic
approved these changes
Mar 10, 2025
…re-export-renderers-from-frameworks
Base automatically changed from
norbert/fix-missingStorybookDependencies
to
next
March 10, 2025 09:27
This was referenced Mar 10, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What I did
Users of storybook have been needing to use both the framework package and renderer package, for different purposes.
In their config files they'd use the framework package, in their client code they'd use the renderer package.
This has created confusion this PR tries to remove.
From now on, users should import all their types from the frameworks.
The renderer packages still exist, and export the same, but users can use a single package (the framework package) for all their needs.
Part of this work has meant duplicating a lot of files for the init command to be able to generate the appropriate files.
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 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 canary-release-pr.yml --field pr=<PR_NUMBER>Add additional export for Storybook React package to improve module compatibility and provide more direct access to core React-related exports
Greptile Summary
This PR updates import paths across multiple story files to use '@storybook/react-vite' instead of '@storybook/react', aiming to simplify dependency management by having users import from framework packages rather than renderers.
code/frameworks/react-vite/src/index.tsto re-export all contents from '@storybook/react'code/addons/onboarding/package.json