Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kasperpeulen merged 6 commits into from
Jan 28, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
45cb01b
Add failing tests for CSF factories codemod with empty/side-effect-on…
kasperpeulen Jan 27, 2026
18690c9
CSF Factories: Fix codemod for preview files without exports
kasperpeulen Jan 27, 2026
8e623b7
Fix Prettier formatting in config-to-csf-factory
kasperpeulen Jan 27, 2026
b0fc95a
Merge branch 'next' into fix-csf-factory-preview-no-exports
kasperpeulen Jan 28, 2026
1aec190
Fix CSF factory codemod to not add duplicate exports for preview file…
kasperpeulen Jan 28, 2026
b9b7036
Revert "Fix CSF factory codemod to not add duplicate exports for prev…
kasperpeulen Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ describe('preview specific functionality', () => {
import { type Preview } from '@storybook/react-vite';
export const decorators = []
const preview = {

parameters: {
options: {}
}
Expand All @@ -368,4 +368,42 @@ describe('preview specific functionality', () => {
});
`);
});

it('should add default export when preview only has side-effect imports', async () => {
await expect(
transform(dedent`
import './preview.scss'
`)
).resolves.toMatchInlineSnapshot(`
import { definePreview } from '@storybook/react-vite';

import './preview.scss';

export default definePreview({});
`);
});

it('should add default export when preview file is empty', async () => {
await expect(transform('')).resolves.toMatchInlineSnapshot(`
import { definePreview } from '@storybook/react-vite';

export default definePreview({});
`);
});

it('should add default export when preview only has multiple side-effect imports', async () => {
await expect(
transform(dedent`
import './preview.scss'
import './global.css'
`)
).resolves.toMatchInlineSnapshot(`
import { definePreview } from '@storybook/react-vite';

import './global.css';
import './preview.scss';

export default definePreview({});
`);
});
});
15 changes: 15 additions & 0 deletions code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,21 @@ export async function configToCsfFactory(

// Add the new export default declaration
programNode.body.push(t.exportDefaultDeclaration(defineConfigCall));
} else if (configType === 'preview') {
Comment thread
kasperpeulen marked this conversation as resolved.
/**
* Scenario 4: No exports (empty file or only side-effect imports)
*
* ```
* import './preview.scss';
* ```
*
* Transform into: `import './preview.scss'; export default definePreview({})`
*
* This is needed because story files using CSF factories import from preview, so the preview
* file must have a default export.
*/
const defineConfigCall = t.callExpression(t.identifier(methodName), [t.objectExpression([])]);
programNode.body.push(t.exportDefaultDeclaration(defineConfigCall));
}

const configImport = t.importDeclaration(
Expand Down