Vue: Follow a re-export to the component that declares it by valentinpalkovic · Pull Request #35821 · storybookjs/storybook

valentinpalkovic · 2026-08-09T18:39:38Z

What is broken

A story that imports its component from a barrel file gets no docgen. The same component imported directly gets a full props table.

Captured from the fixture added in this PR, both run through buildDocgenPayload against one checker:

### DIRECT import      import Badge from './Badge.vue'
  error:    undefined
  argTypes: ["text","tone"]

### BARREL import      import { Badge } from './index'
  error:    {"name":"No docgen found",
             "message":"vue-component-meta extracted no component metadata for the
                        \"Badge\" export of .../barrel/src/index.ts."}
  argTypes: []

Nothing about the component differs between those two runs. Only the specifier the story imports it through.

src/Badge.vue     defineProps<{ text: string; tone?: 'info' | 'warn' }>()
src/index.ts      export { default as Badge } from './Badge.vue';

Importing from a public entry point is the normal shape for a design system, so this is not an edge case.

Why

The shared resolver answers "which module does the story import from" and correctly stops at index.ts. vue-component-meta is then handed that path, and its entry point looks for the declaration inside the file it is given:

resolveMetaComponent(csf, storyPath)   ->  { path: 'src/index.ts', exportName: 'Badge' }
checker.getComponentMeta(indexPath, 'Badge')
  -> getExport() finds an ExportSpecifier, not a declaration
  -> throws "Export 'Badge' not found"
  -> swallowed at component-meta.ts:99
  -> user sees "No docgen found" naming a file they never put a component in

The fix

Resolve the alias to the declaring module before asking for meta. The Angular analyzer already does this for the same shape (project.ts, extractViaModuleExports), and has tests for both export * and aliased export { X as Y }.

const declared = followReExport(checker, component.path, component.exportName) ?? {
  path: component.path,
  exportName: component.exportName,
};
const metaSources = await collectComponentMetaSources(checker, declared.path);

followReExport returns undefined when the file declares the export itself, which is the common case, so the path for a direct import is unchanged.

Resolving before rather than after matters for a second reason: applyTempFixForEventDescriptions re-parses the file with vue-docgen-api to recover event descriptions. Handed the index file it would find nothing; handed the SFC it works.

The change is in the server docgen path only. The legacy Vite plugin transforms component modules and explicitly excludes story files, so it never resolves through a barrel.

Checklist for contributors

Manual testing

Run from the repository root.

yarn vitest run code/renderers/vue3 — expect 102 passing.
To see the bug the test pins, replace the followReExport(...) ?? {...} call in build-docgen.ts with the plain { path: component.path, exportName: component.exportName } fallback and re-run yarn vitest run code/renderers/vue3/src/docgen/follow-re-export.test.ts. Expect:

AssertionError: expected { name: 'No docgen found', …(1) } to be undefined
Tests  1 failed (1)

yarn nx check vue3 — expect no type errors.

Documentation

Add or update documentation reflecting your changes
No documentation needed — this makes an import shape that users already write behave the way they expect.

A story that imports its component from a barrel gets no docgen at all, while a story importing the same component directly gets a full props table: import Badge from './Badge.vue' -> argTypes: text, tone import { Badge } from './index' -> error: No docgen found `vue-component-meta` looks for the declaration inside the file it is handed. Given the index file it finds an export specifier, throws, and the throw is swallowed into a generic message naming a file the user never wrote a component in. The server path now resolves the alias to the declaring module before asking for meta, which is what the Angular analyzer already does for the same shape. Resolving before rather than after also means the event-description pass reads the SFC instead of the index file. Importing from a public entry point is the normal shape for a design system, so this is not an edge case.

github-actions · 2026-08-09T18:40:07Z

	Fails
🚫	PR description is missing the mandatory "#### Manual testing" section. Please add it so that reviewers know how to manually test your changes.

Generated by 🚫 dangerJS against 33ba09a

coderabbitai · 2026-08-09T18:43:57Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8ed01b71-bf67-41f7-825c-394157e36118

📥 Commits

Reviewing files that changed from the base of the PR and between 37f57dc and 33ba09a.

📒 Files selected for processing (8)

code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/Badge.vue
code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/Barrel.stories.ts
code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/Direct.stories.ts
code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/index.ts
code/renderers/vue3/src/docgen/__testfixtures__/barrel/tsconfig.json
code/renderers/vue3/src/docgen/build-docgen.ts
code/renderers/vue3/src/docgen/follow-re-export.test.ts
code/renderers/vue3/src/docgen/follow-re-export.ts

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

code/renderers/vue3/src/docgen/build-docgen.ts
code/renderers/vue3/src/docgen/testfixtures/barrel/tsconfig.json
code/renderers/vue3/src/docgen/testfixtures/barrel/src/Barrel.stories.ts
code/renderers/vue3/src/docgen/testfixtures/barrel/src/index.ts
code/renderers/vue3/src/docgen/follow-re-export.test.ts
code/renderers/vue3/src/docgen/testfixtures/barrel/src/Badge.vue
code/renderers/vue3/src/docgen/testfixtures/barrel/src/Direct.stories.ts
code/renderers/vue3/src/docgen/follow-re-export.ts

Included review availability: 2 reviews are currently available. Based on recent review activity, included reviews refill at 3 per hour.

Walkthrough

Changes

Vue docgen re-export resolution

