[Bug] Svelte 5: Optional children type error

[tomasz13nocon]

Describe the bug

Having optional children prop in a component causes children arg within the story to have error: Type 'string' is not assignable to type 'Snippet<[]>'.

Steps to reproduce the behavior

Take the default example from next branch, and in the Button component, make children optional: children?: Snippet;

Environment

[email protected]
@storybook/[email protected]
[email protected]

[xeho91]

Hi @tomasz13nocon!

Thanks for reporting this issue.

I've created a PR #215 with a potential fix for this case. Inside this PR you can find the latest addon version tag to download.
Could you please find a time to verify if this did get rid of this type error in your project?

[tomasz13nocon]

Indeed it works. Thank you!

I have some more type errors, especially when working with a bit more complex types for props. It often gives me an "Expression produces a union type that is too complex to represent". I will open separate issue(s) for that, but mentioning it here since it might be related?

[tomasz13nocon]

Actually, while optional children work in that canary version, other props being required causes an error now.

Minimal example:

Button.stories.svelte:

<script context="module" lang="ts">
  import { defineMeta, setTemplate, type Args } from "@storybook/addon-svelte-csf";

  import Button from "./Button.svelte";

  const { Story } = defineMeta({
    component: Button,
    tags: ["autodocs"],
    args: {
      children: "Click me",
      variant: "filled",
    },
    argTypes: {
      variant: { control: "select", options: ["filled", "outlined"] },
      children: { control: "text" },
    },
  });
</script>

<script lang="ts">
  setTemplate(template);
</script>

{#snippet template({ children, ...args }: Args<typeof Story>)}
  <Button {...args}>{children}</Button>
{/snippet}

<Story name="Primary" args={{ variant: "filled" }} />

Button.svelte:

<script lang="ts">
  import type { Snippet } from "svelte";

  interface Props {
    variant: "filled" | "outlined";
    children?: Snippet;
  }

  const { variant, children }: Props = $props();
</script>

<button type="button" class={variant}>
  {@render children?.()}
</button>

Here's the error:

[tomasz13nocon]

Also getting these errors, which seem to be caused by having a non-children Snippet prop which is optional

Error occurs here in a story file:

{#snippet template({ children, ...args }: Args<typeof Story>)}
  <Chip bind:selected {...args}>
    {children}
  </Chip>
{/snippet}

Component props:

  import { Toggle } from "bits-ui";

  interface Props extends Omit<Toggle.RootProps, "pressed" | "onPressedChange"> {
    variant?: "assist" | "filter" | "input" | "suggestion";
    selected: Toggle.RootProps["pressed"];
    onSelectedChange?: Toggle.RootProps["onPressedChange"];
    leadingIcon?: Snippet;
    trailingIcon?: Snippet;
    children: Snippet;
  }

[xeho91]

Hey @tomasz13nocon!

Firstly, thanks a lot for checking!

You're right to be suspicious that they might be related given the circumstances.
To be honest, I am not sure. I can reproduce it in both versions (next and in the aforementioned PR).

I admit, I'm not satisfied with the current state of those type helpers Args and StoryContext - for defining a template snippet for setTemplate.
They're dependent on types defined in @storybook/svelte and @storybook/types, and obviously not doing the job correctly for now. I'll try to ask around with solutions for this case. Until then, I have to ask you to be patient with this issue. 🙏

[xeho91]

Should be fixed in https://github.com/storybookjs/addon-svelte-csf/releases/tag/v5.0.0-next.11