CSF: Fix `play-fn` tag for methods #32695

shilman · 2025-10-10T16:00:40Z

Closes #32687

What I did

Handle object method play fn in both meta and story
Unit tests for both

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Improvements
- Enhanced CSF3 parsing to consistently capture method-style annotations and detect mount usage in play handlers.
Bug Fixes
- Corrected missed detection/tagging of play functions declared as methods on stories or in meta, ensuring accurate play metadata.
Tests
- Added tests covering play detection on stories and meta, mount handling, object-export combinations, and expected tagging/statistics.

coderabbitai · 2025-10-10T16:01:41Z

📝 Walkthrough

Walkthrough

Parser now preserves object-method AST nodes for meta and story object properties (e.g., play), treats object-methods as mountable, records those method nodes in _metaAnnotations/_storyAnnotations, and updates __stats (including mount detection). New tests validate play/mount detection across story and meta object exports.

Changes

Cohort / File(s)	Summary
Parser: preserve object-method nodes & mount detection `code/core/src/csf-tools/CsfFile.ts`	Treat object methods as method nodes when parsing meta and story object exports; store method AST nodes in `_metaAnnotations` and `_storyAnnotations`; extend `hasMount` to recognize `t.isObjectMethod(play)` so mount detection covers object methods.
Tests: play function / mount parsing `code/core/src/csf-tools/CsfFile.test.ts`	Add tests covering: object export with `render` arg, story `play` method, meta-level `play` method, and `play({ mount, context })` usage; assert presence of `play-fn` tags and expected `__stats` flags (including mount detection) and snapshot expectations.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant SRC as CSF Source
  participant Parser as CsfFile Parser
  participant Meta as _metaAnnotations
  participant Stories as _storyAnnotations
  participant Out as Parsed Result

  SRC->>Parser: parse(CSF file)
  alt default export is object (meta)
    Parser->>Meta: iterate meta properties
    alt property is object-method (e.g., play)
      Meta-->>Parser: preserve method AST node
      Note right of Parser: tag meta with "play-fn" and store node
    else
      Meta-->>Parser: store value as before
    end
  end

  loop each story export
    Parser->>Stories: inspect story object property
    alt property is object-method (e.g., play)
      Stories-->>Parser: preserve method AST node under story key
      Note right of Parser: tag story "play-fn", set __stats.play = true
      alt method signature includes mount param
        Note right of Parser: set __stats.mount = true
      end
    else
      Stories-->>Parser: store value as before
    end
  end

  Parser->>Out: assemble annotations, tags, and __stats

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Core: Fix built-in tags filtering #32526 — Modifies code/core/src/csf-tools/CsfFile.ts to treat object methods as mountable and preserve method nodes in annotations (high code-level overlap).
CSF: Add Storybook test syntax (Storybook v10) #32455 — Related changes to CSF3 object export/meta parsing to preserve method AST nodes and adjust annotation handling.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch shilman/32687-play-method

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4d3e813 and c89f490.

📒 Files selected for processing (1)

