Add an easier way to pass snippets as render parameters

[Gudine]

I've seen this topic mentioned in #15822, but I feel it could be better discussed as a potential feature rather than a question.

Currently, if I need to pass a snippet as a parameter to a @render tag, I need to declare it beforehand, like so:

{#snippet dataItem(name: string, value: Snippet)}
  <div>
    <dt>{dtValue}:</dt>
    <dd>{@render ddValue()}</dd>
  </div>
{/snippet}

{#snippet value()}<strong>ipsum</strong>{/snippet}
{@render dataItem("Lorem", value)}

On top of creating many single-use variables (if rendered more than once), which can lead to mistakes, it's also just a very labored way of doing it. It's problematic to the point where it almost makes more sense to copy-paste the contents of the snippet to avoid those issues.

---

One way to fix the problem would be to allow for @render to receive children, like so:

{#render dataItem("Lorem", value)}
  {#snippet value()}<strong>ipsum</strong>{/snippet}
{/render}

This approach would have a few problems:

• Snippets' parameter names currently have no impact on how these parameters are passed, since they're set up like functions. That would need to change in order to receive snippets (and children) by name, which seems like a pretty big undertaking;
• The @render tag would now need to be written as #render, though it could simply support both ways;
• If this were to be implemented, there'd be very little separating a snippet from a component other than scale.

Another way would be to pass anonymous snippets directly in the @render call, like so:

{@render dataItem(
  "Lorem",
  {#snippet}<strong>ipsum</strong>{/snippet}
)}

This would circumvent the first two issues above, but it would mean blending HTML into what I think is supposed to only accept JS, which seems to be something Svelte managed to avoid doing up until now.

---

I had originally planned to post this as a feature request, but since I'm undecided as to which feature should be introduced, if any at all, I think I'll defer to the more experienced Svelte devs as to how to solve this problem.

[gterras]

So this is sort of snippet composability, I suppose you can turn this into a feature request for more visibility if this hasn't been done before. You will most probably be asked for a legit use case though since the default alternative (using a component) already works well for most cases.

[mateothegreat]

I see this as "conceptual overlap". That is to say that if snippets can receive children and behave like components, we’re inching toward a convergence that may warrant rethinking the role of snippets altogether.

You’re asking the right questions here though—not just “how can we do this,” but “how should we do this.” (that’s the mark of someone thinking about design and experience so kudos).

If I we has convictions that keeps this at the front of your mind then let's ideate and see where it could land? I’d suggest:

• Start small: Prototype the inline anonymous snippet syntax and gather feedback. It’s the least disruptive and most immediately useful.
• Explore render blocks: If demand grows for more composable render patterns, revisit the child-based syntax with a clearer separation from components.
• Clarify snippet semantics: Long-term, we may want to unify snippets and components under a shared abstraction for renderable fragments. Your post nudges us in that direction.

To be transparent even I felt "uncomfortable" with snippets at first. Luckily, it was quick to deduce the real value and it didn't drain me 😁.

Thanks again for surfacing this. It’s a great example of how thoughtful community input can shape the evolution of a framework.

Let me know if you’d like help drafting or exploring implementation paths—I’d be happy to collaborate. Let's let the data speak the case and give us the ability to have data-driven decision making realized 💯