Allowing a child for Snippets

[zachinglis]

Describe the problem

There have been multiple times where I've wanted to pass HTML to a Snippet during a render call.

The current way to do to this is create a whole new Snippet, then pass it on. Which feels gross when you have 2 or more. I was wondering what the general consensus is? Do you find this an anti-pattern?

I often use Snippets when creating a component would be overkill. Such as reuse within one specific component, but I'd still like to be able to have better control over the content.

Describe the proposed solution

{#snippet row(title: string, content: Snippet)]
   <div>
     <h1>{title</h1>
     {@render content()}
   </div>
{/snippet}

{@render row("Testing", <div>an example</div>)} // Do it on the fly`

or

{#snippet row(title: string)
   <div>
     <h1>{title</h1>
     {@render children}
   </div>
{/snippet}

{#render row('Second Test')} // Use it like you would component's children
   <div>
      Hello!
  </div>
{/render}

Importance

nice to have

[theetrain]

The current method or workaround is to write more snippets:

{#snippet row(title, content)}
   <div>
     <h1>{title}</h1>
     {@render content()}
   </div>
{/snippet}

{#snippet rowContents()}
  <div>an example</div>
{/snippet}

{@render row("Testing", rowContents)}

Looking over OP's proposal and #9774, I'm wondering what the Snippet API could look like if were to:

1. Double down on @render

<!-- as suggested by OP, new `#render` syntax -->
{#snippet row(title: string, children)
   <div>
     <h1>{title</h1>
     {@render children}
   </div>
{/snippet}

{#render row('Second Test')} // Use it like you would component's children
   <div>
      Hello!
  </div>
{/render}
<!--
  `children` is a reserved prop for nested contents, which could be non-breaking
  since `@render` behaviour could stay the same
-->

2. Bring back the <Snippet> loophole that could be used to render snippet or component props passed in.

<!-- Snippet must be capitalized -->
{#snippet Row(title: string, children)
   <div>
     <h1>{title</h1>
     {@render children}
   </div>
{/snippet}

<Row title="Second test">
  <!-- `children` has reserved behaviour to allow nesting -->
  <div>
      Hello!
  </div>
</Row>

3. Add a <svelte:render> special element, or bring back the <svelte:component> special element that accepts either snippets or components.

{#snippet row(title: string, children)
  <div>
    <h1>{title</h1>
    {@render children}
  </div>
{/snippet}

<!-- `this` accepts either snippets or components -->
<svelte:render this={row} title="Second test">
  <div>
    Hello!
  </div>
</svelte:render>

I understand the slippery slope of allowing multiple component exports; I like the encapsulation of single-file components, especially a single definition for scoped styles. The above ideas are interesting especially with {let} on the horizon in #16490.

[Conduitry]

There was a conversation about this in the maintainers channel in Discord about this that I started a couple of weeks ago. The decision at the time was that it was a lot to add to the language when the alternative was the ugly but simple solution of creating more snippets.

[brunnerh]

I think how children is being passed is a bit of an issue.

If snippets were to only accept one argument, which has to be an object, this would be easier to work with since the content could be added as another property; the positional arguments make this a bit of a pain and any solution would add some fairly opaque magic.