Layer / File(s)	Summary
Barrel import fixtures `code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/*`, `code/renderers/vue3/src/docgen/__testfixtures__/barrel/tsconfig.json`	Added the typed `Badge` component, direct and barrel stories, a barrel export, and TypeScript configuration.
Re-export target resolution `code/renderers/vue3/src/docgen/follow-re-export.ts`	Added `followReExport` to resolve aliased exports to their declaring file and export name.
Docgen integration and regression coverage `code/renderers/vue3/src/docgen/build-docgen.ts`, `code/renderers/vue3/src/docgen/follow-re-export.test.ts`	Updated docgen metadata collection and errors to use resolved declarations. Added parity checks for direct and barrel imports.

Sequence Diagram(s)

sequenceDiagram
  participant buildDocgen
  participant TypeScriptChecker
  participant MetadataManager
  buildDocgen->>TypeScriptChecker: Resolve the component re-export
  TypeScriptChecker-->>buildDocgen: Return declaring file and export
  buildDocgen->>MetadataManager: Collect Vue metadata
  MetadataManager-->>buildDocgen: Return component metadata

Merge Risk: ⚪ Minimal · up to 33ba0

This localized change makes Vue component documentation work through barrel-file re-exports while preserving direct imports, with focused regression coverage; no actionable merge-blocking risk remains beyond normal checks and review.

✨ 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: 1

🧹 Nitpick comments (1)

code/renderers/vue3/src/docgen/follow-re-export.test.ts (1)
37-52: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Cover the event-description contract.

The new resolution path changes the source used for event-description recovery. This fixture has no component event. The assertions cannot detect an event-description regression for barrel imports. Add a documented event to Badge.vue and assert equivalent direct and barrel event metadata.

As per coding guidelines, test public contracts and externally observable side effects rather than private implementation details.
🤖 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/renderers/vue3/src/docgen/follow-re-export.test.ts` around lines 37 -
52, Extend the follow-re-export fixture by documenting a public event in
Badge.vue, then update the test case around docgenFor to assert that direct and
barrel imports expose equivalent event metadata, including the event
description. Preserve the existing prop assertions and compare externally
observable event data rather than resolution internals.
Source: Coding guidelines

🤖 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/renderers/vue3/src/docgen/__testfixtures__/barrel/src/Barrel.stories.ts`:
- Line 1: Update the fixture’s tsconfig.json to enable noEmit and
allowImportingTsExtensions, then change the import in Barrel.stories.ts to
reference ./index.ts so the TypeScript extension import is accepted.

---

Nitpick comments:
In `@code/renderers/vue3/src/docgen/follow-re-export.test.ts`:
- Around line 37-52: Extend the follow-re-export fixture by documenting a public
event in Badge.vue, then update the test case around docgenFor to assert that
direct and barrel imports expose equivalent event metadata, including the event
description. Preserve the existing prop assertions and compare externally
observable event data rather than resolution internals.

🪄 Autofix

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: 2d819641-21b5-4cca-807a-f64b3cd050a3

📥 Commits

Reviewing files that changed from the base of the PR and between 59ba5de and dfc9817.

📒 Files selected for processing (8)

code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/Badge.vue
code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/Barrel.stories.ts
code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/Direct.stories.ts
code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/index.ts
code/renderers/vue3/src/docgen/__testfixtures__/barrel/tsconfig.json
code/renderers/vue3/src/docgen/build-docgen.ts
code/renderers/vue3/src/docgen/follow-re-export.test.ts
code/renderers/vue3/src/docgen/follow-re-export.ts

coderabbitai · 2026-08-17T12:02:20Z

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

coderabbitai Bot reviewed Aug 9, 2026

View reviewed changes

Comment thread code/renderers/vue3/src/docgen/__testfixtures__/barrel/src/Barrel.stories.ts

FrancoKaddour mentioned this pull request Aug 14, 2026

experimentalDocgenServer: editing component props doesn't refresh Controls when the component is imported via a barrel/re-export (index.ts) #35403

Open

huang-julien approved these changes Aug 17, 2026

View reviewed changes

Merge branch 'next' into valentin/vue-docgen-barrel-reexport

33ba09a

valentinpalkovic self-assigned this Aug 17, 2026

valentinpalkovic added bug vue ci:normal Run our default set of CI jobs (choose this for most PRs). labels Aug 17, 2026

valentinpalkovic added the qa:skip Pull Requests that do not need any QA. (e.g. documentation) label Aug 18, 2026

valentinpalkovic merged commit 27e23a3 into next Aug 18, 2026
153 of 158 checks passed

valentinpalkovic deleted the valentin/vue-docgen-barrel-reexport branch August 18, 2026 17:04

github-actions Bot mentioned this pull request Aug 18, 2026

Release: Prerelease 10.6.0-alpha.7 #35916

Merged

3 tasks done

Navigation Menu

Repository navigation

Vue: Follow a re-export to the component that declares it - #35821

Vue: Follow a re-export to the component that declares it#35821
valentinpalkovic merged 2 commits into
nextfrom
valentin/vue-docgen-barrel-reexport

valentinpalkovic commented Aug 9, 2026

Uh oh!

github-actions Bot commented Aug 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

valentinpalkovic commented Aug 9, 2026

What is broken

Why

The fix

Checklist for contributors

Manual testing

Documentation

Uh oh!

github-actions Bot commented Aug 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 9, 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!

coderabbitai Bot commented Aug 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Aug 9, 2026 •

edited

Loading

coderabbitai Bot commented Aug 9, 2026 •

edited

Loading