Merge pull request #26967 from glenjamin/docgen-re-export

Docgen: Only add react-docgen info when a component is defined in the file
(cherry picked from commit 691069c)

code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts

@@ -15,6 +15,8 @@ import { utils } from 'react-docgen';
 const { getNameOrValue, isReactForwardRefCall } = utils;
 
 const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+  documentation.set('definedInFile', componentDefinition.hub.file.opts.filename);
+
   if (
     (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
     componentDefinition.has('id')

code/frameworks/react-vite/src/plugins/react-docgen.ts

@@ -20,7 +20,7 @@ import {
 } from './docgen-resolver';
 import { logger } from '@storybook/node-logger';
 
-type DocObj = Documentation & { actualName: string };
+type DocObj = Documentation & { actualName: string; definedInFile: string };
 
 // TODO: None of these are able to be overridden, so `default` is aspirational here.
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
@@ -71,8 +71,8 @@ export async function reactDocgen({
         const s = new MagicString(src);
 
         docgenResults.forEach((info) => {
-          const { actualName, ...docgenInfo } = info;
-          if (actualName) {
+          const { actualName, definedInFile, ...docgenInfo } = info;
+          if (actualName && definedInFile == id) {
             const docNode = JSON.stringify(docgenInfo);
             s.append(`;${actualName}.__docgenInfo=${docNode}`);
           }

code/presets/react-webpack/src/loaders/react-docgen-loader.ts

@@ -22,6 +22,7 @@ import {
 const { getNameOrValue, isReactForwardRefCall } = utils;
 
 const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+  documentation.set('definedInFile', componentDefinition.hub.file.opts.filename);
   if (
     (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
     componentDefinition.has('id')
@@ -58,7 +59,7 @@ const actualNameHandler: Handler = function actualNameHandler(documentation, com
   }
 };
 
-type DocObj = Documentation & { actualName: string };
+type DocObj = Documentation & { actualName: string; definedInFile: string };
 
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
 const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
@@ -107,8 +108,8 @@ export default async function reactDocgenLoader(
     const magicString = new MagicString(source);
 
     docgenResults.forEach((info) => {
-      const { actualName, ...docgenInfo } = info;
-      if (actualName) {
+      const { actualName, definedInFile, ...docgenInfo } = info;
+      if (actualName && definedInFile == this.resourcePath) {
         const docNode = JSON.stringify(docgenInfo);
         magicString.append(`;${actualName}.__docgenInfo=${docNode}`);
       }

code/renderers/react/src/docs/extractArgTypes.test.ts

@@ -50,6 +50,7 @@ const annotateWithDocgen = (inputPath: string) => {
 const skippedTests = [
   'js-class-component',
   'js-function-component',
+  'js-re-exported-component',
   'js-function-component-inline-defaults',
   'js-function-component-inline-defaults-no-propTypes',
   'ts-function-component',

code/renderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot

@@ -0,0 +1 @@
+export { component } from '../js-function-component/input.jsx';

code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx

@@ -0,0 +1,3 @@
+import { component } from '../js-function-component/input.jsx';
+
+export { component };

code/renderers/react/template/stories/js-argtypes.stories.jsx

@@ -7,6 +7,7 @@ import { ThemeProvider, themes, convert } from '@storybook/theming';
 
 import { component as JsClassComponentComponent } from './docgen-components/js-class-component/input.jsx';
 import { component as JsFunctionComponentComponent } from './docgen-components/js-function-component/input.jsx';
+import { component as JsRexportedComponentComponent } from './docgen-components/js-re-exported-component/input.jsx';
 import { component as JsFunctionComponentInlineDefaultsComponent } from './docgen-components/js-function-component-inline-defaults/input.jsx';
 import { component as JsFunctionComponentInlineDefaultsNoPropTypesComponent } from './docgen-components/js-function-component-inline-defaults-no-propTypes/input.jsx';
 import { component as JsProptypesShapeComponent } from './docgen-components/9399-js-proptypes-shape/input.jsx';
@@ -60,6 +61,10 @@ export const JsClassComponent = { parameters: { component: JsClassComponentCompo
 
 export const JsFunctionComponent = { parameters: { component: JsFunctionComponentComponent } };
 
+export const JsRexportedComponent = {
+  parameters: { component: JsRexportedComponentComponent },
+};
+
 export const JsFunctionComponentInlineDefaults = {
   parameters: { component: JsFunctionComponentInlineDefaultsComponent },
 };