code/core/src/csf-tools/CsfFile.test.ts (3 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

code/**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx

Files:

code/core/src/csf-tools/CsfFile.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together

Files:

code/core/src/csf-tools/CsfFile.test.ts

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

code/core/src/csf-tools/CsfFile.test.ts

**/*.@(test|spec).{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests using vi.mock() (e.g., filesystem, loggers)

Files:

code/core/src/csf-tools/CsfFile.test.ts

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions from modules when they need to be unit-tested

Files:

code/core/src/csf-tools/CsfFile.test.ts

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

code/core/src/csf-tools/CsfFile.test.ts

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

code/core/src/csf-tools/CsfFile.test.ts

🧬 Code graph analysis (1)

code/core/src/csf-tools/CsfFile.test.ts (1)

code/core/src/csf-tools/CsfFile.ts (1)

parse (420-936)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: normal
GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (4)

code/core/src/csf-tools/CsfFile.test.ts (4)

1426-1458: LGTM! Test validates render method with args detection.

The test correctly verifies that object method syntax render(args) {} is parsed properly, with __isArgsStory: true and render: true in stats.

1825-1855: LGTM! Test validates the core PR fix for play method syntax.

This test directly addresses the issue from #32687 by verifying that stories with method-definition play functions receive the play-fn tag and have play: true in stats.

1857-1884: LGTM! Test validates meta-level play method detection.

Correctly verifies that object method syntax at the meta level (export default { play({ context }) {} }) is detected, with play-fn tag added to meta.tags and inherited by the story.

1950-1980: LGTM! Test validates mount detection in play methods.

Correctly verifies that mount parameter detection works with object method syntax, showing mount: true in stats when the play method destructures { mount, context }.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2025-10-10T16:03:00Z

View your CI Pipeline Execution ↗ for commit c89f490

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	49s	View ↗

☁️ Nx Cloud last updated this comment at 2025-10-21 01:58:23 UTC

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

code/core/src/csf-tools/CsfFile.ts (1)
602-629: Good refactoring to support object method syntax.

The code now correctly handles play functions defined with method syntax (play() {}) by storing the method node, enabling proper play-fn tag detection.

Consider extending mount detection to object methods.

The hasMount function (lines 177-192) only checks for arrow functions and function declarations, not object methods. Object methods with a mount parameter (e.g., play({ mount }) {}) won't be detected. This appears intentional based on test expectations, but consider if this is a limitation worth addressing in the future.

To support mount detection for object methods, update the hasMount function:
 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;

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e9a2317 and 5d1c0c5.

📒 Files selected for processing (2)

code/core/src/csf-tools/CsfFile.test.ts (1 hunks)
code/core/src/csf-tools/CsfFile.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Adhere to ESLint and Prettier rules across all JS/TS source files

Files:

code/core/src/csf-tools/CsfFile.ts
code/core/src/csf-tools/CsfFile.test.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode

Files:

code/core/src/csf-tools/CsfFile.ts
code/core/src/csf-tools/CsfFile.test.ts

code/**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx

Files:

code/core/src/csf-tools/CsfFile.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together

Files:

code/core/src/csf-tools/CsfFile.test.ts

🧬 Code graph analysis (1)

code/core/src/csf-tools/CsfFile.test.ts (1)

code/core/src/csf-tools/CsfFile.ts (1)

parse (416-931)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Danger JS
GitHub Check: normal
GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (3)

code/core/src/csf-tools/CsfFile.ts (1)

351-352: LGTM! Correctly handles object methods in meta.

The change properly distinguishes between object methods (e.g., play() {}) and regular properties, storing the appropriate node for later play-fn tag detection.

code/core/src/csf-tools/CsfFile.test.ts (2)

1791-1821: LGTM! Good test coverage for story-level play methods.

The test correctly verifies that object method syntax (play({ context }) {}) receives the play-fn tag and appropriate __stats values.

1823-1850: LGTM! Good test coverage for meta-level play methods.

The test correctly verifies that object method syntax in meta (play({ context }) {}) adds the play-fn tag to meta and propagates play detection to stories.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

code/core/src/csf-tools/CsfFile.ts (1)
602-630: Approve with recommended enhancement for hasMount compatibility.

The main fix correctly handles ObjectMethod nodes for story annotations, enabling proper detection of play methods defined with method syntax.

Consider enhancing the hasMount function (lines 177-192) to handle ObjectMethod nodes. Currently it only checks for ArrowFunctionExpression and FunctionDeclaration:
 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;
This would allow mount detection to work correctly for play methods like:
play({ mount }) { /* ... */ }
Similarly, if render methods become common, consider handling ObjectMethod for the __isArgsStory detection at line 607 to correctly identify render methods with no parameters.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5d1c0c5 and c5ee382.

📒 Files selected for processing (2)

code/core/src/csf-tools/CsfFile.test.ts (1 hunks)
code/core/src/csf-tools/CsfFile.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Adhere to ESLint and Prettier rules across all JS/TS source files

Files:

code/core/src/csf-tools/CsfFile.ts
code/core/src/csf-tools/CsfFile.test.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode

Files:

code/core/src/csf-tools/CsfFile.ts
code/core/src/csf-tools/CsfFile.test.ts

code/**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx

Files:

code/core/src/csf-tools/CsfFile.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together

Files:

code/core/src/csf-tools/CsfFile.test.ts

🧬 Code graph analysis (1)

code/core/src/csf-tools/CsfFile.test.ts (1)

code/core/src/csf-tools/CsfFile.ts (1)

parse (416-932)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: normal
GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (3)

code/core/src/csf-tools/CsfFile.test.ts (2)

1791-1821: LGTM! Correctly tests object method play function detection.

The test verifies that a play function defined using object method syntax is properly detected and tagged with play-fn, which aligns with the PR objectives.

1823-1850: LGTM! Correctly tests meta-level play method detection.

The test verifies that a play function defined at the meta level using object method syntax is properly detected, tagged, and inherited by stories.

code/core/src/csf-tools/CsfFile.ts (1)

351-352: LGTM! Correctly stores ObjectMethod nodes for meta annotations.

The change properly distinguishes between ObjectMethod (method shorthand) and ObjectProperty (property with value), storing the appropriate node type in each case. This enables correct detection of play methods defined at the meta level.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

code/core/src/csf-tools/CsfFile.ts (1)
604-636: Consider refining the type cast for accuracy.

The cast as t.ObjectProperty[] at line 604 is slightly inaccurate since the properties array can contain both t.ObjectProperty and t.ObjectMethod nodes. While the runtime logic correctly handles both types through the t.isObjectMethod(p) check, the cast may cause confusion.

Consider this refactor for clarity:
                  // CSF3 object export
-                  (storyNode.properties as t.ObjectProperty[]).forEach((p) => {
+                  storyNode.properties.forEach((p) => {
+                    if (!t.isObjectProperty(p) && !t.isObjectMethod(p)) {
+                      return;
+                    }
Alternatively, if type narrowing is needed:
-                  (storyNode.properties as t.ObjectProperty[]).forEach((p) => {
+                  (storyNode.properties as Array<t.ObjectProperty | t.ObjectMethod>).forEach((p) => {

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c5ee382 and 4d3e813.

📒 Files selected for processing (2)

code/core/src/csf-tools/CsfFile.test.ts (2 hunks)
code/core/src/csf-tools/CsfFile.ts (3 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Adhere to ESLint and Prettier rules across all JS/TS source files

Files:

code/core/src/csf-tools/CsfFile.ts
code/core/src/csf-tools/CsfFile.test.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode

Files:

code/core/src/csf-tools/CsfFile.ts
code/core/src/csf-tools/CsfFile.test.ts

code/**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx

Files:

code/core/src/csf-tools/CsfFile.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together

Files:

code/core/src/csf-tools/CsfFile.test.ts

🧬 Code graph analysis (1)

code/core/src/csf-tools/CsfFile.test.ts (1)

code/core/src/csf-tools/CsfFile.ts (1)

parse (420-936)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: normal
GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (5)

code/core/src/csf-tools/CsfFile.ts (2)

177-196: LGTM! Mount detection now supports method syntax.

The addition of t.isObjectMethod(play) correctly extends mount detection to handle play functions defined with method shorthand (e.g., play({ mount }) {}).

353-356: LGTM! Meta annotations now preserve method nodes.

Storing the entire method node (when t.isObjectMethod(p)) instead of just the value enables proper detection of method-syntax properties in meta configuration.

code/core/src/csf-tools/CsfFile.test.ts (3)

1791-1821: LGTM! Test validates story-level play method detection.

This test correctly verifies that play functions defined using method shorthand syntax are detected and tagged with play-fn.

1823-1850: LGTM! Test validates meta-level play method detection.

This test ensures that play methods defined in the meta configuration are correctly detected and propagate the play-fn tag to both meta and stories.

1916-1946: LGTM! Test validates mount detection in method syntax.

This test confirms that the hasMount function correctly detects mount usage when play is defined using method shorthand syntax with destructured parameters.

code/core/src/csf-tools/CsfFile.ts

storybook-app-bot · 2025-10-21T01:47:25Z

Package Benchmarks

^{Commit: c89f490, ran on 21 October 2025 at 01:47:20 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	187	187	0
Self size	68 KB	68 KB	0 B
Dependency size	31.88 MB	31.89 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	187	187	0
Self size	126 KB	126 KB	0 B
Dependency size	30.01 MB	30.02 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	191	191	0
Self size	17 KB	17 KB	🚨 +24 B 🚨
Dependency size	28.59 MB	28.61 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	532	532	0
Self size	950 KB	950 KB	0 B
Dependency size	58.59 MB	58.60 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	272	272	0
Self size	25 KB	25 KB	0 B
Dependency size	43.55 MB	43.56 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	199	199	0
Self size	17 KB	17 KB	🎉 -54 B 🎉
Dependency size	33.13 MB	33.14 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	187	187	0
Self size	927 KB	927 KB	0 B
Dependency size	79.96 MB	79.97 MB	🚨 +11 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	169	169	0
Self size	35 KB	35 KB	🚨 +42 B 🚨
Dependency size	76.39 MB	76.40 MB	🚨 +11 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-react-webpack`

	Before	After	Difference
Dependency count	170	170	0
Self size	21 KB	21 KB	0 B
Dependency size	31.04 MB	31.05 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

CSF: Fix `play-fn` tag for methods (cherry picked from commit b51732d)

shilman added bug patch:yes Bugfix & documentation PR that need to be picked to main branch csf ci:normal labels Oct 10, 2025

shilman requested a review from ghengeveld October 10, 2025 16:01

shilman self-assigned this Oct 10, 2025

shilman changed the title ~~CSF: Fix play-fn tag for methods~~ CSF: Fix play-fn tag for methods Oct 10, 2025

coderabbitai bot reviewed Oct 10, 2025

View reviewed changes

CSF: Fix play-fn tag for methods

c5ee382

shilman force-pushed the shilman/32687-play-method branch from 5d1c0c5 to c5ee382 Compare October 12, 2025 11:02

coderabbitai bot reviewed Oct 12, 2025

View reviewed changes

Add mount support for play method

4d3e813

coderabbitai bot reviewed Oct 13, 2025

View reviewed changes

yannbf reviewed Oct 13, 2025

View reviewed changes

code/core/src/csf-tools/CsfFile.ts Show resolved Hide resolved

shilman added 2 commits October 21, 2025 09:33

Add render method with args test

cd0f3cf

Merge branch 'next' into shilman/32687-play-method

c89f490

yannbf approved these changes Oct 21, 2025

View reviewed changes

yannbf merged commit b51732d into next Oct 21, 2025
58 checks passed

yannbf deleted the shilman/32687-play-method branch October 21, 2025 14:39

This was referenced Oct 21, 2025

Release: Patch 9.1.13 #32777

Closed

Release: Prerelease 10.0.0-rc.1 #32788

Merged

coderabbitai bot mentioned this pull request Oct 22, 2025

React: Implement manifests/component.json for React #32751

Merged

8 tasks

github-actions bot mentioned this pull request Oct 23, 2025

Release: Patch 9.1.14 #32809

Merged

6 tasks

ndelangen pushed a commit that referenced this pull request Oct 24, 2025

Merge pull request #32695 from storybookjs/shilman/32687-play-method

cae3815

CSF: Fix `play-fn` tag for methods (cherry picked from commit b51732d)

ndelangen pushed a commit that referenced this pull request Oct 24, 2025

Merge pull request #32695 from storybookjs/shilman/32687-play-method

1e0228d

CSF: Fix `play-fn` tag for methods (cherry picked from commit b51732d)

github-actions bot added patch:done Patch/release PRs already cherry-picked to main/release branch labels Oct 24, 2025

ndelangen removed the patch:yes Bugfix & documentation PR that need to be picked to main branch label Oct 28, 2025

This was referenced Dec 13, 2025

React: Fix several CSF factory bugs #33354

Merged

Vue3: CSF factories support #33365

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

CSF: Fix `play-fn` tag for methods #32695

CSF: Fix `play-fn` tag for methods #32695

shilman commented Oct 10, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 10, 2025 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Uh oh!

nx-cloud bot commented Oct 10, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

storybook-app-bot bot commented Oct 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

CSF: Fix play-fn tag for methods #32695

CSF: Fix play-fn tag for methods #32695

Conversation

shilman commented Oct 10, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

🦋 Canary release

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Uh oh!

nx-cloud bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

storybook-app-bot bot commented Oct 21, 2025

Package Benchmarks

@storybook/builder-webpack5

@storybook/angular

@storybook/ember

@storybook/nextjs

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/cli

@storybook/codemod

@storybook/preset-react-webpack

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

CSF: Fix `play-fn` tag for methods #32695

CSF: Fix `play-fn` tag for methods #32695

shilman commented Oct 10, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 10, 2025 •

edited

Loading

nx-cloud bot commented Oct 10, 2025 •

edited

Loading

`@storybook/builder-webpack5`

`@storybook/angular`

`@storybook/ember`

`@storybook/nextjs`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/cli`

`@storybook/codemod`

`@storybook/preset-react-webpack`