Maintenance: Extract createPreviewAnnotations factory to reduce dupli…

[Programer1804]

Closes #34389

What I did

Extracted the duplicated previewAnnotations logic into a shared createPreviewAnnotations factory at code/core/src/common/utils/create-preview-annotations.ts and refactored 5 renderer presets to use it.

The previewAnnotations function was nearly identical across html, preact, svelte, vue3, and web-components renderer presets, differing only in the package name string. This refactor centralizes the logic into a single factory helper, making future changes to the docsEnabled check or entry resolution apply automatically to all renderers.

The react renderer was intentionally left out as it contains additional RSC feature-flag logic that goes beyond the scope of this change.

Checklist for Contributors

Testing

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

• unit tests

Manual testing

No manual testing is required. This is a pure refactor with no behavior changes — the same entry files are resolved in the same order as before. The shared logic is covered by the new unit tests in create-preview-annotations.test.ts.

Summary by CodeRabbit

Release Notes

• Refactor

  • Consolidated preview annotations logic across HTML, Preact, Svelte, Vue, and Web Components renderers for improved maintainability.

• Tests

  • Added comprehensive tests for preview annotations generation.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new shared createPreviewAnnotations utility extracts and centralizes preset logic previously duplicated across five renderer presets. Tests validate annotation list construction with conditional docs inclusion. Five renderer presets refactor to use this utility instead of inline async builders, removing boilerplate.

Changes

Preview Annotations Utility Extraction

Layer / File(s)	Summary
Core utility definition, tests, and export code/core/src/common/utils/create-preview-annotations.ts, code/core/src/common/utils/create-preview-annotations.test.ts, code/core/src/common/index.ts	New createPreviewAnnotations function builds a preset property that computes whether docs are enabled and constructs the final preview annotations list by concatenating input, resolved extraEntries, a package-specific entry-preview, and an optional entry-preview-docs. Tests verify default and conditional annotation inclusion, entry preservation, and ordering.
Renderer preset refactorings code/renderers/html/src/preset.ts, code/renderers/preact/src/preset.ts, code/renderers/svelte/src/preset.ts, code/renderers/vue3/src/preset.ts, code/renderers/web-components/src/preset.ts	All five renderers replace inline async previewAnnotations builders with createPreviewAnnotations calls, removing duplicated path-resolution and docs-enabled branching logic. Web-components supplies an additional entry-preview-argtypes entry to the utility.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• storybookjs/storybook#33875: The Vite builder plugin consumes the previewAnnotations preset entries generated by this utility to add annotation files as builder optimization dependencies.

✨ Finishing Touches

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch refactor/extract-preview-annotations-factory

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 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/core/src/common/utils/create-preview-annotations.test.ts`:
- Line 3: Update the relative import of the test helper to include an explicit
TypeScript extension: change the import of createPreviewAnnotations to use
'./create-preview-annotations.ts' so the test module explicitly references the
TypeScript file (locate the import statement that currently reads import {
createPreviewAnnotations } from './create-preview-annotations' and add the .ts
extension).

🪄 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: be007e53-21ab-43c8-b78b-c6f30d797116

📥 Commits

Reviewing files that changed from the base of the PR and between 986b553 and 9225aee.

📒 Files selected for processing (8)

• code/core/src/common/index.ts
• code/core/src/common/utils/create-preview-annotations.test.ts
• code/core/src/common/utils/create-preview-annotations.ts
• code/renderers/html/src/preset.ts
• code/renderers/preact/src/preset.ts
• code/renderers/svelte/src/preset.ts
• code/renderers/vue3/src/preset.ts
• code/renderers/web-components/src/preset.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use an explicit extension in the relative test import.

Line 3 should include .ts on the local module import.

Proposed fix

-import { createPreviewAnnotations } from './create-preview-annotations';
+import { createPreviewAnnotations } from './create-preview-annotations.ts';

As per coding guidelines, "For TypeScript source in the repo, prefer explicit file extensions for relative code imports and exports such as ./foo.ts or ./bar.tsx when the target is another TS/JS module; keep framework-specific component imports like .vue and .svelte in their expected form".

🤖 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/core/src/common/utils/create-preview-annotations.test.ts` at line 3,
Update the relative import of the test helper to include an explicit TypeScript
extension: change the import of createPreviewAnnotations to use
'./create-preview-annotations.ts' so the test module explicitly references the
TypeScript file (locate the import statement that currently reads import {
createPreviewAnnotations } from './create-preview-annotations' and add the .ts
extension).

[valentinpalkovic]

Unfortunately, this refactoring will cause issues in package managers with strict dependency resolution. Some package managers like pnpm will complain because they will try to e.g. resolve @storybook/react from the storybook package, which doesn't have @storybook/react defined as an entry point. Therefore, the import.meta.resolve calls has to remain in their renderer packages.