feat(framework-next): add storybook-next-rsbuild (Next.js via next-rspack bridge) - #471
feat(framework-next): add storybook-next-rsbuild (Next.js via next-rspack bridge)#471fi3ework wants to merge 74 commits into
Conversation
fi3ework
changed the title
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0e4a53c9b7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
50d041f to
88f1fda
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 88f1fda31b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6db52b905f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Deploying storybook-rsbuild-v2 with
|
| Latest commit: |
5e9bbdf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2f22a7ca.storybook-rsbuild-v2.pages.dev |
| Branch Preview URL: | https://feat-framework-next.storybook-rsbuild-v2.pages.dev |
Deploying storybook-rsbuild with
|
| Latest commit: |
5e9bbdf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://53955740.storybook-rsbuild.pages.dev |
| Branch Preview URL: | https://feat-framework-next.storybook-rsbuild.pages.dev |
storybook-addon-modernjs
storybook-addon-rslib
storybook-builder-rsbuild
storybook-html-rsbuild
storybook-next-rsbuild
storybook-react-rsbuild
storybook-react-native-web-rsbuild
storybook-vue3-rsbuild
storybook-web-components-rsbuild
rsbuild-plugin-react-native-web
commit: |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a7816cced0
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a4a16ebb7b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 47f1f0ca65
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 85da3200d4
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d6d3c58220
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
93c6688 to
1a16b24
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1a16b2424f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
fi3ework
changed the title
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 55ac33e062
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9b962d71ae
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0de8d510ae
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
0de8d51 to
22013ff
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 22013ff7b2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e10547b65f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 82db2045ec
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f48510861a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8e599ff7c4
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
8e599ff to
e436d6c
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e436d6cb94
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Define behavior in user terms instead of leaking bridge internals: drop unexplained 'bridge' terminology, NormalModule/DefinePlugin/IPC details, and the AGENTS.md four-party-contract link. Rename two sections (Custom webpack settings, Custom loaders (SVGR)) and convert the per-field carry-over info block to a table plus prose. Fix two Rspress directive parsing issues: a callout whose content starts with a list renders as raw text, and callout titles cannot contain backticks — demote the postcss block to a heading and the mock caveats to plain content. Claude-Session: https://claude.ai/code/session_017U7Ds8tunz37W53JmwCkGU
parameters.nextjs.image.loader was silently overwritten by the framework default loader whenever the component itself passed no loader prop, while the docs advertise loader in the nextjs.image parameters table. Precedence is now prop > per-story parameter > framework default, in both the next/image and next/legacy/image mocks. Deliberate divergence from the upstream port (upstream skips straight to its default), marked with an in-file comment. Reported by Codex review on PR #471. Claude-Session: https://claude.ai/code/session_017U7Ds8tunz37W53JmwCkGU
…mmand A bare next-rspack install pulls the registry's latest, which the startup check rejects whenever the project's next is not the newest supported release; and the matrix-selected @rsbuild/core was missing from the install command entirely. Show a fully version-qualified example and explain how to adapt it. Reported by Codex review on PR #471. Claude-Session: https://claude.ai/code/session_017U7Ds8tunz37W53JmwCkGU
f792033 to
9c23088
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9c23088469
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
9c23088 to
0bfc715
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c3602ae9c4
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
… storybook 10.5.0
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b8beeae5ed
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
…sandbox to 16.2.3
…devDeps to 16.2.3
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 10026178ca
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
…bject route params
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 34a58acfd7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
…orce exact next-rspack pairing
1 participant
Summary
Adds
storybook-next-rsbuild— a new Storybook framework package for Next.js, powered bynext-rspack.Bridge, don't simulate
Rather than manually reconstructing Next.js's build pipeline the way
@storybook/nextjs(webpack) and@storybook/nextjs-vitedo, this framework invokes Next.js's owngetBaseWebpackConfig()withNEXT_RSPACK=trueand cherry-picks six fields (alias,fallback,defines,resolveLoader,rawRules,rawPlugins) into Rsbuild viarsbuildFinal. The loader chain, SWC options, aliases, and defines are all produced by Next.js itself, so they follow Next.js releases automatically.This shifts maintenance from tracking 35+
next/dist/*internal paths to adapting one function signature per Next.js major. Bridging is structurally possible only on the Rspack side (Rspack is webpack-API-compatible; Vite/Turbopack are not).See
packages/framework-next/AGENTS.mdfor the full design guide: the four-party contract (Next.js / Rspack / Rsbuild / Storybook) and who wins each conflict, design trade-offs, and a shim catalogue with a "remove when" condition for every shim.What the bridge covers
builtin:swc-loaderis rewired to Next.js's loader chain so'use client',server-only, the JSX runtime, andnext/dynamicbehave natively.react/react-domaliases are stripped so React stays a singleton..css/.scssstay on Rsbuild's loaders. The only Next.js CSS concern kept isnext/font, whose synthetictarget.cssis routed to a dedicated font loader ported from@storybook/nextjs(injects@font-face/class CSS at runtime). A root-absolute /data:/https:url()passthrough filter mirrors Next'scssFileResolve.getBaseWebpackConfig({ dev })is called in the same mode Storybook builds for, so prod never emits dev artefacts — deleting the fragile post-hoc React-Refresh stripping that used to re-leak$ReactRefreshRuntime$into prod via every newoneOfbranch.next.configdeltas: userwebpack()mutations are diffed and forwarded — appended rules (bare loader names viaresolveLoader.modules), mutated Next rules,resolve.alias,resolve.fallback— withforwardNextConfigPlugins: falseby default (user plugins crash rspack IPC).optimizePackageImports: the__barrel_optimize__?names=…!=!<pkg>matchResource(which bypasses Rsbuild's.tsx?rule) is routed through the SWC shim chain so TS-source barrels (e.g.@mui) compile instead of being parsed as raw JS.fs/path/… get afalsefallback floor;node:-prefixed imports are normalized to bare names before resolution (StripNodeProtocolPlugin), so they resolve to empty modules instead of crashing at render.@rsbuild/coreis a peer, with a runtime invariant (check-rspack-invariant.ts) that aborts when its@rspack/corediffers from the onenext-rspackbrings in.Runtime decorators
Routing, head-manager, images, styled-jsx, and export-mocks are ported from
@storybook/nextjs-viteand carry// Port: <upstream-path>/// Adapted from <upstream-path>markers, so upstream sync is a one-line grep.Regression coverage distilled from a community gauntlet
A set of real-world community Next.js projects (transit, oak, console, proposalsapp, anticapture, safe-wallet, t-performance-dash, usaco-guide) was used as an out-of-tree build gauntlet. Because those projects aren't committed, their regression value is distilled into permanent tests so the bridge can't silently regress:
isRuntimeCssUrl,withRuntimeUrlFilter,makeFontRule,makeBarrelRule,mergeFallback,ruleTestSignature,NODE_BUILTINS_FALLBACK), each case tied to the gauntlet project that surfaced it.sandboxes/nextjsstories + Playwright e2e for: App Router + Pages Router,next/font(Google + CSS-variable),next/image(local/remote/fill/blur/priority),next/dynamic,next/navigation+next/head, CSS Modules, global CSS, root-absolute &data:CSS URLs, styled-jsx, styled-components,@emotion, Tailwind, SCSS modules,optimizePackageImports,transpilePackages, and usernext.configwebpack deltas (SVGR loader, alias, fallback, DefinePlugin).sandboxes/nextjs-barrel(TS re-export barrel) andsandboxes/nextjs-transpiledreproduce the__barrel_optimize__-over-TS andtranspilePackagescases as committed fixtures.Docs
website/docs/en/guide/framework/next.mdx(with a Simplified Chinese mirror atwebsite/docs/zh/guide/framework/next.mdx) — organized around a configuration mental model (who owns what: Next.js compiles JS/TS & resolves modules, Rsbuild owns the CSS pipeline, Storybook owns the preview & React singleton). Covers setup, the@rsbuild/core↔next-rspackversion matrix, supportednext/*features, routing & navigation, styling, mocking, runtime config, and known limitations. Wherever runtime behavior matches upstream it links out to the official@storybook/nextjs-vitedocs instead of re-documenting — the one thing that never carries over is build/bundler config (drive it throughnext.config.ts+rsbuildFinal/webpackFinal, notviteFinal).Compatibility
next@^15.3.0 || ^16.0.0,next-rspack(kept on the same version asnext),react@^18 || ^19,storybook@^10.3.5.@rsbuild/core@^1.3.6is a peer dependency, version-matched to the@rspack/corethatnext-rspackbrings in (enforced at startup bycheck-rspack-invariant.ts).Test plan
All boxes below except the
pnpm devsmoke check are verified green by CI on the current HEAD (lint,check,check-dependency-version,build,build:sandboxes,test,build:test,e2eacross Node 20/22 × ubuntu/macos/windows).sandboxes/nextjsstories render without runtime errors (asserted bye2e+build:sandboxes)next/navigation) and Pages Router (next/router) stories both worknext/font,next/image,styled-jsx, CSS Modules render correctlypnpm --filter @sandboxes/nextjs devruns the underlying Next.js app without errors (manual smoke check — not run in CI)pnpm exec rstest packages/framework-next(bridge-primitive unit tests) passespnpm e2e nextjs.spec.tspassespnpm lint,pnpm check,pnpm check-dependency-versionpasspnpm buildandpnpm build:sandboxespass