Import snippet from external file

[lagden]

Snippets (Svelte 5 feature) are powerful and could be better, if we could put them in an external file to be reusable.

Example:

my-app.snippet.svelte or my-app.svelte.snippet

{#snippet header()}
    <th>fruit</th>
    <th>qty</th>
    <th>price</th>
    <th>total</th>
{/snippet}

{#snippet row(d)}
    <td>{d.name}</td>
    <td>{d.qty}</td>
    <td>{d.price}</td>
    <td>{d.qty * d.price}</td>
{/snippet}

Table.svelte

<script>
    import {header, row} = './my-app.snippet.svelte'

    let {data} = $props()
</script>

<table>
    {#if header}
        <thead>
            <tr>{@render header()}</tr>
        </thead>
    {/if}

    <tbody>
        {#each data as d}
            <tr>{@render row(d)}</tr>
        {/each}
    </tbody>
</table>

[Conduitry]

Having to look at two different files to understand what's going on with variable scope is a bad idea.

If you want to have something that's in its own file and is reusable, you should just use a component.

[tgf9]

Importing snippets from an external file would improve readability by keeping header and row in the same file, which makes sense because they're related. Breaking them up into different files would make this harder to understand.

[lagden]

Nice!!!

https://svelte.dev/docs/svelte/snippet#Exporting-snippets