Svelte 5: Support passing of snippets or components?

[brunnerh]

Describe the problem

This came up in Discord:
It might be useful for library components to accept either a snippet or a regular component as input.

<!-- Snippet allows for adding additional content besides component/s -->
<List {items}>
	{#snippet item(data)}
		<ListItem {...data} />
	{/snippet}
</List>

<!-- Passing just a component -->
<List {items} item={ListItem} />

Describe the proposed solution

There would have to be a way to either:

• Render a snippet or component regardless of what it is, e.g. make @render accept components.
  The first argument (in case Svelte 5: Variadic snippets #9672 is implemented) to the called function would then be considered the props in case of a component.
• Add built-in functions to determine if something is a component/snippet. E.g.

  {#if isSnippet(item)}
    {@render item(args)}
  {:else if isComponent(item)}
    <svelte:component this={item} {...args} />
  {/if}

Alternatives considered

Always require the use of snippets, which can just use the desired component internally.
Potentially add a conversion utility from component to snippet:

<List {items} item={asSnippet(ListItem)} />

Importance

nice to have

[dummdidumm]

I'm wondering how common this really is that it requires an ergonomic shortcut. Snippets are strictly inferior to components, so one could just do this

<List {items}>
	{#snippet item(data)}
		<ListItem {...data} />
	{/snippet}
</List>

[Conduitry]

I agree. This feels like an additional thing to do at runtime (affecting everyone's components in all apps) for the sake of a weird use case, when the alternative is to just write a little bit more of more-explicit code.

[mimbrown]

It’s only an additional thing to do if snippets and components work differently, but currently they are pretty similar under the hood.

[brunnerh]

Another compromise would be a utility function for converting a component to a snippet so you could do something like:

<List {items} item={asSnippet(ListItem)} />

This should not affect anything else.

(Tried to make that work in user land but could not quite manage to do so.)

[Rich-Harris]

It’s only an additional thing to do if snippets and components work differently, but currently they are pretty similar under the hood.

The key word here is 'currently'. Things will doubtless evolve in future (#9672 is an example of a change we might make, albeit one that probably wouldn't affect this sort of interoperability), and it's very likely that we'd come to regret doing this. That's enough of a reason for me to oppose this proposal, but beyond that I don't think it's desirable anyway — I've often regretted these kinds of loosey-goosey APIs. Prefer clarity and consistency over convenience, in almost all cases.

[mimbrown]

Totally fair to want to preserve the ability to iterate. But over time I wouldn't be surprised if they naturally converged. I would argue that if snippets and components became closer over time, it would be more consistent, and indicate that you've got some kind of natural contract emerging that is the right one for Svelte.

In my head, the difference between a Component and a snippet is pretty similar to the difference between a function defined at the top-level and one defined in some nested scope. Array.map is not a "loosey-goosey API" for not caring where/how the passed function was defined.

Here's my REPL with a component and snippet side-by-side. Looking at the compiled output, it looks like the only difference is the way args are passed, and I would say it kinda looks like the snippet could actually benefit from being treated more like the Child component in the way args are passed. No duplicate creation of the passed object, for one.

And I have to go here because it's the natural next question: do you need @render at all? Could it just be:

{#snippet MySnippet({ arg1, arg2 })}
  <div class={arg1}>{arg2}</div>
{/snippet}

<MySnippet arg1="foo" arg2="Bar" />

[mimbrown]

To be clear: if the only way to implement this proposal is to have code that looks like this:

return isSnippet(thing) ? renderSnippet(thing) : renderComponent(thing)

then please don't do it. It works only if they're naturally interoperable. That is a loosey-goosey API.

[dummdidumm]

In #9903 it was asked to not only differentiate between snippets and components, but also between those two and regular functions - i.e. isComponent and isSnippet functions.

[zhuzhuaicoding]

{#snippet actionsDom()}
{#if props.actionsRender === false}
return
{/if}
dom = <Actions {actions} {editing} {placement} {type} />;
{props.actionsRender(restProps, dom) || dom}
{/snippet}

can snippet support this syntax?

[jacob-8]

For the purposes of my component mocking tool, it would be great to be able to pass in a component as the argument for a snippet prop, because the props are written in Typescript. If {@render foo()} syntax isn't able to accept a component if it makes Svelte too complicated, I'm fine with that but would at least love a solution like this:

Another compromise would be a utility function for converting a component to a snippet so you could do something like:

<List {items} item={asSnippet(ListItem)} />

Then I could build up a variant like this:

import MockAvatar from './MockAvatar.svelte'

export const myVariant = {
  name: "Bob",
  image: asSnippet(MockAvatar),
}