Core: Move vite/webpack plugins/loaders into appropriate builders #32921
+226
−166
Conversation
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
📝 WalkthroughWalkthroughThis PR consolidates mocking utilities into a centralized Changes
Sequence Diagram(s)sequenceDiagram
participant Builder as Vite/Webpack Builder
participant Preset as Preset Hook
participant Config as Config Discovery
participant Mock as Mock Plugin
participant Runtime as Runtime
Builder->>Preset: viteFinal()/webpackFinal()
Preset->>Config: findConfigFile('preview', configDir)
Config-->>Preset: previewConfigPath
alt Preview Config Found
Preset->>Mock: Initialize plugin with previewConfigPath
Preset->>Runtime: Get core options via presets.apply()
Mock->>Runtime: getMockerRuntime() for bundle
Runtime-->>Mock: Pre-bundled script
Preset-->>Builder: Enhanced config with plugins
else No Preview Config
Preset-->>Builder: Original config unchanged
end
sequenceDiagram
participant Plugin as Mock Plugin
participant Extract as extractMockCalls()
participant Resolve as resolveMock()
participant Redirect as findMockRedirect()
Plugin->>Extract: Pass findMockRedirect callback
Extract->>Resolve: resolveMock(path, root, importer, findMockRedirect)
Resolve->>Resolve: Compute absolutePath
alt findMockRedirect Available
Resolve->>Redirect: findMockRedirect(root, absolutePath, null)
Redirect-->>Resolve: Redirect path or null
Resolve-->>Extract: {absolutePath, redirectPath}
else No Redirect Handler
Resolve-->>Extract: {absolutePath, redirectPath: null}
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Areas requiring extra attention:
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ 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)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
code/builders/builder-vite/src/preset.ts (1)
19-30: Remove redundant conditional check.The ternary operator at lines 23-28 checking
previewConfigPathis redundant. Since the function returns early at line 13 when!previewConfigPath, by the time execution reaches line 23,previewConfigPathis guaranteed to exist.Apply this diff to simplify the logic:
return { ...existing, plugins: [ ...(existing.plugins ?? []), - ...(previewConfigPath - ? [ - viteInjectMockerRuntime({ previewConfigPath }), - viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), - ] - : []), + viteInjectMockerRuntime({ previewConfigPath }), + viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), ], };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
code/builders/builder-vite/build-config.ts(1 hunks)code/builders/builder-vite/package.json(1 hunks)code/builders/builder-vite/src/index.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts(1 hunks)code/builders/builder-vite/src/preset.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts(1 hunks)code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts(3 hunks)code/core/build-config.ts(1 hunks)code/core/package.json(2 hunks)code/core/src/core-server/presets/common-preset.ts(0 hunks)code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts(0 hunks)code/core/src/mocking-utils/automock.ts(2 hunks)code/core/src/mocking-utils/index.ts(1 hunks)
💤 Files with no reviewable changes (2)
- code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts
- code/core/src/core-server/presets/common-preset.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/builders/builder-vite/src/index.tscode/builders/builder-vite/package.jsoncode/core/package.jsoncode/builders/builder-vite/src/preset.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/builders/builder-vite/src/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/builders/builder-vite/src/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/builders/builder-vite/src/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.ts
🧠 Learnings (27)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run Prettier formatting on changed files before committing
Applied to files:
code/builders/builder-vite/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/core/package.jsoncode/core/src/mocking-utils/index.tscode/builders/builder-vite/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/core/package.jsoncode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/core/package.jsoncode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/core/package.jsoncode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/core/package.jsoncode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/core/package.jsoncode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.ts
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/core/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/core/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option
Applied to files:
code/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
🧬 Code graph analysis (2)
code/builders/builder-vite/src/preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts (1)
viteInjectMockerRuntime(19-106)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (1)
viteMockPlugin(41-177)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (1)
WebpackMockPlugin(50-167)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
WebpackInjectMockerRuntimePlugin(18-100)
⏰ 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
🔇 Additional comments (18)
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
3-4: LGTM! Import path consolidation.The import refactoring to use
storybook/internal/commonaligns with the PR's goal of centralizing mocking utilities under internal paths.code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts (1)
5-6: LGTM! Import path consolidation.Consistent with the webpack plugin changes, this refactoring centralizes imports under
storybook/internal/common.code/core/src/mocking-utils/automock.ts (2)
15-15: LGTM! Centralized constant definition.Extracting the global accessor as a named constant improves maintainability and makes it reusable across the mocking utilities.
53-54: LGTM! Using the centralized constant.The default value now references the exported constant, ensuring consistency across the codebase.
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (1)
3-9: LGTM! Consolidated mocking utilities import.The import refactoring correctly uses the new centralized
storybook/internal/mocking-utilsAPI, including the newly importedgetAutomockCodefunction.code/builders/builder-vite/src/index.ts (1)
67-67: LGTM! New core presets export.The new
corePresetsexport enables the builder to provide its preset configuration. The use ofimport.meta.resolveis appropriate for ESM module resolution.code/core/src/mocking-utils/index.ts (1)
1-4: LGTM! Centralized mocking utilities entry point.This barrel export creates a clean, consolidated API surface for mocking utilities, enabling the
storybook/internal/mocking-utilsimport path used throughout the PR.code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (1)
5-12: LGTM! Import consolidation to internal mocking utilities.The refactoring correctly consolidates mocking utility imports under
storybook/internal/mocking-utils, consistent with the pattern applied across other plugins in this PR.code/builders/builder-vite/package.json (1)
36-37: LGTM! New preset export.The addition of the
"./preset"export correctly exposes the preset module, aligning with the newcorePresetsexport added insrc/index.ts.code/builders/builder-vite/build-config.ts (1)
10-14: LGTM!The new preset build entry is correctly configured with appropriate export paths and the
dts: falsesetting is suitable for preset files that don't require separate type declarations.code/builders/builder-vite/src/preset.ts (2)
1-8: LGTM!Imports are appropriate and follow the internal Storybook module patterns.
9-15: LGTM!The early return pattern when no preview config exists is appropriate and avoids unnecessary work when mocking isn't needed.
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (4)
1-3: LGTM!The new imports are appropriate for the webpackFinal function's needs.
37-44: LGTM!The early return pattern when no preview config exists mirrors the Vite preset approach and avoids unnecessary processing.
59-67: LGTM!The plugin instantiation and configuration return are correct, assuming the issues with module rules initialization are addressed.
14-17: Top-level await is properly supported in the current Node.js version and preset loading context.The code uses top-level await with dynamic imports, which is fully supported given the Node.js >=22.0.0 requirement. The preset loading system in
code/core/src/common/presets.tsis async and properly handles asynchronously initialized preset modules. The dynamic imports reference local plugins from relative paths, ensuring they're available when the module is loaded. No compatibility issues identified.code/core/package.json (1)
121-124: LGTM!The new
"./internal/mocking-utils"export is properly structured and aligns with the build configuration changes incode/core/build-config.ts. This consolidates the mocking utilities under a single internal entry point.code/core/build-config.ts (1)
80-81: LGTM!The consolidation of mocking utilities into a single build entry point simplifies the build configuration and aligns with the new package.json export. This effectively centralizes the mocking utilities API.
Comment on lines
45
to
54
| config.plugins = config.plugins || []; | ||
|
|
||
| // 1. Add the loader to normalize sb.mock(import(...)) calls. | ||
| config.module!.rules!.push({ | ||
| test: /preview\.(t|j)sx?$/, | ||
| use: [ | ||
| { | ||
| loader: fileURLToPath( | ||
| import.meta.resolve('storybook/webpack/loaders/storybook-mock-transform-loader') | ||
| ), | ||
| }, | ||
| ], | ||
| }); |
There was a problem hiding this comment.
Fix potential runtime errors and overly broad regex.
This code has two issues:
-
Line 48: Non-null assertions on
config.module!.rules!without ensuring they exist first will throw if either is undefined. -
Lines 49-50: The regex
/preview\.(t|j)sx?$/will match ANY file in the project ending withpreview.(t|j)sx?, not just the specific preview config file. This could unintentionally transform other files.
Apply this diff to fix both issues:
config.plugins = config.plugins || [];
+ config.module = config.module || {};
+ config.module.rules = config.module.rules || [];
// 1. Add the loader to normalize sb.mock(import(...)) calls.
- config.module!.rules!.push({
- test: /preview\.(t|j)sx?$/,
+ config.module.rules.push({
+ test: new RegExp(`${previewConfigPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`),
use: [
{
loader: fileURLToPath(
import.meta.resolve('storybook/webpack/loaders/storybook-mock-transform-loader')
),
},
],
});Note: The regex now matches the exact preview config path by escaping special regex characters.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts around
lines 45 to 57, avoid non-null assertions and overly broad regex: ensure
config.module and config.module.rules exist by initializing them if undefined
(e.g., config.module = config.module || {}; config.module.rules =
config.module.rules || [];), then push the rule into config.module.rules; also
tighten the test regex to match the specific preview config path (for example
use /\.storybook\/preview\.(t|j)sx?$/ to only target the
.storybook/preview.(ts|tsx|js|jsx) file).
|
View your CI Pipeline Execution ↗ for commit 16b7aab
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 11 | 17 | 🚨 +6 🚨 |
| Self size | 334 KB | 345 KB | 🚨 +11 KB 🚨 |
| Dependency size | 1.30 MB | 2.00 MB | 🚨 +701 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/builder-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 191 | 🚨 +4 🚨 |
| Self size | 73 KB | 82 KB | 🚨 +9 KB 🚨 |
| Dependency size | 31.90 MB | 32.12 MB | 🚨 +215 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 43 | 38 | 🎉 -5 🎉 |
| Self size | 22.85 MB | 20.16 MB | 🎉 -2.69 MB 🎉 |
| Dependency size | 17.36 MB | 16.61 MB | 🎉 -755 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/angular
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 191 | 🚨 +4 🚨 |
| Self size | 130 KB | 130 KB | 🎉 -54 B 🎉 |
| Dependency size | 30.04 MB | 30.26 MB | 🚨 +224 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/ember
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 191 | 195 | 🚨 +4 🚨 |
| Self size | 17 KB | 17 KB | 0 B |
| Dependency size | 28.62 MB | 28.85 MB | 🚨 +224 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/html-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 20 | 🚨 +6 🚨 |
| Self size | 23 KB | 23 KB | 0 B |
| Dependency size | 1.67 MB | 2.38 MB | 🚨 +712 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 533 | 537 | 🚨 +4 🚨 |
| Self size | 749 KB | 749 KB | 0 B |
| Dependency size | 58.93 MB | 59.16 MB | 🚨 +224 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 124 | 128 | 🚨 +4 🚨 |
| Self size | 3.83 MB | 3.83 MB | 🚨 +36 B 🚨 |
| Dependency size | 21.76 MB | 21.99 MB | 🚨 +225 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/preact-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 20 | 🚨 +6 🚨 |
| Self size | 14 KB | 14 KB | 0 B |
| Dependency size | 1.66 MB | 2.37 MB | 🚨 +712 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 157 | 161 | 🚨 +4 🚨 |
| Self size | 31 KB | 31 KB | 0 B |
| Dependency size | 23.12 MB | 23.34 MB | 🚨 +225 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 114 | 118 | 🚨 +4 🚨 |
| Self size | 37 KB | 37 KB | 0 B |
| Dependency size | 19.67 MB | 19.90 MB | 🚨 +225 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 273 | 277 | 🚨 +4 🚨 |
| Self size | 25 KB | 25 KB | 0 B |
| Dependency size | 43.89 MB | 44.11 MB | 🚨 +224 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/server-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 199 | 203 | 🚨 +4 🚨 |
| Self size | 17 KB | 17 KB | 0 B |
| Dependency size | 33.16 MB | 33.39 MB | 🚨 +224 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 19 | 24 | 🚨 +5 🚨 |
| Self size | 59 KB | 59 KB | 🚨 +18 B 🚨 |
| Dependency size | 26.79 MB | 27.04 MB | 🚨 +252 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 20 | 25 | 🚨 +5 🚨 |
| Self size | 58 KB | 58 KB | 0 B |
| Dependency size | 26.85 MB | 27.10 MB | 🚨 +252 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 109 | 114 | 🚨 +5 🚨 |
| Self size | 38 KB | 38 KB | 0 B |
| Dependency size | 43.94 MB | 44.20 MB | 🚨 +252 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 15 | 21 | 🚨 +6 🚨 |
| Self size | 20 KB | 20 KB | 🎉 -18 B 🎉 |
| Dependency size | 1.70 MB | 2.41 MB | 🚨 +712 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 176 | 172 | 🎉 -4 🎉 |
| Self size | 855 KB | 855 KB | 🚨 +84 B 🚨 |
| Dependency size | 70.74 MB | 67.39 MB | 🎉 -3.35 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 169 | 165 | 🎉 -4 🎉 |
| Self size | 35 KB | 35 KB | 0 B |
| Dependency size | 69.24 MB | 65.88 MB | 🎉 -3.35 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 44 | 39 | 🎉 -5 🎉 |
| Self size | 1.07 MB | 1.07 MB | 0 B |
| Dependency size | 40.21 MB | 36.76 MB | 🎉 -3.44 MB 🎉 |
| Bundle Size Analyzer | node | node |
valentinpalkovic
force-pushed
the
valentin/cli-init-docs-performance
branch
from
a23433a to
6046f27
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts (1)
1-2: Combine imports from the same module.Both imports are from the same source and can be merged into a single statement for better readability.
Apply this diff:
-import { getAutomockCode } from 'storybook/internal/mocking-utils'; -import { babelParser } from 'storybook/internal/mocking-utils'; +import { getAutomockCode, babelParser } from 'storybook/internal/mocking-utils';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
code/builders/builder-vite/build-config.ts(1 hunks)code/builders/builder-vite/package.json(1 hunks)code/builders/builder-vite/src/index.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts(1 hunks)code/builders/builder-vite/src/preset.ts(1 hunks)code/builders/builder-webpack5/build-config.ts(1 hunks)code/builders/builder-webpack5/package.json(1 hunks)code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts(1 hunks)code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts(1 hunks)code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts(3 hunks)code/core/build-config.ts(1 hunks)code/core/package.json(2 hunks)code/core/src/core-server/presets/common-preset.ts(0 hunks)code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts(0 hunks)code/core/src/mocking-utils/automock.ts(2 hunks)code/core/src/mocking-utils/index.ts(1 hunks)
💤 Files with no reviewable changes (2)
- code/core/src/core-server/presets/common-preset.ts
- code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts
🚧 Files skipped from review as they are similar to previous changes (11)
- code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
- code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
- code/core/src/mocking-utils/index.ts
- code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
- code/builders/builder-vite/src/preset.ts
- code/core/src/mocking-utils/automock.ts
- code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
- code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
- code/builders/builder-vite/build-config.ts
- code/core/build-config.ts
- code/core/package.json
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/builders/builder-vite/src/index.tscode/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-vite/package.jsoncode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/builders/builder-vite/src/index.tscode/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/builders/builder-vite/src/index.tscode/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/builders/builder-vite/src/index.tscode/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
🧠 Learnings (21)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/package.json
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/builders/builder-webpack5/package.json
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/builders/builder-webpack5/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run Prettier formatting on changed files before committing
Applied to files:
code/builders/builder-vite/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option
Applied to files:
code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
⏰ 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
🔇 Additional comments (6)
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts (1)
1-1: LGTM!The import path update correctly moves to the centralized mocking utilities path, aligning with the PR's consolidation objectives.
code/builders/builder-webpack5/build-config.ts (1)
25-29: LGTM!The new build configuration entry for the storybook-mock-transform-loader is consistent with other loader entries and properly configured with
dts: false.code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts (1)
4-4: LGTM!Using a type-only import for
LoaderContextis a good practice that helps reduce bundle size.code/builders/builder-webpack5/package.json (1)
35-35: LGTM!The new export entry correctly exposes the storybook-mock-transform-loader and aligns with the build configuration and other loader exports.
code/builders/builder-vite/src/index.ts (1)
67-67: Node.js compatibility verified—no issues found.The repository requires Node.js >=22.0.0 (per root
package.json) with .nvmrc set to 22.16.0. Sinceimport.meta.resolvebecame stable in Node.js 20.6.0, the code at line 67 is fully compatible and does not require any flags or adjustments.code/builders/builder-vite/package.json (1)
37-37: All verification points confirmed—no issues found.The preset module is properly configured for build and publication:
- build-config.ts explicitly defines the preset entry point with
exportEntries: ['./preset']andentryPoint: './src/preset.ts'- package.json correctly exports
"./preset": "./dist/preset.js"- Source file exists at
src/preset.tswith proper exports- Published files include
dist/**/*in the files array, ensuringdist/preset.jswill be included in the npm packageThe new export is correct and properly configured in the build system.
valentinpalkovic
force-pushed
the
valentin/cli-init-docs-performance
branch
from
6046f27 to
4efdf6a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (1)
5-10: Consider consolidating imports from the same module.Both imports are now sourcing from
storybook/internal/mocking-utils. While the current approach is correct, consolidating them into a single import statement would improve readability.Apply this diff to consolidate the imports:
-import { babelParser, extractMockCalls } from 'storybook/internal/mocking-utils'; -import { - getIsExternal, - resolveExternalModule, - resolveWithExtensions, -} from 'storybook/internal/mocking-utils'; +import { + babelParser, + extractMockCalls, + getIsExternal, + resolveExternalModule, + resolveWithExtensions, +} from 'storybook/internal/mocking-utils';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
code/builders/builder-vite/build-config.ts(1 hunks)code/builders/builder-vite/package.json(1 hunks)code/builders/builder-vite/src/index.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts(1 hunks)code/builders/builder-vite/src/preset.ts(1 hunks)code/builders/builder-webpack5/build-config.ts(1 hunks)code/builders/builder-webpack5/package.json(1 hunks)code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts(1 hunks)code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts(1 hunks)code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts(3 hunks)code/core/build-config.ts(1 hunks)code/core/package.json(2 hunks)code/core/src/core-server/presets/common-preset.ts(0 hunks)code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts(0 hunks)code/core/src/mocking-utils/automock.ts(2 hunks)code/core/src/mocking-utils/index.ts(1 hunks)
💤 Files with no reviewable changes (2)
- code/core/src/core-server/presets/common-preset.ts
- code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts
🚧 Files skipped from review as they are similar to previous changes (11)
- code/builders/builder-vite/src/index.ts
- code/builders/builder-vite/package.json
- code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
- code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
- code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
- code/builders/builder-vite/src/preset.ts
- code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
- code/core/src/mocking-utils/automock.ts
- code/builders/builder-webpack5/build-config.ts
- code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
- code/builders/builder-vite/build-config.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/builders/builder-webpack5/package.jsoncode/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
🧠 Learnings (21)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/package.json
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/core/src/mocking-utils/index.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/core/src/mocking-utils/index.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/core/build-config.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/core/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
⏰ 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
🔇 Additional comments (7)
code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts (1)
5-5: LGTM! Import refactored to use centralized utility.The import path change from a relative path to
storybook/internal/commonaligns with the PR's goal of consolidating utilities into centralized internal packages. The usage ofresolvePackageDirthroughout the file remains unchanged.code/builders/builder-webpack5/package.json (1)
35-35: LGTM! Export added for the mock transform loader.The new export follows the existing pattern and correctly exposes the storybook-mock-transform-loader from the builder-webpack5 package, aligning with the PR's goal of moving loaders into appropriate builders.
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (1)
12-12: Type-only import is correct.Converting to a type-only import is a good TypeScript practice. The placement after other imports is acceptable, though grouping all imports together at the top is more conventional.
code/core/src/mocking-utils/index.ts (1)
1-4: LGTM! Consolidated mocking utilities entry point.The barrel export pattern appropriately consolidates mocking utilities from multiple internal modules into a single entry point, creating a clean public API surface for
storybook/internal/mocking-utils.code/core/package.json (2)
121-124: LGTM! Consolidated mocking utilities export.The new
./internal/mocking-utilsexport provides a centralized entry point for mocking utilities, aligning with the PR's refactoring goals and the new index file atcode/core/src/mocking-utils/index.ts.
182-182: LGTM! Formatting adjustment for exports block.The formatting change maintains valid JSON structure. The AI summary indicates that webpack loader exports were removed from core and moved to the builder-webpack5 package, which aligns with the PR's goal of moving loaders into appropriate builders.
code/core/build-config.ts (1)
80-82: LGTM! Consolidated mocking utilities build entry.The new build entry consolidates webpack loader presets into a single mocking-utils module, correctly pointing to the new barrel export at
./src/mocking-utils/index.tsand exporting as./internal/mocking-utils, which aligns with the package.json export and the PR's refactoring goals.
valentinpalkovic
force-pushed
the
valentin/cli-init-docs-performance
branch
from
4efdf6a to
ded57cd
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (1)
45-57: Fix potential runtime errors and overly broad regex.This code segment has the same issues previously flagged:
- Line 48: Non-null assertions on
config.module!.rules!will throw at runtime if either is undefined.- Lines 49-50: The regex
/preview\.(t|j)sx?$/matches ANY file ending withpreview.(t|j)sx?anywhere in the project, not just the specific preview config file atpreviewConfigPath.Apply this diff to fix both issues:
config.plugins = config.plugins || []; + config.module = config.module || {}; + config.module.rules = config.module.rules || []; // 1. Add the loader to normalize sb.mock(import(...)) calls. - config.module!.rules!.push({ - test: /preview\.(t|j)sx?$/, + config.module.rules.push({ + test: new RegExp(`${previewConfigPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`), use: [ { loader: fileURLToPath( - import.meta.resolve('@storybook/builder-webpack5/loaders/storybook-mock-transform-loader') + import.meta.resolve('storybook/webpack/loaders/storybook-mock-transform-loader') ), }, ], });
🧹 Nitpick comments (2)
code/builders/builder-vite/src/preset.ts (2)
9-9: Consider adding an explicit return type annotation.While TypeScript can infer the return type, explicitly annotating
Promise<UserConfig>improves clarity and catches type errors earlier for exported functions.Apply this diff to add the return type:
-export async function viteFinal(existing: UserConfig, options: Options) { +export async function viteFinal(existing: UserConfig, options: Options): Promise<UserConfig> {
19-30: Simplify redundant conditional check.Since the function returns early when
previewConfigPathis falsy (line 13), the ternary operator at line 23 is redundant—previewConfigPathis guaranteed to be truthy at this point.Apply this diff to simplify:
return { ...existing, plugins: [ ...(existing.plugins ?? []), - ...(previewConfigPath - ? [ - viteInjectMockerRuntime({ previewConfigPath }), - viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), - ] - : []), + viteInjectMockerRuntime({ previewConfigPath }), + viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), ], };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
code/builders/builder-vite/build-config.ts(1 hunks)code/builders/builder-vite/package.json(1 hunks)code/builders/builder-vite/src/index.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts(1 hunks)code/builders/builder-vite/src/preset.ts(1 hunks)code/builders/builder-webpack5/build-config.ts(1 hunks)code/builders/builder-webpack5/package.json(1 hunks)code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts(1 hunks)code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts(1 hunks)code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts(3 hunks)code/core/build-config.ts(1 hunks)code/core/package.json(2 hunks)code/core/src/core-server/presets/common-preset.ts(0 hunks)code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts(0 hunks)code/core/src/mocking-utils/automock.ts(2 hunks)code/core/src/mocking-utils/index.ts(1 hunks)
💤 Files with no reviewable changes (2)
- code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts
- code/core/src/core-server/presets/common-preset.ts
🚧 Files skipped from review as they are similar to previous changes (13)
- code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
- code/core/src/mocking-utils/automock.ts
- code/builders/builder-webpack5/build-config.ts
- code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
- code/builders/builder-vite/src/index.ts
- code/core/src/mocking-utils/index.ts
- code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
- code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
- code/builders/builder-vite/build-config.ts
- code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
- code/core/build-config.ts
- code/builders/builder-vite/package.json
- code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/builders/builder-webpack5/package.jsoncode/core/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-vite/src/preset.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-vite/src/preset.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-vite/src/preset.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-vite/src/preset.ts
🧠 Learnings (22)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/builders/builder-webpack5/package.jsoncode/core/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/core/package.json
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/core/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/core/package.json
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/core/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/core/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/core/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/core/package.json
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/core/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/core/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/core/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/core/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/core/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run Prettier formatting on changed files before committing
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run ESLint on changed files and fix all errors/warnings before committing (use `yarn lint:js:cmd <file>`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
🧬 Code graph analysis (2)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (1)
WebpackMockPlugin(50-167)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
WebpackInjectMockerRuntimePlugin(18-100)
code/builders/builder-vite/src/preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts (1)
viteInjectMockerRuntime(19-106)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (1)
viteMockPlugin(41-177)
⏰ 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
🔇 Additional comments (7)
code/core/package.json (1)
121-124: Webpack loader exports successfully removed.Verification confirms that
./webpack/loaders/storybook-mock-transform-loaderand./webpack/loaders/webpack-automock-loaderhave been deleted from the exports, and the new./internal/mocking-utilsexport is correctly formatted and positioned.code/builders/builder-webpack5/package.json (1)
35-35: Export addition verified and correctly configured.The
./loaders/storybook-mock-transform-loaderexport is properly configured in bothpackage.jsonand the build configuration. The build-config.ts entry is present with the correct source file path and export reference.code/builders/builder-vite/src/preset.ts (3)
1-7: LGTM! Imports are clean and appropriate.All necessary dependencies are imported correctly for the preset implementation.
10-15: LGTM! Early return pattern is clean.The logic correctly handles the case where no preview config exists by returning the original config unchanged.
17-17: LGTM! CoreOptions fetched correctly.The preset application is properly awaited and only executes when a preview config exists.
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (2)
1-3: LGTM!The new imports are appropriate for the webpackFinal function's functionality.
59-66: LGTM!Plugin instantiation is correct and matches the expected constructor signatures.
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
Outdated
Show resolved
Hide resolved
valentinpalkovic
force-pushed
the
valentin/cli-init-docs-performance
branch
2 times, most recently
from
20f5e49 to
b5fb75a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (1)
45-54: Fix non-null assertions and overly broad regex.This code has two issues (as previously noted in past reviews):
Line 45: Non-null assertions on
config.module!.rules!will throw a runtime error if either is undefined.Line 46: The regex
/preview\.(t|j)sx?$/will match ANY file ending withpreview.(t|j)sx?, not just the specific preview config file. This could unintentionally transform other files.Apply this diff to fix both issues:
config.plugins = config.plugins || []; + config.module = config.module || {}; + config.module.rules = config.module.rules || []; // 1. Add the loader to normalize sb.mock(import(...)) calls. - config.module!.rules!.push({ - test: /preview\.(t|j)sx?$/, + config.module.rules.push({ + test: new RegExp(`${previewConfigPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`), use: [ { loader: fileURLToPath( - import.meta.resolve('storybook/webpack/loaders/storybook-mock-transform-loader') + import.meta.resolve('@storybook/builder-webpack5/loaders/storybook-mock-transform-loader') ), }, ], });Note: The regex now matches the exact preview config path by escaping special regex characters, and the loader path has been corrected to use
@storybook/builder-webpack5instead ofstorybook.
🧹 Nitpick comments (1)
code/core/src/mocking-utils/runtime.ts (1)
13-28: Consider adding error handling for bundle failures.The function centralizes runtime bundling effectively, but
buildSynccan throw errors if the template file is missing or bundling fails. Consider wrapping the build in a try-catch block to provide a more helpful error message.Apply this diff to add error handling:
export function getMockerRuntime() { + try { // Use esbuild to bundle the runtime script and its dependencies (`@vitest/mocker`, etc.) // into a single, self-contained string of code. const bundleResult = buildSync({ entryPoints: [runtimeTemplatePath], bundle: true, write: false, // Return the result in memory instead of writing to disk format: 'esm', target: 'es2020', external: ['msw/browser', 'msw/core/http'], }); const runtimeScriptContent = bundleResult.outputFiles[0].text; return runtimeScriptContent; + } catch (error) { + throw new Error( + `Failed to bundle mocker runtime from ${runtimeTemplatePath}: ${error instanceof Error ? error.message : String(error)}` + ); + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
code/builders/builder-vite/build-config.ts(1 hunks)code/builders/builder-vite/package.json(1 hunks)code/builders/builder-vite/src/index.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts(1 hunks)code/builders/builder-vite/src/preset.ts(1 hunks)code/builders/builder-webpack5/build-config.ts(1 hunks)code/builders/builder-webpack5/package.json(1 hunks)code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts(1 hunks)code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts(2 hunks)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts(2 hunks)code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts(3 hunks)code/core/build-config.ts(1 hunks)code/core/package.json(2 hunks)code/core/src/core-server/presets/common-preset.ts(0 hunks)code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts(0 hunks)code/core/src/mocking-utils/automock.ts(2 hunks)code/core/src/mocking-utils/index.ts(1 hunks)code/core/src/mocking-utils/runtime.ts(1 hunks)
💤 Files with no reviewable changes (2)
- code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts
- code/core/src/core-server/presets/common-preset.ts
🚧 Files skipped from review as they are similar to previous changes (9)
- code/core/src/mocking-utils/index.ts
- code/core/package.json
- code/builders/builder-vite/src/preset.ts
- code/builders/builder-vite/build-config.ts
- code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
- code/builders/builder-vite/package.json
- code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
- code/builders/builder-vite/src/index.ts
- code/builders/builder-webpack5/package.json
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
🧠 Learnings (31)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run Prettier formatting on changed files before committing
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run ESLint on changed files and fix all errors/warnings before committing (use `yarn lint:js:cmd <file>`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Each mock implementation should return a Promise for async functions
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/core/src/mocking-utils/runtime.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/automock.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Place all mocks at the top of the test file before any test cases
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/builders/builder-webpack5/build-config.ts
🧬 Code graph analysis (3)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (1)
WebpackMockPlugin(51-168)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
WebpackInjectMockerRuntimePlugin(15-78)
code/core/src/mocking-utils/runtime.ts (1)
code/core/src/shared/utils/module.ts (1)
resolvePackageDir(28-33)
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
code/core/src/mocking-utils/runtime.ts (1)
getMockerRuntime(13-28)
⏰ 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
🔇 Additional comments (15)
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (1)
3-9: LGTM! Import consolidation to centralized mocking utilities.The import paths have been successfully updated to use the centralized
storybook/internal/mocking-utilspackage, which aligns with the PR's goal of consolidating mocking utilities into a shared internal surface.code/core/src/mocking-utils/automock.ts (3)
15-15: LGTM! Centralizes the global accessor constant.Exporting
__STORYBOOK_GLOBAL_THIS_ACCESSOR__from this module eliminates a cross-dependency and centralizes the constant definition where it's used.
17-22: LGTM! Correct usage of the centralized constant.The function now uses the locally defined constant with
JSON.stringifyto ensure proper quoting in the generated code.
53-54: LGTM! Consistent default value.The default
globalThisAccessornow consistently uses the centralized constant.code/core/build-config.ts (1)
80-82: LGTM! Consolidates mocking utilities into a single entry.Replacing the two separate webpack loader entries with a unified
internal/mocking-utilsentry point simplifies the build configuration and aligns with the PR's consolidation goals.code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts (1)
1-1: LGTM! Import path updated to use centralized mocking utilities.The import source has been correctly updated to use the new centralized
storybook/internal/mocking-utilspackage.code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (2)
5-13: LGTM! Import consolidation to centralized mocking utilities.The imports have been successfully consolidated to use
storybook/internal/mocking-utils, maintaining all required functionality while simplifying the import structure.
152-152: LGTM! Loader path updated to reflect builder-specific location.The loader path has been correctly updated from
storybook/webpack/loaders/webpack-automock-loaderto@storybook/builder-webpack5/loaders/webpack-automock-loader, aligning with the PR's goal of moving loaders into appropriate builders.code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (2)
1-1: LGTM! Adopts centralized runtime generation.Importing
getMockerRuntimefrom the centralized mocking utilities simplifies this plugin and reduces code duplication.
55-55: LGTM! Simplified runtime injection using centralized function.Replacing the in-file bundling logic with a call to
getMockerRuntime()reduces complexity while maintaining the same functionality. The plugin now delegates runtime generation to the centralized utility.code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (4)
1-3: LGTM! Necessary imports for the new webpackFinal function.The imports for
fileURLToPathandfindConfigFileare correctly added to support the new webpack configuration logic.
12-13: LGTM! Static imports for webpack plugins.The webpack plugins are now imported statically, which is the correct approach as noted in the past review comments.
34-42: LGTM! Proper initialization and early return.The function correctly finds the preview config file and returns early if none exists. The
config.pluginsinitialization is also correct.
56-63: LGTM! Correct plugin integration.The
WebpackMockPluginandWebpackInjectMockerRuntimePluginare correctly instantiated and added to the webpack configuration, completing the mocking infrastructure setup.code/builders/builder-webpack5/build-config.ts (1)
25-34: Now I need to check the actual implementation of these loader files:✅ LGTM! Build config entries are correct.
The new loader entries in
build-config.ts(lines 25-34) are properly configured:
- Both loader files exist at their specified paths
- Package exports are correctly configured for both loaders alongside the existing export-order-loader
- The entries follow the established pattern with consistent
dts: falsesettings- Export entry paths match package.json exports exactly
valentinpalkovic
force-pushed
the
valentin/cli-init-docs-performance
branch
from
b5fb75a to
6fb8d64
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (1)
45-54: Fix non-null assertions and overly broad regex.This matches the previously raised concern: Line 45 uses non-null assertions
config.module!.rules!without ensuring they exist, which will cause runtime errors if either is undefined. Additionally, the regex on line 46 matches ANY file ending withpreview.(t|j)sx?, not just the specific preview config file.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (21)
code/builders/builder-vite/build-config.ts(1 hunks)code/builders/builder-vite/package.json(2 hunks)code/builders/builder-vite/src/index.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/utils.ts(0 hunks)code/builders/builder-vite/src/preset.ts(1 hunks)code/builders/builder-webpack5/build-config.ts(1 hunks)code/builders/builder-webpack5/package.json(1 hunks)code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts(1 hunks)code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts(2 hunks)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts(2 hunks)code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts(3 hunks)code/core/build-config.ts(1 hunks)code/core/package.json(2 hunks)code/core/src/core-server/presets/common-preset.ts(0 hunks)code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts(0 hunks)code/core/src/mocking-utils/automock.ts(2 hunks)code/core/src/mocking-utils/index.ts(1 hunks)code/core/src/mocking-utils/runtime.ts(1 hunks)
💤 Files with no reviewable changes (3)
- code/builders/builder-vite/src/plugins/vite-mock/utils.ts
- code/core/src/core-server/presets/common-preset.ts
- code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- code/builders/builder-vite/src/index.ts
- code/builders/builder-vite/package.json
- code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
- code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
- code/builders/builder-vite/build-config.ts
- code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
🧠 Learnings (31)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-webpack5/package.json
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/core/build-config.tscode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/build-config.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/core/src/mocking-utils/index.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/core/src/mocking-utils/automock.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Each mock implementation should return a Promise for async functions
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/runtime.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/core/src/mocking-utils/automock.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/core/src/mocking-utils/automock.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/core/src/mocking-utils/automock.tscode/core/package.jsoncode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/index.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run Prettier formatting on changed files before committing
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/builders/builder-webpack5/build-config.tscode/core/package.jsoncode/builders/builder-webpack5/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run ESLint on changed files and fix all errors/warnings before committing (use `yarn lint:js:cmd <file>`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/package.jsoncode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/builders/builder-webpack5/build-config.tscode/core/package.json
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/core/package.jsoncode/builders/builder-webpack5/package.json
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/core/package.jsoncode/builders/builder-webpack5/package.json
🧬 Code graph analysis (3)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (1)
WebpackMockPlugin(51-168)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
WebpackInjectMockerRuntimePlugin(15-78)
code/core/src/mocking-utils/runtime.ts (1)
code/core/src/shared/utils/module.ts (1)
resolvePackageDir(28-33)
code/builders/builder-vite/src/preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts (1)
viteInjectMockerRuntime(19-106)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (1)
viteMockPlugin(41-177)
⏰ 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
🔇 Additional comments (5)
code/builders/builder-webpack5/build-config.ts (1)
25-34: LGTM! Loader entries properly configured.The two new loader entries follow the existing pattern and are correctly structured with the appropriate export entries, entry points, and
dts: falseflags.code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (2)
34-64: Good integration of mocking infrastructure.The function properly locates the preview config, gracefully returns early if not found, and correctly wires up the three mocking components (transform loader, mock plugin, and runtime injection plugin). The overall logic flow is sound, pending the fixes for the non-null assertions and regex pattern.
1-13: Clean import structure.The imports are well-organized, using proper internal package paths (
storybook/internal/common,storybook/internal/node-logger) and Node.js built-ins, consistent with the codebase patterns.code/core/package.json (1)
121-124: LGTM! Export properly structured.The new
"./internal/mocking-utils"export follows the established pattern for internal exports with correct types and default fields pointing to the appropriate dist paths.code/core/build-config.ts (1)
80-82: LGTM! Mocking utilities entry properly configured.The new node entry consolidates mocking utilities under a single internal export path, aligning with the package.json changes and the PR's objective to centralize mocking infrastructure.
Comment on lines
+21
to
+33
| plugins: [ | ||
| ...(existing.plugins ?? []), | ||
| ...(previewConfigPath | ||
| ? [ | ||
| viteInjectMockerRuntime({ previewConfigPath }), | ||
| viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), | ||
| ] | ||
| : []), | ||
| ], | ||
| }; |
There was a problem hiding this comment.
Normalize existing plugins before spreading
existing.plugins can legally be a single PluginOption (e.g. plugins: react()), so using the spread operator tries to iterate a non-iterable and throws at runtime. That regresses valid user configs. Normalize to an array before spreading so we don't crash.
- return {
- ...existing,
- plugins: [
- ...(existing.plugins ?? []),
- ...(previewConfigPath
- ? [
- viteInjectMockerRuntime({ previewConfigPath }),
- viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }),
- ]
- : []),
- ],
- };
+ const existingPlugins = existing.plugins
+ ? Array.isArray(existing.plugins)
+ ? existing.plugins
+ : [existing.plugins]
+ : [];
+
+ return {
+ ...existing,
+ plugins: [
+ ...existingPlugins,
+ viteInjectMockerRuntime({ previewConfigPath }),
+ viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }),
+ ],
+ };📝 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
| plugins: [ | |
| ...(existing.plugins ?? []), | |
| ...(previewConfigPath | |
| ? [ | |
| viteInjectMockerRuntime({ previewConfigPath }), | |
| viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), | |
| ] | |
| : []), | |
| ], | |
| }; | |
| const existingPlugins = existing.plugins | |
| ? Array.isArray(existing.plugins) | |
| ? existing.plugins | |
| : [existing.plugins] | |
| : []; | |
| return { | |
| ...existing, | |
| plugins: [ | |
| ...existingPlugins, | |
| ...(previewConfigPath | |
| ? [ | |
| viteInjectMockerRuntime({ previewConfigPath }), | |
| viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), | |
| ] | |
| : []), | |
| ], | |
| }; |
🤖 Prompt for AI Agents
In code/builders/builder-vite/src/preset.ts around lines 21 to 30,
existing.plugins may be a single PluginOption (non-iterable), so spreading it
causes a runtime crash; normalize existing.plugins to an array before spreading
by converting it to an array when it is not one (e.g. use
Array.isArray(existing.plugins) ? existing.plugins : [existing.plugins], or
fallback to [] if undefined), then spread that normalized array into plugins
alongside the preview plugins.
6fb8d64 to
9d6dadc
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
code/builders/builder-vite/src/preset.ts (1)
21-30: Critical: Normalize plugins before spreading to prevent runtime crash.This issue was flagged in a previous review.
existing.pluginscan be a singlePluginOption(non-iterable), so spreading it directly throws at runtime and breaks valid user configs.Apply this diff to normalize plugins before spreading:
+ const existingPlugins = existing.plugins + ? Array.isArray(existing.plugins) + ? existing.plugins + : [existing.plugins] + : []; + return { ...existing, plugins: [ - ...(existing.plugins ?? []), - ...(previewConfigPath - ? [ - viteInjectMockerRuntime({ previewConfigPath }), - viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), - ] - : []), + ...existingPlugins, + viteInjectMockerRuntime({ previewConfigPath }), + viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), ], };
🧹 Nitpick comments (1)
code/builders/builder-vite/src/preset.ts (1)
23-28: Simplify by removing redundant conditional.Lines 13-15 already return early if
previewConfigPathis falsy, so the ternary check on line 23 is redundant—the false branch is unreachable.Apply this diff to simplify:
return { ...existing, plugins: [ ...(existing.plugins ?? []), - ...(previewConfigPath - ? [ - viteInjectMockerRuntime({ previewConfigPath }), - viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), - ] - : []), + viteInjectMockerRuntime({ previewConfigPath }), + viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }), ], };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (24)
code/addons/vitest/src/vitest-plugin/index.ts(1 hunks)code/builders/builder-vite/build-config.ts(1 hunks)code/builders/builder-vite/package.json(2 hunks)code/builders/builder-vite/preset.js(1 hunks)code/builders/builder-vite/src/index.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/utils.ts(0 hunks)code/builders/builder-vite/src/preset.ts(1 hunks)code/builders/builder-webpack5/build-config.ts(1 hunks)code/builders/builder-webpack5/package.json(1 hunks)code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts(1 hunks)code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts(2 hunks)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts(2 hunks)code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts(3 hunks)code/core/build-config.ts(1 hunks)code/core/package.json(2 hunks)code/core/src/core-server/load.ts(2 hunks)code/core/src/core-server/presets/common-preset.ts(0 hunks)code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts(0 hunks)code/core/src/mocking-utils/automock.ts(2 hunks)code/core/src/mocking-utils/index.ts(1 hunks)code/core/src/mocking-utils/runtime.ts(1 hunks)
💤 Files with no reviewable changes (3)
- code/builders/builder-vite/src/plugins/vite-mock/utils.ts
- code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts
- code/core/src/core-server/presets/common-preset.ts
🚧 Files skipped from review as they are similar to previous changes (11)
- code/builders/builder-vite/package.json
- code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
- code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
- code/core/src/mocking-utils/runtime.ts
- code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
- code/core/src/mocking-utils/index.ts
- code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
- code/core/src/mocking-utils/automock.ts
- code/builders/builder-webpack5/package.json
- code/core/package.json
- code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/builders/builder-vite/preset.jscode/addons/vitest/src/vitest-plugin/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/core-server/load.tscode/builders/builder-vite/build-config.tscode/builders/builder-vite/src/index.tscode/core/build-config.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/builders/builder-vite/preset.jscode/addons/vitest/src/vitest-plugin/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/core-server/load.tscode/builders/builder-vite/build-config.tscode/builders/builder-vite/src/index.tscode/core/build-config.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/builders/builder-vite/preset.jscode/addons/vitest/src/vitest-plugin/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/core-server/load.tscode/builders/builder-vite/build-config.tscode/builders/builder-vite/src/index.tscode/core/build-config.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/builders/builder-vite/preset.jscode/addons/vitest/src/vitest-plugin/index.tscode/builders/builder-vite/src/preset.tscode/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/core-server/load.tscode/builders/builder-vite/build-config.tscode/builders/builder-vite/src/index.tscode/core/build-config.ts
🧠 Learnings (24)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/builders/builder-vite/preset.jscode/builders/builder-webpack5/build-config.tscode/builders/builder-vite/build-config.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:04.287Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-09-17T08:11:04.287Z
Learning: Applies to code/vitest.workspace.ts : Keep and use the Vitest workspace configuration at code/vitest.workspace.ts
Applied to files:
code/addons/vitest/src/vitest-plugin/index.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/addons/vitest/src/vitest-plugin/index.tscode/builders/builder-webpack5/build-config.tscode/core/src/core-server/load.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/addons/vitest/src/vitest-plugin/index.tscode/core/src/core-server/load.ts
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/builders/builder-webpack5/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/build-config.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/builders/builder-webpack5/build-config.tscode/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/build-config.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/core/src/core-server/load.ts
🧬 Code graph analysis (2)
code/builders/builder-vite/src/preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts (1)
viteInjectMockerRuntime(19-106)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (1)
viteMockPlugin(41-177)
code/core/src/core-server/load.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
getStorybookInfo(133-187)code/builders/builder-vite/src/index.ts (1)
corePresets(67-67)code/builders/builder-webpack5/src/index.ts (1)
corePresets(343-345)
⏰ 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
🔇 Additional comments (11)
code/addons/vitest/src/vitest-plugin/index.ts (1)
27-27: LGTM! Good cleanup of unused import.Removing
dirnamefrom the import list is correct since it's not used anywhere in the file. This improves code hygiene and avoids unnecessary imports.code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (1)
3-9: LGTM! Clean import consolidation.The centralized imports from
storybook/internal/mocking-utilsimprove maintainability and align with the PR's goal of moving mocking utilities into a shared package.code/builders/builder-vite/preset.js (1)
1-1: LGTM! Standard re-export pattern.This correctly exposes the built preset artifacts, aligning with the new build entry and package.json exports.
code/builders/builder-vite/src/index.ts (1)
67-67: LGTM! Well-integrated preset export.The
corePresetsarray usesimport.meta.resolvefor runtime module resolution, correctly referencing the newly exposed preset entry.code/builders/builder-vite/build-config.ts (1)
10-14: LGTM! Proper preset build entry.The new build entry correctly exposes the preset module with appropriate configuration (
dts: falseis acceptable for preset files).code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts (1)
1-1: LGTM: Import consolidation verified and correct.The import path
storybook/internal/mocking-utilsis correctly configured in code/core/package.json exports and properly resolves torewriteSbMockImportCalls, which is exported fromcode/core/src/mocking-utils/extract.tsand re-exported via the index file. The consolidation aligns with the PR's reorganization objectives.code/builders/builder-webpack5/build-config.ts (1)
25-34: Verified—loader integration is correct and complete.Package.json exports match build-config.ts entries, source files exist at specified paths, and no orphaned references found. The loader entries follow the established pattern and are properly integrated across the codebase.
code/core/build-config.ts (1)
80-82: Consolidation verified and complete.✓ Source file exists at expected location
✓ Package.json exports configured correctly with types and default entries
✓ Build config entry properly set (lines 80–82)
✓ All downstream imports migrated to new path (storybook/internal/mocking-utils)
✓ Old webpack loader exports removed
✓ No broken references or old imports remainingThe consolidation is solid and ready.
code/core/src/core-server/load.ts (3)
3-3: LGTM!The addition of
getStorybookInfoto the imports is appropriate and supports the streamlined preset loading logic below.
34-42: Validate that frameworkPackage and builderPackage are non-empty strings.The truthy checks on lines 36 and 40 won't catch empty strings. If
getStorybookInforeturns empty strings forframeworkPackageorbuilderPackage,join('', 'preset')will produce'preset', leading to invalid preset paths.Apply this diff to add explicit non-empty string validation:
- if (frameworkPackage) { + if (frameworkPackage && frameworkPackage.trim()) { corePresets.push(join(frameworkPackage, 'preset')); } - if (builderPackage) { + if (builderPackage && builderPackage.trim()) { corePresets.push(join(builderPackage, 'preset')); }⛔ Skipped due to learnings
Learnt from: mrginglymus Repo: storybookjs/storybook PR: 32556 File: code/core/package.json:309-313 Timestamp: 2025-09-29T13:20:23.346Z Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.Learnt from: CR Repo: storybookjs/storybook PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-10-13T13:33:14.659Z Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it thereLearnt from: ndelangen Repo: storybookjs/storybook PR: 32484 File: code/core/package.json:326-326 Timestamp: 2025-09-17T07:31:04.432Z Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.Learnt from: CR Repo: storybookjs/storybook PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-10-13T13:33:14.659Z Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
34-34: Error handling strategy for getStorybookInfo is correct and consistent with codebase patterns.The verification confirms that the missing try-catch at line 34 in
code/core/src/core-server/load.tsis intentional and matches the established error handling strategy across the codebase. ThegetStorybookInfofunction throws errors viainvariant()when configuration is invalid, and all callers—includingloadStorybook,buildIndex, andexperimental_loadStorybook—consistently allow errors to bubble up to higher-level handlers rather than catching them locally. This is a deliberate design pattern used uniformly throughout the codebase for centralized error handling.
valentinpalkovic
force-pushed
the
valentin/cli-init-docs-performance
branch
from
9d6dadc to
cc7069d
Compare
valentinpalkovic
force-pushed
the
valentin/cli-init-docs-performance
branch
from
cc7069d to
04f6bcd
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
12-12: Fix typo in comment.Line 12 contains a typo: "includiweng" should be "including".
Apply this diff:
- * This ensures the `sb` object is available globally before any other scripts, includiweng the + * This ensures the `sb` object is available globally before any other scripts, including the
♻️ Duplicate comments (1)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (1)
42-54: Fix non-null assertions and overly broad regex (previously flagged).This code still has the same two issues flagged in previous reviews:
Line 45: Non-null assertions on
config.module!.rules!will throw at runtime if either is undefined.Line 46: The regex
/preview\.(t|j)sx?$/matches ANY file in the project ending withpreview.(t|j)sx?, not just the specific preview config atpreviewConfigPath. For example,src/components/preview.tsxwould incorrectly be processed by this loader.Apply this diff to fix both issues:
config.plugins = config.plugins || []; + config.module = config.module || {}; + config.module.rules = config.module.rules || []; // 1. Add the loader to normalize sb.mock(import(...)) calls. - config.module!.rules!.push({ - test: /preview\.(t|j)sx?$/, + config.module.rules.push({ + test: new RegExp(`${previewConfigPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`), use: [ { loader: fileURLToPath( import.meta.resolve('@storybook/builder-webpack5/loaders/storybook-mock-transform-loader') ), }, ], });
🧹 Nitpick comments (2)
code/core/src/mocking-utils/runtime.ts (2)
6-11: Consider adding path validation.If the runtime template file is missing, the error will occur during esbuild execution rather than immediately at path resolution.
Consider validating the template path exists:
+import { existsSync } from 'node:fs'; + const runtimeTemplatePath = join( resolvePackageDir('storybook'), 'assets', 'server', 'mocker-runtime.template.js' ); + +if (!existsSync(runtimeTemplatePath)) { + throw new Error(`Mocker runtime template not found at ${runtimeTemplatePath}`); +}
16-16: Consider async bundling for better performance.Using
buildSyncblocks the event loop during bundling. For better performance, consider usingbuild(async) instead, especially if this function is called during development server startup.Convert to async:
-export function getMockerRuntime() { +export async function getMockerRuntime() { try { - const bundleResult = buildSync({ + const bundleResult = await build({ entryPoints: [runtimeTemplatePath], bundle: true, write: false, format: 'esm', target: 'es2020', external: ['msw/browser', 'msw/core/http'], }); const runtimeScriptContent = bundleResult.outputFiles[0].text; return runtimeScriptContent; } catch (error) { throw new Error(`Failed to bundle mocker runtime: ${error}`); } }Note: This would require updating all callers to await the result.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (27)
code/addons/vitest/src/vitest-plugin/index.ts(1 hunks)code/builders/builder-vite/build-config.ts(1 hunks)code/builders/builder-vite/package.json(2 hunks)code/builders/builder-vite/preset.js(1 hunks)code/builders/builder-vite/src/index.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts(1 hunks)code/builders/builder-vite/src/plugins/vite-mock/plugin.ts(3 hunks)code/builders/builder-vite/src/plugins/vite-mock/utils.ts(0 hunks)code/builders/builder-vite/src/preset.ts(1 hunks)code/builders/builder-vite/src/vite-config.ts(1 hunks)code/builders/builder-webpack5/build-config.ts(1 hunks)code/builders/builder-webpack5/package.json(2 hunks)code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts(1 hunks)code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts(1 hunks)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts(2 hunks)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts(3 hunks)code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts(3 hunks)code/core/build-config.ts(1 hunks)code/core/package.json(2 hunks)code/core/src/core-server/load.ts(2 hunks)code/core/src/core-server/presets/common-preset.ts(0 hunks)code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts(0 hunks)code/core/src/mocking-utils/automock.ts(2 hunks)code/core/src/mocking-utils/extract.ts(2 hunks)code/core/src/mocking-utils/index.ts(1 hunks)code/core/src/mocking-utils/resolve.ts(1 hunks)code/core/src/mocking-utils/runtime.ts(1 hunks)
💤 Files with no reviewable changes (3)
- code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/constants.ts
- code/core/src/core-server/presets/common-preset.ts
- code/builders/builder-vite/src/plugins/vite-mock/utils.ts
✅ Files skipped from review due to trivial changes (1)
- code/builders/builder-vite/src/vite-config.ts
🚧 Files skipped from review as they are similar to previous changes (13)
- code/builders/builder-vite/package.json
- code/builders/builder-vite/preset.js
- code/builders/builder-vite/src/preset.ts
- code/builders/builder-vite/src/index.ts
- code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
- code/builders/builder-vite/build-config.ts
- code/core/src/mocking-utils/automock.ts
- code/builders/builder-webpack5/build-config.ts
- code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
- code/addons/vitest/src/vitest-plugin/index.ts
- code/core/build-config.ts
- code/core/src/mocking-utils/index.ts
- code/core/package.json
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/core/src/core-server/load.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/core/src/core-server/load.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/core/src/core-server/load.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/core/src/core-server/load.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
🧠 Learnings (31)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/package.jsoncode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/package.jsoncode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/package.jsoncode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.tscode/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option
Applied to files:
code/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Each mock implementation should return a Promise for async functions
Applied to files:
code/core/src/mocking-utils/extract.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/core/src/mocking-utils/extract.tscode/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/core/src/mocking-utils/extract.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/package.jsoncode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/package.jsoncode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/core/src/mocking-utils/runtime.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.tscode/builders/builder-webpack5/package.json
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/builders/builder-webpack5/src/loaders/webpack-automock-loader.tscode/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/package.json
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocks
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/builders/builder-vite/src/plugins/vite-mock/plugin.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/core/src/mocking-utils/runtime.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.tscode/core/src/mocking-utils/resolve.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/core/src/core-server/load.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/core/src/core-server/load.tscode/builders/builder-webpack5/package.jsoncode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/core/src/core-server/load.tscode/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/builders/builder-webpack5/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run Prettier formatting on changed files before committing
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Run ESLint on changed files and fix all errors/warnings before committing (use `yarn lint:js:cmd <file>`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
🧬 Code graph analysis (6)
code/core/src/mocking-utils/extract.ts (1)
code/core/src/mocking-utils/resolve.ts (1)
resolveMock(74-99)
code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
code/core/src/mocking-utils/runtime.ts (1)
getMockerRuntime(13-28)
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (1)
code/core/src/mocking-utils/extract.ts (2)
extractMockCalls(85-202)babelParser(44-51)
code/core/src/mocking-utils/runtime.ts (1)
code/core/src/shared/utils/module.ts (1)
resolvePackageDir(28-33)
code/core/src/core-server/load.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
getStorybookInfo(133-187)code/builders/builder-vite/src/index.ts (1)
corePresets(67-67)code/builders/builder-webpack5/src/index.ts (1)
corePresets(343-345)
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (3)
code/core/src/common/utils/get-storybook-info.ts (1)
findConfigFile(99-103)code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts (1)
WebpackMockPlugin(49-167)code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (1)
WebpackInjectMockerRuntimePlugin(15-78)
⏰ 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
🔇 Additional comments (15)
code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts (1)
1-1: LGTM! Import centralization.The import path update correctly centralizes the mocking utilities.
code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts (1)
1-3: LGTM! Clean import refactoring.The import consolidation and type-only import are good improvements that enhance maintainability.
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts (3)
3-13: LGTM! Import consolidation and redirect support.The import consolidation aligns with the PR's centralization goal, and adding
findMockRedirectenables redirect-aware mock extraction.
59-59: LGTM! Redirect-aware mock extraction.The addition of the
findMockRedirectparameter enables redirect-aware mock extraction in the build pipeline.
68-68: LGTM! Consistent parameter usage.The
findMockRedirectparameter is correctly passed when re-extracting mocks during file changes.code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts (2)
1-1: LGTM! Centralized runtime retrieval.Importing
getMockerRuntimefrom the centralized location simplifies the plugin.
55-55: LGTM! Simplified runtime retrieval.Using the centralized
getMockerRuntime()function eliminates duplicate bundling logic and improves maintainability.code/core/src/mocking-utils/extract.ts (2)
94-99: LGTM! Completes dependency injection pattern.Adding the
findMockRedirectparameter completes the dependency injection pattern started inresolve.ts, improving testability.
163-168: LGTM! Correct parameter forwarding.The
findMockRedirectparameter is correctly forwarded toresolveMock.code/core/src/core-server/load.ts (1)
34-42: Review comment is incorrect; the code is properly defensive.The conditional checks correctly handle the fact that
frameworkPackageandbuilderPackageare optional properties in the return type ofgetStorybookInfo. The function intentionally returns early without these properties when the framework isn't configured, andbuilderPackagemay also beundefinedif the builder lookup fails. Silent skipping is appropriate here—undefined packages simply mean no presets to add, which is a normal and expected scenario in various Storybook configurations.Likely an incorrect or invalid review comment.
code/builders/builder-webpack5/package.json (2)
35-36: LGTM: Loader exports align with preset usage.The new loader exports are correctly structured and referenced by the webpackFinal function in custom-webpack-preset.ts.
59-59: LGTM: Dependency correctly placed for loader runtime access.The @vitest/mocker dependency is correctly placed in dependencies (not devDependencies) since the webpack loaders execute in the user's webpack context and need runtime access to this package.
code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts (3)
1-13: LGTM: Imports are clean and necessary.The static imports correctly address the previous feedback about top-level await blocking module initialization.
34-40: LGTM: Clean early-exit pattern.The function correctly exits early when no preview config exists, avoiding unnecessary transformations.
56-63: LGTM: Plugin integration is correct.The WebpackMockPlugin and WebpackInjectMockerRuntimePlugin are properly instantiated and integrated into the webpack configuration.
Comment on lines
+13
to
+28
| export function getMockerRuntime() { | ||
| // Use esbuild to bundle the runtime script and its dependencies (`@vitest/mocker`, etc.) | ||
| // into a single, self-contained string of code. | ||
| const bundleResult = buildSync({ | ||
| entryPoints: [runtimeTemplatePath], | ||
| bundle: true, | ||
| write: false, // Return the result in memory instead of writing to disk | ||
| format: 'esm', | ||
| target: 'es2020', | ||
| external: ['msw/browser', 'msw/core/http'], | ||
| }); | ||
|
|
||
| const runtimeScriptContent = bundleResult.outputFiles[0].text; | ||
|
|
||
| return runtimeScriptContent; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add error handling for bundling failures.
The buildSync call could fail for various reasons (missing template, syntax errors, etc.), but there's no error handling. Build failures will crash the process.
Add error handling:
export function getMockerRuntime() {
- // Use esbuild to bundle the runtime script and its dependencies (`@vitest/mocker`, etc.)
- // into a single, self-contained string of code.
- const bundleResult = buildSync({
- entryPoints: [runtimeTemplatePath],
- bundle: true,
- write: false, // Return the result in memory instead of writing to disk
- format: 'esm',
- target: 'es2020',
- external: ['msw/browser', 'msw/core/http'],
- });
-
- const runtimeScriptContent = bundleResult.outputFiles[0].text;
-
- return runtimeScriptContent;
+ try {
+ // Use esbuild to bundle the runtime script and its dependencies (`@vitest/mocker`, etc.)
+ // into a single, self-contained string of code.
+ const bundleResult = buildSync({
+ entryPoints: [runtimeTemplatePath],
+ bundle: true,
+ write: false, // Return the result in memory instead of writing to disk
+ format: 'esm',
+ target: 'es2020',
+ external: ['msw/browser', 'msw/core/http'],
+ });
+
+ const runtimeScriptContent = bundleResult.outputFiles[0].text;
+
+ return runtimeScriptContent;
+ } catch (error) {
+ throw new Error(`Failed to bundle mocker runtime: ${error}`);
+ }
}📝 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 function getMockerRuntime() { | |
| // Use esbuild to bundle the runtime script and its dependencies (`@vitest/mocker`, etc.) | |
| // into a single, self-contained string of code. | |
| const bundleResult = buildSync({ | |
| entryPoints: [runtimeTemplatePath], | |
| bundle: true, | |
| write: false, // Return the result in memory instead of writing to disk | |
| format: 'esm', | |
| target: 'es2020', | |
| external: ['msw/browser', 'msw/core/http'], | |
| }); | |
| const runtimeScriptContent = bundleResult.outputFiles[0].text; | |
| return runtimeScriptContent; | |
| } | |
| export function getMockerRuntime() { | |
| try { | |
| // Use esbuild to bundle the runtime script and its dependencies (`@vitest/mocker`, etc.) | |
| // into a single, self-contained string of code. | |
| const bundleResult = buildSync({ | |
| entryPoints: [runtimeTemplatePath], | |
| bundle: true, | |
| write: false, // Return the result in memory instead of writing to disk | |
| format: 'esm', | |
| target: 'es2020', | |
| external: ['msw/browser', 'msw/core/http'], | |
| }); | |
| const runtimeScriptContent = bundleResult.outputFiles[0].text; | |
| return runtimeScriptContent; | |
| } catch (error) { | |
| throw new Error(`Failed to bundle mocker runtime: ${error}`); | |
| } | |
| } |
🤖 Prompt for AI Agents
In code/core/src/mocking-utils/runtime.ts around lines 13 to 28, the buildSync
call to bundle the runtime has no error handling so failures will crash the
process; wrap the buildSync call in a try/catch, log or rethrow a clear error
with context (including the original error message and possibly the
runtimeTemplatePath), and ensure the function either returns a safe fallback or
throws a controlled Error after logging so callers can handle it; also validate
bundleResult.outputFiles exists and has content before accessing [0].text to
avoid undefined access.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.ts (1)
65-65: Test expectation correctly updated tologger.debug.The change appropriately reflects the implementation's shift to use
logger.debugfor auto-detected project types (more appropriate thanlogger.stepfor internal detection logging).For consistency with the established pattern in lines 38-39, consider adding a mock setup for
logger.debugin thebeforeEachblock:vi.mocked(logger.step).mockImplementation(() => {}); vi.mocked(logger.error).mockImplementation(() => {}); + vi.mocked(logger.debug).mockImplementation(() => {});While the test works correctly due to
{ spy: true }on line 27, explicitly mocking all used logger methods maintains consistency and makes the test setup clearer.code/core/src/mocking-utils/extract.test.ts (2)
9-15: Addspy: trueoption to vi.mock().Per coding guidelines, all vi.mock() calls should include the
spy: trueoption.As per coding guidelines.
Apply this diff:
-vi.mock('fs', async () => { +vi.mock('fs', { spy: true }, async () => { const actual = await vi.importActual<typeof import('fs')>('fs'); return { ...actual, readFileSync: vi.fn(), }; });
17-37: Address multiple coding guideline violations.This mock has several issues per coding guidelines:
- Missing
spy: trueoption- Mock implementation should be in
beforeEachblocks, not inline- Complex mock behavior (lines 19-35) lacks documentation
- Nested ternary operators (lines 20-27) reduce readability
As per coding guidelines.
Consider refactoring to:
-vi.mock('./resolve', async () => { +vi.mock('./resolve', { spy: true }); + +// In beforeEach or at the top level before tests: +beforeEach(() => { + vi.clearAllMocks(); + findMockRedirect.mockReturnValue(null); + + // Mock implementation with clear path resolution logic - return { - resolveMock: vi.fn((path, root, importer, findMockRedirect) => { - const result = - path === './bar/baz.js' - ? { absolutePath: '/abs/path/bar/baz.js', redirectPath: null } - : path === './bar/baz.utils' - ? { absolutePath: '/abs/path/bar/baz.utils.ts', redirectPath: null } - : path === './bar/baz.utils.ts' - ? { absolutePath: '/abs/path/bar/baz.utils.ts', redirectPath: null } - : { absolutePath: '/abs/path', redirectPath: null }; - - if (findMockRedirect) { - const redirectPath = findMockRedirect(root, result.absolutePath, null); - return { ...result, redirectPath }; - } - - return result; - }), - }; + vi.mocked(resolveModule.resolveMock).mockImplementation((path, root, importer, findMockRedirect) => { + // Map paths to their resolved absolute paths + const pathMap: Record<string, string> = { + './bar/baz.js': '/abs/path/bar/baz.js', + './bar/baz.utils': '/abs/path/bar/baz.utils.ts', + './bar/baz.utils.ts': '/abs/path/bar/baz.utils.ts', + }; + + const absolutePath = pathMap[path] || '/abs/path'; + const result = { absolutePath, redirectPath: null }; + + // If findMockRedirect is provided, compute redirectPath + if (findMockRedirect) { + const redirectPath = findMockRedirect(root, result.absolutePath, null); + return { ...result, redirectPath }; + } + + return result; + }); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/mocking-utils/extract.test.ts(3 hunks)code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
code/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)
**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together
Files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
**/*.@(test|spec).{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests usingvi.mock()(e.g., filesystem, loggers)
Files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
🧠 Learnings (19)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Each mock implementation should return a Promise for async functions
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/core/src/mocking-utils/extract.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/core/src/mocking-utils/extract.test.ts
🧬 Code graph analysis (1)
code/core/src/mocking-utils/extract.test.ts (1)
code/core/src/mocking-utils/extract.ts (1)
extractMockCalls(85-202)
⏰ 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
🔇 Additional comments (2)
code/core/src/mocking-utils/extract.test.ts (2)
30-30: Verify hardcodednullforexternalPathparameter.The third argument to
findMockRedirectis alwaysnull. Ensure this accurately reflects the expected test behavior, or add test cases that exercise non-nullexternalPathvalues if needed.
58-58: LGTM! ThefindMockRedirectparameter integration is correct.The new parameter is properly:
- Initialized as a mock function (line 58)
- Passed through to
extractMockCalls(lines 65-66)- Reset in
beforeEach(line 72)- Verified in test assertions (lines 96-101)
The implementation correctly extends the function signature and maintains test isolation.
Also applies to: 65-66, 72-72, 96-101
valentinpalkovic
added
the
ci:daily
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 #
What I did
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-32921-sha-16b7aab0. 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-32921-sha-16b7aab0valentin/cli-init-docs-performance16b7aab01762184454)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 publish.yml --field pr=32921Summary by CodeRabbit
Release Notes
New Features
Refactor
Dependencies