[Bug]: Source snippet problems

[JReinhold]

This is an umbrella issue for multiple problems with the current source snippet output. Each problem can be tackled individually or together.

1. children appears twice

When children is passed to a story, it is shown both as a regular prop and as a child node. In this case the regular prop should be removed.

Source

addon-svelte-csf/examples/Button.stories.svelte

Lines 32 to 37 in a475611

	{#snippet template(args, context)}
	<Button {...args}>{args.children}</Button>
	{/snippet}
	<!-- Only use this sparingly as the main CTA. -->
	<Story name="Primary" args={{ primary: true }} />

See the "Primary" story in: https://next--667492d3e52064f1d418ec95.chromatic.com/?path=/docs/button--docs

Expected output

<Button onclick={onclick} primary>{"Click me"}</Button>

Actual output

<Button onclick={onclick} children="Click me" primary>{"Click me"}</Button>

2. String nodes are wrapped in {""}

When strings are passed as nodes in stories, they are unnecessarily wrapped in {""}. This clutters up the snippet and makes it look busy.

Source

addon-svelte-csf/examples/Button.stories.svelte

Lines 32 to 37 in a475611

	{#snippet template(args, context)}
	<Button {...args}>{args.children}</Button>
	{/snippet}
	<!-- Only use this sparingly as the main CTA. -->
	<Story name="Primary" args={{ primary: true }} />

See the "Primary" story in: https://next--667492d3e52064f1d418ec95.chromatic.com/?path=/docs/button--docs

Expected output

<Button onclick={onclick} primary>Click me</Button>

Actual output

<Button onclick={onclick} primary>{"Click me"}</Button>

3. Newlines are changed to spaces

Newlines in source snippets are converted to spaces, making it hard to read.

Source

addon-svelte-csf/examples/Button.stories.svelte

Lines 48 to 53 in a475611

	<Story name="Custom template">
	{#snippet template(args, context)}
	<Button {...args}>🩷 Storybook</Button>
	<Button {...args}>🧡 Svelte</Button>
	{/snippet}
	</Story>

See the "Custom template" story in: https://next--667492d3e52064f1d418ec95.chromatic.com/?path=/docs/button--docs

Expected output

<Button onclick={onclick} children="Click me">🩷 Storybook</Button>
<Button onclick={onclick} children="Click me">🧡 Svelte</Button>

Actual output

<Button onclick={onclick} children="Click me">🩷 Storybook</Button> <Button onclick={onclick} children="Click me">🧡 Svelte</Button>

4. Static templates are wrapped in an <undefined>-component

When static templates are used, they are all appear to be wrapped in an <undefined>-component, instead of just being the plain story.

Source

addon-svelte-csf/examples/Templating.stories.svelte

Lines 39 to 53 in a475611

	<Story
	name="Static template"
	play={async (context) => {
	const { canvasElement } = context;
	const canvas = within(canvasElement);
	const h2 = await canvas.findByTestId('heading');
	expect(h2).toHaveTextContent('Static template');
	}}
	>
	<h2 data-testid="heading">Static template</h2>
	<p>
	This story is static and isn't defined with a snippet. It will ignore any <code>args</code> changes
	because they are not passed in.
	</p>
	</Story>

See the "Static template" story in: https://next--667492d3e52064f1d418ec95.chromatic.com/?path=/docs/templating--docs

Expected output

<h2 data-testid="heading">Static template</h2> <p>This story is static and isn't defined with a snippet. It will ignore any <code>args</code> changes
 because they are not passed in.</p>

Actual output

<undefined >
  <h2 data-testid="heading">Static template</h2> <p>This story is static and isn't defined with a snippet. It will ignore any <code>args</code> changes
 because they are not passed in.</p>
</undefined>