[Bug] Autodocs does not render Component name properly.

[jenniferworrall]

Describe the bug

We have a sveltekit project with Storybook 7, and are using autodocs to generate our documentation. Everything works except that the "Show Code" window shows <Proxy instead of the actual component name.

Story:

<script context="module">
	import { Template, Story } from '@storybook/addon-svelte-csf';
	import Icon from '$lib/buildingBlocks/Icon.svelte';

	export const meta = {
		title: 'Building Blocks / Icon',
		component: Icon,
		argTypes: {
			id: {
				control: { type: 'text' }
			},
			type: {
				options: ['external'],
				control: { type: 'select' }
			},
			size: {
				options: ['sm', 'md', 'lg'],
				control: { type: 'radio' }
			},
			inheritSize: {
				type: 'boolean',
				control: { type: 'boolean' }
			}
		},
		tags: ['autodocs']
	};
</script>

<Template let:args>
	<Icon {...args} />
</Template>

<Story
	name="Icon Tester"
	args={{ type: 'external', size: 'md', inheritSize: false }}
/>

Steps to reproduce the behavior

1. Create story with autodocs on. Go to generated docs
2. Click on "Show code"

Expected behavior

Expect to see "<Icon" where "<Proxy" appears

Screenshots and/or logs

Environment

• OS: MacOS
• Node.js version: 18.17.1
• NPM version: 9.6.7

Additional context

Add any other context about the problem here.

[j3rem1e]

What version of storybook/this addon are you using ?

[jenniferworrall]

What version of storybook/this addon are you using ?

We are using version 7.4.6 of storybook and 4.0.9 of this plug-in. Thank you!

[j3rem1e]

This issue has been fixed in storybook v7.5.0 through storybookjs/storybook#24008

[j3rem1e]

btw you don't have to define argTypes, they should be automatically inferred by storybook.

[jenniferworrall]

I just upgraded to 7.5.2 and no joy. I also deleted package-lock.json and node_modules just to be sure and verified the behavior. I was looking at the previous issue and thought I'd try removing let:args from the Template and when I do that, it does in fact work.

I can add this to the storybook repo instead though, doesn't seem to be an issue of the addon-svelte-csf package.

[j3rem1e]

Do you have a repo where I can check ?

Storybook, when it parses the component for extracting the documentation/argTypes, add a hidden property with the component name deduced from the file location. This property is used to generate the source snippet. If the property is not present, then it will try to generate a component name from the javascript constructor.

However, when Storybook is in dev mode, it activates Svelte HMR which replace the class by a Proxy (for reloading/keeping states/etc).

So you can see Proxy as the component name when:

• Storybook is in dev mode
• The component couldn't parsed

However, in sb 7.5, the hidden property should always be present, even if the composant is not valid.

[jenniferworrall]

Ah that makes sense! I was going to update this story today to say that it works great when the story is built but it doesn't work locally on our machines, and that's because it's in the dev mode. Thank you so much for getting back to me. I will pass this on to others on my team.

…

On Tue, Oct 31, 2023 at 1:05 AM Jérémie ***@***.***> wrote: Do you have a repo where I can check ? Storybook, when it parses the component for extracting the documentation/argTypes, add a hidden property with the component name deduced from the file location. This property is used to generate the source snippet. If the property is not present, then it will try to generate a component name from the javascript constructor. However, when Storybook is in dev mode, it activates Svelte HMR which replace the class by a Proxy (for reloading/keeping states/etc). So you can see Proxy as the component name when: - Storybook is in dev mode - The component couldn't parsed However, in sb 7.5, the hidden property should always be present, even if the composant is not valid. — Reply to this email directly, view it on GitHub <#151 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABQY4KNRB4CIBRVZAHOFLRDYCCWMNAVCNFSM6AAAAAA6TOPCG6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBWGY4TSMBWGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Justin-wei]

I'm using "storybook": "^7.6.4","@storybook/addon-svelte-csf": "^4.0.13",

and I am using the template

<Page {...args} />

I still having this issue.