Test: Record vue-component-meta baselines in the vue3 docgen harness by valentinpalkovic · Pull Request #35574 · storybookjs/storybook

valentinpalkovic · 2026-07-24T08:04:54Z

What I did

The docgen harness so far only records the default vue-docgen-api engine for vue3. This PR adds a second recorder, vue3-component-meta-baselines.test.ts, that drives the opt-in vue-component-meta path (docgen: 'vue-component-meta' in vue3-vite) through the same 25 fixtures and commits the results as cm-argtypes.snapshot / cm-snippet-<story>.snapshot next to the legacy files.

The recorder replicates the vue3-vite plugin's processing exactly: checker options, empty-meta skip, nested-schema pruning, exposed filtering, and the vue-docgen-api event-description backfill. Hence, the snapshots show what a vue-component-meta user actually gets today. Like the legacy recorder, it self-compares every committed baseline through the comparator, so a checker or plugin change that loses extraction quality fails with named violations instead of landing as an unremarkable snapshot diff.

Why this is worth committing:

"Current" for Vue is two engines, not one. The OSA engine has to be current-or-better against both, otherwise a vue-component-meta user upgrading could lose extraction quality (cross-file props, named models, slot binding types) the legacy baselines never recorded.
Engine or plugin changes now surface as reviewed snapshot diffs instead of silent drift.

The cm- prefix keeps each recorder's stale-snippet guard scoped to its own files. README updated accordingly.

What the baselines record

#35565 landed schema: true in the vue3-vite checker options while this PR was open, so the recorder mirrors it and the baselines are recorded with schema extraction on. 17 of the 25 cm-argtypes baselines change; every cm-snippet-* stays byte-identical. The diff is the honest before/after for that flag:

