Svelte 5: pass arguments to the children snippet

[oneraul]

Describe the problem

TLDR: the children snippet of a component cannot receive arguments.

Svelte 5 will deprecate slots in favour of snippets, but there is one feature of slots that I find difficult to migrate: slot props.

Imagine that Wrapper calculates some data. With props you can do (notice that data is correctly typed):

<Wrapper let:data>
    <Widget id={data.id} />
</Wrapper>

Using snippets, I cannot pass arguments to the default children snippet, so the children have to be wrapped in a named snippet.

<Wrapper>
    {#snippet withData(data: { id: string })}
        <Widget id={data.id} />
    {/snippet}
</Wrapper>

For such a simple example it looks like an anti-pattern, so I've prepared this REPL of my use case. It's a wrapper for fetching data with TanStack Query. It compares doing it without the wrapper, wrapped with slot props and wrapped with snippets. When you have many queries a wrapper like this can easily clean up a lot of code.

Describe the proposed solution

I would like to treat the children snippet as any other snippet (pass the argument to it in the render tag, inside the wrapper component), but to expose its argument as with the slot props. Example:

In Wrapper.svelte:

{@render children(data)}

Use like (the same as before):

<Wrapper let:data>
    <Widget id={data.id} />
</Wrapper>

Alternatives considered

The alternative is to wrap the children in a named snippet at every instance, or to keep using slots.

Importance

would make my life easier

[oneraul]

I just found this section of the preview docs that talks about this. So it's possible that the current behaviour is by design rather than by oversight.

In any case I'd still like to consider if an improvement is possible and worth it. It's true that the let: directive can be confusing at first, but the alternative (having to explicitly write the children snippet declaration every time) is far from ergonomic.

[brunnerh]

It is by design.

The writing of snippets is something an editor snippet can help with. This could potentially be provided by the Svelte extension, though it is easy to create one yourself (reference for the ones in VS Code).

[oneraul]

My issue is less with writing the snippets and more with maintaining the extra code.

A wrapper like the one in the REPL (with extra typescript stuff) has been a godsend cleaning up my codebase. It's sprinkled everywhere so any extra boilerplate it's noticeable.

I see the appeal of simplifying the framework and reducing the learning curve, though. Feel free to close the issue if this is something that the dev team has already talked about.

[SomaticIT]

I have exactly the same problem as @oneraul.

I think that snippets are very good and better than slots in almost every situations, it's more descriptive and it solves many other issues (like inline templating).

However, having to declaratively write the children snippet when it contains an argument is very problematic :

• The produced code is less readable
• The produced code feels less "native-html"
• More code to write/to maintain
• It creates an useless indent (we have enough with HTML 🤣)

I was looking for a better solution than the old let: but I didn't find so far. Maybe keeping the let in this situation is enough.

When I look in my existing svelte projects, I find a lot of components that use the default slots with properties. They are useful for:

• Wrapping logic (eg: load Query/Promise)
• Avoid duplication of properties (eg: pass data to props then to default slot)
• Create in-template state context (eg: form with validation)

Fun fact: I have exactly the same component as @oneraul that encapsulates a TanStack Query!

I will try to add some concrete examples to this thread to better illustrate how it can become ugly.

[adiguba]

Hi,

Why not using a special syntax for children, where children=(name) (using parenthesis instead of braces) will declare the children parameters.

So this :

<Comp prop={value} children=(argName)>
    Code using {argName}
</Comp>

Would be equivalent to :

<Comp prop={value}>
    {#snippet children(argName)}
         Code using {argName}
    {/snippet}
</Comp>

[adiguba]

Perhaps even without the =

<Comp prop={value} children(argName)>
    Code using {argName}
</Comp>

[SomaticIT]

I like your second proposition (without the =) because it can be easily explained as a shortcut for children snippet (it may even be used for another slot name). However I don't know how AST parser can handle that.

[dummdidumm]

We're not going to change this, because the current snippet behavior is:

• more predictable
• easier to reason about: which property goes where and has which scope is immediately obvious. In Svelte 4, as soon as you have a default slot and a named slot it looks like you can use the variable of the default slot inside the named slot, but that's not true
• easier to learn/grasp
• one way of doing things

Yes, in this specific case you have to type a bit more, but it's not that much, and the IDE can help you with it. You also don't need to type the arguments of the snippet yourself, for slot props it will be infered from the parent component. You're also free to use the name children for the default slot even if it receives arguments:

<Wrapper>
-    {#snippet withData(data: { id: string })}
+    {#snippet children(data)}
        <Widget id={data.id} />
    {/snippet}
</Wrapper>

[idavollen]

I have a similar use case where I aim at developing a generic FormValidator wrapping any user defined form consisting of set of html inputs (it doesn't need to be the real html form), for instance App.svelte

import ContactForm from "./ContactForm.svelte"
import FormValidator from "./FormValidator.svelte"
...

<FormValidator validatorConfigs={configs}>
    <ContactForm />
</FormValidator>

and in my FormValidator.svelte, I have to send some props of callback and states to the generic children element

<script>
   const validateForm = () => { ... }
</script>
<div class="svelte-form form-validator">
{@render children({ validateForm, ...formState })}
</div>

I've got stuck with my ContactForm, never recieved those expected props

[brunnerh]

The snippet arguments are not passed directly, the contents could be anything.
To use the arguments, the snippet has to be declared explicitly, e.g.

<FormValidator validatorConfigs={configs}>
    {#snippet children({ validateForm, ...formState })}
        <ContactForm {validateForm} {formState} />
    {/snippet}
</FormValidator>

[idavollen]

children is a sort of key word in Svelte. Is it OK to declare a snippet name as children ?

https://svelte.dev/docs/svelte/snippet

Note that you cannot have a prop called children if you also have content inside the component — for this reason, you should avoid having props with that name

[brunnerh]

Yes, though you can also rename the snippet if you want to.

The main advantage of children is that it will be created implicitly from component content.
If there are required arguments, you will lose that advantage anyway.