CSF-Factories: Preserve leading comments when adding imports by kasperpeulen · Pull Request #33645 · storybookjs/storybook

kasperpeulen · 2026-01-26T11:24:11Z

What I did

The CSF factories automigration was placing the new import statement above any leading comments (like license headers or @ts-check directives).

Before:

import preview from '#.storybook/preview';
// @ts-check
/** @license MIT */
const meta = { title: 'Component' };

After:

// @ts-check
/** @license MIT */
import preview from '#.storybook/preview';

const meta = preview.meta({ title: 'Component' });

Changes

Add addImportToTop() helper in csf-factories-utils.ts that transfers leading comments from the first AST node to the new import declaration
Use comments property (used by recast for printing) instead of leadingComments (used by babel internally)
Update story-to-csf-factory.ts and config-to-csf-factory.ts to use the helper
Add tests for both codemods

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Added test for story-to-csf-factory verifying comments are preserved
Added test for config-to-csf-factory verifying comments are preserved
All existing tests pass

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make 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.

@ts-check

Fixes #33643 The CSF factories automigration was placing the new import statement above any leading comments (like license headers or @ts-check directives). This fix introduces an `addImportToTop()` helper that transfers leading comments from the first AST node to the new import declaration, ensuring comments remain at the top of the file. Key changes: - Add `addImportToTop()` helper in csf-factories-utils.ts - Use `comments` property (recast) instead of `leadingComments` (babel) - Update story-to-csf-factory.ts and config-to-csf-factory.ts to use helper - Add tests for both codemods Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>

coderabbitai · 2026-01-26T11:30:01Z

📝 Walkthrough

Walkthrough

A new helper function addImportToTop is introduced to insert import declarations at the top of a file while preserving any leading comments from the original first node. The function is adopted by two codemod modules, replacing direct body unshift operations. Tests verify that leading comments and license blocks remain intact after import injection.

Changes

Cohort / File(s)	Summary
New Helper Function `code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts`	Adds exported `addImportToTop()` function that inserts ImportDeclaration at the top of a Program, transferring any leading comments from the original first node to the new import and clearing them from the original.
Codemod Consumer Updates `code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts`, `code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts`	Updated to import and use `addImportToTop()` helper when injecting defineMain/definePreview imports, replacing direct `programNode.body.unshift()` calls.
Test Coverage `code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts`, `code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts`	Each adds new test case verifying that leading line comments and license block comments are preserved when transformers insert imports and modify exports.

Possibly related PRs

CLI: Make relative imports default in csf-factories codemod #32610 — Modifies the same codemod helper files (story-to-csf-factory.ts and related tests) for import insertion and resolution in story transformations.

🎯 2 (Simple) | ⏱️ ~14 minutes

✨ Finishing touches

📝 Generate docstrings

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-01-26T14:55:31Z

View your CI Pipeline Execution ↗ for commit 5f01ddf

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	✅ Succeeded	9m 48s	View ↗

☁️ Nx Cloud last updated this comment at 2026-01-27 09:13:18 UTC

storybook-app-bot · 2026-01-26T15:08:37Z

Package Benchmarks

