Clean up webpack framework presets for #20885#34608
Open
Henrique-PM wants to merge 1 commit into
Open
Conversation
Contributor
📝 WalkthroughWalkthroughThis diff removes two legacy Storybook preset packages ( Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/frameworks/react-webpack5/src/loaders/react-docgen-loader.test.ts (1)
17-30:⚠️ Potential issue | 🟡 MinorUse
vi.mock()with thespy: trueoption andvi.mocked()for type-safe mock access.The mocks at lines 17-30 violate the spy-mocking guidelines. Both
vi.mock('./docgen-resolver.ts', ...)andvi.mock('react-docgen', ...)must include the{ spy: true }option. Additionally, replace direct hoisted mock references withvi.mocked()for type-safe access to mocked functions.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/frameworks/react-webpack5/src/loaders/react-docgen-loader.test.ts` around lines 17 - 30, The two hoisted mocks for './docgen-resolver.ts' and 'react-docgen' must be created with spy mode and use vi.mocked() for type-safe access: update both vi.mock(...) calls to pass the options object { spy: true } (e.g. vi.mock(module, factory, { spy: true })), keep the async importOriginal factory but stop referencing hoisted mock variables directly; instead, when you need to access the mocked exports (defaultLookupModule and makeFsImporter) elsewhere, wrap the original mock objects with vi.mocked(...) to get proper typing (e.g., vi.mocked(reactDocgenResolverMock).defaultLookupModule and vi.mocked(reactDocgenMock).makeFsImporter).
🧹 Nitpick comments (1)
code/frameworks/react-webpack5/src/cra-config.test.ts (1)
8-12: Usespy: trueand move default mock behavior intobeforeEach.This mock currently uses a factory without
spy: true, and the default implementations are defined at module scope. Please switch to the repository’s Vitest mocking pattern.Suggested update
-vi.mock('node:fs', () => ({ - realpathSync: vi.fn(() => '/test-project'), - readFileSync: vi.fn(), - existsSync: vi.fn(() => true), -})); +vi.mock('node:fs', { spy: true }); + +beforeEach(() => { + vi.mocked(fs.realpathSync).mockImplementation(() => '/test-project'); + vi.mocked(fs.readFileSync).mockImplementation(() => ''); + vi.mocked(fs.existsSync).mockImplementation(() => true); +});As per coding guidelines: "Use
vi.mock()with thespy: trueoption for all package and file mocks in Vitest tests" and "Avoid mock implementations outside ofbeforeEachblocks in Vitest tests".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/frameworks/react-webpack5/src/cra-config.test.ts` around lines 8 - 12, The current mock of 'node:fs' is defined at module scope without spy: true and sets default implementations there; change the vi.mock call to include { spy: true } and move the default mock implementations for realpathSync, readFileSync, and existsSync into a beforeEach block so they are reset per test run—keep the vi.mock('node:fs', () => ({ realpathSync: vi.fn(), readFileSync: vi.fn(), existsSync: vi.fn() }), { spy: true }) signature and then in beforeEach assign the desired defaults (e.g., realpathSync -> '/test-project', existsSync -> true) using the same function names to locate and update the code.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/frameworks/react-webpack5/src/types.ts`:
- Line 15: The current export re-exports BuilderResult from
'@storybook/core-webpack', which drops the webpack-specific stats field; update
the export so consumers of this framework keep that field by re-exporting
BuilderResult from '@storybook/builder-webpack5' (or declare a local
BuilderResult = CoreBuilderResult & { stats?: import("webpack").Stats } and
export it) — locate the export line exporting BuilderResult in types.ts and
replace it with the re-export or extended type referencing
'@storybook/builder-webpack5' (or import webpack's Stats) so the stats?: Stats
property is preserved.
In `@code/frameworks/server-webpack5/src/loader.ts`:
- Around line 3-9: The loader currently swallows parse/compile errors and logs
raw file content; change the exported default function so that failures in
JSON.parse or compileCsfModule do not return the original content but instead
propagate an error to fail the build: remove the silent return-on-error or
rethrow the caught error (throw e), and replace the console.log call with the
server logger from 'storybook/internal/node-logger' (use logger.error with a
short contextual message and the error, but do not log the full content). Ensure
the catch references the same symbols (JSON.parse, compileCsfModule) and that
the function either throws the error or calls the loader failure path so webpack
fails instead of continuing.
In `@code/frameworks/server-webpack5/src/preset.ts`:
- Around line 21-31: The YAML story webpack rule (the object with type:
'javascript/auto' and test: /\.stories\.ya?ml/) currently matches any path
containing `.stories.yml`/`.stories.yaml`; update its test regex to anchor the
file extension (e.g. change /\.stories\.ya?ml/ to /\.stories\.ya?ml$/) so it
only matches actual `.stories.yml`/`.stories.yaml` files; keep the rest of the
rule (use loaders and options) unchanged.
---
Outside diff comments:
In `@code/frameworks/react-webpack5/src/loaders/react-docgen-loader.test.ts`:
- Around line 17-30: The two hoisted mocks for './docgen-resolver.ts' and
'react-docgen' must be created with spy mode and use vi.mocked() for type-safe
access: update both vi.mock(...) calls to pass the options object { spy: true }
(e.g. vi.mock(module, factory, { spy: true })), keep the async importOriginal
factory but stop referencing hoisted mock variables directly; instead, when you
need to access the mocked exports (defaultLookupModule and makeFsImporter)
elsewhere, wrap the original mock objects with vi.mocked(...) to get proper
typing (e.g., vi.mocked(reactDocgenResolverMock).defaultLookupModule and
vi.mocked(reactDocgenMock).makeFsImporter).
---
Nitpick comments:
In `@code/frameworks/react-webpack5/src/cra-config.test.ts`:
- Around line 8-12: The current mock of 'node:fs' is defined at module scope
without spy: true and sets default implementations there; change the vi.mock
call to include { spy: true } and move the default mock implementations for
realpathSync, readFileSync, and existsSync into a beforeEach block so they are
reset per test run—keep the vi.mock('node:fs', () => ({ realpathSync: vi.fn(),
readFileSync: vi.fn(), existsSync: vi.fn() }), { spy: true }) signature and then
in beforeEach assign the desired defaults (e.g., realpathSync ->
'/test-project', existsSync -> true) using the same function names to locate and
update the code.
🪄 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: 75a54a23-a1ca-4e7e-9acf-7172147dc6b9
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (79)
code/core/src/common/versions.tscode/frameworks/nextjs/package.jsoncode/frameworks/nextjs/src/preset.tscode/frameworks/nextjs/src/types.tscode/frameworks/react-vite/src/plugins/docgen-resolver.tscode/frameworks/react-webpack5/build-config.tscode/frameworks/react-webpack5/package.jsoncode/frameworks/react-webpack5/src/cra-config.test.tscode/frameworks/react-webpack5/src/cra-config.tscode/frameworks/react-webpack5/src/loaders/docgen-resolver.tscode/frameworks/react-webpack5/src/loaders/react-docgen-loader.test.tscode/frameworks/react-webpack5/src/loaders/react-docgen-loader.tscode/frameworks/react-webpack5/src/preset-cra.tscode/frameworks/react-webpack5/src/preset-react-docs.tscode/frameworks/react-webpack5/src/preset.tscode/frameworks/react-webpack5/src/types.tscode/frameworks/server-webpack5/build-config.tscode/frameworks/server-webpack5/package.jsoncode/frameworks/server-webpack5/src/lib/compiler/index.tscode/frameworks/server-webpack5/src/lib/compiler/stringifier.tscode/frameworks/server-webpack5/src/lib/compiler/types.tscode/frameworks/server-webpack5/src/loader.tscode/frameworks/server-webpack5/src/preset.tscode/frameworks/server-webpack5/src/types.tscode/package.jsoncode/presets/react-webpack/README.mdcode/presets/react-webpack/build-config.tscode/presets/react-webpack/package.jsoncode/presets/react-webpack/preset.jscode/presets/react-webpack/project.jsoncode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/presets/react-webpack/src/index.tscode/presets/react-webpack/src/loaders/docgen-resolver.tscode/presets/react-webpack/src/types.tscode/presets/react-webpack/tsconfig.jsoncode/presets/server-webpack/README.mdcode/presets/server-webpack/build-config.tscode/presets/server-webpack/package.jsoncode/presets/server-webpack/preset.jscode/presets/server-webpack/project.jsoncode/presets/server-webpack/src/index.tscode/presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/actions.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/actions.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/links.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/links.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/params.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/params.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.jsoncode/presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.yamlcode/presets/server-webpack/src/lib/compiler/__testfixtures__/yml.snapshotcode/presets/server-webpack/src/lib/compiler/__testfixtures__/yml.ymlcode/presets/server-webpack/src/lib/compiler/json-to-csf-compiler.test.tscode/presets/server-webpack/src/types.tscode/presets/server-webpack/src/typings.d.tscode/presets/server-webpack/tsconfig.jsoncode/presets/server-webpack/vitest.config.tsscripts/build/entry-configs.tstest-storybooks/ember-cli/package.jsontest-storybooks/external-docs/package.jsontest-storybooks/portable-stories-kitchen-sink/nextjs/package.jsontest-storybooks/portable-stories-kitchen-sink/react-vitest-3/package.jsontest-storybooks/portable-stories-kitchen-sink/react/package.jsontest-storybooks/portable-stories-kitchen-sink/svelte/package.jsontest-storybooks/portable-stories-kitchen-sink/vue3/package.jsontest-storybooks/server-kitchen-sink/package.jsontest-storybooks/standalone-preview/package.jsontest-storybooks/yarn-pnp/package.json
💤 Files with no reviewable changes (56)
- test-storybooks/portable-stories-kitchen-sink/svelte/package.json
- code/package.json
- code/presets/server-webpack/preset.js
- code/frameworks/react-webpack5/src/loaders/react-docgen-loader.ts
- code/presets/react-webpack/tsconfig.json
- code/presets/server-webpack/src/lib/compiler/testfixtures/links.json
- test-storybooks/portable-stories-kitchen-sink/react-vitest-3/package.json
- code/presets/server-webpack/src/typings.d.ts
- test-storybooks/standalone-preview/package.json
- code/presets/server-webpack/tsconfig.json
- code/presets/react-webpack/project.json
- test-storybooks/portable-stories-kitchen-sink/vue3/package.json
- code/presets/react-webpack/README.md
- test-storybooks/server-kitchen-sink/package.json
- test-storybooks/external-docs/package.json
- code/presets/server-webpack/src/lib/compiler/testfixtures/actions.json
- code/presets/server-webpack/README.md
- code/presets/server-webpack/src/lib/compiler/testfixtures/multiple_stories.json
- test-storybooks/portable-stories-kitchen-sink/react/package.json
- code/presets/server-webpack/src/lib/compiler/testfixtures/params.json
- code/core/src/common/versions.ts
- code/presets/server-webpack/vitest.config.ts
- code/presets/server-webpack/src/lib/compiler/testfixtures/yml.yml
- code/presets/server-webpack/src/lib/compiler/testfixtures/kitchen_sink.json
- code/presets/react-webpack/preset.js
- scripts/build/entry-configs.ts
- code/presets/server-webpack/src/lib/compiler/testfixtures/yaml.yaml
- code/presets/server-webpack/src/types.ts
- code/presets/server-webpack/build-config.ts
- code/presets/server-webpack/src/lib/compiler/testfixtures/a11y.json
- code/presets/server-webpack/project.json
- code/presets/server-webpack/src/lib/compiler/testfixtures/params_override.json
- code/presets/server-webpack/src/lib/compiler/testfixtures/backgrounds.json
- test-storybooks/portable-stories-kitchen-sink/nextjs/package.json
- code/presets/server-webpack/src/lib/compiler/json-to-csf-compiler.test.ts
- code/presets/react-webpack/src/index.ts
- code/presets/server-webpack/src/lib/compiler/testfixtures/links.snapshot
- code/presets/server-webpack/src/lib/compiler/testfixtures/params_override.snapshot
- test-storybooks/ember-cli/package.json
- code/presets/server-webpack/package.json
- code/presets/server-webpack/src/lib/compiler/testfixtures/kitchen_sink.snapshot
- code/presets/react-webpack/src/framework-preset-react-docs.test.ts
- code/presets/server-webpack/src/lib/compiler/testfixtures/multiple_stories.snapshot
- code/presets/server-webpack/src/lib/compiler/testfixtures/yml.snapshot
- code/presets/server-webpack/src/lib/compiler/testfixtures/yaml.snapshot
- code/presets/server-webpack/src/lib/compiler/testfixtures/backgrounds.snapshot
- code/presets/server-webpack/src/index.ts
- code/presets/server-webpack/src/lib/compiler/testfixtures/controls.json
- code/presets/react-webpack/build-config.ts
- code/presets/server-webpack/src/lib/compiler/testfixtures/controls.snapshot
- code/presets/server-webpack/src/lib/compiler/testfixtures/actions.snapshot
- code/presets/server-webpack/src/lib/compiler/testfixtures/params.snapshot
- code/presets/react-webpack/src/loaders/docgen-resolver.ts
- code/presets/react-webpack/src/types.ts
- code/presets/react-webpack/package.json
- code/presets/server-webpack/src/lib/compiler/testfixtures/a11y.snapshot
| } from '@storybook/core-webpack'; | ||
| import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin'; | ||
|
|
||
| export type { BuilderResult } from '@storybook/core-webpack'; |
Contributor
There was a problem hiding this comment.
Re-export the webpack5 BuilderResult to preserve stats.
Line 15 now exports the core result type, but @storybook/builder-webpack5 extends it with stats?: Stats. Since this framework uses the webpack5 builder, consumers importing BuilderResult from @storybook/react-webpack5 lose that webpack-specific field.
🐛 Proposed fix
-export type { BuilderResult } from '@storybook/core-webpack';
+export type { BuilderResult } from '@storybook/builder-webpack5';📝 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.
Suggested change
| export type { BuilderResult } from '@storybook/core-webpack'; | |
| export type { BuilderResult } from '@storybook/builder-webpack5'; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/frameworks/react-webpack5/src/types.ts` at line 15, The current export
re-exports BuilderResult from '@storybook/core-webpack', which drops the
webpack-specific stats field; update the export so consumers of this framework
keep that field by re-exporting BuilderResult from '@storybook/builder-webpack5'
(or declare a local BuilderResult = CoreBuilderResult & { stats?:
import("webpack").Stats } and export it) — locate the export line exporting
BuilderResult in types.ts and replace it with the re-export or extended type
referencing '@storybook/builder-webpack5' (or import webpack's Stats) so the
stats?: Stats property is preserved.
Comment on lines
3
to
9
| export default (content: string) => { | ||
| try { | ||
| const after = compileCsfModule(JSON.parse(content)); | ||
| return after; | ||
| return compileCsfModule(JSON.parse(content)); | ||
| } catch (e) { | ||
| // for debugging | ||
| console.log(content, e); | ||
| } | ||
| return content; |
Contributor
There was a problem hiding this comment.
Fail the loader instead of swallowing compile errors.
If JSON.parse or compileCsfModule fails, returning the original source lets webpack continue with non-CSF content and dumps the full story file to logs. Let the error propagate so users get a real build failure, and avoid logging user content.
Proposed fix
export default (content: string) => {
- try {
- return compileCsfModule(JSON.parse(content));
- } catch (e) {
- console.log(content, e);
- }
- return content;
+ return compileCsfModule(JSON.parse(content));
};As per coding guidelines, “Use Storybook loggers instead of raw console.* in normal code paths: use 'storybook/internal/node-logger' for server-side code and 'storybook/internal/client-logger' for client-side code”.
📝 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.
Suggested change
| export default (content: string) => { | |
| try { | |
| const after = compileCsfModule(JSON.parse(content)); | |
| return after; | |
| return compileCsfModule(JSON.parse(content)); | |
| } catch (e) { | |
| // for debugging | |
| console.log(content, e); | |
| } | |
| return content; | |
| export default (content: string) => { | |
| return compileCsfModule(JSON.parse(content)); | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/frameworks/server-webpack5/src/loader.ts` around lines 3 - 9, The loader
currently swallows parse/compile errors and logs raw file content; change the
exported default function so that failures in JSON.parse or compileCsfModule do
not return the original content but instead propagate an error to fail the
build: remove the silent return-on-error or rethrow the caught error (throw e),
and replace the console.log call with the server logger from
'storybook/internal/node-logger' (use logger.error with a short contextual
message and the error, but do not log the full content). Ensure the catch
references the same symbols (JSON.parse, compileCsfModule) and that the function
either throws the error or calls the loader failure path so webpack fails
instead of continuing.
Comment on lines
+21
to
+31
| { | ||
| type: 'javascript/auto', | ||
| test: /\.stories\.ya?ml/, | ||
| use: [ | ||
| fileURLToPath(import.meta.resolve('@storybook/server-webpack5/loader')), | ||
| { | ||
| loader: fileURLToPath(import.meta.resolve('yaml-loader')), | ||
| options: { asJSON: true }, | ||
| }, | ||
| ], | ||
| }, |
Contributor
There was a problem hiding this comment.
Anchor the YAML story rule to actual YAML files.
Line 23 matches any path containing .stories.yml/.stories.yaml, including suffixed filenames. Match the JSON rule’s stricter behavior by anchoring the extension.
Proposed fix
- test: /\.stories\.ya?ml/,
+ test: /\.stories\.ya?ml$/,📝 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.
Suggested change
| { | |
| type: 'javascript/auto', | |
| test: /\.stories\.ya?ml/, | |
| use: [ | |
| fileURLToPath(import.meta.resolve('@storybook/server-webpack5/loader')), | |
| { | |
| loader: fileURLToPath(import.meta.resolve('yaml-loader')), | |
| options: { asJSON: true }, | |
| }, | |
| ], | |
| }, | |
| { | |
| type: 'javascript/auto', | |
| test: /\.stories\.ya?ml$/, | |
| use: [ | |
| fileURLToPath(import.meta.resolve('@storybook/server-webpack5/loader')), | |
| { | |
| loader: fileURLToPath(import.meta.resolve('yaml-loader')), | |
| options: { asJSON: true }, | |
| }, | |
| ], | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/frameworks/server-webpack5/src/preset.ts` around lines 21 - 31, The YAML
story webpack rule (the object with type: 'javascript/auto' and test:
/\.stories\.ya?ml/) currently matches any path containing
`.stories.yml`/`.stories.yaml`; update its test regex to anchor the file
extension (e.g. change /\.stories\.ya?ml/ to /\.stories\.ya?ml$/) so it only
matches actual `.stories.yml`/`.stories.yaml` files; keep the rest of the rule
(use loaders and options) unchanged.
valentinpalkovic
added
maintenance
valentinpalkovic
added
the
ci:normal
valentinpalkovic
moved this from Empathy Queue (prioritized)
to In Progress
in Core Team Projects
Contributor
|
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 18 | 18 | 0 |
| Self size | 1.26 MB | 1.67 MB | 🚨 +405 KB 🚨 |
| Dependency size | 9.27 MB | 9.27 MB | 🎉 -753 B 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/builder-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 184 | 184 | 0 |
| Self size | 79 KB | 76 KB | 🎉 -3 KB 🎉 |
| Dependency size | 33.35 MB | 33.36 MB | 🚨 +16 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 72 | 50 | 🎉 -22 🎉 |
| Self size | 20.28 MB | 20.54 MB | 🚨 +257 KB 🚨 |
| Dependency size | 36.29 MB | 16.69 MB | 🎉 -19.61 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/angular
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 185 | 185 | 0 |
| Self size | 160 KB | 140 KB | 🎉 -20 KB 🎉 |
| Dependency size | 30.73 MB | 30.74 MB | 🚨 +14 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/ember
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 188 | 188 | 0 |
| Self size | 15 KB | 15 KB | 🚨 +3 B 🚨 |
| Dependency size | 30.07 MB | 30.08 MB | 🚨 +14 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 534 | 535 | 🚨 +1 🚨 |
| Self size | 662 KB | 650 KB | 🎉 -12 KB 🎉 |
| Dependency size | 61.51 MB | 61.50 MB | 🎉 -9 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 93 | 93 | 0 |
| Self size | 1.38 MB | 1.12 MB | 🎉 -266 KB 🎉 |
| Dependency size | 24.83 MB | 24.77 MB | 🎉 -61 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/preact-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 14 | 0 |
| Self size | 13 KB | 13 KB | 🎉 -60 B 🎉 |
| Dependency size | 1.49 MB | 1.47 MB | 🎉 -20 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 122 | 122 | 0 |
| Self size | 30 KB | 30 KB | 🚨 +5 B 🚨 |
| Dependency size | 25.90 MB | 25.84 MB | 🎉 -61 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 83 | 83 | 0 |
| Self size | 36 KB | 36 KB | 🎉 -108 B 🎉 |
| Dependency size | 22.60 MB | 22.54 MB | 🎉 -61 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 271 | 271 | 0 |
| Self size | 23 KB | 39 KB | 🚨 +15 KB 🚨 |
| Dependency size | 46.05 MB | 46.00 MB | 🎉 -48 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/server-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 196 | 195 | 🎉 -1 🎉 |
| Self size | 16 KB | 19 KB | 🚨 +4 KB 🚨 |
| Dependency size | 34.61 MB | 34.62 MB | 🚨 +6 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 20 | 19 | 🎉 -1 🎉 |
| Self size | 56 KB | 56 KB | 🎉 -20 B 🎉 |
| Dependency size | 27.00 MB | 26.65 MB | 🎉 -353 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 21 | 20 | 🎉 -1 🎉 |
| Self size | 56 KB | 56 KB | 🎉 -19 B 🎉 |
| Dependency size | 27.06 MB | 26.71 MB | 🎉 -353 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 109 | 108 | 🎉 -1 🎉 |
| Self size | 36 KB | 36 KB | 🚨 +4 B 🚨 |
| Dependency size | 44.10 MB | 43.75 MB | 🎉 -352 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 15 | 15 | 0 |
| Self size | 19 KB | 19 KB | 🎉 -48 B 🎉 |
| Dependency size | 1.54 MB | 1.52 MB | 🎉 -14 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 203 | 184 | 🎉 -19 🎉 |
| Self size | 908 KB | 782 KB | 🎉 -127 KB 🎉 |
| Dependency size | 87.70 MB | 68.42 MB | 🎉 -19.29 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 196 | 177 | 🎉 -19 🎉 |
| Self size | 32 KB | 32 KB | 🚨 +38 B 🚨 |
| Dependency size | 86.19 MB | 66.94 MB | 🎉 -19.25 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 73 | 51 | 🎉 -22 🎉 |
| Self size | 1.08 MB | 1.04 MB | 🎉 -36 KB 🎉 |
| Dependency size | 56.57 MB | 37.22 MB | 🎉 -19.35 MB 🎉 |
| Bundle Size Analyzer | node | node |
@storybook/react-dom-shim
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 0 | 0 | 0 |
| Self size | 19 KB | 19 KB | 🎉 -270 B 🎉 |
| Dependency size | 1 KB | 791 B | 🎉 -309 B 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/preact
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 2 | 2 | 0 |
| Self size | 46 KB | 23 KB | 🎉 -23 KB 🎉 |
| Dependency size | 32 KB | 32 KB | 🚨 +3 B 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 59 | 59 | 0 |
| Self size | 1.51 MB | 1.44 MB | 🎉 -63 KB 🎉 |
| Dependency size | 13.30 MB | 13.30 MB | 🎉 -847 B 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 3 | 2 | 🎉 -1 🎉 |
| Self size | 49 KB | 45 KB | 🎉 -4 KB 🎉 |
| Dependency size | 582 KB | 230 KB | 🎉 -352 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 4 | 3 | 🎉 -1 🎉 |
| Self size | 66 KB | 63 KB | 🎉 -3 KB 🎉 |
| Dependency size | 565 KB | 213 KB | 🎉 -352 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 3 | 3 | 0 |
| Self size | 79 KB | 62 KB | 🎉 -17 KB 🎉 |
| Dependency size | 47 KB | 47 KB | 🚨 +3 B 🚨 |
| Bundle Size Analyzer | Link | Link |
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.
Closes #20885
What I did
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
Caution
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
🦋 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
Refactor
Consolidated webpack preset functionality from separate preset packages into the React webpack5 and Server webpack5 framework packages.
Reorganized preset exports and module structure for the React webpack5 and Server webpack5 frameworks.
Updated framework dependencies to use consolidated configuration sources instead of separate preset packages.