From cf562cc4b216d96755dcf5ba15dff8b7ae2dd6a8 Mon Sep 17 00:00:00 2001 From: Glen Mailer Date: Sun, 28 Apr 2024 13:27:57 +0100 Subject: [PATCH 1/2] Only add react-docgen info in the file a component is defined This avoids errors when a component is being imported and re-exported under a different name via a barrel file or similar. --- .../react-webpack/src/loaders/react-docgen-loader.ts | 7 ++++--- code/renderers/react/src/docs/extractArgTypes.test.ts | 1 + .../js-re-exported-component/docgen.snapshot | 1 + .../docgen-components/js-re-exported-component/input.jsx | 3 +++ .../react/template/stories/js-argtypes.stories.jsx | 5 +++++ 5 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 code/renderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot create mode 100644 code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts index ac83e37982de..ba3dd1805999 100644 --- a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts +++ b/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}`); } diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts index 96b750f26525..a51b7aa54382 100644 --- a/code/renderers/react/src/docs/extractArgTypes.test.ts +++ b/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', diff --git a/code/renderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot new file mode 100644 index 000000000000..c3ad6f276316 --- /dev/null +++ b/code/renderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot @@ -0,0 +1 @@ +export { component } from '../js-function-component/input.jsx'; \ No newline at end of file diff --git a/code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx b/code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx new file mode 100644 index 000000000000..7b7ce9d3c8e9 --- /dev/null +++ b/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 }; diff --git a/code/renderers/react/template/stories/js-argtypes.stories.jsx b/code/renderers/react/template/stories/js-argtypes.stories.jsx index a72d6771dbeb..2101e61979f3 100644 --- a/code/renderers/react/template/stories/js-argtypes.stories.jsx +++ b/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 }, }; From 89839417b98e1ec1d5b4fe03ee20d079c480c20c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 14 May 2024 11:13:49 +0200 Subject: [PATCH 2/2] Vite: Only add react-docgen info in the file a component is defined --- .../src/plugins/docgen-handlers/actualNameHandler.ts | 2 ++ code/frameworks/react-vite/src/plugins/react-docgen.ts | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts b/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts index 01889ddf9dcf..7fe133be6bb9 100644 --- a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts +++ b/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') diff --git a/code/frameworks/react-vite/src/plugins/react-docgen.ts b/code/frameworks/react-vite/src/plugins/react-docgen.ts index c59861e4ff43..f41191dc0024 100644 --- a/code/frameworks/react-vite/src/plugins/react-docgen.ts +++ b/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}`); }