fix: port parcel-transformer-storybook to Storybook 11's csf-tools

[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, once a Storybook 11 prerelease contains storybookjs/storybook#36613. The repo is on 10.3.5, where yarn check-types fails in this file because the csf-tools exports it uses do not exist yet. The transformer cannot support both, so move the storybook ranges from ^10.0.0 to that prerelease in the same change.

Two 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.

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@93fc3ee and the matching @storybook/* packages, installed locally through resolutions. Nothing here pins it: the storybook ranges still read ^10.0.0.

• 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.

To try it, add the canary to resolutions for storybook and the @storybook/* packages and run yarn install. Then run 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 729 errors elsewhere, from Storybook 11's own types. 711 come from the legacy Story.story property (693 TS2339, 18 TS2559), 14 from stricter meta and args types, and 4 from @mdx-js/react declaring JSX twice. They belong to the Storybook 11 upgrade itself.

🧢 Your Project:

Storybook (Storybook 11 csf-tools migration)

🤖 Generated with Claude Code