[Proposal] $snippet — Snippet adapters in code

[Refzlund]

$snippet

Use snippets programatically by wrapping them inside another snippet via $snippet.

The ability to compose logic related to the snippet and creating adapters for snippets.

Introduction

Snippets are extremely versatile, ergo why they're a strong pattern.

However, a caveat is that you can only provide the snippet with props when you're in control of the @render.
This is fine, as component variables can be declared — however it adds easily 2n lines of code.

<script lang='ts'>
    import { chevron } from 'Icons.svelte'
    import Button from 'Button.svelte'
</script>

<Button>
    {#snippet icon()}
        {@render chevron({ rotate: 90 })}
    {/snippet}
    {#snippet children()}
        Some text
    {/snippet}
</Button>

That's a lot of extra work to provide these parameters.

Today, we can "technically" create snippet adapters via code, however, it's not pretty and messes with Svelte internals.

<script lang='ts' module>
    declare const tooltip: (_internal: CommentNode, text: () => string)

    const createTooltip: Snippet = (text: string) => {
        // Additional optional logic here.
        return (...args) => tooltip(args[0], () => text)
    }

    export { createTooltip }
</script>

{#snippet tooltip(text: string)}
    ...
{/snippet}

<!--------->

<script lang='ts'>
    import Component from './Component.svelte'
    import { createTooltip, tooltip } from './Tooltip.svelte'
</script>

<Component snippet={createTooltip(`Here's a tooltip!`)}>
    Hello there
</Component>

Proposal

My proposal here, is to formalize the process of adapting snippets.

<script lang='ts'>
    import { chevron } from 'Icons.svelte'
    import Button from 'Button.svelte'
</script>

<Button icon={$snippet(() => chevron({ rotate: 90 }))}>
    Some text
</Button>

Or by code

<script lang='ts' module>
    const createTooltip = (text: string) => $snippet(() => tooltip(text))
</script>

{#snippet tooltip(text: string)}
    ...
{/snippet}

We could adapt parameters, to fit other ones;

<script lang='ts' module>
    // nameDisplay: Snippet<[firstName: string, lastName: string]>
    import Name from './Name.svelte'
    
    // Snippet<[name: string]>
    import { name } from './DisplaySnippets.svelte'
</script>

<Person nameDisplay={$snippet((firstName, lastName) => name(`${firstName} ${lastName}`))}>
    This person is magnificant.
</Person>

And so.

Tip

Additionally, we could also provide a way to get the Comment Node, that the snippet is attached to;

$snippet(() => {
    const node = $snippet.node // e.g. the `comment` node snippet representing the snippet
    ...crawlTree
})

as this could be used for tree-crawling

Alternatively, we could allow calling Snippet's outside of the @render scope:

{#snippet chevron({...})} ... {/snippet}

<Button icon={chevron({ rotate: 90 })}>

---

Now all said and done, this is clearly a nice-to-have, and just an idea. I do personally think it would fit into the Svelte 5 environment.