^{Commit: 5f01ddf, ran on 27 January 2026 at 09:11:59 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	184 KB	🚨 +184 KB 🚨
Dependency size	0 B	2.98 MB	🚨 +2.98 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	0	18	🚨 +18 🚨
Self size	0 B	1.64 MB	🚨 +1.64 MB 🚨
Dependency size	0 B	9.25 MB	🚨 +9.25 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-links`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	14 KB	🚨 +14 KB 🚨
Dependency size	0 B	5 KB	🚨 +5 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-onboarding`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	331 KB	🚨 +331 KB 🚨
Dependency size	0 B	670 B	🚨 +670 B 🚨
Bundle Size Analyzer	Link	Link

`storybook-addon-pseudo-states`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	21 KB	🚨 +21 KB 🚨
Dependency size	0 B	689 B	🚨 +689 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-themes`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	28 KB	🚨 +28 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-vitest`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	379 KB	🚨 +379 KB 🚨
Dependency size	0 B	338 KB	🚨 +338 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-vite`

	Before	After	Difference
Dependency count	0	11	🚨 +11 🚨
Self size	0 B	123 KB	🚨 +123 KB 🚨
Dependency size	0 B	1.30 MB	🚨 +1.30 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	0	188	🚨 +188 🚨
Self size	0 B	75 KB	🚨 +75 KB 🚨
Dependency size	0 B	32.04 MB	🚨 +32.04 MB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	0	49	🚨 +49 🚨
Self size	0 B	20.39 MB	🚨 +20.39 MB 🚨
Dependency size	0 B	16.52 MB	🚨 +16.52 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	0	188	🚨 +188 🚨
Self size	0 B	139 KB	🚨 +139 KB 🚨
Dependency size	0 B	30.27 MB	🚨 +30.27 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	0	192	🚨 +192 🚨
Self size	0 B	15 KB	🚨 +15 KB 🚨
Dependency size	0 B	28.76 MB	🚨 +28.76 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html-vite`

	Before	After	Difference
Dependency count	0	14	🚨 +14 🚨
Self size	0 B	22 KB	🚨 +22 KB 🚨
Dependency size	0 B	1.46 MB	🚨 +1.46 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	0	534	🚨 +534 🚨
Self size	0 B	646 KB	🚨 +646 KB 🚨
Dependency size	0 B	59.53 MB	🚨 +59.53 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	0	123	🚨 +123 🚨
Self size	0 B	1.12 MB	🚨 +1.12 MB 🚨
Dependency size	0 B	22.11 MB	🚨 +22.11 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact-vite`

	Before	After	Difference
Dependency count	0	14	🚨 +14 🚨
Self size	0 B	13 KB	🚨 +13 KB 🚨
Dependency size	0 B	1.44 MB	🚨 +1.44 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	0	155	🚨 +155 🚨
Self size	0 B	30 KB	🚨 +30 KB 🚨
Dependency size	0 B	23.41 MB	🚨 +23.41 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	0	113	🚨 +113 🚨
Self size	0 B	35 KB	🚨 +35 KB 🚨
Dependency size	0 B	19.91 MB	🚨 +19.91 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	0	274	🚨 +274 🚨
Self size	0 B	24 KB	🚨 +24 KB 🚨
Dependency size	0 B	44.43 MB	🚨 +44.43 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	0	200	🚨 +200 🚨
Self size	0 B	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	33.30 MB	🚨 +33.30 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	0	19	🚨 +19 🚨
Self size	0 B	55 KB	🚨 +55 KB 🚨
Dependency size	0 B	26.58 MB	🚨 +26.58 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	0	20	🚨 +20 🚨
Self size	0 B	56 KB	🚨 +56 KB 🚨
Dependency size	0 B	26.63 MB	🚨 +26.63 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	0	108	🚨 +108 🚨
Self size	0 B	35 KB	🚨 +35 KB 🚨
Dependency size	0 B	43.67 MB	🚨 +43.67 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	0	15	🚨 +15 🚨
Self size	0 B	19 KB	🚨 +19 KB 🚨
Dependency size	0 B	1.50 MB	🚨 +1.50 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	0	183	🚨 +183 🚨
Self size	0 B	776 KB	🚨 +776 KB 🚨
Dependency size	0 B	67.55 MB	🚨 +67.55 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	0	176	🚨 +176 🚨
Self size	0 B	30 KB	🚨 +30 KB 🚨
Dependency size	0 B	66.13 MB	🚨 +66.13 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core-webpack`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	11 KB	🚨 +11 KB 🚨
Dependency size	0 B	28 KB	🚨 +28 KB 🚨
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	0	50	🚨 +50 🚨
Self size	0 B	1000 KB	🚨 +1000 KB 🚨
Dependency size	0 B	36.91 MB	🚨 +36.91 MB 🚨
Bundle Size Analyzer	node	node

`@storybook/csf-plugin`

	Before	After	Difference
Dependency count	0	9	🚨 +9 🚨
Self size	0 B	7 KB	🚨 +7 KB 🚨
Dependency size	0 B	1.26 MB	🚨 +1.26 MB 🚨
Bundle Size Analyzer	Link	Link

`eslint-plugin-storybook`

	Before	After	Difference
Dependency count	0	20	🚨 +20 🚨
Self size	0 B	131 KB	🚨 +131 KB 🚨
Dependency size	0 B	2.82 MB	🚨 +2.82 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-dom-shim`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	788 B	🚨 +788 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-create-react-app`

	Before	After	Difference
Dependency count	0	68	🚨 +68 🚨
Self size	0 B	32 KB	🚨 +32 KB 🚨
Dependency size	0 B	5.98 MB	🚨 +5.98 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-react-webpack`

	Before	After	Difference
Dependency count	0	170	🚨 +170 🚨
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	31.29 MB	🚨 +31.29 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-server-webpack`

	Before	After	Difference
Dependency count	0	10	🚨 +10 🚨
Self size	0 B	7 KB	🚨 +7 KB 🚨
Dependency size	0 B	1.20 MB	🚨 +1.20 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	29 KB	🚨 +29 KB 🚨
Dependency size	0 B	32 KB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	32 KB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react`

	Before	After	Difference
Dependency count	0	57	🚨 +57 🚨
Self size	0 B	1.23 MB	🚨 +1.23 MB 🚨
Dependency size	0 B	12.95 MB	🚨 +12.95 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	8 KB	🚨 +8 KB 🚨
Dependency size	0 B	716 KB	🚨 +716 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	45 KB	🚨 +45 KB 🚨
Dependency size	0 B	230 KB	🚨 +230 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	63 KB	🚨 +63 KB 🚨
Dependency size	0 B	211 KB	🚨 +211 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	61 KB	🚨 +61 KB 🚨
Dependency size	0 B	47 KB	🚨 +47 KB 🚨
Bundle Size Analyzer	Link	Link

CSFFactories: Preserve leading comments when adding imports (cherry picked from commit 0cfa3a8)

valentinpalkovic assigned kasperpeulen Jan 26, 2026

kasperpeulen requested a review from yannbf January 26, 2026 14:26

kasperpeulen added the bug label Jan 26, 2026

kasperpeulen changed the title ~~CSF Factories: Preserve leading comments when adding imports~~ CSFFactories: Preserve leading comments when adding imports Jan 26, 2026

kasperpeulen added the ci:normal label Jan 26, 2026

kasperpeulen requested a review from valentinpalkovic January 26, 2026 14:58

Merge branch 'next' into fix-csf-import-comments

5f01ddf

valentinpalkovic approved these changes Jan 27, 2026

View reviewed changes

kasperpeulen merged commit 0cfa3a8 into next Jan 28, 2026
123 checks passed

kasperpeulen deleted the fix-csf-import-comments branch January 28, 2026 09:10

github-actions Bot mentioned this pull request Jan 28, 2026

Release: Prerelease 10.3.0-alpha.2 #33678

Merged

24 tasks

This was referenced Jan 28, 2026

CSF-Factories: Fix codemod for preview files without exports #33673

Merged

Core: Add SHARE_PROVIDER addon type and migrate QR Code sharing to it #33653

Closed

kasperpeulen added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jan 30, 2026

github-actions Bot mentioned this pull request Feb 2, 2026

Release: Patch 10.2.4 #33739

Merged

11 tasks

valentinpalkovic pushed a commit that referenced this pull request Feb 2, 2026

Merge pull request #33645 from storybookjs/fix-csf-import-comments

92ce460

CSFFactories: Preserve leading comments when adding imports (cherry picked from commit 0cfa3a8)

valentinpalkovic changed the title ~~CSFFactories: Preserve leading comments when adding imports~~ CSF-Factories: Preserve leading comments when adding imports Feb 2, 2026

github-actions Bot mentioned this pull request Feb 2, 2026

Release: Patch 10.2.4 #33745

Closed

13 tasks

github-actions Bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Feb 2, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CSF-Factories: Preserve leading comments when adding imports#33645

CSF-Factories: Preserve leading comments when adding imports#33645
kasperpeulen merged 2 commits into
nextfrom
fix-csf-import-comments

kasperpeulen commented Jan 26, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jan 26, 2026

Walkthrough

Changes

Possibly related PRs

Uh oh!

nx-cloud Bot commented Jan 26, 2026 •

edited

Loading

Uh oh!

storybook-app-bot Bot commented Jan 26, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

kasperpeulen commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Changes

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

Uh oh!

coderabbitai Bot commented Jan 26, 2026

Walkthrough

Changes

Possibly related PRs

Uh oh!

nx-cloud Bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

storybook-app-bot Bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-docs

@storybook/addon-links

@storybook/addon-onboarding

storybook-addon-pseudo-states

@storybook/addon-themes

@storybook/addon-vitest

@storybook/builder-vite

@storybook/builder-webpack5

storybook

@storybook/angular

@storybook/ember

@storybook/html-vite

@storybook/nextjs

@storybook/nextjs-vite

@storybook/preact-vite

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/sveltekit

@storybook/vue3-vite

@storybook/web-components-vite

@storybook/cli

@storybook/codemod

@storybook/core-webpack

create-storybook

@storybook/csf-plugin

eslint-plugin-storybook

@storybook/react-dom-shim

@storybook/preset-create-react-app

@storybook/preset-react-webpack

@storybook/preset-server-webpack

@storybook/html

@storybook/preact

@storybook/react

@storybook/server

@storybook/svelte

@storybook/vue3

@storybook/web-components

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kasperpeulen commented Jan 26, 2026 •

edited

Loading

nx-cloud Bot commented Jan 26, 2026 •

edited

Loading

storybook-app-bot Bot commented Jan 26, 2026 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-docs`

`@storybook/addon-links`

`@storybook/addon-onboarding`

`storybook-addon-pseudo-states`

`@storybook/addon-themes`

`@storybook/addon-vitest`

`@storybook/builder-vite`

`@storybook/builder-webpack5`

`storybook`

`@storybook/angular`

`@storybook/ember`

`@storybook/html-vite`

`@storybook/nextjs`

`@storybook/nextjs-vite`

`@storybook/preact-vite`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/sveltekit`

`@storybook/vue3-vite`

`@storybook/web-components-vite`

`@storybook/cli`

`@storybook/codemod`

`@storybook/core-webpack`

`create-storybook`

`@storybook/csf-plugin`

`eslint-plugin-storybook`

`@storybook/react-dom-shim`

`@storybook/preset-create-react-app`

`@storybook/preset-react-webpack`

`@storybook/preset-server-webpack`

`@storybook/html`

`@storybook/preact`

`@storybook/react`

`@storybook/server`

`@storybook/svelte`

`@storybook/vue3`

`@storybook/web-components`