Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addon-docs: Fix exotic React components in Source block #12638

Merged
merged 10 commits into from Oct 5, 2020
3 changes: 0 additions & 3 deletions .vscode/settings.json

This file was deleted.

25 changes: 25 additions & 0 deletions addons/docs/src/frameworks/react/jsxDecorator.test.tsx
Expand Up @@ -106,6 +106,31 @@ describe('renderJsx', () => {
/>
andezzat marked this conversation as resolved.
Show resolved Hide resolved
`);
});

it('forwardRef component', () => {
const MyExoticComponent = React.forwardRef(function MyExoticComponent(props: any, _ref: any) {
return <div>{props.children}</div>;
});

expect(renderJsx(<MyExoticComponent>I'm forwardRef!</MyExoticComponent>, {}))
.toMatchInlineSnapshot(`
<MyExoticComponent>
I'm forwardRef!
</MyExoticComponent>
`);
});

it('memo component', () => {
const MyMemoComponent = React.memo(function MyMemoComponent(props: any) {
return <div>{props.children}</div>;
});

expect(renderJsx(<MyMemoComponent>I'm memo!</MyMemoComponent>, {})).toMatchInlineSnapshot(`
<MyMemoComponent>
I'm memo!
</MyMemoComponent>
`);
});
});

// @ts-ignore
Expand Down
11 changes: 10 additions & 1 deletion addons/docs/src/frameworks/react/jsxDecorator.tsx
Expand Up @@ -87,7 +87,16 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
const displayNameDefaults =
typeof options.displayName === 'string'
? { showFunctions: true, displayName: () => options.displayName }
: {};
: {
// To get exotic component names resolving properly
displayName: (el: any): string =>
el.type.displayName ||
(el.type.name !== '_default' ? el.type.name : null) ||
(typeof el.type === 'function' ? 'No Display Name' : null) ||
(el.type.$$typeof === Symbol.for('react.forward_ref') ? el.type.render.name : null) ||
(el.type.$$typeof === Symbol.for('react.memo') ? el.type.type.name : null) ||
el.type,
};

const filterDefaults = {
filterProps: (value: any, key: string): boolean => value !== undefined,
Expand Down
2 changes: 1 addition & 1 deletion lib/cli/versions.json
Expand Up @@ -52,4 +52,4 @@
"@storybook/ui": "6.1.0-alpha.18",
"@storybook/vue": "6.1.0-alpha.18",
"@storybook/web-components": "6.1.0-alpha.18"
}
}