Add a `{#render}` block

[adiguba]

Describe the problem

Svelte 4 had a simple syntax to define the slot default code :

<slot>
    <!-- Default code if slot is missing -->
</slot>

Svelte 5 doesn't really have an equivalent for that, and this has to be done manually :

Either via an if/else :

{#if children}
    {@render children()}
{:else}
    <!-- Default code if children is missing -->
{:if}

Or via a second snippet :

{#snippet default_children()}
    <!-- Default code if children is missing -->
{/snippet}
{@render (children??default_children)()}

Describe the proposed solution

It would be nice to have a {#render} block that would mimic the <slot/> behavior :

{#render children()}
    <!-- Default code if children is missing -->
{/render}]

I think that this change may only impact the compiler, as the result code could simply use $.snippet() with a condition :

$.snippet(node, () => $$props.children ?? ($$anchor) => {
	$.next();
	var text_1 = $.text("DEFAULT CHILDREN");
	$.append($$anchor, text_1);
});

If the idea is accepted, I think I could try to implement it...

Importance

nice to have

[brunnerh]

I never found the slot syntax to be very intuitive.
Why would fallback content be the hierarchical child?
It looks like some content is being set but it's a replacement that might be there or not.

This might be more terse, but I am not sure it is actually better.

[dm-de]

Today, I found something new in Svelte:

{@render children?.()}

I fought long time with optional render

This is also fascinating:

{@render (children??default_children)()}

I also like this idea - it is so beautiful

{#render children()}
    <!-- Default code if children is missing -->
{/render}

Above code could be converted automatically to:

{#if children}
    {@render children()}
{:else}
    <!-- Default code if children is missing -->
{/if}

[dummdidumm]

This would introduce additional syntax and another way to do the same thing. We're not going to implement this, therefore closing.

[dm-de]

This would introduce additional syntax and another way to do the same thing.

But this is normal in Svelte. It could be a shortcode like...

<Comp value={value} />
<Comp2 bind:value={value} />
=
<Comp {value} />
<Comp bind:value />

[matthewrobb]

I am aware this is closed (I am sorry) but I would like to suggest that a block form of render where the only thing the block represents is the same as the block of a component: named snippets added to the params and/or an implicitly children named snippet.

Being able to do this within component usage is great, having to move the sub-snippets to sibling or higher level feels awkward. So I am assuming ya'll have good reasons why this isn't the case and I would be interested in hearing that and how it compares to the argument in favor of supporting it in Components

[fabiogiolito]

Instead of the render block being for default content, I think it makes more sense to pass in child snippets.
This allows you to set default content as a separate snippet and nest snippets.

{#snippet navLink({ href, label})}
  <a {href}>{label}</a>
{/snippet}

{#snippet defaultGroupContent()}
  <span>No content</span>
{/snippet}

{#snippet navGroup({ title, content = defaultGroupContent })}
  <section>
    <p>{title}</p>
    {@render content()}
  </section>
{/snippet}

<!-- Usage -->
{@render navGroup({ title: 'Account' })}
  {#snippet content()}
    {@render navLink({ href: '/settings/profile', label: 'Profile' })}
    {@render navLink({ href: '/settings/team', label: 'Team Members' })}
  {/snippet}
{/render}
{@render navGroup({ title: 'Billing' })}
  {#snippet content()}
    {@render navLink({ href: '/settings/plan', label: 'Plan' })}
    {@render navLink({ href: '/settings/invoices', label: 'Invoices' })}
  {/snippet}
{/render}