Is there a correct way to pass optional snippets to a component in Svelte 5

[x0k]

REPL with second example

<script lang="ts">
  import Template from './template.svelte';
  import Description from './description.svelte';

  const { description: desc }: { description?: string } = $props();
</script>

{#snippet description()}
  <!-- Type error here -->
  <Description description={desc} />
{/snippet}
<Template description={desc !== undefined ? description : undefined} />

<!-- ------------------------------ --->

<!-- Doesn't work -->
<Template>
  {#if desc !== undefined}
    {#snippet description()}
      <Description description={desc} />
    {/snippet}
  {/if}
</Template>

<!-- ------------------------------ --->
 
<!-- Reference error -->
{#if desc !== undefined}
  {#snippet description()}
    <Description description={desc} />
  {/snippet}
{/if}
<Template {description} />

[brunnerh]

If it is important that the condition is not within the snippet so the snippet property can be undefined, I would probably just assert that the value is set:

{#snippet description()}
  <!-- Note the `!` -->
  <Description description={desc!} />
{/snippet}
<Template description={desc !== undefined ? description : undefined} />

[ryanatkn]

I'd do this, and also consider if the snippet taking an arg makes sense for your usecase. It'd be typesafe but more verbose and expose the concern to the child, though. The added snippet-props prop could be a generic array or even a thunk with additional/modified args passed from the child.

I wonder if special-casing #if statements to transform them to a ternary prop has any showstoppers. (the second "Doesn't work" example) The types would narrow in the snippet's scope but internally the snippet could remain staticly defined if needed.

Sounds a bit hacky but maybe a serviceable improvement?

[x0k]

Yes it is essential that the condition is not within the snippet.

I think that the type asserting here is error prone. Imagine that someone will change the condition without touching the snippet. Or the snippet will be reused somewhere without a condition.
Now you passing undefined to a component without any errors.

[ryanatkn]

A related issue was opened, this suggestion might be a good solution for full type safety. (and see the other comment there for arguments against special-casing)

[adiguba]

For now I think that the best solution is to déclare thé snippet outside the component, and using a $derived.

Example :
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA7WSUWvCMBSF_0rIBBXEvHex22CPexhsb-sYYm4x0CYhSRUJ_e9LUlvT6cQ97Knce8-55Hy3Dpe8AoOzD4fFugac4Sel8ALbgwqF2UFlwddGNnoTOtRsNFc2L0Rhea2ktuhVGotKLWs0XZJQLDvb1Gu8aiOFnzPojFwKtEIFjqakWeBCUHJaLmhUuETSIuIndKvjJ4xJ7p9WS8ZLDgxnVjfQLoYkQfHHKO9Qq2ptYYjTN5JIvfY5SdTLjz3te5cguDRxFgvUehwTpaUys_n9b7wmDDTfAZtFywMyW7n_SiUZagSDkgtgYcuIpLszgisF9sw2m7eFQIimUZLxKtLvsDtyXNLG4wygRgcKdxmQXb1NL7r1Phf4jcidReZlqg2PtpTxXVxW2DdZA3pZH2Rju4Z71OABavSTjreRzucyqAycNnV2tOd2G76JcXAQXnr9NQ7JD_NPKKjKRzeiROWX3vTZfgOlRz1fDQQAAA==