[Svelte 5] Optinal snippets in pair tags does not work with {#if}{/if}

[gyzerok]

Describe the bug

Given component (notice how footer is optional)

<script lang="ts">
	type Props = {
		children: Snippet
		footer?: Snippet
	}
	const { children, footer } = $props()
</script>

<div>
	{@render children()}
	{#if footer}
		{@render footer()}
	{/if}
</div>

This is allowed

<script lang="ts">
	import Bug from './Bug.svelte'
</script>

<Bug>
	{#snippet children()}
		children
	{/snippet}

	{#snippet footer()}
		footer
	{/snippet}
</Bug>

<script lang="ts">
	import Bug from './Bug.svelte'
</script>

<Bug>
	{#snippet children()}
		children
	{/snippet}
</Bug>

While this gives an error Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block

<script lang="ts">
	import Bug from './Bug.svelte'
</script>

<Bug>
	{#snippet children()}
		children
	{/snippet}

	{#if true}
		{#snippet footer()}
			footer
		{/snippet}
	{/if}
</Bug>

Not sure if this is a limitation or bug. If latter in my opinion this should just work.

Reproduction

Link to the playgound

Logs

No response

System Info

irrelevant

Severity

annoyance

[brunnerh]

As soon as a #snippet is not a direct child of the component, you are defining the children, the code is equivalent to:

<Bug>
	{#snippet children()}
		children
	{/snippet}

	{#snippet children()}
		{#if true}
			{#snippet footer()}
				footer
			{/snippet}
		{/if}
	{/snippet}
</Bug>

[gyzerok]

@brunnerh yeah I understand internally it might not work currently. The question is: "Is it sensible to make it work?"

In my opinion intuitively this looks like something that could be supported and would provide nice API. And looks like intuitive and nice APIs is something Svelte is striving toward and really good at.

As I understand it the way to pass multiple snippets to children is sort of a syntactic sugar for doing <Component children={snippet} footer={snippet} /> and there one could pass optional values. Maybe during compilation it should sort of desugar to chat notation?

Does this make sense?

[brunnerh]

I get the idea, but it would introduce a special case.

The behavior would drastically change whenever the conditions are no longer met or complicated logic may be necessary to make it behave "as expected" (this also possibly being rather subjective).

E.g. nesting

<Component>
    {#if conditionA && conditionB}
        {#snippet footer()}...{/snippet}
    {/if}
</Component>

vs.

<Component>
    {#if conditionA}
        {#if conditionB}
            {#snippet footer()}...{/snippet}
        {/if}
    {/if}
</Component>

(And what about :else branches?)

Or this:

<Component>
    {#if condition}
        {#snippet footer()}...{/snippet}
        <div>Extra content</div> <!-- now we are setting `children` again? -->
    {/if}
</Component>

[brunnerh]

It might be more sensible to put the condition in the #snippet somehow, e.g.

<Component>
  {#snippet footer() if condition}
    ...
  {/snippet}
</Component>

[gyzerok]

I see, that makes prefect sense!

[rChaoz]

I agree, it would be very nice. I guess the current approach might be:

{#snippet footer()}
	footer
{/snippet}

<Component footer={condition ? footer : undefined} />

...which doesn't feel very nice. This also doesn't give any type-safety, for example if condition is x != null, the compiler doesn't know anything about x inside the snippet.

[adiguba]

It might be more sensible to put the condition in the #snippet somehow, e.g.

<Component>
  {#snippet footer() if condition}
    ...
  {/snippet}
</Component>

Hello

I tried to make a very small PoC for this, that wrap the generated function into a condition :

-const footer = ($$anchor) => { /* ... */ };
+const footer = (condition) ? ($$anchor) => { /* ... */ } : undefined;

Or into a derived if the condition when reactive :

-const footer = ($$anchor) => { /* ... */ };
+const footer = $.derived ( () => (condition) ? ($$anchor) => { /* ... */ } : undefined );

Note that it still need some work as the $derived snipped is not handled correctly in all case...

Demo : https://adiguba-svelte-5-test-git-optional-snippet-adigubas-projects.vercel.app/#H4sIAAAAAAAACq1US4vbMBD-K4NTSALZuAstFK-TthR666m91XtQpHEs1paEpKS7Nf7vHcmO425YUuiSQ5jH95jJKG1Syhpdkv1sE8UaTLLkszHJKvFPJgTuiLVHip0-WB4yueNWGr8tVOFlY7T18EXTt0LlobS6gfk6HTPrnmB-F9pr9HCUTu5qhA28cZ55XHh7wGUoDw2WKUEkG_jGfLXuo8UStvB2_Z7a8vSsr_JRJ9r5UUkHfDRTMQcMSq092kIBtDOnpDGk0eeIVZYQ9LtQBvAVxnCKSQdMF6T_kruiLrSaBw9HvGqhZLWbeojxq5iI8uy002s--raJkUvcfztBxr2c7KTwec12WG9zqczBQ7i7TZHwCvnDTj8WCeykElmMUWza4X66LXyv9C_4GmnytOd4ebQTbDLbcycvT0fn32ghS4kiyeK9rMbXMnb965sJN94Cr2QtLKrVIA9deBHGauMWy4szd0hWtYr4vGFSbdtPBBaEOxF9XC-WXZ7GYv-Y2lk4rcjehZigfXQGnzZEwKEUgaks4wYmsuTBP9UY60Ma2p61YXYvVQa32Nz1mZ22xE4Z8whO11LAjHMei13vLdg84Q0TQqo9tduBYWgaNvO87R2xjq0kxvjD3uoDHQnMytvwGSqlVv7Gyd-Y0X_HhzM3DRZnufxZ77s_i3wVrBAFAAA=

Source is here : https://github.com/adiguba/svelte/tree/optional-snippet

[gyzerok]

Can we kick in the discussion once again? During this time I've encountered several situations where having this would make code much nicer. Wondering if this can indeed be solved nicely

[madduck]

This may be related: I noticed that

<MyComponent>
  {#if false}foo{/if}
</MyComponent>

makes MyComponent assume that it has children. Sure, it does, technically, but not effectively. The {#if} seems to be lazily evaluated, which is a shame.

So within the component, {#if children} would always evaluate to true in this case, making it a bit useless. Either the boolean value should only be true when the render returns anything other than whitespace, or we need some other means to test, why not something like:

{@const output = children()}
{#if output.trim().length > 0}
  There are children: {output}
{:else}
  No children
{/if}

PS: Here is a play: https://svelte.dev/playground/1fe378532e5c42b887461980dd7c5cdb?version=latest

[emensch]

Hi folks, resurrecting this in 2026. I'm generally a fan of snippets so far but this is a notable omission that I've had to contend with.