[kasperpeulen]

The transformer moves to Storybook 11's csf-tools, so the release that ships it needs Storybook 11.

Storybook 11 parses story files with oxc-parser instead of Babel: storybook/internal/csf-tools now hands out ESTree nodes, and CsfFile._ast is gone (storybookjs/storybook#36613, see its MIGRATION section).

Today the transformer builds Babel nodes and pushes them into csf._ast.program. On the canary, every story file throws under HMR:

Cannot read properties of undefined (reading 'program')

Without HMR the builds pass, but every asset loses its source map, and TypeScript stories lose __docgenInfo.

The transformer now edits the source text through csf.editor and prints the file once with formatCsf. Code it does not touch keeps its formatting and its source map, story bodies included. @babel/parser and @babel/types are no longer dependencies.

For each story file it:

1. Parses it with loadCsf(…).parse().
2. Under HMR, rewrites the exports for the Fast Refresh wrapper and moves imports that sit below other code to the top. This goes first, because statements appended later go after the last statement left in place.
3. Awaits enrichCsf, which adds each story's originalSource and JSDoc description.
4. Under HMR, turns each story function into a component in place, so Fast Refresh can update it. Stories and the meta get a _hash; those with a story function also get _internalComponent.
5. Appends Button.__docgenInfo = {…} for the meta's component.
6. Under HMR, closes the try. Then it prints the file with one source map.

A story function becomes a component without moving its code:

const Primary = (args) => <Button {...args} />;

becomes, wrapped here to fit:

const Primary = (args) => <Story0 {...args} />,
  Story0 = (args) => <Button {...args} />;

A render function is named inside its expression. render: (args) => <Button {...args} /> becomes:

render: (Story0 = (args) => <Button {...args} />,
  (args) => <Story0 {...args} />)

CSF 2 stories get Primary._internalComponent = Story0; and Primary._hash = "…"; as statements. Object stories and the meta get them as members.

Under HMR, the Babel version turned export { type T as X } into $Export0 = T, which throws at runtime, and dropped the async of an async render() method. It also skipped __docgenInfo for a 'component' string key. The new version handles all three.

Land it with the move to Storybook 11. For now, resolutions in the root package.json point storybook and the @storybook/* packages at a canary of storybookjs/storybook next (b26f35e), which has the public csf-tools API the transformer uses. On 10.3.5, yarn check-types fails in this file because those exports do not exist there. The transformer cannot support both, so before this lands, replace the resolutions with storybook ranges for the first Storybook 11 prerelease.

Three behaviour changes are intended:

• enrichCsf is async, and the transformer now awaits it. The Babel version did not, so its story edits landed after the file was printed. Stories now get parameters.docs.source.originalSource and their JSDoc description.
• A legacy Story.story = {…} is hashed as a whole. Storybook 10 spread its members into the story's annotations, so its args and parameters were hashed. Storybook 11 keeps it as one story annotation. Hashing all of it keeps Fast Refresh bailing out when it changes. A change to its name or decorators now bails out too.
• When csf-tools cannot read a story's args, parameters or story, the story's hash covers the whole file, so any change to the file bails out. That happens for a story other code uses, such as ...Example in another story, and for args set both in the story's object and as Example.args = {…}. Here it affects three stories: Example in the S2 TableView and TextField stories, and in useViewportSize.

The same change for the copy in parcel-bundler/storybook: parcel-bundler/storybook#6

No issue exists for this.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices
• I understand every change in this PR and can explain why it's there.
• If AI-assisted, I followed our AI contribution guidance and pointed my assistant at AGENTS.md.

The transformer has no unit tests; the checks below stand in for them. Documentation and accessibility do not apply to build tooling.

📝 Test Instructions:

Everything ran on the canary storybook@https://pkg.pr.new/storybook@b26f35e and the matching @storybook/* packages, which the root resolutions pin.

• yarn build:storybook and yarn build:storybook-s2 pass.
• yarn check-types reports no errors in this package.
• yarn oxfmt --check passes on the file.

I ran the transformer over the 455 story files of .storybook, .storybook-s2, .chromatic and .chromatic-fc, with HMR on and off: 910 transforms. A stub docgen client gave every file docs. Each output ran with stubbed imports, and I compared it with the Babel transformer's output on Storybook 10. The comparison covers the exports, whether each export has a _hash and an _internalComponent, what each story renders through its component, __docgenInfo, and the refresh prelude and postlude. All 910 match.

That comparison ran on an earlier canary. On b26f35e I compared the output with that of the previous commit, which read csf-tools' internal fields, over the same files plus four edge-case files, with HMR on and off. Only _hash values differ, since csf-tools now hands out the annotation text with its indentation normalized. The source maps are identical.

To try it, run yarn install, then yarn start (port 9003) or yarn start:s2 (port 6006), open a story and edit its render function. Fast Refresh should keep the component's state, as before. I did not run the dev server.

On the canary, yarn check-types reports 725 errors elsewhere, from Storybook 11's own types. 711 come from the legacy Story.story property (693 TS2339, 18 TS2559) and 14 from stricter meta and args types. They belong to the Storybook 11 upgrade itself.

🧢 Your Project:

Storybook (Storybook 11 csf-tools migration)

🤖 Generated with Claude Code