Core: Add experimental_devServer preset
#32816
Conversation
📝 WalkthroughWalkthroughThis pull request adds experimental dev server customization support. The dev server now applies an Changes
Sequence DiagramsequenceDiagram
participant Dev as Dev Server Init
participant Middleware as Middleware<br/>Layer
participant Preset as experimental_devServer<br/>Preset
Dev->>Middleware: Apply standard middlewares
Middleware-->>Dev: Middleware stack ready
rect rgb(200, 220, 240)
Note over Dev,Preset: New: Apply experimental preset
Dev->>Preset: Apply experimental_devServer<br/>preset (if configured)
Preset->>Preset: Register custom middlewares<br/>& hooks via ServerApp
Preset-->>Dev: Extension complete
end
Dev-->>Dev: Dev server initialization<br/>complete
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes The changes are focused and straightforward: runtime preset application and targeted type/interface exports. However, care should be taken with the public API exports and ensuring the preset application doesn't disrupt existing initialization flow. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit e0eeba2
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
![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/core/src/types/modules/core-common.ts (1)
501-502: Add JSDoc documentation for the experimental field.Consider adding JSDoc comments to document the purpose, usage, and example for this experimental feature. This is especially important for experimental APIs to help early adopters understand how to use them correctly.
Example documentation:
+ /** + * Extend the Storybook dev server with custom middleware and handlers. + * + * This allows addons and frameworks to attach routes and middleware to the dev server instance. + * + * @example + * ```ts + * experimental_devServer: async (app) => { + * app.use('/my-custom-route', (req, res) => { + * res.end('Custom response'); + * }); + * return app; + * } + * ``` + */ experimental_devServer?: ServerApp;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/core-server/dev-server.ts(1 hunks)code/core/src/types/modules/core-common.ts(2 hunks)
🧰 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/core/src/core-server/dev-server.tscode/core/src/types/modules/core-common.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/src/core-server/dev-server.tscode/core/src/types/modules/core-common.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/src/core-server/dev-server.tscode/core/src/types/modules/core-common.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/src/core-server/dev-server.tscode/core/src/types/modules/core-common.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 (3)
code/core/src/types/modules/core-common.ts (2)
228-228: LGTM: Exporting ServerApp is necessary for the public API.Exporting the
ServerAppinterface allows addons and users to reference this type when implementing theexperimental_devServerpreset.
232-232: LGTM: New overload enables pattern-less middleware registration.The additional overload for
use(...handlers: Middleware<T>[]): this;correctly supports the Express/Polka pattern of registering middleware without a specific route pattern.code/core/src/core-server/dev-server.ts (1)
54-55: LGTM: Preset application is correctly placed and implemented.The
experimental_devServerpreset is applied at the right time—after core middleware initialization but before the server starts listening—allowing addons to extend the dev server with custom routes and middleware. The implementation correctly passes theappinstance and follows the established preset pattern.
| experimental_devServer?: ServerApp; | ||
|
|
There was a problem hiding this comment.
Add corresponding entry in StorybookConfig interface for type completeness.
The experimental_devServer field is defined in StorybookConfigRaw but is missing from the StorybookConfig interface (lines 520-619). Following the pattern of other experimental fields like experimental_indexers (line 586), this should be added to StorybookConfig wrapped with PresetValue for proper type safety when users or addons define this in their configuration files.
Add this entry to the StorybookConfig interface (around line 587, after experimental_indexers):
/** Process CSF files for the story index. */
experimental_indexers?: PresetValue<StorybookConfigRaw['experimental_indexers']>;
+ /** Extend the dev server with custom middleware and handlers. */
+ experimental_devServer?: PresetValue<StorybookConfigRaw['experimental_devServer']>;
/** Docs related features in index generation */
docs?: PresetValue<StorybookConfigRaw['docs']>;Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In code/core/src/types/modules/core-common.ts around lines 501-502, the
experimental_devServer property exists on StorybookConfigRaw but is missing from
the StorybookConfig interface; add an entry to StorybookConfig (around line
~587, immediately after experimental_indexers) named experimental_devServer with
the same wrapping pattern as other experimental fields (i.e., use PresetValue
keyed to the ServerApp type or ServerApp | undefined) so the interface matches
StorybookConfigRaw and maintains type safety for user/addon configs.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
There was a problem hiding this comment.
@shilman I don't want this to be exposed to users' config types, it's too early for that. experimental_indexers is different, because honestly that's not really experimental anymore.
|
Warning Docstrings generation - IN PROGRESS Generating docstrings for this pull request |
yannbf
added
the
patch:yes
ndelangen
removed
the
patch:yes
Closes #
What I did
Added a new preset property,
experimental_devServer, that is very similar in nature toexperimental_serverChannel, in that it allows any addon/etc. to get access to the dev server instance. This is useful for attaching middlewares and other stuff to the dev server.We want this so that
@storybook/addon-mcpcan attach a handler on the/mcproute without using the current Vite-based workaround.With this, addons should be able to do:
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-32816-sha-28f59f53. 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-32816-sha-28f59f53jeppe/devserver-preset28f59f531761256366)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=32816Summary by CodeRabbit
New Features
/manifests/components.jsonendpoint for accessing generated component data.Accessibility
aria-selectedattribute to tab buttons for improved screen reader support.Dependencies
react-docgenandcomment-parserpackages for enhanced component documentation analysis.Summary by CodeRabbit
experimental_devServerconfiguration option introduced for advanced server customization