diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts index d85cfd4edead..e19a8b4475c6 100644 --- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts +++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts @@ -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: [], + }); + `); + }); }); diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts index c0291370dc2a..227f0e3ce707 100644 --- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts +++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts @@ -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 @@ -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) { /** @@ -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), diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts index 02058b9c5698..999c6c325f5b 100644 --- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts +++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts @@ -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'); @@ -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'); diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts index 3326764456d8..0b23e670d09e 100644 --- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts +++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts @@ -1,5 +1,25 @@ import { types as t, traverse } from 'storybook/internal/babel'; +const projectAnnotationNames = [ + 'decorators', + 'parameters', + 'args', + 'argTypes', + 'loaders', + 'beforeEach', + 'afterEach', + 'render', + 'tags', + 'mount', + 'argsEnhancers', + 'argTypesEnhancers', + 'beforeAll', + 'initialGlobals', + 'globalTypes', + 'applyDecorators', + 'runStep', +]; + export function cleanupTypeImports(programNode: t.Program, disallowList: string[]) { const usedIdentifiers = new Set(); @@ -75,12 +95,17 @@ export function removeExportDeclarations( } export function getConfigProperties( - exportDecls: Record + exportDecls: Record, + 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' && !projectAnnotationNames.includes(name)) { + continue; + } if (t.isVariableDeclarator(decl) && decl.init) { properties.push(t.objectProperty(t.identifier(name), decl.init)); } else if (t.isFunctionDeclaration(decl)) {