Skip to content

CSF: Only add preview annotations to definePreview in csf-factories automigration #31727

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 2 commits into from
Jun 10, 2025
Merged

CSF: Only add preview annotations to definePreview in csf-factories automigration #31727

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00aeb09
Only add preview annotations to definePreview in csf-factories automi…
kasperpeulen Jun 10, 2025
2c1afc5
Address feedback
kasperpeulen Jun 10, 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
23 changes: 23 additions & 0 deletions 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 @@ -221,4 +221,27 @@ describe('preview specific functionality', () => {
});
`);
});

it('should not change non story exports', async () => {
await expect(
transform(dedent`
import type { Preview } from '@storybook/react-vite'

export const withStore: Decorator = () => {}

const preview: Preview = {
tags: []
};
export default preview;
`)
).resolves.toMatchInlineSnapshot(`
import { definePreview } from '@storybook/react-vite';

export const withStore: Decorator = () => {};

export default definePreview({
tags: [],
});
`);
});
});
12 changes: 4 additions & 8 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 @@ -27,7 +27,10 @@ export async function configToCsfFactory(

const methodName = configType === 'main' ? 'defineMain' : 'definePreview';
const programNode = config._ast.program;
const hasNamedExports = Object.keys(config._exportDecls).length > 0;
const exportDecls = config._exportDecls;

const defineConfigProps = getConfigProperties(exportDecls, { configType });
const hasNamedExports = defineConfigProps.length > 0;

/**
* Scenario 1: Mixed exports
Expand All @@ -42,11 +45,7 @@ export async function configToCsfFactory(
* Transform into: `export default defineMain({ tags: [], parameters: {} })`
*/
if (config._exportsObject && hasNamedExports) {
const exportDecls = config._exportDecls;

const defineConfigProps = getConfigProperties(exportDecls);
config._exportsObject.properties.push(...defineConfigProps);

programNode.body = removeExportDeclarations(programNode, exportDecls);
} else if (config._exportsObject) {
/**
Expand Down Expand Up @@ -106,9 +105,6 @@ export async function configToCsfFactory(
*
* Transform into: export default defineMain({ foo: {}, bar: '' });
*/
const exportDecls = config._exportDecls;
const defineConfigProps = getConfigProperties(exportDecls);

// Construct the `define` call
const defineConfigCall = t.callExpression(t.identifier(methodName), [
t.objectExpression(defineConfigProps),
Expand Down
4 changes: 2 additions & 2 deletions code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ describe('getConfigProperties', () => {
bar: t.variableDeclarator(t.identifier('bar'), t.numericLiteral(42)),
};

const properties = getConfigProperties(exportDecls);
const properties = getConfigProperties(exportDecls, { configType: 'main' });

expect(properties).toHaveLength(2);
expect(properties[0].key.name).toBe('foo');
Expand All @@ -205,7 +205,7 @@ describe('getConfigProperties', () => {
foo: t.functionDeclaration(t.identifier('foo'), [], t.blockStatement([])),
};

const properties = getConfigProperties(exportDecls);
const properties = getConfigProperties(exportDecls, { configType: 'main' });

expect(properties).toHaveLength(1);
expect(properties[0].key.name).toBe('foo');
Expand Down
28 changes: 27 additions & 1 deletion code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,38 @@ export function removeExportDeclarations(
}

export function getConfigProperties(
exportDecls: Record<string, t.VariableDeclarator | t.FunctionDeclaration>
exportDecls: Record<string, t.VariableDeclarator | t.FunctionDeclaration>,
options: { configType: 'main' | 'preview' }
) {
const properties = [];

// Collect properties from named exports
for (const [name, decl] of Object.entries(exportDecls)) {
// only include real preview exports to definePreview factory
if (
options.configType === 'preview' &&
![
'decorators',
Copy link
Member

@yannbf yannbf Jun 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you maybe make this into a constant that has a type connected with the actual annotations?

const annotationNames: (keyof NormalizedProjectAnnotations)[] = [
  'decorators',
  // ...
];

if we introduce a new annotation in the future, we should at least know where to update

'parameters',
'args',
'argTypes',
'loaders',
'beforeEach',
'afterEach',
'render',
'tags',
'mount',
'argsEnhancers',
'argTypesEnhancers',
'beforeAll',
'initialGlobals',
'globalTypes',
'applyDecorators',
'runStep',
].includes(name)
) {
continue;
}
if (t.isVariableDeclarator(decl) && decl.init) {
properties.push(t.objectProperty(t.identifier(name), decl.init));
} else if (t.isFunctionDeclaration(decl)) {
Expand Down
Loading