Skip to content

CSF: Fix play-fn tag for methods #32695

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
yannbf merged 4 commits into from
Oct 21, 2025
Merged

CSF: Fix play-fn tag for methods #32695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c5ee382
CSF: Fix play-fn tag for methods
shilman Oct 10, 2025
4d3e813
Add mount support for play method
shilman Oct 13, 2025
cd0f3cf
Add render method with args test
shilman Oct 21, 2025
c89f490
Merge branch 'next' into shilman/32687-play-method
shilman Oct 21, 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
127 changes: 127 additions & 0 deletions code/core/src/csf-tools/CsfFile.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1423,6 +1423,40 @@ describe('CsfFile', () => {
`);
});

it('Object export with args render method', () => {
expect(
parse(
dedent`
export default { title: 'foo/bar' };
export const A = {
render(args) {}
}
`,
true
)
).toMatchInlineSnapshot(`
meta:
title: foo/bar
stories:
- id: foo-bar--a
name: A
parameters:
__isArgsStory: true
__id: foo-bar--a
__stats:
factory: false
play: false
render: true
loaders: false
beforeEach: false
globals: false
tags: false
storyFn: false
mount: false
moduleMock: false
`);
});

it('Object export with default render', () => {
expect(
parse(
Expand Down Expand Up @@ -1788,6 +1822,67 @@ describe('CsfFile', () => {
`);
});

it('play method', () => {
expect(
parse(
dedent`
export default { title: 'foo/bar' };
export const A = {
play({ context }) {},
};
`
)
).toMatchInlineSnapshot(`
meta:
title: foo/bar
stories:
- id: foo-bar--a
name: A
__stats:
factory: false
play: true
render: false
loaders: false
beforeEach: false
globals: false
tags: false
storyFn: false
mount: false
moduleMock: false
tags:
- play-fn
`);
});

it('meta play method', () => {
expect(
parse(
dedent`
export default { title: 'foo/bar', play({ context }) {} };
export const A = {};`
)
).toMatchInlineSnapshot(`
meta:
title: foo/bar
tags:
- play-fn
stories:
- id: foo-bar--a
name: A
__stats:
factory: false
play: true
render: false
loaders: false
beforeEach: false
globals: false
tags: false
storyFn: false
mount: false
moduleMock: false
`);
});

it('mount', () => {
expect(
parse(
Expand Down Expand Up @@ -1852,6 +1947,38 @@ describe('CsfFile', () => {
`);
});

it('mount in method', () => {
expect(
parse(
dedent`
export default { title: 'foo/bar' };
export const A = {
play({ mount, context }) {},
};
`
)
).toMatchInlineSnapshot(`
meta:
title: foo/bar
stories:
- id: foo-bar--a
name: A
__stats:
factory: false
play: true
render: false
loaders: false
beforeEach: false
globals: false
tags: false
storyFn: false
mount: true
moduleMock: false
tags:
- play-fn
`);
});

it('mount meta', () => {
expect(
parse(
Expand Down
58 changes: 34 additions & 24 deletions code/core/src/csf-tools/CsfFile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,11 @@ const sortExports = (exportByName: Record<string, any>, order: string[]) => {
};

const hasMount = (play: t.Node | undefined) => {
if (t.isArrowFunctionExpression(play) || t.isFunctionDeclaration(play)) {
if (
t.isArrowFunctionExpression(play) ||
t.isFunctionDeclaration(play) ||
t.isObjectMethod(play)
) {
const params = play.params;
if (params.length >= 1) {
const [arg] = params;
Expand Down Expand Up @@ -348,7 +352,8 @@ export class CsfFile {
const meta: StaticMeta = {};
(declaration.properties as t.ObjectProperty[]).forEach((p) => {
if (t.isIdentifier(p.key)) {
this._metaAnnotations[p.key.name] = p.value;
const value = t.isObjectMethod(p) ? p : p.value;
this._metaAnnotations[p.key.name] = value;

if (p.key.name === 'title') {
meta.title = this._parseTitle(p.value);
Expand Down Expand Up @@ -598,30 +603,35 @@ export class CsfFile {
// CSF3 object export
(storyNode.properties as t.ObjectProperty[]).forEach((p) => {
if (t.isIdentifier(p.key)) {
if (p.key.name === 'render') {
parameters.__isArgsStory = isArgsStory(
p.value as t.Expression,
parent,
self
);
} else if (p.key.name === 'name' && t.isStringLiteral(p.value)) {
name = p.value.value;
} else if (p.key.name === 'storyName' && t.isStringLiteral(p.value)) {
logger.warn(
`Unexpected usage of "storyName" in "${exportName}". Please use "name" instead.`
);
} else if (p.key.name === 'parameters' && t.isObjectExpression(p.value)) {
const idProperty = p.value.properties.find(
(property) =>
t.isObjectProperty(property) &&
t.isIdentifier(property.key) &&
property.key.name === '__id'
) as t.ObjectProperty | undefined;
if (idProperty) {
parameters.__id = (idProperty.value as t.StringLiteral).value;
const key = p.key.name;
if (t.isObjectMethod(p)) {
self._storyAnnotations[exportName][key] = p;
} else {
if (p.key.name === 'render') {
parameters.__isArgsStory = isArgsStory(
p.value as t.Expression,
parent,
self
);
} else if (p.key.name === 'name' && t.isStringLiteral(p.value)) {
name = p.value.value;
} else if (p.key.name === 'storyName' && t.isStringLiteral(p.value)) {
logger.warn(
`Unexpected usage of "storyName" in "${exportName}". Please use "name" instead.`
);
} else if (p.key.name === 'parameters' && t.isObjectExpression(p.value)) {
const idProperty = p.value.properties.find(
(property) =>
t.isObjectProperty(property) &&
t.isIdentifier(property.key) &&
property.key.name === '__id'
) as t.ObjectProperty | undefined;
if (idProperty) {
parameters.__id = (idProperty.value as t.StringLiteral).value;
}
}
self._storyAnnotations[exportName][p.key.name] = p.value;
}
self._storyAnnotations[exportName][p.key.name] = p.value;
}
});
} else {
Expand Down