Svelte 5: Allow more flexibility for `@render` tag expressions

[abdel-17]

Describe the problem

In React, if you have a <Button> component, you can spread its children into a <button> and it works fine.

function Button({ foo, ...props }) {
    return <button {...props} />;
}

In Svelte, we have to do this:

<script>
    let { children } = $props();
</script>

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

It's quite boilerplate-y.

Describe the proposed solution

Allow passing children to HTML elements.

<script>
    let { children } = $props();
</script>

<button {children} />

Alternatives considered

Just keep the current syntax, which is a tad bit boilerplate-y, but not a huge deal.

Importance

nice to have

[dummdidumm]

children is not an attribute, and as such we won't add support for spreading it onto the <button>.
What we maybe could do is allow more flexibility on the {@render }-tag to allow for arbitrary expressions as long as they end up in function calls, and allow falsy values so you don't need the if block. Then you could write

<script>
    let { children } = $props();
</script>

<button>
    {@render children?.()}
</button>

Adjusted the issue title to reflect this idea.

[abdel-17]

children is not an attribute, and as such we won't add support for spreading it onto the <button>. What we maybe could do is allow more flexibility on the {@render }-tag to allow for arbitrary expressions as long as they end up in function calls, and allow falsy values so you don't need the if block. Then you could write

<script>
    let { children } = $props();
</script>

<button>
    {@render children?.()}
</button>

Adjust the issue title to reflect this idea.

This is fine, it’s better than an if block, but it’s nice to pass down children through prop spreading. I understand if it’s not the direction Svelte wants to go, though.

[JoshuaHintze]

+1 on the suggested {@render children?.()}

[Pronian]

I just naturally tried to do {@render children?.()} and was surprised it didn't work.

It think it would be great if this feature could be added, it would be a solid improvement to DX and "Vibes" to avoid the {#if children} wrapper

[Hugos68]

Just a reminder you can do:

<script>
    let { children = emptySnippet } = $props();
</script>

<button>
    {@render children()}
</button>

Nevermind, you can't

[abdel-17]

Sure, but you still need to define emptySnippet for every component (snippets cannot be exported).