Skip to content

Commit

Permalink
Merge pull request #26967 from glenjamin/docgen-re-export
Browse files Browse the repository at this point in the history
Docgen: Only add react-docgen info when a component is defined in the file
(cherry picked from commit 691069c)
  • Loading branch information
valentinpalkovic authored and storybook-bot committed May 15, 2024
1 parent 0abcd35 commit 950f505
Show file tree
Hide file tree
Showing 7 changed files with 19 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
6 changes: 3 additions & 3 deletions code/frameworks/react-vite/src/plugins/react-docgen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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}`);
}
Expand Down
7 changes: 4 additions & 3 deletions code/presets/react-webpack/src/loaders/react-docgen-loader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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}`);
}
Expand Down
1 change: 1 addition & 0 deletions code/renderers/react/src/docs/extractArgTypes.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { component } from '../js-function-component/input.jsx';
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { component } from '../js-function-component/input.jsx';

export { component };
5 changes: 5 additions & 0 deletions code/renderers/react/template/stories/js-argtypes.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 },
};
Expand Down

0 comments on commit 950f505

Please sign in to comment.