Maintenance: Extract shared ReactDocgenResolveError and RESOLVE_EXTENSIONS to internal/common#34356
Conversation
…XTENSIONS to internal/common ReactDocgenResolveError and the docgen lookup logic were copy-pasted identically between react-vite and react-webpack, with a warning comment instructing developers to manually keep both files in sync. Extract both to code/core/src/common/utils/docgen-resolver.ts and export them via storybook/internal/common so both build tools import from one place. The react renderer's docgenResolver.ts is updated to re-export ReactDocgenResolveError from common (removing local duplication of the class) while keeping its own defaultLookupModule that uses the broader supportedExtensions list. Closes storybookjs#34332
📝 WalkthroughWalkthroughThis PR centralizes React Docgen resolver utilities—ReactDocgenResolveError class, RESOLVE_EXTENSIONS array, and defaultLookupModule function—into a new shared module (code/core/src/common/utils/docgen-resolver.ts) and removes duplicate implementations from multiple framework-specific files by re-exporting from the centralized location. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/core/src/common/utils/docgen-resolver.ts`:
- Around line 21-34: RESOLVE_EXTENSIONS contains duplicate entries for '.mts'
and '.cts'; clean this array in docgen-resolver.ts by removing the repeated
entries so each extension appears only once (update the RESOLVE_EXTENSIONS
constant to a unique list, preserving intended ordering and keeping symbols like
'.js', '.ts', '.tsx', '.jsx', '.mjs', '.cjs', '.cts', '.mts', '.ctsx', '.mtsx'
only once).
🪄 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: b1394169-63d8-4f2e-9d41-ed045b4b2b8e
📒 Files selected for processing (5)
code/core/src/common/index.tscode/core/src/common/utils/docgen-resolver.tscode/frameworks/react-vite/src/plugins/docgen-resolver.tscode/presets/react-webpack/src/loaders/docgen-resolver.tscode/renderers/react/src/componentManifest/reactDocgen/docgenResolver.ts
| export const RESOLVE_EXTENSIONS = [ | ||
| '.js', | ||
| '.cts', // These were originally not in the code, I added them | ||
| '.mts', // These were originally not in the code, I added them | ||
| '.ctsx', // These were originally not in the code, I added them | ||
| '.mtsx', // These were originally not in the code, I added them | ||
| '.ts', | ||
| '.tsx', | ||
| '.mjs', | ||
| '.cjs', | ||
| '.mts', | ||
| '.cts', | ||
| '.jsx', | ||
| ]; |
There was a problem hiding this comment.
Duplicate extensions in RESOLVE_EXTENSIONS.
.mts and .cts appear twice in the array: once at lines 23-24 (newly added) and again at lines 31-32 (from the original code). This redundancy doesn't break resolution but indicates a merge oversight and adds unnecessary iteration.
🔧 Proposed fix to remove duplicates
export const RESOLVE_EXTENSIONS = [
'.js',
- '.cts', // These were originally not in the code, I added them
- '.mts', // These were originally not in the code, I added them
'.ctsx', // These were originally not in the code, I added them
'.mtsx', // These were originally not in the code, I added them
'.ts',
'.tsx',
'.mjs',
'.cjs',
- '.mts',
- '.cts',
+ '.mts', // These were originally not in the code, I added them
+ '.cts', // These were originally not in the code, I added them
'.jsx',
];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const RESOLVE_EXTENSIONS = [ | |
| '.js', | |
| '.cts', // These were originally not in the code, I added them | |
| '.mts', // These were originally not in the code, I added them | |
| '.ctsx', // These were originally not in the code, I added them | |
| '.mtsx', // These were originally not in the code, I added them | |
| '.ts', | |
| '.tsx', | |
| '.mjs', | |
| '.cjs', | |
| '.mts', | |
| '.cts', | |
| '.jsx', | |
| ]; | |
| export const RESOLVE_EXTENSIONS = [ | |
| '.js', | |
| '.ctsx', // These were originally not in the code, I added them | |
| '.mtsx', // These were originally not in the code, I added them | |
| '.ts', | |
| '.tsx', | |
| '.mjs', | |
| '.cjs', | |
| '.mts', // These were originally not in the code, I added them | |
| '.cts', // These were originally not in the code, I added them | |
| '.jsx', | |
| ]; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/core/src/common/utils/docgen-resolver.ts` around lines 21 - 34,
RESOLVE_EXTENSIONS contains duplicate entries for '.mts' and '.cts'; clean this
array in docgen-resolver.ts by removing the repeated entries so each extension
appears only once (update the RESOLVE_EXTENSIONS constant to a unique list,
preserving intended ordering and keeping symbols like '.js', '.ts', '.tsx',
'.jsx', '.mjs', '.cjs', '.cts', '.mts', '.ctsx', '.mtsx' only once).
|
Hi @mixelburg, Thank you for your contribution. Please fix the merge conflicts. Thank you! :) |
|
Closing. See reason here: #34453 (comment) |
Summary
Closes #34332
The
ReactDocgenResolveErrorclass anddefaultLookupModulefunction were copy-pasted identically betweenreact-viteandreact-webpack, with explicitwatch out: when updating this code, also update the code in ...comments to keep them in sync manually. This is a known maintenance hazard — a bug fix applied to one would silently miss the other.Changes
code/core/src/common/utils/docgen-resolver.ts— single source of truth forReactDocgenResolveError,RESOLVE_EXTENSIONS, anddefaultLookupModule(exported viastorybook/internal/common)react-vite/docgen-resolver.ts— replaced 75-line copy with 5-line re-exportreact-webpack/docgen-resolver.ts— replaced 75-line copy with 5-line re-exportreact/reactDocgen/docgenResolver.ts— re-exportsReactDocgenResolveErrorfrom common instead of defining it locally; keeps its owndefaultLookupModulesince it usessupportedExtensions(a different ordering tuned for the renderer)Behaviour
No runtime changes. The
react-viteandreact-webpackextension resolution ordering is preserved in the shared module (sameRESOLVE_EXTENSIONSarray). The renderer'sdefaultLookupModulestill usessupportedExtensionsas before.Summary by CodeRabbit