Skip to content

CSF: Enhance config-to-csf-factory to support type wrappers #32543

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
valentinpalkovic merged 2 commits into from
Oct 13, 2025
Merged

CSF: Enhance config-to-csf-factory to support type wrappers #32543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6860988
CSF: Enhance config-to-csf-factory to support type wrappers
yannbf Sep 24, 2025
bc4185b
Merge branch 'next' into yann/csf-factories-codemod-more-ts-support
yannbf Oct 1, 2025
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
59 changes: 58 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 @@ -242,7 +242,7 @@ describe('preview specific functionality', () => {
});
`);
});
it('should work', async () => {
it('should wrap definePreview for mixed annotations and default export', async () => {
await expect(
transform(dedent`
export const decorators = [1]
Expand All @@ -259,4 +259,61 @@ describe('preview specific functionality', () => {
});
`);
});

it('should wrap definePreview for const defined preview with type annotations', async () => {
await expect(
transform(dedent`
import { type Preview } from '@storybook/react-vite';

const preview = {
decorators: [],

parameters: {
options: {}
}
} satisfies Preview;

export default preview;

`)
).resolves.toMatchInlineSnapshot(`
import { definePreview } from '@storybook/react-vite';

export default definePreview({
decorators: [],

parameters: {
options: {},
},
});
`);
});

it('should wrap definePreview for mixed annotations and default const export', async () => {
await expect(
transform(dedent`
import { type Preview } from '@storybook/react-vite';
export const decorators = []
const preview = {

parameters: {
options: {}
}
} satisfies Preview;

export default preview;

`)
).resolves.toMatchInlineSnapshot(`
import { definePreview } from '@storybook/react-vite';

export default definePreview({
decorators: [],

parameters: {
options: {},
},
});
`);
});
});
43 changes: 22 additions & 21 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 @@ -32,6 +32,25 @@ export async function configToCsfFactory(
const defineConfigProps = getConfigProperties(exportDecls, { configType });
const hasNamedExports = defineConfigProps.length > 0;

function findDeclarationNodeIndex(declarationName: string): number {
return programNode.body.findIndex(
(n) =>
t.isVariableDeclaration(n) &&
n.declarations.some((d) => {
let declaration = d.init;
// unwrap TS type annotations
if (t.isTSAsExpression(declaration) || t.isTSSatisfiesExpression(declaration)) {
declaration = declaration.expression;
}
return (
t.isIdentifier(d.id) &&
d.id.name === declarationName &&
t.isObjectExpression(declaration)
);
})
);
}

/**
* Scenario 1: Mixed exports
*
Expand Down Expand Up @@ -60,16 +79,7 @@ export async function configToCsfFactory(
if (t.isExportDefaultDeclaration(node) && t.isIdentifier(node.declaration)) {
const declarationName = node.declaration.name;

declarationNodeIndex = programNode.body.findIndex(
(n) =>
t.isVariableDeclaration(n) &&
n.declarations.some(
(d) =>
t.isIdentifier(d.id) &&
d.id.name === declarationName &&
t.isObjectExpression(d.init)
)
);
declarationNodeIndex = findDeclarationNodeIndex(declarationName);

if (declarationNodeIndex !== -1) {
exportDefaultNode = node;
Expand Down Expand Up @@ -97,7 +107,7 @@ export async function configToCsfFactory(
/**
* Scenario 2: Default exports
*
* - Syntax 1: `default export const config = {}; export default config;`
* - Syntax 1: `const config = {}; export default config;`
* - Syntax 2: `export default {};`
*
* Transform into: `export default defineMain({})`
Expand All @@ -112,16 +122,7 @@ export async function configToCsfFactory(
if (t.isExportDefaultDeclaration(node) && t.isIdentifier(node.declaration)) {
const declarationName = node.declaration.name;

declarationNodeIndex = programNode.body.findIndex(
(n) =>
t.isVariableDeclaration(n) &&
n.declarations.some(
(d) =>
t.isIdentifier(d.id) &&
d.id.name === declarationName &&
t.isObjectExpression(d.init)
)
);
declarationNodeIndex = findDeclarationNodeIndex(declarationName);

if (declarationNodeIndex !== -1) {
exportDefaultNode = node;
Expand Down