Literal unions become structured enum sbTypes instead of opaque strings, so the dropdown is restored.
Imported union aliases unfold to their members (the [Bug]: Storybook ArgsTypes not extracting component imported types props #29354 symptom).
Runtime [String, Number] and PropType casts become structured union sbTypes (the Support multiple types for Vue #19394 symptom).
The | undefined noise disappears, so optional primitives regain { name: 'number', required: false } and control inference works again.

Two things the flag does not fix, visible in the same diff and worth knowing before the OSA Vue engine adopts schema extraction:

Object-like types lose their type.value detail - inline objects, intersections, and recursive types record { name: 'object', value: {} } because removeNestedSchemas prunes non-enum schemas. table.type.summary keeps the readable text, so the docs table is fine.
TS enums stay other at this point in the stack. Vue3: Support TypeScript enum props in vue-component-meta docgen #35684 fixes that on top of this PR, using the literal schema node released in vue-component-meta 3.3.9.

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

Manual testing

No manual test necessary — this is an internal, unpublished test harness (private: true, nothing ships to npm). To verify locally:

cd code/lib/docgen-harness
yarn run -T vitest run src/vue3 — all 4 vue3 suites pass (79 tests, 19 expected-fail red markers)

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip
Make sure this PR contains one of the labels below: build

🤖 Generated with Claude Code

https://claude.ai/code/session_015gvCXfY6v5hGRDVNL11JXS

The harness so far only recorded the default vue-docgen-api engine. This adds a second recorder that drives the opt-in vue-component-meta path through the same 25 fixtures, replicating the vue3-vite plugin's processing exactly, and commits the results as cm-*.snapshot files. With both engines pinned, engine or plugin changes surface as reviewed snapshot diffs instead of silent drift.

coderabbitai · 2026-07-24T08:12:39Z

Walkthrough

Adds a Vue 3 vue-component-meta baseline suite, dependency and harness documentation updates, and cm- argTypes/source snapshot coverage across props, types, slots, events, and v-model fixtures.

Changes

Vue 3 component-meta baseline flow

Layer / File(s)	Summary
Baseline harness and conventions `code/lib/docgen-harness/src/vue3/vue3-component-meta-baselines.test.ts`, `code/lib/docgen-harness/package.json`, `code/lib/docgen-harness/README.md`	Creates a production-aligned component-meta checker flow, normalizes metadata, generates argTypes and source snapshots, validates snapshot completeness, adds the dependency, and documents the conventions.
Prop and type fixture baselines `code/lib/docgen-harness/src/vue3/__testfixtures__/{cross-file-,define-props-,props-,recursive-type,runtime-,type-intersection,v-model}/`	Adds component-meta argTypes and source snippet snapshots for cross-file props, runtime props, generics, enums, recursive types, intersections, and v-model bindings.
Slot and event fixture baselines `code/lib/docgen-harness/src/vue3/__testfixtures__/{define-slots-,events-jsdoc,jsdoc-tags,prop-slot-name-collision,slots,slots-template-only}/*`	Adds component-meta argTypes and source snippet snapshots for slots, scoped bindings, event payloads, JSDoc tags, prop-slot name collisions, and documented props with typed slots.

Sequence Diagram(s)

sequenceDiagram
  participant FixtureSFC
  participant VueComponentMeta
  participant VueDocgenApi
  participant ExtractArgTypes
  participant GenerateSourceCode
  FixtureSFC->>VueComponentMeta: inspect SFC default export
  VueComponentMeta->>VueDocgenApi: backfill event descriptions
  VueComponentMeta->>ExtractArgTypes: provide component metadata
  ExtractArgTypes->>GenerateSourceCode: process story exports and args
  GenerateSourceCode->>FixtureSFC: write cm-snippet snapshots

Possibly related PRs

storybookjs/storybook#35545: Extends the same Vue 3 baseline framework with vue-component-meta snapshot validation.
storybookjs/storybook#35557: Fixes production __docgenInfo injection for related Vue component metadata.
storybookjs/storybook#35565: Updates related Vue vue-component-meta schema handling and prop type fixtures.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

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

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (1)

code/lib/docgen-harness/src/vue3/vue3-component-meta-baselines.test.ts (1)
150-158: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Dead default: docgen.displayName always overwrites the fallback.

docgen (built at Line 124) always sets its own displayName from the filename, so Object.assign({ displayName: component.name ?? component.__name }, ...docgen) always has the second argument's displayName win. The initial fallback object never has an observable effect here.
Suggested simplification
-      component.__docgenInfo = Object.assign(
-        { displayName: component.name ?? component.__name },
-        JSON.parse(JSON.stringify(docgen))
-      );
+      component.__docgenInfo = JSON.parse(JSON.stringify(docgen));
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/lib/docgen-harness/src/vue3/vue3-component-meta-baselines.test.ts`
around lines 150 - 158, Remove the unused displayName fallback from the
Object.assign call in the component metadata setup, since the docgen object
already supplies displayName. Preserve the existing JSON cloning and
__docgenInfo assignment behavior in the docgen branch.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@code/lib/docgen-harness/src/vue3/__testfixtures__/props-basic-types/cm-snippet-UnrepresentableArgs.snapshot`:
- Line 8: Update the PropsBasicTypes snapshot’s :big binding to construct the
intended value without numeric precision loss, using a string-based BigInt
conversion or bigint literal so the rendered snippet preserves 9007199254740993.

In
`@code/lib/docgen-harness/src/vue3/__testfixtures__/runtime-proptype-cast/cm-argtypes.snapshot`:
- Around line 14-20: Escape the embedded quotes in the union-type strings for
the kind summary and value in
code/lib/docgen-harness/src/vue3/__testfixtures__/runtime-proptype-cast/cm-argtypes.snapshot
lines 14-20, and for the size summary and value in
code/lib/docgen-harness/src/vue3/__testfixtures__/type-intersection-whole/cm-argtypes.snapshot
lines 40-46, so both snapshots match serializer output.

---

Nitpick comments:
In `@code/lib/docgen-harness/src/vue3/vue3-component-meta-baselines.test.ts`:
- Around line 150-158: Remove the unused displayName fallback from the
Object.assign call in the component metadata setup, since the docgen object
already supplies displayName. Preserve the existing JSON cloning and
__docgenInfo assignment behavior in the docgen branch.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 77926930-583c-4745-afca-8fe0ded56851

📥 Commits

Reviewing files that changed from the base of the PR and between ae7a1f5 and f4b09cb.

⛔ Files ignored due to path filters (1)

yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (57)

code/lib/docgen-harness/README.md
code/lib/docgen-harness/package.json
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-composed-utility/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-composed-utility/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-extended-interface/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-extended-interface/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-imported-interface/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-imported-interface/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-props-spread/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-props-spread/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-runtime-props/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-runtime-props/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-union-alias/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/cross-file-union-alias/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-props-destructured/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-props-destructured/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-props-runtime-array/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-props-runtime-array/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-props-runtime-object/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-props-runtime-object/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-literal-bindings/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-literal-bindings/cm-snippet-ScopedIconBinding.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/events-jsdoc/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/events-jsdoc/cm-snippet-WithHandlers.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/jsdoc-tags/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/jsdoc-tags/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/prop-slot-name-collision/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/prop-slot-name-collision/cm-snippet-IconPropAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-basic-types/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-basic-types/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-basic-types/cm-snippet-UnrepresentableArgs.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-generic/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-generic/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-ts-enum/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-ts-enum/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-union-enum/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/props-union-enum/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/recursive-type/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/recursive-type/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/runtime-multi-constructor/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/runtime-multi-constructor/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/runtime-proptype-cast/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/runtime-proptype-cast/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/slots-template-only/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/slots-template-only/cm-snippet-ScopedBindings.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/slots-template-only/cm-snippet-StringChild.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/slots/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/slots/cm-snippet-ScopedBindings.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/slots/cm-snippet-StringChild.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/slots/cm-snippet-VNodeChild.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/type-intersection-whole/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/type-intersection-whole/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/type-intersection/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/type-intersection/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/v-model/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/v-model/cm-snippet-VModelBinding.snapshot
code/lib/docgen-harness/src/vue3/vue3-component-meta-baselines.test.ts

Documented withDefaults props plus defineSlots no longer lose prop meta under the vue-component-meta engine; both recorders capture the repro fully intact. A regression baseline, no red marker.

#35565 landed schema: true in the vue3-vite checker options, so the recorder now mirrors it. 17 of the 25 cm-argtypes baselines change - literal unions become structured enum sbTypes, imported union aliases unfold to their members, runtime [String, Number] and PropType casts become unions, and the "| undefined" noise disappears from optional primitives. Every cm-snippet baseline stays byte-identical. The recorder also joins the comparator, matching what next established for every other *-baselines.test.ts: it self-compares each committed baseline so a checker or plugin change that loses extraction quality fails with named violations rather than landing as an unremarkable snapshot diff.

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/DefineSlotsWithProps.vue`:
- Around line 2-4: Update the regression comment in the DefineSlotsWithProps
fixture to reflect the current behavior: prop descriptions, default values, and
slot documentation are preserved in the cm-argtypes snapshot. Describe the
fixture as guarding against regression rather than claiming the metadata is
lost.
- Around line 18-23: Raise the Vue dependency minimum from ^3.2.47 to a
3.3-or-newer range in the relevant manifest, then regenerate the lockfile so its
dependency metadata matches the updated requirement while preserving the
resolved Vue version.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: eb594ad4-4c91-4006-9beb-bec3e3ec4069

📥 Commits

Reviewing files that changed from the base of the PR and between f4b09cb and 24ae797.

📒 Files selected for processing (7)

code/lib/docgen-harness/README.md
code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/DefineSlotsWithProps.vue
code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/cm-argtypes.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/cm-snippet-PropsAsWritten.snapshot
code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/input.stories.ts
code/lib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/snippet-PropsAsWritten.snapshot

🚧 Files skipped from review as they are similar to previous changes (1)

code/lib/docgen-harness/README.md

valentinpalkovic requested a review from a team July 24, 2026 08:04

valentinpalkovic added the build Internal-facing build tooling & test updates label Jul 24, 2026

valentinpalkovic marked this pull request as draft July 24, 2026 08:09

coderabbitai Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread ...-harness/src/vue3/__testfixtures__/props-basic-types/cm-snippet-UnrepresentableArgs.snapshot

Comment thread code/lib/docgen-harness/src/vue3/__testfixtures__/runtime-proptype-cast/cm-argtypes.snapshot Outdated

valentinpalkovic mentioned this pull request Jul 24, 2026

Vue3 Vite: Enable Schema Extraction for Vue Component Meta #35565

Merged

Test: Pin the #26465 repro as working at vue-component-meta 3.2.7

24ae797

Documented withDefaults props plus defineSlots no longer lose prop meta under the vue-component-meta engine; both recorders capture the repro fully intact. A regression baseline, no red marker.

valentinpalkovic mentioned this pull request Jul 24, 2026

[Bug]: Vue3-vite autodocs with docgen 'vue-component-meta' does no longer work with defineSlots #26465

Closed

seanogdev mentioned this pull request Jul 25, 2026

[Bug]: A type-only export in an SFC drops the whole file's vue-component-meta docgen #35592

Closed

valentinpalkovic self-assigned this Jul 31, 2026

valentinpalkovic marked this pull request as ready for review July 31, 2026 07:32

Valentin Palkovic added 2 commits July 31, 2026 09:38

Merge branch 'next' into valentin/vue3-component-meta-baselines

1e2587a

valentinpalkovic added ci:normal Run our default set of CI jobs (choose this for most PRs). qa:skip Pull Requests that do not need any QA. (e.g. documentation) labels Jul 31, 2026

coderabbitai Bot reviewed Jul 31, 2026

View reviewed changes

Comment thread ...ib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/DefineSlotsWithProps.vue

Comment thread ...ib/docgen-harness/src/vue3/__testfixtures__/define-slots-with-props/DefineSlotsWithProps.vue

This was referenced Jul 31, 2026

Vue3: Support TypeScript enum props in vue-component-meta docgen #35684

Merged

Tests: Give the portable-react e2e suite a timeout its own waits fit in #35685

Closed

huang-julien approved these changes Jul 31, 2026

View reviewed changes

valentinpalkovic merged commit 2bc1818 into next Jul 31, 2026
141 of 146 checks passed

valentinpalkovic deleted the valentin/vue3-component-meta-baselines branch July 31, 2026 08:56

github-actions Bot mentioned this pull request Jul 31, 2026

Release: Prerelease 10.6.0-alpha.4 #35617

Merged

2 tasks done

This was referenced Aug 3, 2026

Vue3: Add docgen-harness feature with withDefaults #35709

Closed

Vue: Move vue-component-meta in vue renderer and implement docgen payload builder #35665

Merged

Navigation Menu

Repository navigation

Test: Record vue-component-meta baselines in the vue3 docgen harness - #35574

Test: Record vue-component-meta baselines in the vue3 docgen harness#35574
valentinpalkovic merged 4 commits into
nextfrom
valentin/vue3-component-meta-baselines

valentinpalkovic commented Jul 24, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

valentinpalkovic commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

What the baselines record

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

Uh oh!

coderabbitai Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

valentinpalkovic commented Jul 24, 2026 •

edited

Loading

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading